분류 전체보기
-
Headless UI 가 핫하다는데.. Radix UI vs shadcn/ui 어떤 것을 사용할까?concept/HTML, CSS, DOM 2024. 11. 24. 14:28
To. 프론트엔드 팀.비즈니스 방향성 변동으로 기획이 늦어지고 있습니다.하지만 디자인 시스템은 미리 만들어 두셨으면 좋겠어요.그런데 아직 브랜드 컬러랑 방향성 아무것도 정해져 있지는 않은 상황이에요.디자인 없이 UI 디자인 시스템 구축을요..?......하지만 우리는 K-직장인월급을 받고 있다면 무엇이든 해내야만 하지그러던 중 요즘 핫하게 떠오르는 키워드가 머릿속을 스쳤다."Headless UI"Headless UI 란?스타일이 없는 대표적인 UI 컴포넌트 라이브러리Headless UI는 스타일이 입혀지지 않은 형태의 다양한 UI 컴포넌트들을 제공하는 라이브러리Headless UI는 대표적인 스타일링 라이브러리 중 하나인 Tailwind CSS와 함께 사용할 수 있도록 개발되었습니다. 참고로 Headle..
-
Presigned url로 s3에 이미지 업로드 하기카테고리 없음 2024. 11. 5. 23:22
배경 및 정의이미지 혹은 동영상 등의 멀티미디어 파일을 업로드하는 서비스를 구현하기 위해서 요즘에는 presigned url 방식을 많이 활용하고 있다. presigned url 이란?AWS에서 제공되는 기능으로 서버와 S3가 통신해서 생성한 미리 서명된 URL을 사용하여 다른 사람이 Amazon S3 버킷에 객체를 업로드하도록 허용할 수 있다. 미리 서명된 URL을 사용하면 상대방에게 AWS 보안 자격 증명이나 권한이 없어도 업로드할 수 있다.전통적인 S3 이미지 업로드 방식방법클라이언트에서 서버에게 업로드 할 파일 전달 (multipart/form-data)서버에서 파일 저장 경로를 생성하고 S3에 접근해 파일 저장저장된 S3 경로를 서버에서 클라이언트로 전달단점클라이언트에서 서버에게 용량이 큰 파일..
-
글또를 다시 시작하며자기계발 2024. 10. 10. 12:52
올 한 해는 정말 많은 일들로 가득 찼습니다. 모든 도전과 변화를 잘 헤쳐나온 나 자신에게 진심 어린 박수를 보내고 싶습니다. 하지만 동시에, 이런 바쁜 일상 속에서 스터디 동아리 활동에 충분한 시간과 노력을 쏟지 못했다는 점은 아쉬움으로 남습니다. 특히 글또 활동이 그중 하나였는데, 9기에 처음 참여하게 되었을 때의 그 열정과 기대를 충분히 실현시키지 못한 것 같아 아쉽습니다.그럼에도 불구하고, 10기에도 신청할 수 있었던 것은 정말 감사한 일입니다. (동아리 친구들 덕분!)글또를 9기에 이어 10기까지 하게 된 이유를 좀 더 자세히 나열해보면 다음과 같습니다:1. 11월부터 개발 공부를 다시 시작하기 지난 몇 개월간 정신없이 달려온 시간들이 얼추 마무리되고, 11월부터는 비교적 안정적인 일상을 ..
-
Tanstack-Query (a.k.a React-Query) 입문자들을 위한 간단 설명concept/React, Redux, RN 2024. 4. 14. 19:30
이름 변경 2023년 9월에 React Query는 TanStack Query로 이름이 변경 React Query는 Facebook에서 유지보수하는 React 공식 라이브러리가 아니라는 점에서 상표권 문제가 있을 수 있었기 때문 새로운 이름은 React에 종속되지 않으며, React 외의 다른 프레임워크나 라이브러리와도 함께 사용될 수 있음 TanStack Query 란? 공식 문서의 정의에 따르면.. TanStack Query(FKA React Query)는 종종 웹 애플리케이션용 누락된 데이터 가져오기 라이브러리로 설명되지만 좀 더 기술적인 용어로 말하면 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만듭니다. 웹 앱에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이..
-
모던 리액트 딥 다이브concept/React, Redux, RN 2024. 3. 3. 22:25
작년 11월에 모던 리액트 딥 다이브 책이 출시 되고, 바로 스터디를 시작했다. 일주일에 한 장씩 읽고 만나서 정리한 부분들 이야기 하는 시간을 가졌는데 책이 900페이지이다보니 은근히 빡셌지만 끝나니까 아주 후련했던 스터디.. 그 때 정리했던 내용들 중에서 알짜배기만 골라서 메모를 하기 위한 포스팅 1장. 리액트 개발을 위해 꼭 알아야 할 자바스크립트 1.1 자바스크립트의 동등 비교 1.1.1 자바스크립트의 데이터 타입 원시 타입 boolean null undefined number string symbol 중복되지 않는 어떤 고유한 값을 나타내기 위해 만들어진 타입. Symbol() 을 사용해서 제작 가능. ex. const key = Symbol('key') bigint number가 다룰 수 있는..
-
[Udemy] 클린코드 리액트 - 소개, Stateconcept/React, Redux, RN 2024. 2. 4. 16:38
요즘은 클린코드 리액트 강의를 유데미에서 듣고 있다. 이 강의는 리액트에 이미 익숙하게 잘 쓰고 있는 사람들이 하는 고민들을 싹싹 긁어주는 강의 인듯!! 아주 만족도 100%.. 리액트로 코드를 작성하다보면 useEffect를 너무 많이 쓰는 것은 사이드 이펙트를 초래하기 때문에 좋지 않다. useState도 너무 많이 쓰면 리렌더링을 많이 유발해서 좋지 않다. 등등.. 여러가지 하지말라는 것들이 많은데 그래서 그럼 어떻게 해야하는데! 에 대해서 속시원히 답을 내려주는 곳은 별로 없었다.. 특히나 지금 모던 리액트 딥다이브 책을 읽으면서 스터디를 하고 있는데 책에서는 리액트의 작동 원리를 속속들이 뜯어보지만 그래서 어떻게 해야하는데!!! 에 대한 답은 속시원하지 않아서 불만이 있던 도중에 만난 강의 강의..
-
Firebase 소개 및 간단한 CRUD 실습studying coding 2024. 1. 4. 00:19
소개 Firebase는 구글에서 제공하는 모바일 앱/웹을 위한 플랫폼 Firebase는 인증(authentication), 데이터베이스(firestore, realtime database), 스토리지, 푸시 알림, 호스팅, Function 등 여러 기능을 제공 개발자가 직접 일일이 기능을 개발할 필요가 없다. 요즘은 소유하는 시대가 아닌 구독하는 시대 (netflix, 공유 옷장, 밀리의 서재, e-book 등) 백엔드 기능을 클라우드 서비스 형태로 제공하기 때문에 간단한 조작으로 서버리스 애플리케이션 개발이 가능 → Firebase 플랫폼을 통해 적은 비용으로 매우 빠르고 편리하게 앱/웹을 만들 수 있어서 프로토타입을 빠르게 만들어야 하는 초기 스타트업에서 많이 사용 (MVP) 단점: 백엔드를 자동으로..
-
emotion 100% 활용하기concept/HTML, CSS, DOM 2023. 12. 13. 16:27
이 전 포스팅에서 emotion과 styled-components의 차이점을 알아보았다. 결론은 근소한 차이로 emotion의 승리! https://o-yeon.tistory.com/222 styled-components VS emotion 과연 어떤 차이가 있을까? 목차 emotion 라이브러리의 종류 알아보기 @emotion/react @emotion/css @emotion/styled emotion 과 styled-component 비교하기 다운로드 순위 비교 번들 사이즈 비교 패키지 의존성 비교 속도 비교 결론은 emotion의 승 o-yeon.tistory.com 그래서 이번 포스팅에서는 emotion을 100% 활용하는 방법에 대해서 알아보고자 한다. 설치하기 # with npm npm i @..