분류 전체보기

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..

이펙티브 자바스크립트 Item 15를 읽다가 이해가 안되는 부분이 있었다. "런타임 때까지 객체의 속성을 알 수 없을 경우에만(예를 들어 CSV 파일에서 로드하는 경우) 인덱스 시그니처를 사용하도록 하자" ❗️CSV 파일이 뭐지 ? 그래서 찾아보았다. CSV CSV(Comma Seperated value) 란 데이터는 쉼표를 기준으로 항목을 구분하여 저장하는 데이터를 말한다. (해석하면 콤마로 구분된 값이다) 콤마로 규칙적으로 구분되어 있기 때문에 엑셀과 같은 프로그램으로도 읽을 수 있고, 생성할 수도 있다. 주로 테이블 형태로 구성된 자료나 텍스트 자료를 저장할 때 사용한다. 쉼표를 대신하여 다른 문자 ($, %, etc.)를 이용하여 구분하도록 지정할 수도 있다. 예를 들어 데이터 자체에 쉼표가 포함..