개발자 도담씨

최근 기초의 심화 과정이라고 해야할까... 읽고 까먹고 읽고 까먹고 했던 부분을 상기시키는 시간을 가지고 있다. 기초가 제일 어려워 🫨 Javascript의 데이터 타입에 대해 정리하려고 한다. 단순히 string, number, array 하나씩 이건 이겁니다 하는것은 아니고 크게 Primitive Type(원시타입)과 Reference Type(참조타입)에 대해 보려고한다. Primitive Type :: Null, Undefined, Number, String, Boolean, Symbol, BigInt ... Reference Type :: Object, Array, Function ... Primitive Type의 변수는 크기가고정되어 있기때문에 스택 메모리에 저장되게 된다. 아래와 같은 코드..

:: 설치 환경 yarn berry next.js vscode typescript 강의들으면서 따라하는데 강의는 npm을 사용했고 나는 이제 yarn berry에 익숙해져 보려고 혼자 yarn berry로 셋팅했다. 그런데 자동으로 import가 안된다. ( 필자는 vscode 사용중, 패키지 찾는거 조차 못함 바보 쨔석..! ) @type/react를 설치해봐라 tsconfig.json 파일을 수정해보라는 답변들은 다 소용없었다!! 확인해보니 기존 node_modules에서 패키지를 읽어오는 방식과 달리 yarn berry에서는 PnP 방식에 zip 아카이브를 사용하고 있어서 vscode가 못 불러오는 듯 하다. 그래서 별도의 확장 프로그램 설치 및 에디터 설정이 필요했다. vscode extensio..

Next.js 버전 14를 다시 공부하려고 설치를 하려던 도중 강의는 npm을 이용했지만 이제 yarn berry를 이용해보고 싶은 마음에 개인적으로 yarn berry로 셋팅을 했는데...또 나망 앙댕..😩 package.json은 아래와 같았다. { "name": "next14-example", "packageManager": "yarn@4.1.0", "scripts": { "dev": "next dev" }, "dependencies": { "next": "^14.1.0", "react": "^18.2.0", "react-dom": "^18.2.0" } } 여기서 yarn dev를 실행 했는데 아래와 같은 에러가 발생했다! 음...🤔 읽어보면 보자... 3000번 포트가 사용중이라 3001번이 사용..

이전에 npm과 yarn 중에 고민할때 대충 아아 음~ 그렇지 하고 넘겼다가 이제서야 기술 블로그에서 상세하게 설명한 글을 보고 머리를 한대 맞았다 🥺 패키지 관리 도구로 대표적으로 npm과 yarn이 있는데 그중에서도 최근 많이 사용중인 yarn berry 버전이 npm과 비교했을때 어떤 이점이 있는지 왜 인기가 많은지 알아보려고한다. 🤔 npm의 문제점 비효율적인 의존성 검색 npm은 node_modules 폴더를 통해 파일 시스템을 이용하는데, node.js에서 제공하는 require.resolve.paths() 함수를 통해 react를 require했을 때 react를 찾기위해 어떤 폴더를 확인하는지 봤다. $ node Welcome to Node.js v20.5.1. Type ".help" fo..

오늘도 어김없이 오는 에러 로그 어서오고..😩 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. const [list, setList] = useState(); useEffect(() => { setList(data); }, [data]); useEffect 함수내에서 setState를 사용했고 해당 부분때문에 발생한 무한 루프 현상이다. useEffect는 컴포넌트가 랜더링 될 ..

현재 운영중인 어드민의 로그인 시스템이 엉망이라 리뉴얼을 진행중인데, 역시 가장 손이 많이 가는 계정 관리 그리고 로그인쪽이다. 우리도 이제 세션이 아닌 jwt토큰을 사용하기로 했다. 더보기 - 라고 글쓰면서 우린 어드민이라 사용자가 많은 것도 아니고 서버 확장도 이루어 지지 않을 것 같은데.. 그럼 보안이 더 나은 session이 좋지 않나? 우선 많이 사용하는 JWT로 정해졌으니 ... 1. 로그인 2. 백엔드에서 토큰값과 리프레시 토큰값 반환 3. 로컬스토리지 또는 쿠키에 토큰 값 저장 4. 백엔드 API 호출 시 헤더에 토큰과 함께 요청 5. 만약 토큰이 만료된 토큰이라면 리프레시 토큰으로 토큰 재발급 음..그리고 여기서 클라이언트에게 토큰을 저장 하니 보안이 신경 안쓰일 수가 없어졌다. 참고글을..

Home v6.14.2 동작 원리 브라우저를 켜서 처음 서버에 접속하면 routes컴포넌트의 지역 상태가 history.location 객체로 초기화. BrowserRouter가 props로 routes에게 history객체를 전달 Link 태그를 클릭하거나 , 브라우저 액션(앞,뒤로 가기 등) 을 수행 함으로 현재 url을 변경 가능. History 객체를 이용한 구독 매커니즘 때문에 routes 컴포넌트의 location 객체가 새로운 것으로 변경. 이로 인해 routes 컴포넌트가 리렌더링 되고 그 결과 RouterContext의 값이 새로 구성되면서, 트리의 하위에 존재하는 각종 라우팅 관련 컴포넌트들이 리렌더링. → 현재 URL에 맞는 UI 렌더링 컴포넌트는 현재 URL과 path props 값..

회사 숙제로 노드로 백엔드 구성하기를 받았는데~ 원랜 Express를 사용할 것 같아 Express로 했는데 자유롭게 구성해도 된다기에 개인프로젝트에서 항상 사용하던 Nest.js + TypeORM으로 해보려한다. (GraphQL)까지 할까? . . 우선 왜 Nest.js를 선택했는지! 사실 나는 거창한 이유없이.. 프레임 워크를 선택하는 이유는 ‘편하니까’라고 생각한다. 프로젝트 협업 시 통일된 코드로 개발하기 쉽고 (프레임 워크 특징 이겠지만😅) 다른 사람 코드를 분석 하기에도 편할 수 있다. 개인적으로는 모듈단위로 관리 할 수 있는 점과 어노테이션(@)의 가독성으로 필자는 Nest.js를 좋아한다! (깔끔✨) 물론 말한 것 모두 express.js에서 구현 할 수 있다. 다만 하나하나 설정해줘야함!..

Nest.js Email 보내기를 시도하다가 난 오류를 정리해놓으려고 한다! 나는 env파일에 보내는(FROM) 메일 주소와 비밀번호를 바르게 입력해두었는데도 불구하고 'Username and Password not accepted' 라고 떴었다. 이 오류 문구가 상당히 짜증났었는데(추후 알게 됨!) 우선 2차 인증이 안되어 있는 경우 해당 오류가 발생한다. 구글 우측상단의 프로필을 눌러서 Google 계정 관리로 이동 👍 그리고 보안탭에서 2단계 인증을 눌러 추가해준다. . . . 그다음 메일 발송을 해보면 오류가 바뀌어있다. 'Application-specific password required' 앱 비밀번호가 필요하다는 말이다! 개인적으로 처음부터 해당 오류가 나왔으면.. 찾기 더 편하지 않았을까..

최근 업무를 하다가 인덱스의 중요성에 대해 한번 더 느낄 수 있는 상황이 오게 되어 메모해 놓으려고 한다. . . . 인덱스가 없는 경우 SELECT를 했을 때 해당 테이블의 레코드를 전부 읽어 찾게 되는 FULL SCAN이 발생된다. * FULL SACN 하드디스크에 저장되어있는 데이터들을 전부 탐색 만약 백만개의 데이터가 있는 테이블에서 값을 찾고 싶다면 우린 백만개의 데이터를 읽게 되는것이다! (이 얼마나 비효율적인 상황인지 😥) 그렇다면 해당 상황에서 검색되는 컬럼에 인덱스가 걸려 있다면 어떻게 되는지 알아보자. 여러 블로그를 읽어보니 대표적으로 B-TREE 구조 기반으로 다른 구조들도 비슷하여 대부분 B-TREE 구조를 다루고 있는 듯 하다. 해당 블로그에 너무 잘 정리 되어있어 링크로 대체하려..