새로 나온 리액트의 공식문서에서 따르면, 이제 리액트 프로젝트를 생성할 때 CRA의 사용을 지양한다. 따라서 next.js 또는 Remix, Gatsby와 같은 프레임워크와 함께 만들거나 Vite로 만들 것을 권장한다. 프로젝트 생성 npm create vite@latest yarn create vite npm 또는 yarn 중에서 선택해서 입력한다. 터미널에서 위의 명령어를 실행하면, 설정할 프로젝트 네임을 입력할 수 있다. 프레임워크 선택 React, Vue, Svelte 등 사용할 프레임워크를 선택한다. 언어 선택 타입스크립트 or 자바스크립트 선택 가능하며 SWC 빌드 툴도 선택할 수 있다. 생성 완료 생성이 완료되었다. npm install을 하면 node_modules 파일이 생긴다. npm..

mongoose 데이터베이스 연결하려고 nodemon 통해서 명령어 실행하니까 오류가 발생했다. 스택오버플로우에서 한 사용자가 작성해준대로 해봤더니 잘 해결이 되었다! pkFactory: db.options?.pkFactory ?? utils_1.DEFAULT_PK_FACTORY, SyntaxError: Invalid or unexpected token at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) Node.js v18.14.2 [nodemon] app crashed - waiting for file changes before starting... 해결 방법 방법은 mongoose의 버전을 낮추는 것이다. 현재 7버전이었는데 6..

맥 터미널을 사용할 때, 유용한 플러그인으로 자동 완성이 되는 zsh-autosuggestions가 있다. 다른 블로그 글을 보고 설치를 했는데 적용이 안되었어서 다시 찾아보고 해결하였다. 플러그인 설치 iterm2에 아래의 코드를 입력하여 플러그인을 설치한다. git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions .zshrc 수정 먼저 .zshrc 파일을 열어준다. open ~/.zshrc 아래의 사진처럼 plugins를 검색하다 보면 plugins 입력하는 곳이 있다. 나는 git이 입력되어 있었어서 plugins=(git zsh-auto..

원티드에서 진행하는 프리온보딩 프론트엔드 챌린지에 참가하였다! 사전 미션은 3월 말에 완료했으며 앞으로 2주 동안 기술 역량 향상의 시간을 갖는다! 전반적인 React의 개념을 훑기 때문에 개념 정리 + 현업 시니어 개발자의 시야를 알 수 있을 것 같아 기대가 되었다. 어제 3시간동안 온라인 교육을 진행하였고 리액트 개념부터 소소하지만 웃긴 QnA까지 즐거웠다!

background와 background-color의 정확한 차이를 알아보겠다. 평소에 background와 background-color에 대해 별생각 없이 사용을 했었는데 어떤 상황에 더 맞게 써야 하는지에 대해 의문이 들었다. 자세히 알아보자. TL;DR background-color는 오직 배경의 색상만 다루고, background는 색상 외의 배경의 다양한 옵션을 설정할 수 있다. background-color는 background의 하위 속성이다. background-color color가 속성명에 담긴 것처럼 배경 요소의 색상을 지정한다. background-color: white; background-color: rgba(117, 190, 218, 0.5); background color ..

Mac 사고나서 처음으로 global로 npm 모듈을 설치하려고 하니 permission 에러가 발생했다. 기본적으로 모듈을 설치할 때에는 문제가 없었지만 글로벌로 설치하려고 하니까 문제가 생겼다. npm의 디렉터리 확인 npm의 기본 디렉터리를 먼저 확인한다. 대부분 /usr/local 로 나올 것이다. npm config get prefix 디렉터리 owner 변경 디렉터리의 오너를 현재 사용자로 변경해 주면 된다. 하위 폴더의 권한도 모두 변경된다. sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} whoami는 사용자의 계정 정보를 자동으로 치환해준다고 한다. 다시 터미널에서 npm global로 시도해 보면..

정규식에 사용할 패턴이 변할 가능성이 있거나, 외부에서 패턴을 가져오는 경우 변수를 사용해야 한다. 변수를 활용하기 위해서는 RegExp 객체의 생성자 함수를 사용해서 정규식을 생성할 수 있다. 기본 사용법 pattern 변수를 먼저 생성한 다음, 정규식 생성자 함수에 값을 넣어준다. 생성자 함수의 경우 빗금(/ /)이 아닌 따옴표("")를 사용한다. const str = "abcdef"; const pattern = "abc"; const regex = new RegExp(pattern); str.match(regex); // true 추가 활용 const pattern = "abc"; const regex1 = new RegExp(pattern, "g"); // 플래그 추가 const regex2 =..

3월 16일, 리액트의 새로운 공식문서가 출시되었다! 그동안 베타로 제공되었던 문서가 드디어 완료되었다. 이제 리액트 공식문서는 기존의 https://legacy.reactjs.org/ 에서 https://react.dev/ 로 변경되었다. 오 링크를 가져오고 보니 기존 공식문서 url에 legacy가 추가되었..다! 레거시가 되었다 - 기존의 공식문서에서 내용적으로도 구성적으로도 많이 변화가 생겼다. challenge처럼 각각의 챕터를 이해할 수 있는 테스트가 생겼고 내용의 이해를 돕기 위한 그림들도 추가되었다.

데이터 타입 자바스크립트의 모든 값은 데이터 타입을 지니며, 7개의 데이터 타입이 존재한다. 모두 원시 타입과 객체 타입으로 나누어진다. 데이터 타입이 필요한 이유는 값 저장 시, 확보할 메모리 공간의 크기 결정 값 참조 시, 한 번에 읽어 들일 메모리 공간의 크기 결정 메모리의 2진수를 어떻게 해석할지를 결정 이다. 자바스크립트는 자바, C와 같은 정적 타입 언어와 다르게 동적 타입 언어이다. 따라서 값을 할당하는 "시점"에 변수의 타입이 동적으로 결정된다. 또한 추후에 원하는 타입으로 자유롭게 변경 가능하다. (재할당) 변수는 타입을 갖지 않으며, 값이 타입을 갖는다. 값에 의해 변수의 타입이 동적으로 결정된다고 할 수 있다! 오늘은 데이터 타입 중에서 원시 타입을 알아보겠다. 원시 타입 (primi..