SOOM_BLOG [숨숨 블로그]

1. Material Theme vscode 테마 색상을 설정할 수 있다. 2. Material Icon Theme 파일의 아이콘들을 조금 더 이쁘게 볼 수 있다. 3. Prettier - Code formatter 코드를 formatting 해주는 툴이다. 1. 설치 후 setting에서 'save' 검색 후 파일을 저장할 때 자동으로 포맷이 가능하도록 설정한다. 2. setting에서 'prettier' 검색 후 tab width를 '2'로 설정한다. default는 '4'인데 그러면 코드가 옆으로 길어져 가독성이 떨어지므로, 코드의 가독성을 높이기 위해 '2'로 설정해주자. 3. setting에서 'quote' 검색 후 Quote Style을 'single'로 설정한다. (선택 사항) 4. Brac..

자바스크립트 함수 실행 자바스크립트에서 함수를 'scheduled for execution'할 수 있는 두 가지 방법이 있다. 함수를 직접 실행시키는 방법 : someFunction() 나중에 함수 실행을 시키는 방법(비동기) : el.addEventListener('click', someFunction) 일반적인 경우의 함수/실행 function init() { // Do initialization work const myElement = document.createElement('li'); myList.append(myElement); } init(); 'init' 함수가 정의되면 해당 함수 내부에서 요소를 생성하고 이를 다른 요소(스크립트 내 다른 곳에서 선택되었을 가능성이 있는 myList)에 추..

HTTP 메소드 method CRUD GET Read 리소스 조회 / queryString으로 파라미터 전달 POST Create 요청 데이터 처리, 주로 데이터 등록에 사용 request body에 파라미터 전달 PUT Update/Replace 리소스를 대체, 해당 리소스가 없으면 생성 PATCH Update/Modify 리소스를 일부만 변경 DELETE Delete 리소스 삭제 HTTP 응답 상태 코드 HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: Informational responses (100..

정규표현식 사용법 정리 1. 정규표현식 매칭 패턴(문자, 숫자, 기호 등) 패턴 의미 a-zA-Z 영어알파벳(-으로 범위 지정) ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정) 0-9 숫자(-으로 범위 지정) . 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X) \d 숫자 \D 숫자가 아닌 것 \w 영어 알파벳, 숫자, 언더스코어(_) \W /w 가 아닌 것 \s space 공백 \S space 공백이 아닌 것 \특수기호 특수기호 2. 정규표현식 검색 패턴 기호 의미 [] 괄호안의 문자들 중 하나 [^문자] 괄호안의 문자를 제외한 것 ^문자열 특정 문자열로 시작(괄호 없음 주의!) 문자열$ 특정 문자열로 끝남 () 그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌) (?: 패턴) ..

useCallback() 이란? 기본적으로 컴포넌트 실행 전반에 걸친 함수를 저장하는 hook이다. react에 함수를 저장하여 매 실행마다 재생성하지 않도록 한다. 메모리 내의 동일한 위치 중 하나에 저장되므로 동일한 함수(객체)인지 비교가 가능하다. useCallback(() => {...}, [dependencies]) 첫 번째 인수 : 저장할 함수 두 번째 인수 : useCallback 호출의 dependency 배열 (useEffect와 동일) useCallback을 왜 사용해야 할까? js 함수 동등성 의존 배열로 함수를 넘길 때 (클로져 개념 알기) React.memo와 함께 사용하기 [참고자료] 클로져란?!! useCallback 사용 이유 상세 페이지1 useCallback 사용 이유 상..

리액트가 어떻게 작동하는가? React는 유저 인터페이스를 만들기 위한 JavaScript 라이브러리이다. React는 Component로 유저 인터페이스를 만들고, Component를 활용하여 유저 인터페이스를 효율적으로 구축하고 업데이트 한다. - React는 어떻게 되어 있나..? React는 Component를 관리하는 라이브러리로 Component를 관리하고 Component의 현재 state와 이전의 state의 차이점을 찾아낼 수 있다. React가 다루는 데이터로는 Component에 영향을 미치는 Props, State, Context 이다. React가 Component를 관리하는 과정을 보면 (예시), React는 데이터(props, state, context)..