코딩 일기장

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입니다. 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 ..

⭐️ React 란? UI 자바스크립트 라이브러리로 SPA(Single Page Application)의 UI를 생성하는데 집중한 라이브러리입니다. SPA의 UI를 만드는 자바스크립트 라이브러리이다보니, SPA 제작을 하는 다른 프레임워크(Angular, Vue)에 비해 부족한 부분이 있습니다. 예) 리액트는 페이지 전환 기능을 제공하지 않기 때문에 react-router와 같은 추가적인 라이브러리를 사용해야 합니다. ⭐️ React 의 특징 단방향 데이터 바인딩 단 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신합니다. 사용자가 UI를 통해 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신하게 됩니다. 하나의 Watcher를 사용하기 때문에 양방향 데이터..

SPA와 MPA SPA (Single Page Application) React, Vue와 같은 프레임워크처럼 하나의 페이지로 구성된 웹 어플리케이션 입니다. SPA는 CSR 방식을 채택합니다. MPA (Multi Page Application) 탭을 이동할 때마다 서버로부터 화면에 필요한 새로운 HTML 파일을 받아와서 페이지 전체를 새로 렌더링하는 전통적인 방식입니다. MPA는 SSR 방식을 채택합니다. 브라우저 렌더링은 크게 CSR과 SSR의 방식으로 나누어집니다. CSR (Client Side Rendering) 렌더링이 클라이언트 쪽에서 일어납니다. 서버는 요청을 받으면 클라이언트에게 HTML과 JS 파일을 보내줍니다. 클라이언트는 해당 콘텐츠를 받아 렌더링을 시작합니다. 유저가 서버에 웹사이트..