![]()
react-snowfall 라이브러리를 사용하던 도중 다음과 같은 오류가 발생했다. 해결 방법으로 useLayoutEffect가 클라이언트 사이드에서만 독점적으로 렌더링되어야 한다는 부분이 언급된 걸 보면, Next.js의 서버 사이드 렌더링 방식으로 인해 오류가 발생된 듯하다. Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayo..
![]()
Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information. 해당 오류를 해결하기 위해 컴포넌트에서 key 속성을 제거하면 된다. key는 React에서 리스트를 렌더링할 때 각각의 요소를 구분하기 위해 필요하지만, DOM 요소에는 필요하지 않다.
![]()
데스크톱에서는 잘 실행되던 localhost가 노트북에서는 실행되지 않았다. VSCode 터미널에 포트를 강제 종료하는 명령어를 입력하자 localhost가 정상적으로 실행되기 시작했다. // 사용 중인 포트 찾기 lsof -i :포트번호 // 실행 결과 lsof -i :8000 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME Google xx2 yooil 29u IPv4 0x5xxfc28bxxc6xxdx 0t0 TCP localhost:50022->localhost:irdmi (ESTABLISHED) // 포트 강제 종료 명령어 kill -9 PID
![]()
일반 ⇧⌘N : 새 창 열기 ⌘W : 에디터 닫기 ⌘B : 사이드바 토글 ⌘J : 하단 패널 토글 ⇧⌘P : 커맨드 팔레트 ⌘, : 설정 탭, 그룹 ⌃Tab : 탭 이동 ⌘K / ⌘W : 그룹 닫기 파일 관리 ⌘P : 빠른 열기, 파일로 이동 ⌥⌘S : 모두 저장 ⇧⌘T : 다시 열기 ⌘K / ⌘P : 파일 패스 복사 ⌘K / ⌘R : Finder에서 파일 위치 열기 검색 ⌘F : 찾기 ⌥⌘F : 바꾸기 ⌘G : 다음 찾기 ⇧⌘G : 이전 찾기 ⌥Enter : 일치하는 모든 단어 선택 ⇧⌘F : 검색 ⇧⌘H : 전체 검색 ⌘P : 파일 검색 ⇧F12 : 참조하는 곳 네비게이션 ⌃G : 지정한 라인으로 이동 ⇧⌘M : 문제 표시 F8 / ⇧F8 : 다음, 이전 문제로 이동 ⌃- / ⌃⇧- : 이전 위치, ..
![]()
여러 가지 프로젝트를 동시에 진행하면 각기 다른 노드 버전을 사용한다. 이때 노드 버전에 따라 호환되지 않는 패키지가 발생하는데, NVM(Node Version Manager)을 통해 노드 버전을 관리하면 편하다. NVM은 Node.js의 다양한 버전을 관리하는 역할을 한다. 특히 몇 개의 프로젝트에서 노드 버전을 번갈아 사용하고 싶을 때 유용하다. 참고로 파이썬의 Conda와 기능적으로 유사하다. // homebrew로 설치 brew install nvm // 버전 확인 nvm --version // 버전이 나오지 않을 때 환경변수에 등록 // bash 사용시 vim ~/.bash_profile // zsh 사용시 vim ~/.zshrc // 다음을 등록 후 버전 확인할 것 export NVM_DIR=..
![]()
React란 무엇이고 장점은? 그리고 컴포넌트란? React는 UI를 구축을 위한 JavaScript 기반의 프론트엔드 라이브러리이다. 주로 SPA를 만들 때 사용된다. React는 virtual DOM을 사용해 앱 성능을 향상하고, CSR이 가능하다. 또한 다른 프레임워크와 함께 사용할 수 있으며, 컴포넌트 가독성이 높고 유지보수가 쉽다. 여기에서 컴포넌트란 레고 블록과 같이 작은 단위를 의미하고, React는 컴포넌트를 조립하듯이 개발한다. 컴포넌트는 캡슐화, 확장성, 결합성, 재사용성과 같은 장점을 갖고 있다. React Router와 같은 CSR이란? CSR이란 웹 페이지의 렌더링이 클라이언트, 즉 브라우저에서 일어나는 것을 의미한다. 서버와 클라이언트 간 데이터 트래픽이 감소하고 렌더링이 한 번..
![]()
attribute와 property의 차이점은? attribute는 HTML 요소의 추가적인 정보를 전달하고, 이름=“값” 이렇게 쌍으로 온다. 예를 들어 를 보면 div 태그가 class 라는 값이 ‘my-class’인 attribute를 가지고 있다. property는 attribute에 대한 HTML DOM tree 안에서의 표현이다. 따라서 다음 예시에서 attribute는 값이 ‘my-class’이며 이름이 ‘className’인 property를 가진다. Our DIV node |- nodename = "DIV" |- className = "my-class" |- style |- . . . |- . . . attribute는 HTML 텍스트 문서에, property는 HTML DOM tree에..
![]()
화살표 함수와 일반 함수의 차이점은? 화살표 함수는 일반 함수보다 함수를 간단히 표현할 수 있는 ES6 문법이다. 그런데 일반 함수는 this가 동적으로 바인딩되는 반면, 화살표 함수는 this에 대한 바인딩이 없다. 또한 화살표 함수는 프로토타입 프로퍼티를 갖고 있지 않아 생성자나 메서드로 사용할 수 없다. 그리고 일반 함수에서는 코드가 실행될 때 암묵적으로 arguments 객체가 전달되어 사용 가능하지만, 화살표 함수에서는 arguments 객체가 전달되지 않는다. 객체 프로토타입으로 메서드를 선언할 때 화살표 함수는 부적합하다. 생활코딩, JavaScript : this (2/5) : 메소드와 this 드림코딩, 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론..
![]()
props와 state란? (필수) props와 state는 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있다. 그러나 props는 함수의 매개변수처럼 컴포넌트에 전달되는 반면, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다. 한편 setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다. setState()를 사용해 state 값을 업데이트하면 자동으로 리렌더링되지만, setState()의 비동기적 특징을 주의해서 사용해야 한다. setState()가 있을 경우, React는 다른 state 변경까지 한꺼번에 통합해 React 자신이 판단하기에 가장 적절한 시기에 DOM을 ..
![]()
JavaScript ES6-11 최신 문법 공부하기 Shorthand property names Destructuring assignment Spread syntax (...) Default parameters Conditional (ternary) operator Template literals Optional chaining (?.) Nullish coalescing operator (??) 드림코딩, 자바스크립트 최신 문법 (ES6, ES11) | 모르면 후회 하는 최신 문법과 사용법 정리 🐶 DOM과 virtual DOM이란? (어려움) DOM(Document Object Model)은 HTML 및 XML 문서의 프로그래밍 인터페이스를 말한다. HTML은 브라우저에서 실행될 수 있게 DOM tre..
![]()
CSS Flexbox란? CSS Flexbox란 기존 콘텐츠를 수직/수평 배치할 때, float나 inline-block으로 마크업할 때의 불편함을 쉽게 해결할 수 있게 추가된 기능이다. 다양한 디바이스 환경에서 언제나 같은 레이아웃을 유지시켜 반응형 웹사이트 제작에 유용하게 쓰인다. Flex는 콘텐츠를 감싸는 상위 부모 요소인 flex container와 각각의 콘텐츠들인 자식 요소 flex Item으로 구성되어 있다. CSS Flexbox를 적용하는 방법은 부모 요소인 container에 display:flex를 선언하면 된다. flex container에는 전체적인 정렬과 관련된 속성인 display, flex-direction, align-items, flex-wrap 등을 정의하고, 자식 요소인..
![]()
브라우저의 동작 순서는? (어려움) 사용자가 브라우저를 통해 웹 사이트에 접속하면 브라우저는 DNS를 통해 웹 서버의 IP 주소를 파악한다. 브라우저는 이렇게 파악한 IP 주소에 있는 서버와 3 Way Handshake를 완료하고 서버에 데이터를 요청하는 HTTP Request를 한다. 그리고 서버로부터 데이터를 받는데, 이를 HTTP Response라고 한다. 서버로부터 받은 데이터에 HTML을 파싱해 DOM tree를 만들다가 중간에 스타일 태그가 나오면 CSS를 파싱해 CSSOM tree를 생성한다. 파싱 중간에 스크립트 태그가 나오면 JavaScript 엔진에 권한을 넘겨 JavaScript 코드를 파싱해 AST를 생성 후 실행한다. 그리고 DOM tree와 CSSOM tree를 합쳐 Render..
![]()
로컬 스토리지와 세션 스토리지 로컬 스토리지와 세션 스토리지는 HTML5에서 새로 추가된 저장소이다. 간단한 키(key)와 값(value)을 저장할 수 있다. 키-값 스토리지의 형태이다. 로컬 스토리지와 세션 스토리지의 차이점 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 지속성이다. 로컬 스토리지의 데이터는 사용자가 임의로 지우지만 않으면 계속 브라우저에 남아 있다. 반면 세션 스토리지의 데이터는 브라우저 탭을 닫는 순간 삭제된다. 지속적으로 필요한 데이터(자동 로그인)는 로컬 스토리지에 저장하고, 일시적으로 필요한 정보(비로그인 장바구니)는 세션 스토리지에 저장하면 된다. 따라서 비밀번호 같은 개인 정보는 세션 스토리지에 저장하면 안 된다. 클라이언트에 저장하는 방식이므로 정보 유출 위험이 있기 ..
![]()
에러 코드 인프런 강의 듣던 도중 다음 오류가 발생했다. 이 부분만 긁어서 구글링했더니 패키지 재설치, 노드 버전 교체 같은 방식으로 해결했다는 글이 많이 보였다. 하지만 내 경우엔 아무리 비슷한 해결법을 사용해봐도 좀처럼 해결되지 않았다. 해결 방법 친구의 도움으로 에러 코드를 좀더 넓게 살폈다. 그러자 문제의 근원으로 보이는 위와 같은 부분을 발견했다. 대충 직역하면 MongoDB 서버로 연동되는 코드인 'Schema'가 중복 선언되었다는 뜻이다. Product.js 파일에 있던 해당 코드를 찾았다. 그리고 이 코드(파란색 박스)를 삭제한 뒤 다시 터미널에서 npm run dev 명령어를 입력하자 오류가 해결되어 작업하고 있던 웹사이트에 잘 접속되었고, 터미널 창에서도 MongoDB에 연결되었다는 메..
![]()
에러 코드 리액트 앱 설치 중 다음과 같은 오류가 발생했다. 터미널에서 제안한 방법을 적용해 봐도 해결되지 않았다. 해결 방법 create-react-app 뒤에 @latest를 붙여서 다시 설치했다. npx create-react-app@latest ./
![]()
에러 코드 git pull 시도 중 다음과 같은 오류가 발생했다. 원인은 git pull을 통해 가져오려는 코드와 현재 로컬 컴퓨터의 코드가 서로 충돌하고 있기 때문이었다. 해결 방법 다음 명령어를 통해 git stash를 시도했다. stash란 사전적 의미로 뭔가를 안전한 곳에 숨기는 것이다. git stash는 기능적인 측면에서 로컬 컴퓨터의 변경 사항을 임시로 저장해준다. git stash && git pull origin master && git stash pop git stash 이후 다시 git pull을 시도하자 파일과 코드 들이 정상적으로 병합되었다.
![]()
VS Code에서 작업 도중 갑자기 탭이 하나만 켜지는 경우가 생길 때가 종종 있다. 일반적으로는 위 단축키를 입력하면 쉽게 해결된다. 이 방법이 안 먹힌다면 다음 사진 참고. cmd + ctrl + w Settings(Cmd + , )로 이동한 뒤 검색창에 'Enable Preview'를 입력한다. 그리고 'Workbench > Editor: Enable Preview'의 체크된 부분을 해제한다. 파일 프리뷰 모드를 끄는 것이다. 문제가 해결되어 이제 여러 개의 탭이 동시에 열린다.
![]()
스네이크 표기법(Snake Case) 띄어쓰기를 언더바(_)로 표기한다. number_of_donuts = 34 fave_phrase = "Hello World" 케밥 표기법(Kebab Case) 띄어쓰기를 대시(-)로 표기한다. number-of-donuts = 34 fave-phrase = "Hello World" 카멜 표기법(Camel Case) 첫 번째 단어는 소문자로, 두 번째 단어부터 첫 글자를 대문자로 표기한다. numberOfDonuts = 34 favePhrase = "Hello World" 파스칼 표기법(Pascal Case) 첫 번째 단어부터 첫 글자를 대문자로 표기한다. NumberOfDonuts = 34 FavePhrase = "Hello World"
![]()
에러 코드 npm run start 명령어 실행 중 다음과 같은 오류 발생했다. 해결 방법 App.js 폴더에 React를 임포트했다. import React from 'react';
![]()
에러 코드 라이브러리를 설치하던 도중 치명적인 결함이 생겨 node 및 npm 전체를 삭제하고 다시 설치했다. 삭제와 설치까지는 정상적으로 진행되었는데 brew link node 명령어를 실행하던 도중 다음과 같은 오류가 발생했다. 해결 방법 구글링 결과 이 명령어를 써보라는 의견이 많았지만 내 경우에는 이 방법이 통하지 않았다. sudo chown -R [사용자명] /usr/local/share/doc/node/ 다시 한번 검색한 결과 다음 명령어를 발견해 터미널에 입력했다. 그러자 노드 링크에 성공했다. sudo chown -R $(whoami) $(brew --prefix)/*
