본문 바로가기

전체 글

ESLint에 대해서 알아가기 ESLint 설정에 대해 알아가기 ESLint에 대해서 알아가면서, 설정에 대한 좋은 글이 있어서 참고 및 정리 해놓을려고 한다. 항상 설정에 대해서는 카피를 해서 사용만 해봤지, 해당 설정에 대해서는 무지 했던거 같다. 이번에 EsLint설정에 대해서 파해쳐 볼려고 한다. 아래 글을 참고해서 적을려고 한다. https://www.daleseo.com/eslint-config/ ESLint 상세 설정 가이드 Engineering Blog by Dale Seo www.daleseo.com 설정 파일 형식 ESLint는 JSON, YAML, JavaScript와 같이 다양한 형식의 설정 파일을 지원한다고 한다. 설정 파일의 이름은 항상.eslintrc 가 되야하며, 원하는 포맷에 따른 확장자를 사용해야합니다.. 더보기
Nextjs 카카오 소셜 로그인(REST API 방식) 개요 이번 프로젝트를 진행하면서, 내가 해보고 싶었던 기능은 소셜 로그인 기능이다. 소셜로그인을 사용하게 된다면, 다양한 방법이 있는데 나는 2가지 방식을 비교해봤다. REST API 방식 vs Javascript SDK 방식( 소프트웨어 개발 키트) REST API 방식 서버 측에서 소셜 로그인 업체의 서버와 직접 통신합니다. 사용자 인증 후, 엑세스 토큰 및 필요한 사용자 정보를 서버에서 처리하고 저장합니다. 백엔드 언어와 프레임워크에 관계없이 사용할 수 있습니다. 프론트엔드에서 백엔드로의 추가 요청을 줄일 수 있습니다. 서버-서버 간의 통신은 클라이언트 측에서 통신보다 일반적으로 보안이 더 강력합니다. Javascript 방식 클라이언트 측에서 소셜 로그인 업체의 서버와 직접 통신합니다. 사용자 인.. 더보기
Environment Variables (.env 공식문서 번역하기) Environment Variables Next.js는 환경 변수에 대한 기본 제공 지원을 제공하므로 다음을 수행할 수 있습니다. .env.local 환경변수를 로드하는 데 사용 Next.js에서 사용하는 환경 변수를 브라우저에서 사용하고 싶을 때, 해당 환경 변수의 이름에 NEXT_PUBLIC_ 이라는 접두사를 붙여 사용 가능 환경 변수 로드 Next.js는 기본적으로 process.env에서 .env.local 파일로부터 환경 변수를 불러오는 기능을 지원합니다. .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword Next.js는 자동으로 process.env에 .env.local 파일의 환경 변수를 가져옵니다. 이렇게하면 Next.js의 데.. 더보기
React Hook과 Closure의 관계(feat. useState) Nextjs에서 timer를 만들다가 고민에 빠진 내용에 대해서 기록하고 싶어서 글을 쓰고 있다. React hook을 정말 많이 사용했고, 지금 timer만들때도 사용했지만, 정작 이 훅들이 어떻게 동작하는지에 대해서는 생각하지 못했었던거 같다. timer를 만들면서 useState에 클로저란 개념이 적용되어 있다는 것을 알게 되었고 그 내용을 천천히 적어보려한다. Closures 란? 여러 사이트에서 Clsoure란 개념이 존재하지만 가장 명확하게 정리한 개념을 적어놨다. “[Closure] makes it possible for a function to have “private” variables.” -W3Schools 클로저 덕분에 함수가 개인 변수를 가질 수 있게 되었습니다. let foo = .. 더보기
nextjs에서 vanilla-extract 사용 시, 'mini-css-extract-plugin' plugin 에러 처리에 대한 기록 Nextjs 설치부터 환경 세팅까지 Nextjs에서 css로 vanilla-extact을 사용하려 했다. 설치부터 언제 문제가 생겼는지를 기록하려고 한다. Nextjs 설치 npx create-next-app@latest 터미널에 다음과 같이 입력을 위하면, 위와같은 이미지로 내가 원하는 설정을 할 수 있다. 나는 다음과 같이 작업을 진행했다. 폴더 경로 바꿔주기 src라는 폴더를 사용할 예정이기 때문에, 기존 src/app 폴더를 지우고 pages안에 다음과같이 만들 예정이다. _App 페이지 _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페어지에 적용할 공통 레이아웃의 역할을 합니다. 주요 사용 목적으로는 모든 컴포넌트에 공통으로 적용할 속성을 관리합니다. import { Ap.. 더보기
재귀함수(capitalizeFirst) 문제 capitalizeFirst 라는 재귀 함수를 작성하십시오 . 문자열 배열이 주어지면 배열에 있는 각 문자열의 첫 글자를 대문자로 표시합니다. 접근 방식 배열안에 각각의 string 중에서 첫번째 문자열을 추출한다. 추출한 문자열을 대문자로 바꿔야 하는데 toUpperCase() 메서드를 이용해서 대문자로 변경할 것이다. 나머지 문자열은 substr()메서드를 이용해서 받아올 예정이다. 반복되는 과정은 재귀함수로 나타낼건데, 말로는 표현이 어려워 그림으로 표현할 예정이다. 다음과같이 함수가 실행될 때마다, array의 길이가 줄어들고 마지막 array에서 array.length 가 1이되면서 값이 return 된다. 리턴이 되면서, 2번함수 내에서 res가 return 값을 받아서 string 값을.. 더보기
재귀함수 (flatten) 재귀함수를 풀면서 가장 인상깊었던 문제를 공유하려고 한다. flatten 배열의 배열을 받아들이고 모든 값이 평평한 새 배열을 반환하는 문제이다. 입력 예시 flatten([1, 2, 3, [4, 5] ]) flatten([1, [2, [3, 4], [[5]]]]) flatten([[1],[2],[3]]) flatten([[[[1], [[[2]]], [[[[[[[3]]]]]]]]]]) 출력 예시 [1, 2, 3, 4, 5] [1, 2, 3, 4, 5] [1,2,3] [1,2,3] 문제 접근 방식 입력 받은 Array에서 배열과 배열이 아닌 값을 구분지어야한다. Array.isArray()라는 메서드 안에 Array를 넣으면 해당 값이 Array인지 아닌지를 확인할 수 있다. 만약 Array라고 판단이 되.. 더보기
컴포넌트 상태 관리를 어떻게 할것인지에 대해서 (전역관리) 기능 구현 평수, 주거형태, 스타일을 Select로 선택할 수 있어야 한다. 사진을 가져올 수 있어야한다. 공간 선택 Select을 선택할 수 있어야한다. 내용설명란을 만들어야한다. 태그를 쓸 수 있어야한다. 2~5번까지의 기능을 사진을 넣을 때마다 때로 구분을 지어주어야 한다. 구조의 복잡성 사진 올리기, 공간 선택, 내용입력, 키워드 정보를 하나의 세트로 운영해야된다. 그리고 추가하기 버튼을 클릭하면 해당 내용에 대해 새롭게 추가되고 기존 기능들이 다시 적용되어야했다. 처음에는 props를 이용해서 데이터를 각각 컴포넌트에서 가져오도록 했는데, 이렇게 진행을 하니 코드의 복잡성이 증가하고 가독성 또한 좋지 않았다. 내가 만든 코드인데도 해석하기 어려울 정도??? 처음 구성은 useState를 객체를 .. 더보기

티스토리툴바