어제보다 더 나은 오늘

요며칠 node.js와 함께 인증의 세계에 다녀왔다. 그러면서 .env 파일에 환경 변수를 설정해서 쓰는 법을 알게 되었다. 이번 포스팅의 주제는 아니지만 node.js에서는 dotenv 모듈을 사용하면 쉽게 처리할 수 있다. 1. .env 파일에 필요한 key를 다음과 같이 설정해준다. ACCESS_SECRET= YourSecretKeyForAccessToken REFRESH_SECRET= YourSecretKeyForRefreshToken 2. 환경 변수를 불러와야 하는 파일에서 dotenv 모듈을 불러온다. require("dotenv").config(); 3. .env 파일에 저장했던 환경 변수 앞에 process.env.를 붙여서 사용한다. const generateToken = (user, c..

Map 1. 특징 key-value 쌍을 저장할 수 있는 collection 자료의 연관성을 표현하기 위해 사용한다. key는 중복될 수 없다. 하나의 key에는 하나의 value만 가능하다. (value 값은 중복이 가능하다) map.set을 호출할 때마다 map 자신이 반환된다. 이를 이용해 map.set을 체이닝할 수 있다. map.set(key, value) 메소드를 통해 자료를 넣을 수도 있고, key, value 쌍으로 이루어진 요소로 구성된 이터러블을 생성자 함수의 인자로 전달할 수도 있다. // map.set 메소드 사용 const map = new Map(); map.set('key1', 'value1') map.set('key2', 'value2') // 생성자 함수에 이터러블을 인자로..

가격 정보 등 큰 숫자를 표시할 때 세 자리마다 쉼표를 넣어서 표기해주는 편이 단위를 파악하기 쉽다. 이때 쓸 수 있는 간단한 내장 메소드가 있는데 바로 toLocaleString()이다. 날짜 데이터에만 쓰는 줄 알았는데, 숫자에도 적용 가능하다. 단 숫자에 바로 적용하면 syntax error가 뜨기 때문에 숫자를 변수에 담아서 사용해야 한다. 메소드 이름에서 알 수 있듯이 쉼표가 찍힌 string을 반환한다. 쇼핑몰 상품 카드 등에서 가격을 표시하는 컴포넌트를 만들 때 다음과 같이 작성할 수 있다.

react CRA를 Mac 터미널에서 배포해보자. 1. 터미널에서 gh-pages 패키지 설치 npm i gh-pages 2. package.json 파일의 scripts에서 build 명령어 확인 npm run build를 실행하면 build 폴더가 생기고, 브라우저가 이해할 수 있도록 코드가 압축되고 최적화된 js 파일이 생성된다. 다음 단계에서 배포 전 build를 해줄 것이기 때문에 확인만 하고 터미널에 명령어를 실행하지는 않아도 된다. 3. package.json 파일 최하단에 다음의 코드 작성 "homepage": "https//.github.io/" 4. package.json 파일의 scripts에 다음의 코드 작성 "deploy": "gh-pages -d build", // (1) "pr..

props로 조건부 렌더링이 가능하다. 📍 검색 창 입력값 존재 여부에 따라 해당 요소의 border-radius 값을 다르게 주고 싶을 때: 1. 검색 창 입력값 존재 여부에 따라 ture, false를 가지는 hasText 라는 변수로 상태 관리를 해준다. 2. 컴포넌트에 hasText를 props로 내려보낸다. 3. 다음과 같이 border-radius 값을 조건부 렌더링으로 걸어준다. border-radius: ${(props) => props.hasText ? activeBorderRadius : inactiveBorderRadius}; 이렇게 하면 입력값이 있을 때, 즉 hasText가 true일 때 컴포넌트의 class명을 삼항연산자로 다르게 줘서 css 코드를 별도로 적어주는 것보다 더 간..

문제: 세로 길이 2, 가로 길이 n인 2 x n 보드가 있다. 2 x 1 크기의 타일을 가지고 이 보드를 채우는 모든 경우의 수를 리턴하시오. 입력: number 타입의 1 이상의 자연수 출력: number 타입 주의사항: 타일을 가로, 세로 어느 방향으로 놓아도 상관없다. 위의 타일링 문제를 작게 쪼개 보면 다음 그림과 같이 왼쪽 첫 시작을 세로로 타일 한 장을 놓을지, 가로로 타일 두 장을 놓을지에 따라 두 가지의 경우 밖에 나오지 않는다. 전자의 경우 그 다음은 가로가 n-1인 보드를 채우는 경우의 수가 되고, 후자의 경우 그 다음은 가로가 n-2인 보드를 채우는 경우의 수가 된다. 따라서 가로 길이가 n인 보드를 채우는 모든 경우의 수는 가로 길이가 n-1인 경우의 수와 가로 길이가 n-2인 경..

기존 배열은 건드리지 않은 채 배열의 어떤 값을 변경해서 새로운 배열로 반환하고 싶을 때 map 메소드를 자주 쓴다. React, Redux 등 데이터의 불변성(immutability)이 중요한 라이브러리에서 데이터를 다룰 때 자주 쓰는 메소드 중 하나이다. 다음과 같은 user 정보가 담긴 객체가 들어 있는 배열을 예로 들어보자. const users = [ { id: 1, name: "이정도", username: "jd1386", email: "lee.jungdo@gmail.com", phone: "010-3192-2910", website: "https://leejungdo.com", province: "경기도", city: "성남시", createdAt: "2019-02-24T16:17:47.00..

자바스크립트에서 return 문을 정의하지 않은 함수의 default return 값은 undefined다. 입력값을 받아서 로직을 거쳐 출력값을 반환하는 함수라는 녀석에서 굉장히 기본적인 상식이지만 이 기본을 잊어서 곤혹을 겪는 경우가 종종 있다. 이와 비슷하게 오늘 쇼핑몰 장바구니 기능 구현 과제를 하다가 array.push()의 반환값 때문에 어처구니 없는 에러를 겪었다. 배열의 각종 메소드들은 for loop나 그밖의 다른 방법 등으로 배열을 순회하면서 각종 조건문을 걸어주면 어지간하게 다 구현할 수 있다. 하지만 메소드를 쓰면 그안의 로직은 알 바 아니고 내가 하고 싶은 일에만 집중할 수 있어서 엄청나게 편리하다. 명령형(또는 절차형)이 아닌 선언형 프로그래밍의 이점이라고 할 수 있다. 거기에 ..

1. event.key 사용 const handleKeyUp = (e) => { // codes to execute } { if (e.key === "Enter") handleKeyUp(e); } } /> 2. event.keyCode 사용 const handleKeyUp = (e) => { // codes to execute } { if (e.keyCode === 13) handleKeyUp(e); } } /> 📚 참고자료: https://ungdoli0916.tistory.com/446

Tab 컴포넌트 구현 중 현재 어떤 탭이 선택되었는지 알기 위해 클릭 이벤트 핸들러에 index를 전달해야 했다. 이벤트 핸들러에 인자를 전달할 때는 화살표 함수를 이용해 이벤트 핸들러를 감싸고, 전달하고자 하는 인자를 첫번째 인자로 넣어서 호출해 준다. event 객체가 필요한 경우 두번째 인자 자리에 넣어주면 된다. [2022. 12. 27. 추가 수정] event 객체와 전달하고자 하는 인자를 같이 사용하고 싶은 경우, 전달인자의 순서는 크게 중요하지 않다. 가령 click 이벤트의 경우 onClick={(e) => handlerFunc(e, 전달하고싶은값)} 으로 event 객체를 먼저 넣어줘도 핸들러 함수의 파라미터와 핸들러 함수를 호출하는 위치에서 파라미터에 따른 인자의 순서만 잘 지키면 상관..