전체 글79 [Prettier] prettier 사용방법 - 코드 스타일정리 Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io prettier를 통해 HTML / CSS / JavaScript / React / Anguler 등 코드를 관리할 수 있음 prettier설치방법 vscode를 열고, 마켓플레이스에서 prettier검색 하여, 설치! 설치하고 나면 prettier적용하고 하는 프로젝트 맨 바깥쪽에 .prettierrc 라고 파일 생성 prettier설정은 Prettier공식사이트에 접속 -> Docs -> Configuring Prettier -> Configuration File에서 확인 가능 { "trailingComma": "all",// 객체를 선언할 때 콤마적용 "tabWi.. 2021. 3. 5. [React] immer를 사용한 불변성 지키기 immer라이브러리 사용하기 사용용도 immer를 사용하면 불변성을 해치는 코드를 작성해도 대신 불변성을 유지하게 해줌! 불변성을 깨트리는 행위의 코드 const object = { a:1, b:2 }; object.b = 3; // b의 값을 직접적으로 수정하면 안됨 불변성을 유지하면 변경한 올바른 코드 cosnt object = { a:1, b:2 } const nextObject = { ...object, // 스프레드 기법을 사용하여 a, b값그대로 복사후 b: 3 // b값을 덮어 씌어줌 } 라이브러리 설치 프로젝트의 터미널에서 immer설치 명령어 입력 $ yarn add immer immer 라이브러리를 사용할 땐 import를 통해 immer를 불러옴.보통 produce라는 이름으로 불러온.. 2021. 3. 5. [React] useRef로 특정 DOM으로 focus설정하기 useRef (hook)함수? 특정 DOM선택할 때 다시 랜더링 되어도 동일한 참조값을 유지 할 때 useRef로 특정 DOM선택하기 특정 엘리먼트의 크기나 위치를 가져오거나 스크롤바 위치를 가져오거나 설정하거나 포커스의 위치를 설정하거나 라이브러리를 이용할 때 특정 DOM에다가 설정해야하는 부분이 발생할 때 사용하게 됨 즉, 컴포넌트에서 특정 DOM을 선택해야 할 때, ref를 사용해야하고, 함수형 컴포넌트에서 이를 설정할 때는 useRef를 사용하여 설정해야함 패키지 구조 App.js import React from 'react'; import InputsSample from './components/InputsSample'; function App() { //사용하고자하는 componets호출 re.. 2021. 3. 2. [JavaScript] 구조 분해와 구조 분해 할당 사용 방법 구조분해 할당 [ Destructuring assignment ] 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 let [x, y] = 1, 2; console.log(x); // 1 console.log(y); // 2 배열 구조 분해 let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; /* let [user1, user2, user3]의 의미는 let user1 = users[0]; let user2 = users[1]; let user3 = users[3]; 과 같다 */ console.log(user1); // 'Mike'; console.log(user.. 2021. 2. 24. 이전 1 ··· 7 8 9 10 11 12 13 ··· 20 다음
