jhlee의 성장로그

stash 내용 보기 git stash list stash한 사항을 꺼내옴 지우지 않고 적용함 git stash apply stash한 내용을 지움 git stash drop apply + drop git stash pop 모든 stash상황 clear하기 git stash clear 특정 stash 가져오기 $ git stash list stash@{0}: On develop: yarn 문제 해결을 위한 stash stash@{1}: On develop: 9월8일 임시저장 stash@{2}: On develop: 9월2일 branch 변경을 위한 임시저장 ... git stash apply stash@{1} 했을때 error: unknown switch `e' usage: git stash ap..

eslint로 코드 검사를 하는데 다음과 같은 메시지가 나왔다. Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration . eslint-plugin-react 세팅에 리액트 버전이 명시되어있지 않다고 나오는데 메시지에서 안내해준대로 해당 링크에 적힌대로 settings: { "react": { "version": "detect", }, }, 를 추가하여 version을 detect하도록 했다. 다시 eslint 검사를 돌렸을 때, Warning 메시지 사라진 것을 확인 할 수 있었다.

이 글은 리액트 공식문서를 보고 학습한 내용입니다. 제어 컴포넌트 HTML에서 , 와 같은 폼 엘리먼트 - React에서 변경할수 있는 state가 일반적으로 컴포넌트 state 속성에 유지. 키가 눌릴 때마다 매번 handleChange가 동작. input값이 항상 React State에 의해 업데이트 됨 실습보기 제어 컴포넌트 - input, textarea, select codepen에서 보기 다중 input codepen에서 보기 React state - "신뢰 가능한 단일 출처(single source of truth)"를 만들어 두 요소를 결합. 제어되는 Input Null값 제어 컴포넌트에서 value prop을 지정하면 사용자가 변경할 수 없다. value를 설정했는데 여전히 수정할 수 있..

리엑트 .map()을 쓸때 key값에 index를 쓰면 안된다. 중간에 리스트에 아이템이 추가되고 삭제된다면 key는 같으면 리액트는 DOM요소가 이전과 동일한 구성 요소를 나타낸다고 가정하기 때문. 예상치 않은 문제를 발생 시킬수 있다. 리액트에서 key값에 index를 넣으면 에러메시지를 뱉어내는 이유. better 영구적이고, 고유한 속성인 id property를 key값으로 사용하기 { todos.map((todo) => ( )); } much better nanoid를 사용하여 고유ID 생성하기 import { nanoid } from 'nanoid'; const createNewTodo = (text) => ({ completed: false, id: nanoid(), text }

아래 내용은 리액트 공식문서를 보고 정리한 내용입니다. 클래스의 메서드로 만들기 - constructor 안에서 바인딩해주기 class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn: true }; // ✅ 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다. this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState((prevState) => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( {" "} {this.sta..

class형 컴포넌트의 생명주기 [실습] 화면에 시간 표시하기 - https://codepen.io/jihyunleeme/pen/bGvZzvb 공식문서를 보고 실습한 내용입니다 - 설명은 주석에 써두었음 state 업데이트는 비동기적 // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); // Correct this.setState((state, props) => ({ // state, props 두번째 인자 // 업데이트가 적용된 시점의 props를 두번째 인자로 받아들임 counter: state.counter + props.increment })); // 일반함수에서도 가능 this.setState(functi..

2022년 08월 23일 화요일 오늘 공부한 내용 리스트를 클릭하면 작성 글로 이동합니다. 1️⃣ 없는 숫자 더하기 2️⃣ LF, CRLF 문제 해결하기 📝 윈도우, 맥을 오가며 작업을 했더니 LF, CRLF 문제로 골머리를 앓고 있다. 한 번만 세팅하면 되는 건데 ESLint 설정과 git 내 linebreak converting 설정 이 두 가지를 확인하려다 보니 시간이 오래 걸렸다. 여러 해결방법이 나와있지만, 근본적인 해결방법이 될 수 없는 것들을 소개하거나 아무 부연설명 없이 작성된 글이 많아서 다양한 자료를 봐야 했다. 이번에 잘 정리해서 다음번에는 내 블로그 글만 봐도 해결할 수 있게 양질의 글을 쓰고싶다.

링크 https://school.programmers.co.kr/learn/courses/30/lessons/86051 문제 설명 - 0부터 9까지 중 숫자 일부가 들어있는 정수 배열 numbers, 매개변수로 주어짐 - numbers에서 찾을 수 없는 0부터 9까지 숫자를 모두 더해 return - numbers의 모든 원소는 서로 다름 내가 푼 방법 0부터 9까지 온전히 있는 배열과 주어진 배열 numbers을 비교 있는 수를 제거한 없는 것만 걸러내고 합하면 될 것 같았다. function solution(numbers) { let answer = 0 const allNums = Array.from(Array(10).keys()) // 1️⃣ const notIncludedNums = allNums..

2022년 08월 17일 수요일 오늘 공부한 내용 리스트를 클릭하면 작성 글로 이동합니다. 1️⃣ 없는 숫자 더하기 2️⃣ extractRehydrationInfo 📝 Redux toolkit을 하면서 영어문서를 많이 접하게 되었다. 비교할수 없을정도로 영어문서가 양질의 콘텐츠가 더 많다. 점점 익숙해지고 있는 중.

2022년 08월 16일 화요일 오늘 공부/작업한 내용 리스트를 클릭하면 작성 글로 이동합니다. 1️⃣ 팀 프로젝트 : 회원가입 form - figma 작업 2️⃣ useRoutes를 이용해서 router 설정하기 3️⃣ x만큼 간격이 있는 n개의 숫자