에러 발생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 는 앞..

회사에서 대뜸 프론트엔드 개발환경을 세팅하라는 오더가 내려왔다. 사수 없이 개발팀이 꾸려진 상태라 이 상황을 어떻게 해결하나 방황하던 찰나, 문득 인프런에서 웹팩 관련 강의를 찜 해놓은게 생각났다. 곧 바로 결제하여 강의를 들었고, 웹팩 뿐만 아니라, 바벨, 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 에게선 문제가 발생할 수 있습니다. 때문에 프로젝트에 최초로 추가된 패키지의 버전이 무엇인지 기록하여, 해당 패키지의 버..

🙋🏻‍♂️ 상황 typeorm-model-generator 를 이용하여 db 테이블을 엔티티로 자동 생성하면서 아래의 에러가 발생했다. No repository for "StudyInfo" was found. Looks like this entity is not registered in current "default" connection? 분명 해당 repository 인 Studyinfo 엔티티는 생성됐는데 왜 이런 에러메시지가 뜨는 것일까. 에러메시지를 확인해보면, current "default" connection 에 해당 엔티티가 등록되어 있지 않다고 한다. 그렇다면 "default" connection 은 어디서 설정을 해둔 것인지 확인해야 한다. 👋🏻 원인 바로바로 ormconfig.json ..

점 표기법 vs 괄호 표기법 ( dot notation, bracket notation) 자바스크립트에서 객체 내부 프로퍼티에 접근하는 방법엔, 점 표기법 , 괄호 표기법 2가지가 있습니다. likelion 이란 객체가 있고, 해당 객체의 property 에 접근하는 코드를 작성해보겠습니다. let likelion = { number: '9th', member: 21, univ: "pnu" } // 점 표기법 likelion.number // 9th likelion.member // 21 // 괄호 표기법 likelion['univ'] // 'pnu' 아래처럼 두 방법 모두 객체의 프로퍼티에 접근할 수 있습니다. // 점 표기법 likelion.number // 9th likelion.member // ..