300x250 개발 공부/웹개발54 쉽게 필요한 부분만 React 라이프사이클(life cycle) 프론트엔드 개발 신입 면접에서는 필수 질문인 라이프사이클에 대해 간단하게 정리해보겠습니다. 정확한 이해는 다른 블로그를 참고해 주세요. 면접 답변을 위한 정리입니다. Class 컴포넌트의 라이프 사이클 class 컴포넌트는 생성(mounting), 업데이트(updating), 제거(unmounting) 세가지 단계로 구분됩니다. 각 단계는 특정 시점에 호출되는 라이프사이클 메소드를 통해 개발자가 컴포넌트의 상태와 생명주기를 제어할 수 있습니다. 출처: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 생성(Mounting) constructor(props): 컴포넌트의 생성자 함수로, 컴포넌트의 초기 상태를 설정하거나 메소드 바인딩을 수행합니.. 2024. 3. 6. fetch와 axios 비교(쉽게 키워드만) 웹 애플리케이션을 개발할 때, 서버와의 비동기 통신은 필수적이죠. 신입 프런트엔드 면접에서는 무조건 나오고, 경력 면접에서도 모르면 많은 점수가 깎이는 주제인 JavaScript에서 사용되는 두 가지 주요 HTTP 통신 방법인 Axios와 Fetch에 대해 알아보겠습니다. Fetch Fetch API는 JavaScript에서 HTTP 요청을 보내기 위한 내장 함수입니다. Promise 기반으로 작동하며, XMLHttpRequest보다 직관적이고 강력한 API를 제공합니다. Fetch는 기본적으로 브라우저에 내장되어 있어 별도의 라이브러리 설치가 필요 없습니다. 단점으로는 1) 기본적으로 쿠키를 보내거나 받지 않습니다. credentials 옵션을 설정해야만 쿠키를 함께 보낼 수 있습니다. 2) 응답 시간.. 2024. 3. 5. Typescript: Generics, Enum, Utility type 목차 Generics Enum Utility Type Generics 다양한 타입의 객체들을 다루는 메서드나 클래스에 컴파일 시의 타입 체크를 해주는 기능 객체의 타입 안정성을 높이고, 형변환의 번거로움이 줄어든다. 강력한 타입 체크 가능 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. 즉, 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 '재사용'이 가능하다는 장점이 있다. function identity(arg: number): number { return arg; } function identity(arg: string): string { return arg; } function .. 2022. 4. 17. 자바스크립트는 왜 싱글 스레드를 선택했을까? 프로세스, 스레드, 비동기, 동기, 자바스크립트 엔진, 이벤트루프 목차 프로세스와 스레드 프로세스 싱글 스레드와 멀티 스레드 자바스크립트는 왜 싱글 스레드를 선택했을까 동기 vs 비동기 동기 비동기 자바스크립트로 비동기 처리하는 방법 자바스크립트 엔진 브라우저의 구조 동작 과정 1. 프로세스와 스레드 프로세스 동적인 상태, 실행되고 있는 컴퓨터 프로그래, 운영체제에서 할당하는 작업의 단위 노드, 웹브라우저 같은 프로그램 → 개별적인 프로세스 프로세스 간 메모리 등의 자원을 공유하지 않음 → 영향 x 스레드 프로세스 내에서 실행되는 흐름의 단위 프로세스는 스레드를 여러 개 생성해 여러 작업을 동시에 처리할 수 있음 스레드들은 부모 프로세스의 자원을 공유 → 영향 o 같은 주소의 메모리에 접근 가능 → 데이터 공유 가능 스레드는 프로세스가 할당받은 자원을 이용하는 실행의 .. 2022. 1. 6. [javascript] 객체지향 프로그래밍, 상속 객체지향 프로그래밍, 상속 ✅ 개념 1. 객체지향 프로그래밍 - 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. - 객체 지향 프로그래밍은 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각한다. - - 따라서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다. - 이때 객체의 상태 데이터를 프로퍼티 Property, 동작을 메서드 Method라 부른다. 2. 상속과 프로토타입 - 상속은 객체 지향 프로그래밍의 핵심 개념으로, - 어떤 객체의 프로퍼티 또는 메소드를 다른 객체가 상속받아 그래도 사용할 수 있는 것을 말한다. - 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을.. 2021. 11. 29. [javascript] this ✅ 개념 - this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. - this를 통해 자신이 속한 객체 또는 자신이 생성할 인 스턴스의 프로퍼티나 메서드를 참조할 수 있다. (자바스크립트 엔진에 의해 암묵적으로 생성, 코드 어디서든 참조 가능) - this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. ✅ 간단한 예제 //1번 예제 const circle = { // 프로퍼티: 객체 고유의 상태 데이터 radius:: 5, getDiameter() { return 2 * circle.radius } } console.log(circle.getDiameter()); //10 // 2번 예제 const circle = { // 프로퍼티: 객체 고유의 상태 데이터 rad.. 2021. 11. 22. [React] re-rendering 되는 조건과 예시 Re-rendering 되는 조건과 성능 최적화 방법 ✅ 개념 - rendering이란? 사용자가 화면에 view를 보여 주는 것을 렌더링이라고 한다. - re-rendering이란? 사용자 화면에 view를 다시 새롭게 보여준다는 의미이다. - 컴포넌트가 re-rendering 되는 조건 1. 자신의 상태가 변경될 때(state 변경) 2. 부모 컴포넌트가 리렌더링 될 때 3. 자신이 전달받은 props가 변경될 때(props) 4. forceUpdate 함수가 실행될 때 ✅ '성능 최적화' 배워야 하는 이유 - 상위의 컴포넌트에서 변화가 일어난다면, 하위 컴포넌트에 렌더링을 명령하게 된다. - `pureComponent`를 사용하지 않고 큰 앱을 개발하게 된다면, - 사소한 변경에도 모든 컴포넌트가 .. 2021. 11. 16. [Error] 'Switch' is not exported from 'react-router-dom' 해결 'Switch' is not exported from 'react-router-dom' 해결 방법 ✅ 개념 - react-router-dom v6로 업데이트 되면서 변경된 부분 중에 하나가 Switch가 Routes 로 바뀌었다. ✅ 왜 배워야 할까? - npm install "react-router-dom" 을 설치하게 되면, "react-router-dom": "^6.0.2" 이 설치가 된다 - 그럴 경우, 제목과 같은 에러를 만날 수 있다. - 버전 5를 까는 방법도 있지만 앞으로 사용해야하니 제대로 알고 넘어가야한다. ✅ 기존에 있던 것과 차이점 바뀐 것이 여러가지 있지만, 바로 사용하는 4가지만 알아보겠습니다. 1. 70%나 작아진 번들 사이즈 번들 사이즈를 줄여야 하는 이유 - 성능 및 로드 .. 2021. 11. 14. SASS(Syntactically Awesome StyleSheet) 개념 + Sass와 CSSS 차이 SASS(Syntactically Awesome StyleSheet) css는 연산도 안되고, 조건도 반복도 안된다. 프라퍼티만 선언하고, 선언형으로만 되었다. 결론은 SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 확장판 ( CSS를 확장하는 스크립팅언어 ) 정도로 생각하면 좋을 것 같다. (css preprocessor 전처리기) 우리가 흔히 CSS 문서 작성할 때는 많은 반복적인 작업을 요구하고 Color 값을 찾는 일, tag를 닫는 일 등 번거로운 작업 역시 포함되어있다. 그뿐만 아니라 클래스의 상속과 같은 사항으로 점점 CSS 문서는 양이 많아지고 이로 인해서 이후 유지관리에 많은 영향을 준다. 이런 CSS의 문제점들을 Programmatically 한 방식.. 2021. 10. 29. 이전 1 2 3 4 ··· 6 다음 반응형
