React

개발을 하다 보면 여러 플랫폼의 API나 open api 등을 사용하게 되면서 API KEY를 발급받게 된다. API KEY는 각 사용자마다 발급되는 고유한 키이기 때문에 깃허브 등에 프로젝트를 업로드 할 때, .gitignore에 추가해서 public 저장소에 올라가지 않도록 해 줄 필요가 있다. 이번에 React를 사용하여 개발하면서 서울시 실시간 혼잡도 정보를 받아오기 위해 발급한 API KEY를 .gitignore에 추가해보았다. 1. dotenv 설치 먼저 dotenv를 설치해준다. (이거 설치 안하고 진행하니까 안됐음) yarn add dotenv npm install --save dotenv 2. react-create-app으로 생성한 프로젝트 루트폴더에(src폴더랑 같은 계층) .env ..

프로젝트를 진행하면서 페이지네이션 기능이 필요해서 페이지네이션을 직접 구현해보았다. 리액트 페이지네이션 라이브러리가 다양하게 있는 것 같은데 그냥 직접 구현해봤다... (라이브러리 쓸 걸 그랬나) 하단 블로그 글을 많이 참고하며 리액트 state에 맞게 바꿔서 구현해봤다. https://min-kyung.tistory.com/30 [Javascript] 페이지네이션 구현하기 To do list 페이지네이션 구현 json-server를 활용해서 페이지네이션 구현하겠습니다 json-server: https://github.com/typicode/json-server 페이지네이션을 구현하기 위한 설정값은 총 4개가 필요합니다 currentPage: min-kyung.tistory.com 스타일은 좀 더 수정이..

프로젝트를 진행하면서 사용자의 취향 키워드를 수정하는 화면에서 아래와 같은 식으로 클릭한 요소를 표시할 수 있도록 작업 중이었다. 코드의 재사용성을 높여주고, 반복되는 작업을 줄이기 위해 각 키워드 카테고리들을 따로 컴포넌트로 만들어서 props를 통해 해당하는 이미지와 state, setState함수 등을 전달하도록 해주려고 했다. 기존에는 각 요소들이 한식 와 같이 구성되어 있었다. 별도의 컴포넌트로 분리할 경우 각 키워드 카테고리 별로 props로 전달해줄 값은 카테고리 이름 img태그의 src속성값 img태그의 alt속성값 해당 카테고리의 state 해당 카테고리 state의 setState함수 5가지이다. 그래서 아래와 같이 컴포넌트를 만들어주고 // [ 각 키워드 재사용 컴포넌트 ] const..

DRF로 구축한 백엔드 API 서버와 React로 구축한 프론트단을 연결해보기 위해 공부하면서 책 저자님의 깃허브에서 리액트 프로젝트를 clone해서 사용하려고 했다. npm install로 package-json module을 업데이트 해준 뒤, npm start를 해주면 에러 메세지가 길게 나오면서 npm build failed with error code 1 라는 오류 메세지가 나왔다. https://codingapple.com/forums/topic/%EC%B5%9C%EC%8B%A0%EB%B2%84%EC%A0%84-%EA%B9%94%EC%95%98%EC%9D%84%EC%8B%9C-%EC%9D%B4%EB%9F%B0-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%96%A0%EC%9A%94/..