분류 전체보기67 [JavaScript] Var대신 let/const를 써야하는 이유 var는 함수 스코프, let&const는 블록단위 스코프를 가진다. 그리고 블록스코프는 Temporal Dead Zone 이라는 속성까지 가진다. 그래서 안전한 코드작성이 가능하다. var는 완전 동일한 변수명에 다른 값이 선언이 된다. 심지어 변수명과 값이 모두 일치해도 에러를 띄우지 않는다. 이런 상태에서는 심지어 console.log(name)으로 var name 선언보다 앞에 불러도 정상작동한다. var name = '이름' var name = '이름2' var name = '이름3' var name = '이름3' // 에러없이 작동한다 이렇게 작동하는게 편해보일 수도 있지만, 코드가 1000줄 이상 넘어간다고 생각해보자. 그럼 코드가 아주 복잡해 질 것이다. 이 변수를 let& const 으로.. 2023. 3. 10. 차트 추가하기 지출내용을 bar chart로 보여주는 부분을 만들어보자. Chart 컴포넌트들을 별도의 파일로 분리해서 만들어준다. 이제 큰 Chart안에 작은 Chart bar 들을 넣어서 차트를 만들 것이다. Chart 컴포넌트 안에는 간단히 12개월치 개별 바를 넣어서 랜더링도 가능하다. 를 12개 만들어 주는 것 하지만 데이터를 동적으로 만들어서 차트를 위해 활용되는 데이터 포인트를 props로 받을 수 있도록 해보자. props.datapoints를 map으로 돌려주면 배열을 반환하게 될 것이다. 각각의 datapoint를 받아서 컴포넌트로 매핑을 해준다. 우리가 가지고 있는 datapoints만큼 컴포넌트를 만들 수 있다. 물론 여기서 ChartBar로 몇몇 데이터를 전달해서 어떻게 렌더링할 지 조절할 수 .. 2023. 3. 9. 연도 filter 작동시키기 이렇게 우리의 지출 목록 위에 연도별로 아이템을 분리할 수 있는 filter를 달아뒀다. 이제 이게 작동되도록 해보자 이 연도 필터는 컴포넌트에서 관리하고 있다. 간단하게 연도를 기준으로 expense 배열의 props.item을 필터링 해주면 할 수 있다. 우리는 이미 에서 props.item을 사용하고 있으므로, state를 변경하지 않아도 된다. 왜냐하면 사용가능한 expenses의 목록은 필터에 영향을 받아서는 안되기 때문이다. filter를 건다고 해서 expenses 배열의 정보가 제거된다는 의미가 아니기 때문이다. 대신 화면에 보여지는 아이템의 수를 제한하고 싶다는 것이다. 컴포넌트에 새로운 변수를 하나 만들어 준다. filter메소드가 호출하는 모든 expenses를 저장하는 상수이다. f.. 2023. 3. 3. VS code 단축키 모음집 https://inpa.tistory.com/entry/VS-Code-%E2%8F%B1%EF%B8%8F-%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%8B%A8%EC%B6%95%ED%82%A4-%EC%A0%95%EB%A6%AC [VSCode] 💽 유용한 단축키 모음 - 개발을 누구보다 빠르게 VSCode 유용한 단축키 모음 개발(코딩) 하는데 있어 적당히 타이핑하면 되지 굳이 단축키(shortcut)를 익혀야 하나 싶겠지만, 단축키를 아냐 모르냐 유무에 따라 개발 생산성 차이가 어마어마 해진다 inpa.tistory.com 2023. 3. 2. 이전 1 2 3 4 5 ··· 17 다음
