FEELINGS & FINDINGS
- 처음으로 리액트 프로젝트를 만들어봤는데, 개발 과정이 너무 재밌었다. 앞으로도 배울 게 많은 점이 좋은 것 같다.
- UI/UX를 공부하면서 느낀 점이 많다. 블로깅 자체도 사용자가 있다는 전제로 글이 어떻게 보여질지에 대한 고민을 습관화하는 것이 좋을 것 같다. 글을 너무 나만 본다고 생각하고 작성하는 것 같다. UX를 신경쓰는 습관을 들이도록 하자.
- 골든 리트리버를 키우다 보니 공부 환경이 잘 안나왔던 것 같다. 부트캠프 기간까지는 지인에게 임시 보호를 맡기게 돼서 이제 공부에만 집중할 수 있을 것 같다.
- JavaScript, Data Structure는 깊게 파고들수록 끝이 없어보인다. 매일 꾸준히 공부해야겠다.
- React와 그 외 라이브러리들이 너무 잘 만들어져있어서 잘못하면 vanilla js에 대한 감각을 잃어버릴 수도 있을 것 같다. 항상 vanilla js로 어떻게 동작할지 고민하면서 공부하자.
- 다른 라이브러리를 쓰기 전에 JavaScript, React의 작동 원리를 기본적으로 이해하고 사용해야 할 것 같다.
FUTURE
- 나만의 로드맵부터 만들자. 공부할 것이 너무 많아서 계획을 다시 잘 짜야겠다.
- 다음주는 복습 위주로, 저번주에 만든 -learning-qna 레포지토리에 썼던 내용을 숙지하자.
- HTML, CSS, JavaScript, React, React Router Dom, Styled Components, Axios, CRA, Vite 등 프로젝트 때 사용했던 것들에 대해 계속 공부하자.
- useState, Promise 객체 프로퍼티, 웹 API의 pagination, Webpack, babel에 대한 내용도 잊지말고 공부하자.
- React Query, Recoil, Jest, Storybook 등 프로젝트에 사용할 예정인 것들에 대해서 천천히 공부하자.
- Strict mode에 대해서 찾아보고, 프로젝트를 진행하면서 에러나 경고가 떴던 부분도 공부해보자.
- 위클리 미션으로 페이지네이션과 무한 스크롤을 구현해보자
- 지난 Feedback에 썼던 내용들을 전부 복습하자.
- 스타일 가이드 공부도 잊지 않고 하자.
- 시간이 된다면 Node.js를 공부하고 싶다.
- 알고리즘 풀이를 시작하자.
- 부트캠프 노션에서 안 옮긴 내용들을 문서화하자.
FACT
[TIL] 04/23
- HTML 복습
- Hyperlink
- Text
- List
- Table
- Multimedia
- Form
- Link
- Script
- Semantic tag
- Data structure 복습
- Time Complexity
- Space Complexity
- Big O notation
[TIL] 04/24
- React 학습
- React
- CRA
- React developer tools
- JSX
- Fragment
- Component
- Props
- Children
- State
- React rendering
- Virtual DOM
- className
- Build
- Cloud computing
- Transpiling
- Bundling
- JavaScript 복습
- JavaScript
- Semi colon
- Comment
- Data type
- Abstraction
- Variable
- Naming rules
- Function
- Parameter
- Return
- CSS
- em
- rem
- Data structure
- Recusive function
- Search/Sort algorithm
[TIL] 04/25
- React 학습
- React array rendering
- Key prop
- useEffect
- React array sort
- Pagination
- Offset pagination
- Cursor pagination
- Conditional rendering
- Race condition
- Handling
- Network loading/error
- UI/UX 복습
- UI
- UX
- Figma
- Consistency
- Hierarchy
- HTML 복습
- meta tag
- Data structure 복습
- Algorithmic paradigm
- Brute-force
- Divide and Conquer
- Dynamic Programming
- Greedy Algorithm
[TIL] 04/26
- React 학습
- Controlled component
- Stack trace
- ref
- useRef()
- URL.createObjecURL()
- URL.revokeObjectURL()
- React GET/POST/PUT/DELET request api
- Hook
- Hook rules
- Custom hook
- useCallback
- Exhaustive-deps
- Context
- State management
- Flux
- Redux
- React Context API
- React query
- SWR
- Recoil
[TIL] 04/27
- React 학습
- React Router
- NavLink
- Nested routes
- Outlet
- useParams
- Navigate
- useSearchParam
- useNavigate
- react-helmet
- CSR
- SPA
[TIL] 04/28
- React, Styled Components 학습
- Features of styled components
- Styled components installation
- & selector
- Component selector
- Dynamic styling
- styled() function
- css function
- Global style component
- keyframes function
- ThemeProvider
- as keyword
- Transient prop
JavaScript 학습 - Tagged function
[TIL] 04/29
- React 프로젝트
- React
- React Router Dom
- Vite
- Styled Components
- Axios
Memo
- React 기본 개념
- Component (컴포넌트): React에서 UI는 컴포넌트로 이루어져 있습니다. 컴포넌트는 재사용 가능한 UI 조각으로, 입력값을 받아들이고 UI를 반환하는 함수입니다.
- JSX: JSX는 JavaScript XML의 줄임말로, React에서 UI를 작성하는 데 사용됩니다. JSX는 HTML과 비슷한 문법을 가지며, JavaScript 코드와 함께 사용할 수 있습니다.
- Virtual DOM: React는 Virtual DOM을 사용하여 UI를 렌더링합니다. Virtual DOM은 실제 DOM의 가벼운 복사본으로, React에서 UI 변경이 일어날 때마다 전체 UI를 다시 렌더링하는 것이 아니라, Virtual DOM에서 변경된 부분만 감지하여 변경합니다.
- State (상태): React 컴포넌트는 상태(state)를 가질 수 있습니다. 상태는 컴포넌트 내부에서 변경되는 데이터를 의미하며, 상태가 변경될 때마다 컴포넌트는 다시 렌더링됩니다.
- Props (속성): React 컴포넌트는 속성(props)을 받아들일 수 있습니다. 속성은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.
- Event Handling (이벤트 처리): React 컴포넌트에서는 이벤트 처리를 위한 메서드를 정의할 수 있습니다. 이벤트 처리 메서드는 컴포넌트 내부의 상태를 변경하거나, 다른 컴포넌트로부터 데이터를 전달받을 수 있습니다.
- Lifecycle Methods (라이프사이클 메서드): React 컴포넌트는 라이프사이클 메서드를 가지고 있습니다. 라이프사이클 메서드는 컴포넌트가 마운트, 업데이트, 언마운트될 때 호출되는 메서드입니다. 라이프사이클 메서드를 이용하여 컴포넌트의 동작을 제어하고, 성능 최적화를 할 수 있습니다.
job's done