미새문지

StrictMode StrictMode는 React 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하는 데 도움을 주는 개발도구이며, 프로덕션 빌드에서는 아무 영향을 미치지 않고, 오직 개발 환경에서만 작동한다.비권장 API 및 오래된 라이프사이클 메서드 감지React의 최신 버전에서는 더 이상 사용되지 않거나 비권장 상태인 API를 감지할 수 있다.예: componentWillMount, componentWillReceiveProps, componentWillUpdate와 같은 오래된 라이프사이클 메소드이러한 메소드가 포함된 코드는 콘솔 경고를 통해 개발자에게 알림을 주고, 최신 React API로 전환하도록 유도한다. 의도치 않은 부수효과 감지React는 컴포넌트가 예측 가능한 방식으..

www.google.com을 입력하면 발생하는 일웹 브라우저 주소창에 "www.google.com"을 입력하면, 브라우저는 사용자가 요청한 웹 페이지를 화면에 표시하기 위해 여러 단계를 거친다.1. DNS 조회사용자가 입력한 도메인 이름(예: www.google.com)은 사람이 읽기 쉬운 형태로, 실제 서버와 통신하려면 해당 도메인의 IP 주소가 필요하다.브라우저는 먼저 캐시를 확인하여 IP 주소가 있는지 찾고, 만약 캐시에 없으면 로컬 DNS 서버를 통해 IP 주소를 조회한다.결과적으로 www.google.com에 해당하는 IP 주소를 얻는다.(예: 142.250.190.78)2. TCP 연결 수립IP 주소가 확인되면 브라우저는 해당 서버와 데이터를 주고받기 위해 TCP 연결을 설정하며, TCP 연결..

브라우저 렌더링 파이프라인브라우저 렌더링 파이프라인은 브라우저가 HTML, CSS, JavaScript 파일을 처리하여 웹 페이지를 화면에 표시하는 과정을 말하며, 6단계로 나뉜다.1. DOM 생성 (Document Object Model)브라우저는 HTML 파일을 바이트 단위로 수신하여 이를 문자로 변환하는데, 문자를 HTML 토큰으로 파싱하고, 이 토큰을 기반으로 DOM 트리를 생성한다.DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 태그는 노드로, 태그 간의 계층 구조는 부모-자식 관계로 나타난다.2. CSSOM 생성 (CSS Object Model)브라우저는 CSS 파일도 바이트로 수신하여 문자로 변환한 뒤, 이를 CSS 규칙으로 파싱한다.CSS 규칙은 선택자와 선언으로 구성되며..

리액트에서 성능 최적화를 위해 적용할 수 있는 방법 컴포넌트 렌더링 최적화React.memo를 사용한 컴포넌트 메모이제이션React.memo는 함수형 컴포넌트를 메모이제이션하여 불필요한 렌더링을 방지한다.사용 예시:const MyComponent = React.memo((props) => { return {props.value};});렌더링 비용이 큰 컴포넌트나, 부모 컴포넌트의 재렌더링이 자식 컴포넌트의 렌더링을 불필요하게 유발할 때 사용된다.useCallback으로 함수 메모이제이션useCallback은 동일한 함수를 재사용하여 자식 컴포넌트가 불필요하게 렌더링되지 않도록 한다.사용 예시:const handleClick = useCallback(() => { console.log('Button c..

Controlled Component와 Uncontrolled ComponentControlled Component입력값이 State를 통해 제어되는 컴포넌트이다.입력 요소의 value는 리액트 상태와 동기화되며, 사용자가 입력을 변경할 때마다 onChange 이벤트 핸들러가 호출되어 상태를 업데이트한다.장점:리액트 상태로 관리되므로 입력값을 실시간으로 검증하거나 수정하기 쉽다.여러 입력 필드 간의 복잡한 의존 관계나 동적인 폼 로직 처리에 적합하다.import React, { useState } from 'react';const ControlledInput = () => { const [value, setValue] = useState(""); const handleChange = (e) => { ..

Props와 StateProps (Properties)Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터이며, 자식 컴포넌트는 props를 수정할 수 없다.특징읽기 전용: props는 자식 컴포넌트 내에서 변경이 불가능하다.단방향 데이터 흐름: 데이터는 부모에서 자식으로만 전달된다.컴포넌트 재사용성 증가: 부모에서 props를 다르게 전달하면 컴포넌트를 다양한 방식으로 재사용할 수 있다.예시: App은 Greeting 컴포넌트에 name이라는 props를 전달한다.function Greeting(props) { return Hello, {props.name}!;}function App() { return ;}  StateState는 컴포넌트 내부에서 관리되는 동적인 데이터이며, 값을 변경 시..

1과목 : 소프트웨어 설계1. 정형 기술 검토(FTR)의 지침으로 틀린 것은?의제를 제한한다.논쟁과 반박을 제한한다.문제 영역을 명확히 표현한다.참가자의 수를 제한하지 않는다.더보기답: 4 해설:FTR은 다수의 검토자가 참여하는 공식적인 검토 방법으로, 참가자의 수를 제한해 검토의 효율성과 효과를 높이는 게 중요하다. FTR(Formal Technical Review)소프트웨어 개발 산출물 대상 요구사항 확인 및 검증을 수행하는 방법이며, 동료검토, 워크스루, 인스펙션 등이 있다. FTR 지침 사항제품 검토에만 집중하라의제를 제한하여 진행하라논쟁과 반박을 제한하라문제영역을 정확히 표현하라해결책이나 개선책에 대해서는 논하지 말라참가자수를 제한하고 사전준비를 강요하라자원과 시간 일정을 할당하라모든 검토자들을..

이벤트 루프 (Event Loop)이벤트 루프는 자바스크립트의 실행 모델에서 비동기 작업을 효율적으로 처리하기 위한 핵심 메커니즘이며, 자바스크립트는 싱글 스레드 기반 언어로 한 번에 하나의 작업만 실행할 수 있지만, 이벤트 루프 덕분에 비동기 작업을 효과적으로 관리하고, UI를 렌더링하면서도 중단 없이 프로그램을 실행할 수 있다. 구성 요소콜 스택 (Call Stack)함수 호출이 쌓이고, 실행이 끝나면 제거되는 LIFO(Last In, First Out) 구조현재 실행 중인 작업이 위치하며, 동기 코드는 콜 스택에 쌓였다가 순서대로 실행된다.태스크 큐 (Task Queue)비동기 작업의 콜백 함수가 대기하는 곳태스크 큐에는 매크로태스크와 마이크로태스크라는 두 가지 종류가 있으며, 이벤트 루프는 태스크..