전체 글
-
[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 @..
-
styled-components VS emotion 과연 어떤 차이가 있을까?concept/HTML, CSS, DOM 2023. 12. 7. 00:56
목차 emotion 라이브러리의 종류 알아보기 @emotion/react @emotion/css @emotion/styled emotion 과 styled-component 비교하기 다운로드 순위 비교 번들 사이즈 비교 패키지 의존성 비교 속도 비교 결론은 emotion의 승리 CSS-in-JS로 처음 입문하게 된 Styled components. 그런데 현업과 사이드 프로젝트에서는 emotion을 더 많이 사용하고 있었다. 그런데 쓰는 방법만 보면 스타일드 컴포넌트와 차이가 없어보이는 것..? styled-components는 7년 전, emotion은 6년 전에 등장한 라이브러리로서 emotion이 더 최근에 등장해 점점 사용성이 높아지고 있다고 하는데 정확한 차이는 모르고 그저 사용하고 있던 나....
-
인프런 퇴근길 밋업 #04 사이드 프로젝트 에 다녀왔다!자기계발 2023. 11. 30. 00:33
이것 저것 해보고 싶은 것이 많은 요즘. 뭐 신청하는 것만 보이면 냅다 신청하고 봅니다 . . . ! 그러다가 인프런 퇴근길 밋업도 신청을 했는데 참가자 50명 제한이라고 해서 기대를 안했는데 덜컥 선정되어버렸다! 쏴리 질러 ~~~~~~~~~~ (요즘 당첨운이 꽤나 좋아서 신남) 여섯시반까지 판교라는 것은 꽤나 빡센 일정이지만 5시반 퇴근하면 어찌 갈 수는 있겠다고 계획을 짜고요.. 시간표는 이렇게 구성된다고 한다. 네트워킹이라는 것에 꽤나 부담을 가지는 i 로서 2시간이나 네트워킹을 하면 무슨 소릴 하지 고민을 했었는데 나중에 겪어보니 시간이 너무 부족했음!!!!! 시간 가는 줄 몰랐다 정말,, 아무튼 판교에 오랜만에 왔다 올 일이 잘 없는 곳이지만 역시나 올 때마다 미래도시 느낌 건물들이 강남이랑 느..
-
디자인 시스템studying coding 2023. 11. 15. 14:36
디자인 시스템이란? 서비스 목적에 맞게끔 일관되게 구성한 패턴과 규칙 언어 디자인 원칙, 규격, 다시 사용할 수 있는 UI 패턴과 컴포넌트, 코드를 포괄하는 일련의 표준 디자인시스템 도입 배경 프론트엔드 팀원이 많아지게 될 수록 하나의 서비스에 디자인과 기능이 파편화되기 쉽습니다. 시스템에 등록된 디자인이 아닌 작업이 많아질수록 QA 시간이 늘어나게 되고 애자일하고 빠른 배포에 장애물이 되는 경우가 많습니다. 서비스 규모가 점점 커지거나 다양한 서비스로 확장될 경우에 일관성있고 재사용할 수 있는 UI 디자인 시스템의 도입은 필수적입니다. 유저에게 일관적인 경험을 전달해 유저의 학습 비용을 줄여 서비스 이용에 편의성을 제공할 수 있습니다. 디자인과 개발 파트 사이에 맵핑이 잘 이루어지지 않는 부분들이 있는..
-
Git remote에서 특정 파일의 내용만 가져오기error handling/Simple tips 2023. 11. 9. 15:17
리모트에서 충돌이 발생했을 때 특정 파일의 내용만 가져와서 충돌을 해결하고 싶은 경우에 활용할 수 있는 방법 git fetch 위의 명령어로 최신 remote 상황들을 업데이트 한다. git checkout origin/dev -- path/to/file ex) git checkout origin/dev -- src/components/providers/ModalProvider/index.tsx 위의 명령어로 origin/dev branch의 특정 경로에 있는 파일의 변경 이력만 가져온다. git fetch 원격 저장소의 데이터를 로컬에 가져오기만 하는 것 git pull = fetch + merge 원격 저장소의 데이터를 로컬 저장소에 가져와 병합하는 것