#react

11 posts

디자인 시스템 시리즈의 한 편. 앞선 글에서 흩어진 토큰을 빌드 파이프라인으로 세운 얘기를 했다면, 이번엔 그 토큰을 실제 컴포넌트 로 소비하는 첫 실물, 공통 버튼 얘기다. 버튼 하나 만드는 게 왜 이렇게 어렵나 버튼이다. 세상에서…

이 글은 '프론트엔드 아키텍처 패턴' 시리즈의 한 편이다. 들어가며 차량 상세 페이지에서 "등급 변경" 버튼을 누르면 바텀시트가 스윽 올라오면서 등급 목록을 보여준다. 그런데 초기 구현은 이런 순서였다. 1. 버튼 클릭 2. 바텀시트…

이 글은 '프론트엔드 아키텍처 패턴' 시리즈의 한 편이다. 커뮤니티/아티클 글쓰기 화면을 만들면서 정리한 "블록 기반 에디터" 설계 노트다. 들어가며 커뮤니티에 글을 쓰고 댓글을 달 수 있게 만들면서 처음엔 그냥 하나 놓으면 되는 줄…

이 글은 '프론트엔드 아키텍처 패턴' 시리즈의 한 편이다. 들어가며 이벤트 로깅은 처음엔 참 쉬워 보인다. 버튼 클릭할 때 한 줄 넣으면 되니까. 그런데 우리 서비스는 마케팅 어트리뷰션은 Airbridge, 제품 분석은 GA4, 앱 …

데이터 바인딩 데이터 바인딩? 화면상에 보여지는 데이터(View) 와 브라우저 메모리에 있는 데이터(Model) 를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것 = HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화…

https://velog.io/@youthfulhps/React React를 사용하는 이유 https://okayoon.tistory.com/entry/프레임워크와 라이브러리React는 뭐야 https://m.blog.naver.co…

사용자의 지역 다국어 지원을 위해 유저가 어떤 locale의 유저인지 알 수 있어야한다. 클라이언트 window.navigator 유저가 브라우저를 사용하고 있는 환경이라면 Web API 이용 가능. navigator.language…

Care of Legend Github Repository : Front end Care of Legend Github Repository : Back end 프로젝트 소개 구독 커머스(서브스크립션 커머스: Subscription C…

문제점 내가 맡은 상품상세페이지의 길이가 너무 길다. 한 번에 이동하고싶다. 또한 페이지 이동시 스크롤을 상단에 위치하고 싶다. 해결방안: scrollTo() 1. Syntax 2. window.scrollTo() 어디로 위치를 이동…

Market Chokurly Github Repository: Front end Market Chokurly Github Repository: Back end 프로젝트 소개 " 마켓컬리는 신선 및 친환경과 뗄 수 없는 관계이다. 마켓…

컴포넌트가 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 이다. '컴포넌트 초기 생성 업데이트 제거' 순서대로 살펴보겠다. 💡 현재는 함수형 컴포넌트+Hooks가 권장됩니다. 아래는 클래스형 컴포넌트 라…