Just Do IT!

.env 파일이란? 유닉스 및 유닉스 계열 운영 체제용 셸 명령어 환경변수 파일을 외부에 만들어 URL,포트, API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. 외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다. 환경 변수 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임 dotenv 환경변수를 .env라는 파일에 저장하고 process.env로 로드하는 의존성 모듈 .env 파일 생성하기 최상위 경로(root)에서 파일 생성 환경 변수로 지정할 값 작성 리액트인 경우 REACT_APP_로 시작 NextJS의 경우 NEXT_PUBLIC_으로 시작 .gitignore에 .env 파일 추가 위의 캡처본들 처럼..

Pagination(페이지네이션)이란? 여러개의 컨텐츠를 여러 페이지로 나누고 페이지 번호 버튼, 이전 버튼, 다음 버튼을 눌러서 페이지를 이동하는 기능이다. 이전 버튼 페이지 번호 버튼 다음 버트 총 3가지 버튼을 필수라고 생각하고 기능을 구현했다. 이전 글처럼 반복되는 컴포넌트이기도 하고, 이왕 custom hook을 사용하기로 마음 먹은거, 저번 닐리리 프로젝트에서 구현했던 걸 조금 더 보완해보고자 구글링을 해보고 직접 테스트 해보면서 페이지네이션을 구현해봤다. 결과는 성공. 아직 기능이 구현된 것이 아니라서 더미 데이터로 페이지네이션을 확인했는데, 생각보다 이런 걸 구현할 수록 더욱 뿌듯해지는 것 같다 ㅋㅋㅋㅋ usePagination.js 파일 만들기 import { useState } from..

사이드 프로젝트를 하면서, 본격적으로 custom hook을 써보기로 했다. (나혼자 결정한거임) 아직 UI 구현 단계지만, 이렇게 페이지가 많은 프로젝트를 한 적도 처음이고 플로우 차트를 통해 페이지를 파악하는 것도 처음이다! 그래서 재밌기는 하지만, 시작하기 전에 구조를 생각해야 하는 시간이 좀 길어졌다. 캠프에서는 그냥저냥 구조 그려보고 그대로 기능 구현해봤는데, 사이드 프로젝트는 다르다. 일단 디자이너님이 그려주신 화면을 구현하기 위해서 필요한 단계들을 생각해보고, 피그마를 꼼꼼히 보고 있다. 아무튼! 그래서 반복되는 컴포넌트들은 따로 custom hook을 이용해서 만들어보기로 하고 가장 첫 번째로 모달창을 구현했다. custom hook? https://react.vlpt.us/basic/21..

캠프에서 프로젝트 할 때 블로그에 정리해두려고 적어두었던 것들 중 하나를 드디어...쓰게 되었다...ㅋㅋㅋ 최종 프로젝트 닐리리 할 때 적어둔 라이브러리인데, 개인프로젝트나 다른 프로젝트에서도 사용할 것 같아서 이번 기회에 정리하려고 한다! react-beautiful-dnd란? 드래그 앤 드롭 기능을 보다 더 편리하게 구현할 수 있도록 만든 라이브러리이다. https://www.npmjs.com/package/react-beautiful-dnd react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.1, last published: a year ago. Start using r..

내배캠 프로젝트에서 redux를 주로 사용했는데, 최종 프로젝트가 끝난 뒤 튜터님이 flux 패턴에 대해 아냐고 물어봐주셨고 당연히(?) 대답을 못했다. 그래서 그 이후에 찾아보고 리액트와 동일한 패턴이라고 알게 되었는데 적어두질 않으니 계속 까먹고 다시 찾는 불상사가 생겨서...이 기회에 한번 정리해보려고 한다. Flux 패턴이 나온 배경 Flux 패턴은 2008년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴이다. 이를 설명하면서 MVC 패턴의 한계를 이야기 했다고 하는데, 우선은 MVC 패턴부터 모르므로 아래에 설명을 남겨본다 MVC 패턴이란? MVC는 Model, View, Controller의 약자이다. Model에 데이터..

state 현재 컴포넌트에서 생성, 변할 수 있는 데이터 state가 생성된 컴포넌트 내에서만 변경이 가능하다 반드시 객체 형태로 생성되거나 null 타입이어야 한다 state 업데이터를 하려면 무조건 setState라는 메소드를 사용해야 한다 특정한 작업이 이루어졌을 때에만 HTML이 업데이트 되도록 만든 규칙 (예제) import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {..