프로젝트를 진행하며 여러 페이지를 연결 시켜야되고 연결된 페이지간에 공유되어야 할 정보를 전달하는 방법이 필요함을 느꼈다.나의 예로는 리스트 페이지에서 어떤 아이템을 클릭했을때 해당 아이템의 제품id 값과 컬러id 값을 전달 받고 싶었다.그 id 값들을 통해서 백엔드로

프로젝트를 진행하면서 Topnav 컴포넌트의 레이아웃을 구현하고 나중에 문제점이 발생되었다.반응형으로 구현한 메뉴바가 실제홈페이지와 다르게 스크롤이 작동하는 문제점이었다.상단에서 스크롤이 작동되는것이 그대로 노출이 되었다.따라서 어차피 반응형 메뉴창은 브라우저 화면에

리스트 페이지에 하트 버튼커피 상세페이지의 하트 버튼하트 버튼이 여러군데 사용되어서 Heart.js에 Heart 컴포넌트를 만들어서 재사용하였다.fontawesome 아이콘을 리액트에서 사용하는 법을 연습해볼 수 있었다.리뷰에 좋아요 버튼커피 상세페이지에 리뷰 달고 삭

로그인 창에서 id input 과 password input에 입력된 값을 저장 하는 기능 구현 (미션 2)미션 2에서 얻은 값을 통해서 아이디와 비밀번호의 조건 만족시 로그인 버튼 활성화 기능 (미션 3)(추가 구현) id 와 비밀번호 조건 만족시 해당 input박스

기존의 html,css로 만든 페이지를 react의 컴포넌트로 옮기기react를 처음 다뤄보는 단계에서 mission 0을 진행하면서 함수형 컴포넌트를 작성해보고 react의 구성을 전반적으로 경험해볼수 있는 미션이었다.리스트 페이지의 커피리스트를 mock data형

먼저 state 와 props를 한마디로 정의하면state : 변경가능한 UI 정보(상태값)props : 부모요소의 데이터값(state값)을 자식요소에 전달하기 위한 매개체간단하지만 개념이지만 코드로 익숙해지지 않으면 머리속으로 그려지지 않는다.원래는 state는 클

위의 함수의 의미는fetch 함수로 api 주소에 있는 데이터를 호출한다 (get의 경우)첫번째 .then 함수의 parameter에 api 데이터가 들어간다.첫번째 .then 함수의 return 값으로 api 데이터를 json()함수고 호출한다.그러면 그 리턴 값인

가짜 데이터, 샘플 데이터로 해석 될수 있다.백엔드 API가 완성되기전에 프론트엔드 개발을 진행하기위해 백엔드 response의 형태에 맞게임시로 만드는 데이터실제 백엔드 API의 응답값의 형태인 json파일로 만들어준다.public 폴더에 안에 폴더를 만들어서 저장실

설치상위 요소안 쪽에 하위 요소의 스타일을 정의해서 코드를 간단하게 할 수도 있다.pre-course 기간에 html 과 css 로 클론 코딩한 webucks 홈페이지를 react로 옮기는 과정에스타일들이 다 깨졌다. 처음에는 왜이러는지 몰라서 너무 답답했는데Sass를

SPA(Single Page Application)을 페이지가 한 개인 애플리케이션이라고한다.즉 한개의 .html 파일만 존재하고 그 안에서 여러개의 페이지를 볼 수 있는것이다.그 방법이 Routing 이다.라우팅이란 다른 url주소에 따라 다른 화면을 보여주는 것리액

React가 뭘까? 발전 배경 웹페이지에 보여지는 사용자 인터페이스(UI)가 많이지면서 웹페이지라는 단어 대신 웹 애플리케이션이라는 단어가 많이 사용된다고 한다. 이렇게 애플리케이션의 규모가 커지면서 기존의 방법(DOM,jQuery)으로는 유지보수가 힘들어서 다양한