기록하고 배우는 개발자 ☕️

주소창에 주소를 입력했을 때의 흐름은 대체로 다음과 같습니다:URL 입력 및 DNS 조회:사용자가 주소창에 URL을 입력하면, 먼저 DNS(Domain Name System) 서버에 요청을 보내 URL에 해당하는 IP 주소를 찾습니다. 이 과정에서 도메인 이름을 IP 주소로 변환합니다. 예를 들어, www.example.com을 192.168.0.1 같은 실제 IP 주소로 변환합니다.TCP (Transmission Control Protocol) 연결:IP 주소가 확인되면, 브라우저는 서버와의 TCP 연결을 시도합니다. 보통 3-way handshake를 통해 연결을 설정합니다. 클라이언트와 서버 간에 안정적인 연결이 이루어집니다.HTTP/HTTPS 요청:TCP 연결이 완료되면, 클라이언트는 HTTP 또..

Type과 Interface의 차이점확장성 (Extending)interface: 다른 interface를 상속할 수 있습니다.type: 다른 type을 합성할 수 있습니다. 예를 들어, & 연산자를 사용해 타입을 합칠 수 있습니다.다시 선언 가능 여부 (Declaration Merging)interface: 같은 이름의 interface가 여러 번 선언되면 자동으로 합쳐집니다. 이 기능을 선언 병합(declaration merging)이라고 합니다.type: 같은 이름의 type을 두 번 선언할 수 없습니다. 덮어쓰기가 됩니다.Interface는 객체의 형태를 정의하는 데 자주 사용되고, Type은 객체 외에도 배열, 유니언, 튜플 등 더 다양한 타입을 정의하는 데 사용됩니다.

Framework와 라이브러리 차이에 근거하여 React와 Next를 설명해 주세요.React는 UI를 구성하는 라이브러리로, 주로 컴포넌트 기반 개발을 제공합니다. 라우팅은 별도로 설정해야 하며, 유연성이 높지만 초기 설정이 필요합니다.Next.js는 React를 기반으로 한 프레임워크로, 다양한 렌더링 기법, 라우팅, API 서버 등 여러 기능을 내장하고 있어 빠르게 앱을 개발할 수 있습니다.React: UI 구성에 집중하는 라이브러리Next.js: 전체적인 웹 애플리케이션 구조와 기능을 제공하는 프레임워크Next와 React 라우팅을 구현하는 방법Next - 폴더 기반으로 라우팅을 구현React - react-router-dom을 사용하여 직접 구현Next에서 제공하는 렌더링 방법CSR (clien..

순서쌍이란 두 개의 숫자를 순서를 정하여 짝지어 나타낸 쌍으로 (a, b)로 표기합니다. 자연수 n이 매개변수로 주어질 때 두 숫자의 곱이 n인 자연수 순서쌍의 개수를 return하도록 solution 함수를 완성해주세요. function solution(n) { let count = 0; for (let i = 1; i

머쓱이는 행운의 숫자 7을 가장 좋아합니다. 정수 배열 array가 매개변수로 주어질 때, 7이 총 몇 개 있는지 return 하도록 solution 함수를 완성해보세요.function solution(array) { return (array.join('').match(/7/g) || []).length;}

클로저는 함수가 외부 함수의 변수에 접근할 수 있는 특성을 가집니다. 이는 함수가 실행된 후에도 외부 함수의 변수에 접근할 수 있게 해주며, 외부 함수가 종료된 후에도 그 변수들에 대한 참조를 유지합니다.함수가 실행될때, 그 함수 내부에서 변수를 참조하면 클로저가 형성됩니다. Closure의 특징산태 유지: 외부 함수의 변수에 계속 접근 할 수 있습니다. 은닉화: 함수 내에서만 변수에 접근할 수 있기 때문에 외부에서 변수를 수정하지 못하도록 할 수 있습니다.메모리 사용 - 클로저가 존재하면 외부 변수들이 메모리에 계속 유지 될 수있습니다.function outer() { let outerVar = 'I am from outer function'; function inner() { console..

1. 이벤트 버블링이벤트 버블링이란 가장 안쪽의 요소에서 이벤트가 상의로 올라오는 현상을 버블링이라고 합니다. 예시: 여기를 클릭하세요!사용자가 버튼을 클릭하면 부모가 클릭 이벤트를 방출하는 것을 볼 수 있습니다.버튼이 안에 있으므로 버튼을 클릭하면 암시적으로 버튼 안에 있는 요소도 클릭하게 됩니다.예시:const output = document.querySelector("#output");function handleClick(e) { output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;}const container = document.querySelector("#container");const button = document.quer..

한 자리 정수로 이루어진 문자열 num_str이 주어질 때, 각 자리수의 합을 return하도록 solution 함수를 완성해주세요.function solution(num_str) { return num_str.split('').reduce((acc, cur) => acc + Number(cur), 0);}

문자열 배열 strArr가 주어집니다. 모든 원소가 알파벳으로만 이루어져 있을 때, 배열에서 홀수번째 인덱스의 문자열은 모든 문자를 대문자로, 짝수번째 인덱스의 문자열은 모든 문자를 소문자로 바꿔서 반환하는 solution 함수를 완성해 주세요.function solution(strArr) { return strArr.map((str, index) => index % 2 === 0 ? str.toLowerCase() : str.toUpperCase())}

React는 상태가 변경되었는지 확인할 때, 얕은 비교(shallow comparison) 방식을 사용합니다. 이는 새로운 상태와 이전 상태가 같은지 확인하는 방법인데, 두 값이 메모리 주소가 같으면(즉, 동일한 객체나 배열을 참조하고 있으면) 상태가 변경되지 않았다고 판단합니다.예시: const [state, setState] = useState({ count: 0 });// 상태 변경 (새로운 객체를 생성)- 리렌더링을 한다setState({ ...state, count: 1 });// 상태 변경 (같은 객체를 참조) - 리렌더링을 하지 않는다setState(state); React가 상태 비교를 얕은 비교로 처리하는 이유는 불변성을 고려하기 때문입니다. 불변성을 지키면, 새로운 상태 객체는 항상 ..