분류 전체보기

개념공부를 하다가 타입스크립트의 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/..

[프로그래머스] level.1 이상한 문자 만들기 https://school.programmers.co.kr/learn/courses/30/lessons/12930 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 html-jc.tistory.com 이 문제를 풀다가 replace를 너무 대충알았다고 생각했기에 공식문서와 찾아본 블로그를 바탕으로 정리해봤다. replace() replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있다. const p = ..

https://school.programmers.co.kr/learn/courses/30/lessons/12930 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 아주 오래전에 풀었던 문제인데 기억도 안나고 스터디 덕분에 다시 풀게 되었다. 나의 풀이 function solution(s) { const result = s.split(" ").map((word) => { if(word.match(/\D/)){ return [...word].reduce((acc,cur,index) => { if(index%2) return acc += cur.toLowerCa..