개발 log (개발)/frontend5 Nextjs 기본 개발 팁 - dotenv lib 요즘은 다양한 플랫폼의 정보를 사용하게 되면서 인허가 받은 정보로 데이터를 가져오거나 Oauth 연동을 하는 경우가 많습니다. 이때, 이런 인가 코드를 코드 내에 하드 코딩하게 된다면 악의적인 용도로 사용되거나 예기치 못한 보안의 위협이 될 수 있습니다. 아래처럼 쉽게 endpoint 정보가 노출될 수 있습니다. 이런 보안 취약점을 보완하기 위해서 민감한 정보는 루트 경로에 .env 파일을 생성하여 작성하셔야 합니다. 1) 먼저, 프로젝트 내에 라이브러리 설치 합니다. sudo npm install dotenv 2) 프로젝트 설치 후 루트 경로에 .env 파일을 생성합니다. Next.js에서는 자동으로 개발과 운영 환경설정 파일을 구분하는데 구분하여 사용하고 싶으면 .env.development 파일과.. 2024. 3. 6. Next.js 공통 스타일 정의는 반드시 globals.css globals.css를 사용하지 않고 우후죽순으로 스타일을 정의하다보면 변경 요건이 발생했을 때, 아래와 같이 유지보수에 어려움을 겪게 됩니다 ㅠㅠ 저도 최근에 바쁜 일정에 기획이 계속 바뀌다보니 우후죽순으로 스타일을 동적으로 정의하고 있었습니다. 그런데 기획자가 갑작스럽게 그러더라구요. "웹에서 앱을 사용 하듯이 사용자 화면 가운데 정렬되도록, 최대 가로크기는 max-width: 390px로 변경해주세요." 아래와 같이 디자인 요건에서 크기 정의가 필요한 것들만 430px로 정의해둔 상태였습니다. 요즘은 툴을 통해서 간편하게 수정이 가능하긴하지만 아래와 같이 globals.css를 사용했다면 한 줄만 수정하고 끝났을텐데 말이죠... 여러분 공통된 스타일은 반드시 globals.css에 정의합시다. 2024. 3. 3. Recoil을 이용한 전역 상태관리 Recoil은 React 상태 관리 라이브러리 중 하나 입니다. recoil을 이용하면 전역으로 상태(특정 시간에서의 조건이나 정보) 관리할 수 있어 로그인 후 사용자 정보나 여러 컴포넌트에 최신으로 제공되어야하는 공통 정보를 유지하는데 이용이 가능합니다. react의 렌더링 특성을 잘 활용하여 효율적인 리렌더링을 제공해주므로 아래 몇 가지에 대한 정보만 파악해도 쉽게 사용 가능합니다. Atom: 앱의 상태를 정의하는 단위 Selector: 파생된 상태를 만들어내는 함수, 다른 Atom이나 Selector로부터 값을 받아 계산 Recoil Hook 종류 useRecoilValue: Atom 값 읽음 (상태 업데이트 트리거 하지 않음) useSetRecoilState: Atom 값을 업데이트 하는 sett.. 2024. 2. 25. Chart.js로 간단하게 그래프 그리기 아래 이미지와 같은 그래프를 그리려면 어떠한 방법이 있을까요? HTML canvas에 그래프를 그리도록 직접구현도 가능하지만 투자대비 퀄리티가 만족스럽지 못할 확률이 높습니다. 따라서 Chart.js라는 오픈소스 라이브러리를 이용해서 쉽게 그래프를 그려보려고 합니다. 1. 가장 먼저 HTML 영역에 그래프를 그리고 싶은 영역에 아래와 같이 canvas를 추가해줍니다. 2. x, y좌표에 들어갈 라벨 및 데이터를 입력해줍니다. labels는 x축에 들어갈 값, datasets에는 실제 그래프로 그려질 데이터와 관련된 부분이며 중요한 부분은 datasets 내부에 data가 실제 y축에 들어갈 값 입니다. const data = { labels: ['202201', '202202', '202203'], /.. 2022. 6. 3. 이전 1 2 다음
