본문 바로가기

개발 log (개발)30

변수명 짓기가 귀찮다면 개발이나 영어에 익숙하지 않은 주니어라면 변수명 짓는게 힘들 수 있어요 ㅠㅠ 모 대기업은 테이블명을 포켓몬 이름으로 짓는 경우도 있어서 본인 마음대로 지어도 상관은 없지만 둘 이상 운영하게 될 서비스라면 범용적인 변수명을 사용하게는 좋으니 변수명이 짓기 힘들다면 아래 싸이트를 이용해보세요 https://www.curioustore.com/#!/ Curioustore 변수명 짓기, 컬럼명 짓기, 영어약자, 変数名 つけ方, カラム名建てる, 英語の略語, 命名变量, 命名该列, 英文缩写 www.curioustore.com 아래와 같이 검색어를 입력 후 검색만 누르면 카멜과 스네이크 표기법 형태로 변수명을 제안해줍니다 너무 고민하지 말고 딱 선택해서 설계 및 개발 시간을 줄여보세요~! Intellij 사용자라면 최.. 2024. 3. 20.
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.