개발새발로그

React.memo는 무엇일까? : 고차 컴포넌트(Higher Order Component)를 말하며 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용하는 작업을 수행하는 것 React.memo는 props의 변화에만 영향을 준다. 페이지의 Header를 components폴더에 분리하여 작성하였는데 의도와는 다르게 page가 서버와의 통신 작업을 수행하는 횟수만큼 Header를 불러오는 것을 발견했다. const Header = props => { const item = props.sharedItem console.log(item) return ( inthyes ) } export default Header 한 페이지에 접근하였는데 5번이나 헤더가 출력을 찍어낸다. 성능을 운운할 개발 단계가..

어떤 커밋 메세지가 좋은 커밋 메세지인가? 자아성찰을 해보자면 이제까지 형식 없이 내가 하고싶은 말들을 커밋 메세지로 올렸다. 이제부터 좋은 커밋메세지를 남겨보려고 한다..! 그럼 좋은 커밋 메세지란 무엇일까? 좋은 커밋 메세지의 형태 1. 제목과 본문을 빈 행으로 구분한다 2. 제목을 50글자 내로 제한 3. 제목 첫 글자는 대문자로 작성 4. 제목 끝에 마침표 넣지 않기 5. 제목은 명령문으로 사용하며 과거형을 사용하지 않는다 6. 본문의 각 행은 72글자 내로 제한 7. 어떻게 보다는 무엇과 왜를 설명한다 커밋 메세지의 구조 (): -- 헤더 -- 빈 줄 -- 본문 -- 빈 줄 -- 바닥 글 위와 같은 형태여야 하며 이 중 헤더는 필수이다. type은 아래의 내용 중 하나여야 한다. feat : 새..

undefined와 null은 다른 것일까? undefined는 변수에 값이 할당되지 않았음을 의미한다. null은 데이터의 값이 유효하지 않은 상태를 말하며 변수에 할당된 값이 유효하지 않음을 의미한다. 첫번째 예시로 inthyes라는 변수를 값없이 선언한 후 출력하면 아래와 같이 undefined가 뜬다. 할당되지 않음을 의미하는 것이다. var inthyes; console.log("undefined 출력",inthyes) 두번째 예시로 inthyes을 html에서 prompt로 입력받기로 하고 취소할 경우엔 null이 출력된다. 취소 버튼을 누른 후 [F12]버튼을 통해 웹 콘솔을 확인해보면 null이 출력된다. 두 예시와 같이 null과 undefined는 다르다. 이 차이를 알아야 개발시 nu..

내가 자꾸 까먹어서 적는 글.. 이렇게 적으면 부끄러워서라도 외우지 않을까?//... 사실 html을 자주 사용하진 않는다. 관련된 프레임워크를 사용할 뿐이지.. 그래서 html환경에서 기본 틀을 출력해주는 단축키를 자꾸 까먹는다. [! + tab]이다. 까먹지 좀 말자 너무 기본이라 그런지 구글링해도 잘 안나온다.(내가 못하는거긴 함)

자바스크립트에서 변수를 선언할 때 사용하는 명령어는 "var", "let", "const" 이렇게 세가지이다. 이 셋은 어떻게 다를까? 이 셋 중 var이 가장 먼저 생겨났다. var 이후에 두가지의 예약어가 더 추가로 생겨난 것에 대해 이해하기 위해서는 호이스팅과 재선언, 재할당에 대한 이해가 필요하다. 🔑var의 특징 호이스팅(hoisting) 끌어올린다라는 뜻으로 상황에 따라 변수의 선언과 할당을 분리하여 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것을 말한다. 호이스팅으로 인해 var예약어를 사용한 변수는 선언하기전에 사용하면 프로그램에서 오류가 발생될 수 있다. 재선언과 재할당 var을 사용한 변수는 재선언과 재할당이 가능하다. 변수의 재선언은 말 그대로 var을 사용한 선언 자체를 다시하는..

vscode로 주로 개발하는데 이 놈의 vscode에 설정이 잘못되어있는지 오른쪽 중괄호가 안눌린다. "}"이거, 키보드 문제인 줄 알았지만 vscode에서만 안열렸다.. 찾아보기 귀찮아서 그냥 이상태로 개발하려 했는데 오류도 많이 나서 심란한 김에 키보드부터 고치기로 했다. 처음에는 자동괄호 생성에 대한 설정이 잘못됐을거라고 생각해서 vscode [파일] -> [기본 설정] -> [설정]에 들어가서 "괄호"로 검색을 했다. ㅎㅎ 하나씩 기능 꺼봤는데 안됐다. .. ... 위 설정에 문제가 없다면 단축키 문제일 거라 확신하고 단축키를 찾아보니 shift + ] 에 키 바인딩이 걸려 있었다. 오른쪽 클릭하고 키 바인딩 변경으로 키바인딩 값을 변경한다. (삭제해도 되고) 변경 후에는 괄호가 잘 눌린다. 편-..

npm install만 했을 뿐인데 이런 에러가 난다..? err두번째 줄을 보면 바로 문제점을 찾을 수 있다. mkdir이 거부된 것인데 이는 권한 문제이다. 본인의 작업 환경에 대한 정확한 분석이 필요하다. 평상시 macOS를 사용하며 vscode에서 권한 문제에 대한 이슈를 한번도 안겪었는데 windows를 사용하면서부터 권한 문제에 관한 이슈들이 많아졌다. 사무실에서 쓰는 windows 데스크탑은 입사전부터 초기설정이 되어있어서 프로젝트를 수행할 때에는 windows 사용자를 새로 생성후에 사용중이다. 그래서.. 관리자로 vscode를 열지 않으면 이런 오류가 생긴다.

리액트로 정말 많은 것들을 모듈로 불러와서 사용하는 것이 가능하다. 오늘은 이 중에서 구글 GEO차트로 지도를 구현하는 것에 대해 적어보려고 한다. 지도는 기본적으로 전세계 지도로 구현된다. 이 외에도 특정 국가만 보이도록 구현하는 것이 가능하다. ISO 3166 전 세계의 나라와 부속 영토, 나라의 주요 구성 단위의 명칭에 고유 부호를 부여하는 국제 표준으로 세 가지 세부 표준으로 구성된다. ISO 3166-1은국가별 번호가 지정되어있다. https://namu.wiki/w/ISO%203166 ISO 3166 - 나무위키 ISO가 아닌 다른 단체나 개인이 추가 할당한 코드들. 예를 들면 다음과 같은 것들이 있다. 국가나 지역이 아닌 것도 있다. QZ: 유럽연합 식물품종청(Community Plant V..

문제상황 gatsby 템플릿 다운받은 후에 data-loader, gatsby-node.js 환경을 세팅한 상태로 프로젝트 수행 중[ERROR #11321]에러를 여러번 겪었는데 대다수가 오타로 인해 변수명 인식을 못하는 거였다. 아무리 오타를 찾아도 못찾아서 cache를 삭제해보거나 변수를 함수 내부에서 선언해보거나 등등.. 인터넷에 공유된 ERROR #11321에 관한 여러 시도를 해봤지만 성공하진 못했다.. createPages후크 함수를 처음 사용해보아서 당연히 변수명이 'createPages'일줄 알았는데 단수인 createPage가 옳다. 사용자 지정 변수가 아니기 때문에 무조건 형식에 맞게 사용해야한다. (당연한 소리다.) exports.createPages = async ({ actions..

개츠비란? 다양한 데이터 소스를 이용하여 정적 웹사이트를 빌드하는 리액트 기반 오픈 소스 프레임워크 리액트의 장점을 그대로 가져오면서 정적 웹 사이트를 쉽게 만들 수 있다. 개츠비의 장점 정적 웹페이지 방식을 사용하기 때문에 웹사이트 운영 비용이 저렴하고 페이지 로딩 속도가 빠르다 리액트를 이용하여 정적 웹페이지를 개발할 수 있어 개발 생산성이 좋다 개츠비의 단점 웹페이지의 콘텐츠 내용이 변경될 때마다 다시 빌드하여 배포해야 하는 번거로움이 존재 실시간으로 변경되는 데이터나, 게시판 같이 사용자들이 동적으로 만들어내는 콘텐츠를 보여주는 데 최적화되어 있지 않음 언제 사용하면 좋을까? 콘텐츠가 자주 변경되지 않으며 변경 사항을 실시간으로 반영하지 않는 정적 웹사이트 개발에 적합하다 상황에 따라 정적 웹페이..