react (13) 썸네일형 리스트형 [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (3) [Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 Note-App 구현 과정 정리 (1) Note-App 구현 과정 정리 (2) 현재글 : Note-App 구현 과정 정리 (3) 📖 목차 1. 외부 타입정의 파일 만들기 2. 노트 삭제시 비동기 코드 작성하기 (async / await) 3. 반복되던 handleCreateNote 커스텀 훅으로 만들기 4. TypeScript의 Date 타입 5. vercel 배포.. [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (2) [Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 Note-App 구현 과정 정리 (1) 현재글 : Note-App 구현 과정 정리 (2) Note-App 구현 과정 정리 (3) 📖 목차 1. lexical text editor 사용하기 2. 헷갈렸던 부분 1, props type 정의 방법 3. 헷갈렸던 부분 2, JSX를 반환하지 않는 React component의 return null 4. 생각보다 어려웠던 .. [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (1) [Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 현재글 : Note-App 구현 과정 정리 (1) Note-App 구현 과정 정리 (2) Note-App 구현 과정 정리 (3) 📖 목차 1. 기술 스택의 선택 (TypeScript, Styled-components를 사용한 이유) 2. 레이아웃 고민하기 3. Vite로 React + TypeScript 조합으로 프로젝트를 생성 후,main.tsx 파일의 docum.. [원티드 프리온보딩 FE 챌린지 12월] 실전 스킬: 비즈니스 로직 완전 정복 with React [원티드 프리온보딩 FE 챌린지 12월] 실전 스킬: 비즈니스 로직 완전 정복 with React 🗓️ 2023.12.04 ~ 2023.12.17 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 이번 챌린지는 이해가 어려워, 후기만 남깁니다 🥲 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • 컴포넌트가 복잡해지는 원인에 대해 고찰해보기 • 비즈니스 로직을 제압하는 개발자가 퇴근을 한다 • SOLID한 컴포넌트 만들기 • Logic First, React Late 📚 노션에 정리한 스터디 노트 이번 챌린지는 이해가 어려워 노션 스터디 노트는 비공개 합니다... 🥲 더더더 많~~이 공부를 해야할 듯한데, 이 스터디 노트를 업데이트 할 날이 올.. 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] 심화 - 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.. React의 Props Drilling과 상태관리 👾 Props Drilling이란? Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다. 👾 Props Drilling의 문제점 • 코드의 가독성이 나빠진다. • 코드의 유지보수가 어렵게 된다. • state 변경 시 props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다. → 웹 성능에 악영향을 줄 수 있다. 👾 Props Drilling을 방지하기 위한 방법 1. 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법 2. 상태관리 라이브러리를 사용하는 방법 → 상태관리 라이브러리를 사용하게 되면 .. Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Advanced Challenge) Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Advanced Challenge) ⭐️ 과제. React Custom Component 지난 Bare Minimum 구현에 이어 이번에는 Advanced 구현을 완료했다. Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Bare Minimum) Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Bare Minimum) ⭐️ 과제. React Custom Component 🔥 학습목표 React, Styled-Component, Stor.. 이전 1 2 다음
