에러 발생CardSection 컴포넌트로 posts props 를 넘기는 과정에서 발생한 문제.CardSection 역시 동일한 타입의 props 를 선언했지만 아래와 같은 에러가 발생했다.  MainBlog.tsx (부모 컴포넌트)posts 변수를 CardSection 컴포넌트의 props 로 전달한다.해당 변수의 타입은 CardInterface[] 배열이다.export interface CardInterface { name: string; role: string;}const MainBlog = () => { const posts: CardInterface[] = [ {name: 'Post1', role: 'CEO BALENCIAGA'}, {name: 'Post2', role: 'CEO..

미디엄에서 읽은 소소한 자바스크립트 꿀팁 (지속적 업데이트) Decimal Base Exponents 1e1 === 10 1e2 === 100 1e3 === 1000 1e4 === 10000 1e5 === 100000 Default Parameters 디폴트 매개변수를 이용하는 방법인데, 매개변수가 undefiled 일 때 특정 값을 할당해야한다면 사용하기 좋다. 물론 매개변수가 undefined 가 아닐 땐 입력받은 값이 연산된다. // Longhand function volume(l, w, h) { if (w === undefined) w = 3; if (h === undefined) h = 4; return l * w * h; } // Shorthand volume = (l, w = 3, h = 4..

이전까지 parseInt() 함수의 기능은, 숫자로 시작하는 문자열(ex: "1xyz") 을 정수 타입으로 변경해주는 정도로만 알고있었습니다. 아예 틀린 말은 아니지만, 그렇다고 정확하게 이해한 답변은 아닙니다. 코드로 확인해보겠습니다. parseInt("2x") >>> 2 예상대로 2 가 출력됩니다. 그럼 "1x" 는 어떨까요? parseInt("1x") >>> 1 역시 예상한 숫자 1이 출력됩니다. 마지막으로 "0x"까지 해보겠습니다. NaN,,? Not a Number 요..? 왜 이런 결과가 나오는지, parseInt() 의 정확한 정의부터 활용, 주의해야할 점 까지 글로 풀어보겠습니다. parseInt() MDN web docs 에는 parseInt() 함수에 대해 아래처럼 정의합니다. pars..

클래스형 컴포넌트를 사용할 땐 위와 같이 component 를 중괄호로 감싸서 호출합니다. 반면에 React 를 import 할 땐 중괄호가 필요없는데, 둘의 차이가 궁금합니다. import React, {Component} from 'react'; export 방식의 차이 정답부터 말하면 export 방식의 차이입니다. 예시를 보면서 이해해보겠습니다. // App.js const react = 1; const vue = 2; export { react }; export const angular = 3; export default vue; react, vue, angular 3가지 변수를 서로 다른 형태로 선언 및 정의했습니다. 1) react 는 {} 객체에 담아 export 했고, 2) vue 는 앞..

read 프로퍼티 부분에서 resolve() 메소드를 통해 그리드에 들어갈 데이터를 읽어들인다. 데이터는 state 로 관리되며, 현재는 더미 데이터라 해당 컴포넌트에서 배열 형태로 곧바로 가져온다. (추후에 api 호출할 예정) 문제 최초 렌더링시 탭(tab)의 조건에 맞는 데이터만 출력되는 것이 아닌, 모든 데이터가 쏟아져나온다. (= 즉 최초 렌더링 시에는 필터가 적용되지 않았다.) 하지만 기획자가 원하는 것은, 최초 렌더링시에도 조건에 맞는(=미전송) 데이터를 보내는 것. jsx 부분에서 조건을 걸어 쉽게 처리할 수 있을거라 생각했는데, 회사 자체 프레임워크 구조상, 탭이 변경될 때마다 그리드 초기화 로직이 함께 돌아버린다. 즉 탭이 변경될 때마다, '미전송'으로 필터 건 데이터로 초기화 된다는 ..

회사에서 대뜸 프론트엔드 개발환경을 세팅하라는 오더가 내려왔다. 사수 없이 개발팀이 꾸려진 상태라 이 상황을 어떻게 해결하나 방황하던 찰나, 문득 인프런에서 웹팩 관련 강의를 찜 해놓은게 생각났다. 곧 바로 결제하여 강의를 들었고, 웹팩 뿐만 아니라, 바벨, es-lint 등 프론트엔드 개발환경 세팅의 필수 내용이지만 쉽게 간과했던 내용을 제대로 학습할 수 있었다. 1회 수강 만으로는 부족하여 2회째 수강중인데, 정리없는 학습은 무의미함을 알기에 해당 강의를 바탕으로 웹팩 기본 내용을 정리해본다. 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의 이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., 웹팩, 바벨..

Medium article 을 읽으면서 일반 함수와 화살표 함수의 차이점에 대해 정리한 글입니다. 1. arguments property ✅ 1 - 1. 일반 함수의 arguments 일반함수는 이미 내장된 arguments 라는 프로퍼티가 존재합니다. 어떤 (일반) 함수를 호출할 때 인자로 받은 매개변수를, 함수 내에서 arguments 라는 변수로 호출할 수 있습니다. function func1() { console.log(arguments); console.log(arguments[3]); } func1(1,2,3,4); >>> Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ] >>> 4 ✅ 1 - 2. 화살표 함수에겐 argumen..

package-lock.json , yarn.lock 이란? 리액트 프로젝트를 진행하면 자주 접하게 되는 파일이 있는데, package-lock.json, yarn.lock 파일입니다. 직접 작성한 적은 없지만 이상하리 만큼 자주 접하는 파일입니다. 하나의 프로젝트에 여럿의 개발자가 붙는 상황을 가정해봅시다. 각 개발자마다 단계적으로 투입된다면, 시간차가 발생하여 사용하는 리액트의 버전이 달라질 수 있습니다. React version 개발자 a : 16.8.0 개발자 b : 16.10.2 개발자 c : 17.0.0 리액트의 버전이 달라지면, 개발자 a에겐 정상적으로 동작하는 기능이 b 에게선 문제가 발생할 수 있습니다. 때문에 프로젝트에 최초로 추가된 패키지의 버전이 무엇인지 기록하여, 해당 패키지의 버..

리액트에서 Key 값이 필요한 이유 Each child in an array should have a unique “key” prop. 배열에 map() 함수를 적용할 때, 각 요소마다 고유 key 값을 생략한다면 위와 같은 경고를 볼 수 있습니다. 물론 렌더링엔 전혀 문제없습니다. 공식문서에 의하면, Key는 1. React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕고, 2. 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다. “keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the arr..