코드스테이츠부트캠프 (70) 썸네일형 리스트형 Section4 Unit4 [UX/UI] Design System Section4 Unit4 [UX/UI] Design System 📌 Chapter1. Design System • 디자인 시스템(Design System)은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미한다. 이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와준다. • 디자인 시스템을 사용하면, 1. 디자이너와 개발자는 문서 혹은 툴킷 형태를 기반으로 디자인 시스템을 공유해 이를 참고하며 서로의 작업에 대한 이해를 높일 수 있고, 따라서 프로젝트의 진행 속도가 빨라지며, 팀원 간의 소통과 협업이 원활해지는 등 팀 간의 원활한 협업을 촉진할 수 있다. 2. 디자인 시스템에 따라 제품이 만들어지면, 사용자들은 시간이 지남에 따라 서비스의 일관된 디자.. Section4 Unit3 [React] 심화 - React Hooks 적용하기 Section4 Unit3 [React] 심화 - React Hooks 적용하기 ⭐️ 과제. React Hooks 적용하기 ✅ Bare Minimum Requirement ✔️ json-server 설치 ✔️ 상세 컴포넌트 구현하기 - App.js react.lazy()와 suspense 사용 - BlogDetail.js createBlog.js CRUD 구현 - useFetch.js custom hook 만들기 ✅ Advanced ✔️ 블로그 글 클릭해서 들어갔을 때 스크롤 맨 위로 적용되는 기능 구현하기 ✔️ custom hook과 custom component 만들기 나름 재미있었던 이번 과제. 내가 한 방법이 맞는건지, 더 좋은 방법이 있는지 잘 모르겠는데 (특히 custom hook을 만드는 부.. Section4 Unit3 [React] 심화 - 코드분할과 React.lazy() & Suspense Section4 Unit3 [React] 심화 - Code Spliting, React.lazy() & Suspense 📌 Chapter3. React의 주목해야 할 기능 주목해야 할 기능인가? 오늘 QnA 세션에서 외부 강사님이 Suspense는 잘 사용하지 않는다고 하시긴 했다만...😐 여튼, 무거워진 리액트 앱의 성능을 최적화하는 것은 중요한 일임은 틀림없다. 이 부분은 좀 더 공부를 해봐야 할 것 같지만, 우선 배운 내용들만 간단히 정리해보자면 아래와 같다. • React는 SPA(Single-Page-Application)이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있다. React.lazy 함수를 사용해 컴포넌트를 동적으로 import를 할 수 있고, 이를 사용하면 초기 렌더링 .. Section4 Unit3 [React] 심화 - Virtual DOM과 React Hooks Section4 Unit3 [React] 심화 - Virtual DOM과 React Hooks 📌 Chapter1. React 심화 • React의 Virtual DOM React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual DOM이라는 가상의 DOM 객체를 활용한다. 이는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다. 📌 Chapter2. React Hooks • 렌더링 최적화를 위한 Hook으로 useMemo와 uesCallback이 있다. → useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback.. Section4 Unit2 [솔로 프로젝트] COZ Shopping - 2일차 Section4 Unit2 [솔로 프로젝트] COZ Shopping - 2일차 오늘은 하루종일 챕터 학습 없이 프로젝트만 진행했다. 중간에 자료구조 문제 해설 시간이 잠깐 있기는 했는데, 듣다가 포기해버렸다. 무슨 말인지 1도 못알아듣겠다...ㄷㄷ 일단 지금은 알고리즘 문제는 아닌걸로..🥲 오늘자 글에는 쓸게 없네..? 과제 진행사항은 노션에 따로 정리하고 있고, 나중에 과제가 끝난 후에 블로그에도 글을 쓸지 고민중이다. 어제 챕터학습 하나 정도만 남겨놓을걸 그랬나보다 :-| 이번 프로젝트에서는 다른 사람들과 협업을 한다는 가정하에 이루어지는 건지 main 브랜치에 직접 코드를 작성하는 것을 금지했다. 대신 branch를 만들어 코드 작성 후 pull request 후에 merge 하기를 권장했다. 그래.. Section4 Unit2 [솔로 프로젝트] COZ Shopping Section4 Unit2 [솔로 프로젝트] COZ Shopping 📌 Chapter1. 솔로 프로젝트 본 프로젝트 전에 간단히 진행하는 솔로 프로젝트가 시작되었다. • 스프린트 기간은 5일 (평일만 / 오늘부터 다음주 월요일까지) • 첫 날은 플래닝 데이, 마지막 날은 회고 데이 • 이번 과제는 애자일 방법론과 스크럼보드를 활용한 프로젝트로, 혼자 작업하는 솔로 프로젝트이지만 깃과 깃허브를 적극 활용한다. • 또, 이번 과제는 React를 사용해 주어진 요구사항을 만족하는 상품리스트 페이지, 그리고 사용자가 북마크 한 상품들을 조회할 수 있는 북마크 페이지를 포함하는 SPA 앱을 구현하는 것이 목적이다. • 이번 솔로 프로젝트에서의 나의 목표는, • 깃허브 사용 익숙해지기 (branch, push, p.. Section4 Unit1 [자료구조/알고리즘] 기초 - Tree, Graph Section4 Unit1 [자료구조/알고리즘] 기초 - Tree, Graph 📌 Chapter3. Tree와 Graph 지난 챕터와 마찬가지로 Tree와 Graph도 개인 노션에 우선 정리만 해두었다. 블로그에는 자료구조에 대해 좀 더 관심이 생겨서 공부를 하게 되면 정리를 해서 기록해볼까 싶어서 이번에도 역시 개념만 적어볼까 한다. 특히 이번에는 그래프의 여러 종류와 표현방식 등이 너무 많아서 헷갈리고 어려웠던 것 같다. 그리고 그래프를 탐색하는 방법 중 대표적인 두 가지인 BFS와 DFS도 쉽지 않았다. 여러번 글을 읽다보니 이해는 되었는데, 이걸 내가 응용할 수 있을까? Tree는 그래프의 여러 구조 중 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮았다고 해.. Section4 Unit1 [자료구조/알고리즘] 기초 - Stack, Queue Section4 Unit1 [자료구조/알고리즘] 기초 - Stack, Queue 📌 Chapter1. 자료구조 • 자료구조란 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것 • 자주 등장하는 네 가지의 자료구조: Stack, Queue, Tree, Graph 📌 Chapter2. Stack과 Queue 부트캠프를 통해 Stack과 Queue를 공부하며, 노션에 정리를 해놨는데 블로그에 따로 글을 쓸까 하다가 우선은 보류하기로 했다. 자료구조를 처음 접하기도 했고, 익숙치 않은 개념이라 조금 더 개인 노션에 정리를 해두고 공부를 하는게 좋을 것 같다는 생각이 들었다. 개념정도만 기록해볼까 한다. Stack 데이터(data)를 순서대로 쌓는 자료구조 • Stack은 입력과 출력이 하나의 방향, 즉.. 이전 1 2 3 4 5 ··· 9 다음
