🎃 HTML 태그를 지우고 내부 값을 가져올 때 이런 html 코드가 문자열로 존재할 때, div 내부의 값(text: LIKE LION BABE) 만 가져오는 방법이 있다. const html = ' LIKE LION BABE ' 바로 정규표현식을 이용한 접근이다. const removeHtml = (html) => { html = html.replace(/ /ig, "\n"); // 태그 제거 html = html.replace(/]*)?(\s)*(\/)?>/ig, ""); // 태그 자체를 없앤다 by replace() } 두번째 정규 표현식을 그림으로 풀어 해석해보았다. 이건 정규표현식 공부하면서 정리한 내용. 그저께 코딩테스트에서 정규표현식을 사용해야 할 것 같은 문제를 만났다. 정규 표현식은 ..

🌿 여러 개의 Query String Parameter 를 전달하는 방법 아래 처럼 query string parameter 를 이용하여 api 요청을 하고 있었다. const response = await fetch(`/v1/search/book?query=${query}`) 처음엔 {query} 파라미터 만 필요했으나, 추가적으로 {display} 파라미터 도 필요했다. 미세먼지 같은 시행착오가 있었는데, 첫 번째 파라미터를 사용할 때 물음표(?) 가 삽입 됐기에, 두 번째 파라미터 에도 물음표가 필요하다고 생각했다 (오답). // Bad request const response = await fetch(`/v1/search/book?query=${query}?display={display}`) //..

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": ..