분류 전체보기
-
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 원격 저장소의 데이터를 로컬 저장소에 가져와 병합하는 것
-
채팅 기능 구현을 위한 web socket과 sse 방식 POCconcept/React, Redux, RN 2023. 11. 6. 15:29
HTTP 프로토콜의 주요 특징은 비연결성 이다. 위 특징으로 인해 Server가 전송하고 싶어도 해당 Client와 지속적으로 연결이 되어있지 않기 때문에 보낼 수 없는 상황이 발생하게 된다. 이를 해결하는 방식으로 Polling, Long Polling, Web Socket, SSE 총 네 가지가 있다. Web socket RFC 6455 명세서에 정의된 프로토콜. 서버와 브라우저 간 연결을 유지한 상태로 데이터 교환이 가능하다. 전송은 커넥션 중단과 추가 HTTP 요청 없이 양방향으로 이루어진다. Web socket을 구현하는 방법 Web socket → 기본으로 HTML5에서 제공하는 기능 socket.io → 웹 소켓 서버를 쉽게 구현할 수 있게 도와주는 모듈이며 서버는 node.js sock.j..
-
이미지 최적화를 위한 방법들과 Next/Imageconcept/React, Redux, RN 2023. 11. 5. 00:25
배경 Web Vital 이란 웹에서 우수한 사용자 경험을 제공하는데 필수적인 품질 신호에 대한 통합 지침을 제공하기 위한 Google의 이니셔티브이다. Web Vital 의 하위 집합으로 Core Web Vitals가 있는데 20년 기준으로는 UX 기준의 세 가지 측면인 1. Loading (로딩) 2. Interactivity (상호 작용) 3. Visual Stability (시각적 안정성) 에 중점을 두고 있다. LCP (최대 콘텐츠풀 페인트) - 로딩 성능을 측정. 2.5초 이내에 LCP가 발생해야 우수하다고 평가한다. FID (최초 입력 지연) - 상호 작용 측정. 100 ms 이내에 상호 작용이 가능해야 우수하다고 평가한다. CLS (누적 레이아웃 시프트) - 시각적 안정성 측정. 레이아웃이 ..
-
[책: 내 코드가 그렇게 이상한가요?] 5장. 응집도: 흩어져 있는 것들자기계발 2023. 10. 29. 16:12
5장. 응집도: 흩어져 있는 것들 응집도란: 모듈 내부에 있는 데이터와 로직 사이의 관계가 얼마나 강한지 나타내는 지표 응집도가 높은 구조: 변경하기 쉽고 바람직한 구조 응집도가 낮은 구조: 변경 시 문제가 발생하기 쉬움 횡단 관심사에 해당하는 코드는 범용으로 만들어도 괜찮다. 예시) 로그 출력 오류 확인 디버깅 예외 처리 캐시 동기화 분산 처리 결과를 리턴하는데 매개변수 사용하지 않기 매개변수가 너무 많아져도 안된다. 매개변수가 많다는 것은 많은 기능을 처리하고 싶다는 의미 처리할 것이 많아지면 로직이 복잡하거나 중복 코드가 생길 가능성이 높아진다.