코딩 일기장

vsCode 단축키 및 extension Shift + Alt + F : Format Document 코드 정렬 이쁘게 만들어줌 snippet ranger: custom snippet을 만들 수 있게 해주는 extension snippet generator에 자신이 만들고 싶은 코드 붙여서 snippet 코드 생성하기 피그마 export styles to CSS variable CSS font size를 상속받겠다는 의미 font-size: 100%; line-height가 1이면 폰트에 따라 일부 글자가 잘릴 수도 있음 => 1.2이상 사용 권장 reset css normalize css: 모던 브라우저 지원 https://necolas.github.io/normalize.css/ Normalize.c..

단축키 / vsCode 단축키 Window + Tab: 새로운 데스크톱 생성 가능 Window + Ctrl + 방향키: 여러개 데스크톱 이동 가능 Ctrl+Shift+P: 커맨드창 Ctrl+Shift+P => wrap => 선택한 영역 wrapping => 단축키 등록해서 쉽게 사용하자 Ctrl+Shift+W // 각 요소가 ul 태그 밑에 li태그에 href="/" 값을 가진 태그로 wrapping됨 ul>li*>a[href="/"] vsCode 확장 프로그램 git history auto close tag auto complete tag auto rename tag live server vscode-icons degit 라이브러리 깃 클론 편하게 해주는 라이브러리 모든 레포지토리가 아니라 일부 폴더만..

5.1 복잡도 시간복잡도 어떠한 알고리즘 로직이 얼마나 오랜 시간이 걸리는지를 나타냄 보통 빅오 표기법을 통해 나타냄 가장 영향을 많이 끼치는 항의 상수인자를 빼고 나머지 항을 없앤 것 효율적인 코드로 개선하는데 사용되는 척도 아래와 같은 코드는 알고리즘에 필요한 시간이 10n^2+n 인데 빅오 표기법으로 나타내면 O(n^2)이 됨 for(int i=0 ; i

불변성 (Immutability) 메모리에 이미 담겨있는 값을 변경하지 않는다. 불변성을 유지한다는 의미는, 함수 외부의 상태에 접근하여 이미 메모리에 할당되어 있는 값을 변경하지 않는다는 의미이다. ex) 전역 변수 사용하지 않기 불변성에 대해 이해를 하려면 Call by value와 Call by reference에 대해 알아야 한다. Immutable type & 값에 의한 호출 (Call by value) string, number, boolean과 같이 원시 자료형을 사용하는 변수들은 모두 값에 의한 호출 방식을 사용하며 immutable(불변) 하다. 함수의 인자로 변수를 넘길 때 해당 변수가 가지고 있는 값을 그대로 복사하여 함수에게 넘겨주는 방식을 의미한다. 따라서 원본 변수와 인자로 넘긴..

😎 React에서 리렌더링이 되는 조건 state 변경이 있을 때 전달받은 props 값이 업데이트 되는 경우 부모 컴포넌트가 렌더링 될 때 부모 컴포넌트가 렌더링되면, 모든 자식 컴포넌트를 순차적으로 리렌더링 하게 됨 forceUpdate가 실행될 때 😎 React에서 렌더링 성능 최적화 방법 1. useMemo, useCallback 훅 useMemo와 useCallback에 대한 상세한 내용은 아래에 기재되어 있습니다. 2. React.memo 컴포넌트 메모이제이션 React.memo는 훅이 아니기 때문에 클래스형 컴포넌트에서도 사용할 수 있다. React.memo를 사용하면 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 렌더링 성능을 최적화 할 수 있다. 3. 컴포넌트 맵핑..

🎀 CORS (Cross Origin Resource Sharing) 브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한합니다. 하지만 SOP에 대한 예외 조항을 두고, 이 예외 조항을 지킨 리소스 요청에 대해서는 출처가 다르더라도 허용하기로 했습니다. 이 예외 조항을 CORS 정책이라고 합니다. SOP (Same Origin Pollicy) 같은 출처에서만 리소스를 공유할 수 있다. cross-origin 프로토콜, 도메인, 포트 번호 중 하나라도 다른 경우를 의미합니다. 프로토콜: http와 https는 프로토콜이 다릅니다. 도메인: naver.com과 google.com은 다른 도메인입니다. 포트 번호: 8080 포트와 3000 포트는 다릅니다. 🎀 CORS는 왜 필요한가?..

✅ 이벤트 버블링과 이벤트 캡처링 이벤트 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. FORM DIV P 위의 예시에서, 가장 안쪽의 p tag를 클릭하면 p -> div -> form 순서로 3개의 alert창이 나오게 됩니다. document 객체를 만날 떄까지 각 요소에 할당된 onClick 핸들러가 동작하게 됩니다. 이벤트 객체의 메서드인 event.stopPropagation() 를 사용하면 이벤트 버블링을 중단할 수 있습니다. 이벤트 캡처링 td를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링), 이벤트가 ..

🍪 HTTP 프로토콜의 특징 비연결 지향(Connectionless): 클라이언트가 서버에게 Request를 보내고, 서버가 클라이언트에게 Response를 보내면 TCP/IP 연결을 끊는 특성 무상태(Stateless): 통신이 끝나면 상태 정보를 유지하지 않는다. 이러한 HTTP 프로토콜의 특징으로, 클라이언트의 로그인 정보나 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화되는 것! 이러한 문제점을 해결하기 위해 데이터 저장에 사용하는 것이 쿠키, 세션, 웹 스토리지 개념입니다! 🍪 쿠키 클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일이다. 클라이언트에 300개까지 쿠키 저장 가능, 하나의 도메인당 20개의 값만 가질 수 있으며, 하나의 쿠키 값은 4KB까지 저장이 가능하다...

👉 var, let, const var 한번 선언된 변수를 다시 선언할 수 있다. var는 선언하기 전에 사용할 수 있다. 선언과 초기화 단계가 동시에 일어나기 때문에, 호이스팅이 일어날 때 변수가 undefined로 초기화 되어 변수의 할당 전에 변수를 사용하더라도 에러가 나지 않음 함수 스코프를 가진다.: 유일하게 벗어날 수 없는 스코프가 함수이다 /// if (age < 14) { var txt = '어린이' // 반면 let이나 const 변수는 해당 if 문 안에서만 사용이 가능함 (블록스코프) } /// console.log(txt); // var는 함수 스코프이므로 txt 변수 사용 가능 function add(num1, num2) { var result = num1 + num2; } add..

💻 HTTP 요청 메서드 GET 특정 리소스의 표시를 요청합니다. POST 특정 리소스를 생성하는 것을 요청합니다 (Body, Content-Type 필요) PATCH 리소스의 일부분을 수정할 때 사용합니다 (Body, Content-Type 필요) PUT 리소스를 전부 수정할 때 사용합니다 (Body, Content-Type 필요) DELETE 특정 리소스를 삭제합니다 멱등성 여러번 수행해도 결과가 같음을 의미합니다. 호출로 인하여 데이터가 변형이 되지 않는다는 것을 의미함! 💻 RESTful API란? REST (Representational State Trasfer) REST API는 REST 아키텍처의 제약 조건을 준수하는 API입니다. 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 ..