전체 글

# React Router 응용 지난 시간에 설정한 page routing 을 응용해보자! # Path Variable Diary 컴포넌트에서 각각의 다이어리를 보여줄 때 어떤 일기를 보여주어야 할 지 정보를 전달받아야 한다 즉 /diary/1 과 같이 몇번 째 일기인지 숫자를 받아야 할 수 있다 Route path 에서 path variable인 id를 붙여주자 Diary 컴포넌트에서는 useParams 를 사용해서 id 값을 꺼낼 수 있다 useParams란 뭘까? 사용자 정의 hook, custom hook # Query String Query 웹 페이지에 데이터를 전달하는 가장 간단한 방법이다 /edit?id=10&mode=dark 와 같은 것들이 Query String 이다 Query Strin..

지난 시간에는 리액트의 기능들을 사용해서 아주 간단한 일기장을 만들어보았다면 이번 시간부터는 기능도 더 추가되고 디자인적으로도 훨씬 발전된 감정 일기장 프로젝트가 진행된다 지금까지 배운 기능들을 활용하고 새로운 기능들을 배워서 멋진 토이 프로젝트를 만들어봐야겠다 # SPA & CSR # Page Routing 라우팅이란? 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 데이터의 경로를 실시간으로 지정해주는 행위 자체와 그런 과정들을 포함하여 일컫는 말이다 따라서 페이지 라우팅은 요청에 따라서 해당 페이지를 반환하는 과정 # MPA Multipage Application 여러 개의 페이지 중 요청에 따라 적절한 페이지를 보내주는 방식이다 페이지 이동 시마다 웹 서버에게 페이지를 요청한..

# React 최적화 3 - useCallback 컴포넌트를 최적화하기 위해서 어떤 컴포넌트가 최적화 대상인지 찾아낼 수 있어야 한다 어떻게 찾아야 할까? React Developer Tools의 기능을 활용하자! Highlight updates when components render 기능을 체크해주면 화면에서 변경이 일어나는 컴포넌트에 테두리 색이 보이면서 어떤 컴포넌트가 렌더링 되고 있는 것인지 확인할 수 있다 일기 리스트를 삭제하면 DiaryEditor 컴포넌트도 렌더링 되고 있다 불필요한 렌더링이 발생하고 있기에 DiaryEditor 컴포넌트의 최적화가 필요하다! # DiaryEditor 컴포넌트 최적화 지난 시간에 배운 React.memo를 사용해서 최적화를 해보자 컴포넌트 코드가 길 때는 전..

오늘은 지난 강의에 이어 새로운 기능을 추가해보면서 리액트에 대해서 더 자세하게 배워보는 시간이다 API 호출과 최적화에 대한 강의가 진행되는데 오늘 강의도 열심히 꼼꼼하게 공부하고 기록해두어야겠다 그럼 오늘도 화이팅! # React에서 API 호출하기 useEffect를 이용하여 컴포넌트 Mount 시점에 API를 호출하고 해당 API의 결과값을 일기 데이터의 초기값으로 이용해보자 임시 API를 사용하기 위해서 jsonplaceholder 사이트를 이용한다 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Po..

오늘은 지난 시간에 이어 간단한 일기장 프로젝트의 추가 기능을 구현해보는 날이다 저번 시간에는 일기장의 틀만 구성했다면 오늘은 추가, 삭제, 수정 기능을 구현하고 Lifecycle을 제어하는 방법에 대해서 배워볼 것이다 CRUD는 모든 서비스에서 가장 기본적인 기능이기 때문에 오늘 강의를 잘 듣고 확실하게 배워두어야겠다 오늘도 그럼 화이팅! # React에서 배열 사용하기 2 - 데이터 추가 배열을 이용한 React의 List에 아이템을 동적으로 추가해보자 또한 React처럼 생각하는 방법을 배워보자 리액트로 프로젝트를 개발할 때 코드를 작성하는 것도 중요하지만 그 전에 컴포넌트 트리에 대해서 생각해보아야 한다 App 컴포넌트를 부모 컴포넌트로 하여 DiaryEditor 컴포넌트와 DiaryList 컴포..

이번주는 React를 사용해서 간단한 일기장 구현 프로젝트가 진행된다 일기장 기능에는 CRUD 가 전부 포함되어 있기 때문에 이번 간단한 프로젝트에서 확실하게 배우면 나중에 더 크고 복잡한 프로젝트를 할 때 도움이 될 수 있을 것이다 기본기를 탄탄하게 잡고 시작한다는 느낌으로 이번 강의도 열심히 듣고 따라하고 정리해보겠다 # 프로젝트 소개 간단한 일기장 프로젝트를 통해 React의 사용법을 배워보자 Point 1. 사용자 입력 및 배열 리스트 처리하기 Point 2. React Lifecycle과 API Point 3. React App 프로처럼 성능 최적화하기 with 도구 사용 Point 4. React 컴포넌트 트리에 전역 데이터 공급하기 # React 에서 사용자 입력 처리하기 npx create..

지난 시간에는 Node.js에 대해서 배우고 설치까지 해보았다 오늘부터는 본격적으로 React에 대해서 배워보는 시간이다 오늘은 React 가 무엇인지, 어떻게 리액트 파일을 생성하는지, 문법은 어떻게 되는지 등 React 에 대한 전반적인 기초 지식에 대한 강의가 진행된다 강의를 들으며 중요한 내용을 잘 정리하고 추가로 궁금한 부분을 메모해두어야겠다 오늘도 그럼 화이팅! # React # React를 왜 사용할까? 1. 중복되는 코드를 컴포넌트화 시켜 재사용할 수 있다 2. 선언형 프로그래밍이다 -> 바로 목적을 말한다 3. Virtual DOM # DOM이란? Document Object Model 의 약자 브라우저가 HTML을 해석해서 보여줄 때 HTML을 트리 형태로 변경한 것 Virtual DO..

오늘은 피그마를 사용해서 실제 프로토타입을 만들어보는 시간이다 여러가지 유용한 정보들을 배워서 피그마로 멋진 디자인을 만들어봐야겠다\ 프로토타입을 제대로 만들지 않고 프론트엔드 개발을 시작했다가 엉망이 된 기억이 있기 때문에 오늘 배우는 프로토타입 제작 실습을 잘 배우고 기억해서 나중에 프로젝트를 진행하게 될 때 디자인 초반 설계를 탄탄하게 잡고 시작할 것이다 그럼 오늘 강의도 화이팅! # 프로토타입 제작하기 # 사전 준비 1. 로컬 폰트 설정 피그마 어플리케이션을 깔았다면 따로 로컬 폰트를 설정해 줄 필요가 없다 나는 피그마 어플리케이션을 깔고 사용 중이기 때문에 이 부분은 생략! 2. 디자인 가이드라인 figma community에서 원하는 디자인 키워드를 입력해보면 다양한 가이드라인이 나온다 예를 ..