코딩 일기장

😎 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를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링), 이벤트가 ..

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 파일을 보내줍니다. 클라이언트는 해당 콘텐츠를 받아 렌더링을 시작합니다. 유저가 서버에 웹사이트..

대기열, 캐싱, DNS, 라우팅, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이 후 브라우저 렌더링 과정을 거쳐 네이버라는 화면이 나타나게 됩니다. 대기열 브라우저는 주소창 입력에 대한 요청을 대기열에 넣습니다. 캐싱 요청된 값의 결과값을 저장하고, 그 값을 다시 요청하면 저장해 둔 값을 다시 제공하는 기술. 다시 불러오지 않아도 되므로 속도 개선 효과가 있음. 공유 프록시 캐싱 요청한 서버에서 프록시서버가 캐싱을 하는 것을 의미한다. ex) Node.js 서버의 경우 앞단의 프록시 서버로 nginx 서버를 둬서 이 서버를 캐싱 서버로 사용하는 경우 브라우저 캐시 쿠키, 로컬스토리지 등을 포함한 캐시이다. 브라우저 자체가 HTTP를 통해 다운로드하는 모든 문서를 보유하는 것을 말한다. DNS 조회 ..

https://school.programmers.co.kr/learn/courses/30/lessons/43165 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(numbers, target) { var answer = 0; function dfs (num, index) { if (index === numbers.length) { if (num === target) answer++; return; } dfs(num + numbers[index], index+1); dfs(num - numbers[index], index+1)..

https://school.programmers.co.kr/learn/courses/30/lessons/64064 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🌸 문제 접근 banned_id를 기준으로 탐색을 한다. (dfs의 count 변수는 banned_id를 탐색할 인덱스입니다.) 유저 아이디가 해당 banId에 해당이 된다면, 다음번 banned_id에 해당하는 유저 아이디가 있는지 체크하기 위해 dfs를 한번 더 돌린다. 이 때, 한 번 제한된 아이디는 한번 더 제한될 수 없기 때문에 해당하는 userId의 visited를 true로 만들어준다..

🐶 이진 탐색 Binary Search 이미 정렬된 데이터에서 특정 원소를 찾을 때 시작점, 끝점, 중간점을 지정하여 수행함 찾으려는 값과 중간값을 비교하여 중간점 이후 혹은 이전으로 데이터 탐색의 범위를 절반으로 줄일 수 있음 따라서 확인할 때마다 데이터의 개수가 절반으로 줄어들기 때문에 시간 복잡도 = O(logN) 탐색 범위가 1000만을 넘어갈 때 사용하면 좋다는 점! recursion으로 구현한 이진 탐색 const n = 10, target=7; const array = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; function binarySearch(start, end, target) { let mid = Math.floor((start + end) / 2); if(s..

문제 설명 가로 길이가 Wcm, 세로 길이가 Hcm인 직사각형 종이가 있습니다. 종이에는 가로, 세로 방향과 평행하게 격자 형태로 선이 그어져 있으며, 모든 격자칸은 1cm x 1cm 크기입니다. 이 종이를 격자 선을 따라 1cm × 1cm의 정사각형으로 잘라 사용할 예정이었는데, 누군가가 이 종이를 대각선 꼭지점 2개를 잇는 방향으로 잘라 놓았습니다. 그러므로 현재 직사각형 종이는 크기가 같은 직각삼각형 2개로 나누어진 상태입니다. 새로운 종이를 구할 수 없는 상태이기 때문에, 이 종이에서 원래 종이의 가로, 세로 방향과 평행하게 1cm × 1cm로 잘라 사용할 수 있는 만큼만 사용하기로 하였습니다. 가로의 길이 W와 세로의 길이 H가 주어질 때, 사용할 수 있는 정사각형의 개수를 구하는 solutio..

문제 설명 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세요. 입출력 예 #1 [1,2,4]를 이용해서 7을 만들 수 있습니다. 입출력 예 #2 [1,2,4]를 이용해서 7을 만들 수 있습니다. [1,4,6]을 이용해서 11을 만들 수 있습니다. [2,4,7]을 이용해서 13을 만들 수 있습니다. [4,6,7]을 이용해서 17을 만들 수 있습니다. input으로 주어진 nums 숫자 배열에서 3개의 숫자를 뽑아 합을 구했을 때, 소수가 되는 경우의 수를 구하는 문제이다. [..