전체 글 (45) 썸네일형 리스트형 VScode Snippets 직접 만들기 [Snippets를 사용하는 이유] Snippets 을 사용하는 이유는 반복적인 소소의 틀이 있다면 그 틀을 미리 저장해두고 저장한 소스를 약어를 사용하여 불러오는 매우 편리한 기능이다. Extention을 통해 받은 Snippets은 편리하긴하나 단축키를 다 외우기 귀찮고 내가 원하는 스타일이 아닌경우 직접 만들어서 써보는걸로ㅋ [설정] [파일(File)] - [기본 설정(Preferences)] - [사용자 코드 조각(User Snippets)] 경로로 들어간다. 사용자 코드 조각 버튼을 누르고 새 코드 조각을 눌러준다. 상단에 기존 코드 조각은 미리 만들어두었던 snipptes 파일들이다. 새 코드 조각을 누르게 되면 파일이 생성되는데 이안에 해당 Snipppets을 입력하면 된다. view.. Debugger for Chrome(vsCode에서 디버그 사용하기) [설치] 1. 링크를 통해 설치 - https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 2. VScode 확장 관리에서 검색 후 설치 빨간색 표시한 부분을 보면 설치하고 사용할 수 있는 부분이 있습니다 제대로 사용하고 계시다면 저 처럼 보여집니다. [설정] 1. F5 키를 누르거나 상단 메뉴에서 Run(실행) - Start Debugging(디버깅 시작) 를 누르게되면 Select Environment 창이 뜨는데 거기서 Chrome을 선택합니다. 2. launch.json 파일의 내용을 사진과 같이 바꿉니다. [사용방법] Debugger for Chrome을 사용하기 위해서는 우선 현재 개발중인 웹 어플리케이션.. [React] Too many re-renders. React limits the number of renders to prevent an infinite loop. [Error] 단순히 props로 받은 데이터를 onClick 이벤트가 발생했을 때 파라미터로 넘겨줄 생각이었다. 근데 뜬금없는 에러가 발생.. [문제 파악] 상단 이미지를 보면 onClick 이벤트가 일어났을 때 handleClickOpen(props.excel) 함수가 호출되는데 ...응 그냥 보내기만 하는데 왜 에러가 나는 거지 싶었다... 구글링을 통해 이 에러가 발생하는 원인은 렌더 과정에서 state를 변화하는 함수가 있다면 리랜더링이 계속 일어나면서 발생하는 에러임을 확인했다. handleClickOpen 함수인에는 open state 상태를 변경하는 함수가 발생한다. props에 함수를 넣은 것이 아니어서 무한 루프가 발생했던 것이다 여기까지만 찾아도 기분이 일단 좀 풀린다.ㅋ 이제 리렌더.. React 공식 문서 Hook (2) : Hook 개요 [useState] 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. - 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다. - setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다. 1. hook를 호출하기 2. 함수 컴포넌트안에 state 추가하기 - 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지될 것입니다. 3. state 변경하는 함수 실행해보기 -> setCount() - 우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있습니다. - setCount() 는 Class컴포넌트에서 사용했던 this.setState와 비슷하지만 , 이전 .. React 공식 문서 Hook (1) : Hook 소개 [Hook 이란?] Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (React 16.8.0은 Hook을 지원하는 첫 번째 배포입니다. 업그레이드할 때 React DOM을 포함한 모든 패키지를 업데이트하는 것을 잊지 마세요. React Native는 v0.59부터 Hook을 지원합니다.) [Hook을 쓰는 이유] 1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다. (문제) 기존 class 컴포넌트에서는 이 문제를 해결하기 위해 render props 그리고 고차 .. 이전 1 ··· 3 4 5 6 다음
