Step-up Step-up

이번 챕터에서는 아토믹 디자인(Atomic Design)에 대한 개념을 학습합니다. 아토믹 디자인은 웹 개발 및 디자인에서 사용되는 방법론 중 하나로, 작은 단위의 구성 요소(원자)를 만들고 이를 조합하여 더 큰 단위의 구성 요소(e.g. 분자, 유기체)를 생성하는 방식으로 진행됩니다. Atomic Design 최근 스마트폰의 보급과 기술 발전으로 인해 웹 환경이 빠르게 변화하고 있습니다. 데스크톱과 모바일에서 더 나아가 태블릿, TV, 냉장고, 자동차 등 다양한 기기에서 웹 환경이 제공되고 있습니다. 이러한 변화에 따라, 디자이너와 프론트엔드 개발자들은 환경에 상관없이 일관된 사용자 경험을 제공하는 것이 더욱 중요해졌습니다. 기존의 웹 디자인 방식은 각 페이지마다 디자인 요소를 개별적으로 만들고 관리하..

디자인 시스템이란? 디자인 시스템(Design System)은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미합니다. 이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와줍니다. 종종 디자인 요소를 모은 UI 키트를 디자인 시스템으로 혼동하기도 하지만, 디자인 시스템은 디자인 원칙, 스타일 가이드, 컴포넌트, 패턴 그리고 디자인 및 개발 프로세스에 대한 지침까지 포함하는 포괄적인 개념입니다. 이런 점에서 디자인 시스템은 단순한 “디자인” 가이드가 아니라, 디자인 팀과 개발팀이 업무 전반 프로세스와 방식을 일관되게 가져갈 수 있도록 도와주는 협업 “시스템”에 가깝습니다. 이를 통해 제품 개발에 관련된 인원들이 통일된 규칙하에 사용자에게 일관된 디자인과 ..

💁‍♀️ Real DOM (DOM)에 대한 설명으로 옳지 않은 것을 고르세요. A. DOM은 Document Object Model의 약자로 JavaScript와 같은 스크립팅 언어가 , , 와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것을 의미합니다. B. 트리 구조로 DOM 객체가 이뤄져 있기 때문에 JavaScript는 쉽게 DOM 객체에 접근할 수 있고, DOM 객체를 조작할 수 있습니다. C. DOM은 애플리케이션 UI의 상태가 변경될 때마다 해당 변경 사항을 나타내기 위해 업데이트 됩니다. D. DOM의 렌더링은 브라우저의 파워에 의존하지 않기 때문에 DOM을 아무리 조작해도 성능에 영향을 미치지 않습니다. 🔈 해설 정답 D 프로그래밍 언어로 조작하는 DOM은..

npx create-react-app 프로젝트명 리엑트 설치끝 그동안 시간낭비 레전드였네

😂 1. git 브랜치 git branch 현재 작업하고 있는 브랜치 위치 조회 2. 브랜치 생성 및 옮김 git checkout -b 브랜치명 브랜치명을 잘못 선정해서 그런지 되지 않았다 git branch 로 생성 생성한 브랜치로 작업 변경은 checkout 이용 git branch 브랜치명 git checkout 브랜치명 이 순서로 적용하고 현재 브랜치 위치 까지 확인해주면 된다.

Post man 포스트맨 POSTMAN은 API를 개발, 테스트, 공유 및 문서화하는 데 사용되는 API 클라이언트 입니다. 엔드 포인트 URL을 입력하는 테스트에 사용되며 서버로 요청을 보내고 서버에서 응답을 받아 api가 잘 동작하는지 확인할 수 있습니다. 사실 그냥 브라우저에서 URL을 통해 응답이 잘 왔는지 정도는 체크는 할 수 있습니다. 하지만 보다 체계적으로 시나리오 테스트를 하려면 api 툴을 사용해야 합니다. 편리하게 쿼리스트링을 보낼수있는 것은 덤이고, 브라우저 도구에서는 하지못하는 Authorization이나 Header, Body 값 수정 헤더값 수정 등 도구를 이용하면 해당 작업을 할 수 있도록 인터페이스가 있기 때문에 가능합니다. postman은 모바일 개발, 프론트엔드, 백엔드 ..

HTTP 요청은 stateless 하다고 했는데 장바구니는 어떻게 유지되는거지? : 바로 쿠키 덕분입니다🍪 Cookie 란? 웹사이트에 들어갔을때, 서버가 일방적으로 클라이언트에 전달하는 작은 데이터 - 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단 - 해당 도메인에 대해 쿠키가 존재하면, 웹 브라우저는 도메인에게 http 요청 시 쿠키를 함께 전달 서버는 쿠키를 통해서 어떤 데이터를 저장하려고 할까요 쿠키의 특성은 삭제하지않으면 남아있다는 속성이 있기때문에 장기간 저장해야하는 옵션데이터를 클라이언트에 저장하기 적합합니다. e.g. 장바구니, 테마, 로그인 상태 유지 서버가 응답 헤더에 set-Cookie 프로퍼티에 쿠키의 이름, 값, 경로 등의 옵션을 저장합니다. 쿠키가 담긴 응답을 받은 ..