깃허브 레파지토리 : https://github.com/jdy0120/frontendproject/tree/master/sidebar GitHub - jdy0120/frontendproject Contribute to jdy0120/frontendproject development by creating an account on GitHub. github.com 이번 리따배 프로젝트는 간단한 사이드바를 만들어보는 프로젝트입니다. 위 프로젝트는 react에서 child를 사용하여 여러 컴포넌트에서 공통적으로 사용하는 기능들을 하나의 컴포넌트로 만들어 코드 반복을 줄입니다. Sidbar.tsx라는 컴포넌트를 만들어 home,portfolio,info,etc라는 각각의 컴포넌트에 재사용합니다. spa에서 여러 ..
자바스크립트 map에 대해 알아보고 간단한 예시를 살펴보자 자바스크립트는 ES6+ 문법에 적용된 map에 대해 알아보겠습니다. MDN에 적혀있는 map의 정의는 '배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.' blog.doyeonism.com 자바스크립트 reduce 또한 map과 마찬가지로 순서가 있는 배열에 사용되는 메소드입니다. 사용되는 방식은 아래와 같습니다. const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + curre..
자바스크립트는 ES6+ 문법에 적용된 map에 대해 알아보겠습니다. MDN에 적혀있는 map의 정의는 '배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.'입니다. 가장 기본적인 사용방법은 이렇습니다. 순서가 있는 자료구조에 map이라는 메서드를 사용할 수 있습니다. 여기서 순서가 없는 자료구조란 Set을 의미합니다. Set은 순서를 보장하지 않는 배열로 중복을 허용하지 않는 배열입니다. 간단히 Set에 대해 예시를 살펴보고 넘어가겠습니다. a라는 이름의 리스트를 선언해줬습니다. 하지만 5라는 값이 중복되네요. b라는 이름으로 a를 Set형식으로 저장했고 출력했더니 중복된 값이 하나만 저장된 것을 확인할 수 있었습니다. 중복을 허용하지 않는 것이 Set의 특성..
React는 .env를 이용해 누군가 보면 안되는 데이터를 보관할 때 사용하는데요. apikeyr같은 중요한 값들을 따로 보관할 수 있도록 도와줍니다. .env 파일에 환경변수를 정의하여 변수로 받아오는 이유는 보안 뿐만 아니라 유지보수 측면에도 용이합니다. apikey를 예로 들었으니 api호출하는 경우를 유지보수측면에서 설명해보겠습니다. a.tsx는 유튜브 `url/search` 라는 곳에서 데이터를 받아와야하고 b.tsx는 유튜브 `url/channel` 이라는 곳에서 데이터를 받아와야합니다. 이런 경우 하드코딩을 하면 각 url위에 apikey를 넣게 되는데, apikey가 만료되거나 바꿔야하는경우 모든 파일을 훑어 apikey를 직접 찾고 바꿔줘야하는 불편함이있습니다. .env파일에 데이터가 저..
