본 포스팅은 자바스크립트를 어느정도 접해본 후 생길 수 있는 의문점을 심도있게 다루는 포스팅입니다. 주제는 아래와 같습니다. 자바스크립트 변수 타입에 따른 참조 방식 : 흔히 call by value, call by reference 라 알려진 개념 자바스크립트의 불변성 : 가변 객체와 불변 객체 undefined 와 null 차이 🗓 자바스크립트의 변수 타입 자바스크립트의 데이터 타입은 크게 기본형(primitive type) 과 참조형(reference type) 두 가지로 분류할 수 있습니다. 기본형(문자형, 숫자형, 불린 값 등) 과 참조형(배열, 날짜, 함수 등)을 분리하는 기준은 데이터의 저장 방식입니다. 기본형과 참조형의 식별자에 데이터를 할당할 때, 기본형은 메모리상에 고정된 크기로 저장된..

2021년 8월 13일 부로 깃헙의 모든 operation/action(?) 에 개인 token을 입력해야 합니다. remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. 저는 git push 를 할 때, 이런 에러 메시지를 받았는데, 개인 토큰을 발급 받은 후에도 어디에다 개인 토큰을 입력해야 할지 몰라 한참 해멨습니다. 1. github의 개인 settings 페이지로 갑니다. 2. Developer Settings, click 3. personal access tokens 탭을 클릭 후 generate new token 을 클릭합니다. 4. ..

✅ Scope Status Invalid: Authentication failed ( error code 024 ) 네이버 (책) 검색 API 를 사용하고자, api 테스트 도구를 사용했습니다. (Postman 과 비슷한 api 테스트 도구로, Insomnia 를 사용중입니다) 적절한 query, Header 값을 넣고 GET method 로 api를 호출했지만, Scope Status Invalid ( error code 024 ) 에러가 발생했습니다. 검색api 이므로, query 값에 검색어를 입력해야 합니다. query 누락시엔 Bad Request 400 에러가 발생합니다. Header 에는 X-Naver-Client-Id 와 X-Naver-Client-Secret 두 값을 필수적으로 넣어줘야 ..

🌀 If 문을 간결하게 만들려다, Null 병합 연산자 까지 왔다! if 문을 간결하게 표현하기 위해 삼항 연산자를 사용했다. ES2020 에서 추가된 Null 병합 연산자를 통해 삼항 연산자의 길이마저 줄일 수 있었다. 이 과정에서 내가 잘못 생각한 부분을 기록해본다. const header = { ..., 'id': request.headers['id'] ? request.headers['id'] : null } header 객체 내부 id 프로퍼티를 할당하는 과정을 보자. request.headers['id'] 가 존재한다면, 그 자체를 할당하고, 그렇지 않으면 null 값을 할당한다. 이는 null 병합 연산자를 활용하면 코드를 더욱 간단하게 만들 수 있다. const header = { ...,..

상황 1 config 파일 설정 상황에서, 운영환경/개발환경 파일을 생성했다. 둘의 아이콘 형태가 다르긴 했지만, 문제되지 않을 것이라 생각했다. 상황 2 .development.env file의 REDIS_PORT 값을 출력하려할 때, 아래처럼 undefined 가 출력됐다. trouble shooting 과정 .development.env 파일이 아닌, production.env 파일을 사용하여 REDIS_PORT 값을 출력하자, 정상적으로 값이 출력됐다. 처음 두 .env 파일을 생성할 때, 아이콘 형태가 다른 점에서 파일자체에 문제가 있을것이라 생각했다. 실제로 .development.env 파일명을 다시 확인해보니, 아래 이미지처럼, 파일명 마지막에 한칸의 공백이 들어가있었다. 이때문에 파일명이..

🌀 깃 클론으로는 브랜치까지 클론할 수 없다! 원격 저장소에서 프로젝트를 클론할 때, 브랜치도 당연히 같이 클론 될 것이라 생각했다. 전혀 아니었다 &=^__^ 로컬에서 브랜치를 확인해보니, 달랑 마스터 브랜치 하나만 존재하는 것을 볼 수 있다. git fetch 명령어를 사용하면 브랜치까지 받아와 지지 않을까 생각했는제 오산이었다. ✅ 해결 우선 git branch -r 명령어로 원격의 브랜치명과 루트를 정확히 확인한다. 내가 checkout 하고자 한 브랜치명은 production으로, origin/production 디렉토리에 존재함을 확인했다. git checkout 명령어와 함께 -t 옵션과 디렉토리(origin/production) 까지 입력해주면, 1) 원격의 브랜치를 tracking하게 되..

본 포스팅은 아래의 질문에 대답할 수 있는 개념을 함양합니다. 🙋🏻‍♂️ Q. var 과 let 의 차이는 무엇인가? 😶 A. 스코프의 관점에서, var는 함수 레벨 스코프, let은 블럭 레벨 스코프다. 재선언의 관점에서, var 는 이미 선언한 변수를 재선언이 가능하지만, let은 재선언이 불가능하다. let은 재할당만 가능하다 (선언과 할당의 의미를 명확히 이해하자!) 🙋🏻‍♂️ Q. var 과 let 의 변수 생성 과정엔 어떤 차이가 있는가 😶 A. 변수 생성 과정에도 var / let 은 차이가 있다. 우선 변수는 선언 -> 초기화 -> 할당 의 과정을 거치며 생성되는데, var 은 선언과 초기화 과정이 동시에 이루어지고, let은 선언과 초기화 과정이 분리되어있다. 여기에 호이스팅 (hoist..

ToastUI 기술 블로그에 흥미로운 읽을거리가 많다. 그중에서 switch(true) 패턴에 관한 글이 흥미로워 회사 코드에 적용해보았다. 🌕 switch(true) 의 기본 원리 우선 switch(true) 패턴의 원리는, 기존 switch 문에 적용하던 값(value)을 표현식으로도 대체할 수 있다. 여기서 표현식이란 boolean 값을 리턴하는 식을 의미한다. 🌿 기본 switch(Value) 패턴 기존 switch문 인자의 Value는 특정한 값(value) 를 의미한다. Value 변수가 어떤 값을 가지냐에 따라 해당 case 문을 실행한다. 쉽게 생각하여 Value 값이 case의 값과 일치하는 것을 찾는 과정이다,. // 기존 switch 문 switch (Value){ case "A": ..

〽️비동기 데이터 객체 프로퍼티 접근 비동기로 배열 데이터를 가져오면서 내부 프로퍼티에 접근할 때 에러가 발생했다. 아직 도착하지 않은 배열 데이터의 프로퍼티에 접근했기 때문에, 사용하고자 하는 프로퍼티가 해당 배열에 존재하지 않다는 에러였다. 대충 이런 코드였다. const countStat = result.map(it => { return { it.stat : 1 } }) result 배열은 api 호출의 결과를 뜻하는데, api가 호출되기전엔 undefined 가 된다. undefined 인 객체에 점 표기법으로 stat 을 찾으려 하니 당연히 에러가 발생할 수 밖에 없었다. 이 과정에서 dot notation과 bracket notation 이란 개념을 알게 됐고, 자바스크립트에서 객체에 접근하는..