전체 글

처음에 react 프로젝트를 시작하면 위와 같이 세팅이 된다. 그런데 이것들이 무엇인지 잘 알지 못했다. 1. import react from 'react' 과연 이것은 무엇일까? 브라우저는 오직 3가지만 읽을 수 있다. (HTML, CSS, JavaScript) 그렇기에 우리가 React만 작성해서 브라우저한테 갔다주면 알지 못한다. 그럼 어떻게 해야할까? 맞다 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해줘야한다. 리액트에서 JSX문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transformer를 사용해 JSX로 작성된 React 메소드를 변환시킨다. 이때 객체인 React를 가져오기위해 import React from 'React' 를 맨 위에 작성해 Rea..

1. Generics ? 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 제네릭을 함수처럼 생각하면 쉽다. function getText(text) { return text; } getText('hi'); // 'hi' getText(10); // 10 getText(true); // true 우리가 getText함수에 문자열을 넣으면 문자열이나오고 숫자를 넣으면 숫자가 나오고 불리언을 넣으면 불리언이 나오는 것 처럼 제네릭도 비슷한 개념이라고 생각하면 이해하기 쉽다. 자 위 자바스크립트 코드를 타입스크립트로 바꿔보자 function getText(text : string | number | boolean) { return t..

개념공부를 하다가 타입스크립트의 void가 명확하게 이해가 되지 않아 정리해보았다. 1. void 1) 정의 void는 값을 반환하지 않는 함수의 반환 값을 의미한다. 함수에 return 문에 없거나, 명시적으로 값을 반환하지 않을 때, 추론되는 타입이다. 위 정의에서도 보았듯이 우리가 타입스크립트에서 함수를 작성하고 return을 하지 않는다면 알아서 void로 추론을 한다. 그리고 그러한 함수들의 반환 값은 undefined로 평가된다. 자바스크립트에서는 아무것도 반환하지 않는 함수는 암묵적으로 undefined 값을 반환한다. 하지만 타입스크립트에서 void와 undefined는 같은 것으로 간주되지 않는다. 그렇다면 실제로 해보자 타입스크립트에서 void함수를 undefined 타입으로 지정한 ..

1. Hook ? hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다. hook은 class안에서는 동작하지 않는다. 대신 class 없이 React를 사용할 수 있게 해주는 것이다. React는 useState 같은 내장 hook을 몇가지 제공해준다. 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 hook을 직접 만드는 것도 가능하다. 2. state Hook (useState) 우리가 어떤 작업을 할 때 변수를 정말 많이 다룬다. 리액트에서도 작업을 하게 된다면 분명 변수는 필수적으로 사용하게 되어있다. 그런 변수들을 조금 더 쉽게 다룰 수 있도록 도와주는 hook이 있는데 그게 바로 state Hook이다. state Hook 즉 useState는 ..

1. Function and Class Components ? useEffect는 hook이다. 그럼 hook은 무엇인가? 그것을 알기전에 함수 컴포넌트와 클래스 컴포넌트에 대해 알아야 한다. 일단 많은 블로그들이 "함수형 컴포넌트"라고 지칭하는데 React 공식문서에 가보면 Function component라고 되어있다. 즉 "함수 컴포넌트"가 맞다. 그렇다면 왜 "함수형 컴포넌트"라는 말이 있을까? 이전에는 공식문서에서 Functional Component 즉 "함수형 컴포넌트"라고 네이밍 했는데 함수형 컴포넌트를 사용하면 함수형 프로그래밍 방법으로 할 수 있다는 혼란을 불러일으킬 수 있다고 하여 Function Component로 이름이 바뀌었다고 한다. react에는 컴포넌트를 선언하는 방법이 두..

Create react app Create React App Set up a modern web app by running one command. create-react-app.dev GitHub - facebook/create-react-app: Set up a modern web app by running one command. Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub. github.com 1. Creact React app란? Creact React app은 react를 만든 페이스북이 제공하공하고 있는 ..

Props 1. props 란? properties의 줄임말이다. props는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 의미한다. props는 state와 달리 read-only 라는 것에 주의해야 한다. 2. 사용방법 먼저 예제를 보자. 이런식으로 Btn 컴포넌트에 text와 fontSize를 전달해 줄 수 있다. props 기본값 설정 방법 1 : 위 예제 처럼 'fontSize = 20' 이렇게 해 놓으면 fontSize를 넣지 않으면 저 기본값이 적용이된다. 방법 2 : defaultProps를 사용하면된다. 방법 1 같이 하지 않는다면 아래처럼 도 할 수 있다. function Btn({text, fontSize = 30, comment}) { return ( {text} {commn..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 나의 풀이 function solution(s, skip, index) { // 알파벳 배열을 만든다. const dict = Array.from({length:26}, (_,i) => String.fromCharCode(i+97)) // skip 단어들을 filter를 통해 제거해준다. const newDict = dict.filter( word => ![...skip].includes(word) ) // map을 사용하여 각각의 단어를 index만큼 뒤로 이동한다. // indexOf 를 이용해서 5칸 뒤..

https://school.programmers.co.kr/learn/courses/30/lessons/17682 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이전에 풀었던 기억만 있고 어떻게 풀었는지는 하나도 기억이 나지 않았다. 블로그에 글이 없어서 이참에 정리해본다. 나의 풀이 마침 어제 replace를 공부하면서 정규표현식도 다시 공부했는데 그걸이용하면 되겠다 싶었다. [JS - 개념] String.prototype.replace() [프로그래머스] level.1 이상한 문자 만들기 https://school.programmers.co.kr/..