🚧기초 공사 항목 1. 폰트 세팅 Google Web Fonts를 이용한 프로젝트에 사용되는 폰트 세팅 2. 레이아웃 세팅 모든 페이지에 반영되는 레이아웃 세팅 3. 이미지 에셋 세팅 감정 이미지들을 프로젝트에서 불러와 사용할 수 있는 환경 세팅 4. 공동 컴포넌트 세팅 모든 페이지에 공통으로 사용되는 버튼, 헤더 컴포넌트 세팅 1. 폰트 세팅 Google Web Fonts를 이용한 프로젝트에 사용되는 폰트 세팅 아래는 우리가 활용할 폰트들이다. Open Font License SIL 개방형 글꼴 라이선스(OFL)는 글꼴 디자인 및 언어 소프트웨어 엔지니어링 경험을 바탕으로 글꼴 및 관련 소프트웨어용으로 특별히 설계된 무료 오픈 소스 라이선스입니다. OFL은 협업 방식으로 글꼴 및 관련 소프트웨어의 세계..

React Router Dom의 유용한 기능 REACT ROUTER V6 REACT에서 CSR기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리 1. Path Variable (useParams) 2. Query String (useSearchParams) 3. Page Moving (useNavigate) 1. Path Variable (useParams) Diary 페이지 경로 : /diary 특징 : 어떤 일기를 보여줘야 할 지 전달 받아야 함 예 : /diary/1 -> 1번 일기 먼저 diary/1이라 경로를 입력하여보겠다. Path variable을 사용하려면 routes에서 path설정을 별도로 해주어야한다. :id 를 사용하여 뒤에 있는 인자를 전달하려는 것을 보여주면 된다. 그럼 다음과..

우선 새로 React Application을 하나 생성하였다. 우리는 이번에 React router라는 라이브러리를 사용할 것이다. React router 공식페이지에 접속해보자. https://reactrouter.com/ 우선 설치를 해보자. Read the Docs를 통해 Installation으로 접속해보자. https://reactrouter.com/docs/en/v6/getting-started/installation 그리고 아래의 명령어로 라이브러리를 설치해보자. npm install react-router-dom@6 그러면 package.json파일에 아래와 같이 설치가 잘 되어있음을 확인할 수 있다. 그럼 npm start로 구동시켜 보겠다. 그리고 Routing을 하기 위해 pages폴..

우선 페이지가 한 페이지로 구성되면 서비스하기도 힘들고 구성하기도 힘들다. 그래서 이번에는 3 페이지로 구성된 웹 어플리케이션을 만들어 볼 것이다. 그래서 먼저 웹 사이트 페이징에 먼저 알아보자. PAGE ROUTING Routing이란? 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 여기서도 데이터들이 어디로 가야할지 알려준다. 그래서 이 네트워크들도 실시간으로 최단거리를 계산해서 갈 수 있도록 한다. 이 경로(route)를 정해주는 장치를 ROUTER라고 칭한다. ROUTER : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 ROUTE + ING : 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말 PAGE ROUTING이란? 웹페이지에 접속하는 것 ..

강사의 프로젝트 예시 링크이다. 접속하게 된다면, 우리가 만들 감정일기장의 예시가 있다. 이전에 배운 CRUD의 기능이 모두 탑재되어있으며, 우리는 일기를 작성하고 지우고 수정하며 읽을 수 있다. https://emotion-diary-winterlood.web.app/ 그럼 마지막으로 꼭 성공해보자!

DiaryList는 onCreate, onRemove, onEdit의 세개의 props를 받지만 빨간색같이 그냥 거쳐가기만 하는 prop들이 존재한다.(비효율적) (onDelete라고 했다가, onRemove로 바꾸는데 굉장히 많은 시간이 든다.) 전달만 하는 컴포넌트가 많이 생길 경우에는 props이름도 바꾸기가 어려워 지고 코드 작성과 수정에 악영향을 끼친다. 이런 상황에 props가 드릴처럼 땅을 파고 들어간다고 해서 props drilling이라고도 칭한다고 한다. 이는 부모에서 자식으로 데이터를 전달하는 단방향데이터흐름을 지키는 react를 사용하다보니 발생하는 문제라고 할 수 있다. 이를 해결하기 위해 Context를 오늘 배울 것인데, 아이디어는 다음과 같다. 1. 모든 데이터를 가지고 있는..