전체 글
-
디자인 시스템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장. 응집도: 흩어져 있는 것들 응집도란: 모듈 내부에 있는 데이터와 로직 사이의 관계가 얼마나 강한지 나타내는 지표 응집도가 높은 구조: 변경하기 쉽고 바람직한 구조 응집도가 낮은 구조: 변경 시 문제가 발생하기 쉬움 횡단 관심사에 해당하는 코드는 범용으로 만들어도 괜찮다. 예시) 로그 출력 오류 확인 디버깅 예외 처리 캐시 동기화 분산 처리 결과를 리턴하는데 매개변수 사용하지 않기 매개변수가 너무 많아져도 안된다. 매개변수가 많다는 것은 많은 기능을 처리하고 싶다는 의미 처리할 것이 많아지면 로직이 복잡하거나 중복 코드가 생길 가능성이 높아진다.
-
[책: 내 코드가 그렇게 이상한가요?] 4장. 불변 활용하기: 안정적으로 동작하게 만들기자기계발 2023. 10. 28. 19:04
4장. 불변 활용하기: 안정적으로 동작하게 만들기 재할당 파괴적 할당이라고도 부른다. 변수의 의미를 바꿔 추측하기 어렵게 만드는 행위. 언제 어떻게 변경되었는지도 추적이 어렵다. 불변 변수로 만들어서 재할당 막기 (const) 가변으로 인해 발생하는 의도하지 않은 영향 부수효과의 단점 함수에는 주요작용과 부수효과가 있다. 주요작용은 함수가 매개변수를 전달받고 값을 리턴하는 것이고 부수효과는 주요 작용 이외의 상태 변경을 일으키는 것이다. 사이드 이펙트 방지하는 순수함수 작성을 항상 고려할 것! 변수를 불변으로 만들었을 때의 장점 변수의 의미가 변하지 않기 때문에 혼란을 줄일 수 있음 동작이 안정적이게 되므로 결과를 예측하기 쉬움 코드의 영향 범위가 한정적이므로 유지 보수가 편리해짐 기본적으로는 불변으로 ..
-
[책: 내 코드가 그렇게 이상한가요?] 2장. 설계 첫걸음자기계발 2023. 10. 28. 18:26
2장. 설계 첫걸음 의도를 분명히 전달할 수 있는 이름 설계하기 목적별로 변수를 따로 만들어 사용하기 어떤 값을 계산하는데 어떤 값을 사용하는지 관계를 파악하기 쉽게 만들어 준다. 단순 나열이 아니라 의미있는 것을 모아 메서드(함수)로 만들기 관련된 데이터와 로직을 클래스로 모으기 변수와 변수를 조작하는 로직이 이곳저곳에 분산되어 있으면 버그가 발생하기 쉽다. 서로 밀접한 데이터와 로직을 한 곳에 모아두기 한 줄 느낀점 → 유지보수와 변경이 쉽도록 변수의 이름과 로직을 신경써서 작성하는 것이 곧 설계 → 알아보기 힘든 코드는 결국 버그를 만들게 된다.