300x250 개발 공부142 쉽게 필요한 부분만 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. [Xcode] iPhone is busy: Making Apple Watch ready for development Error 오류 해결 방법 ionic 프로젝트 중 debugging을 위해 xcode와 핸드폰을 연결하면 아래와 같은 에러만 뜨고 연결은 되지 않는다. iPhone is busy: Making Apple Watch ready for development Error 모든 기기를 재시동하라는 여러 레퍼런스를 확인하고 설정했지만 해결하지 못했다. 애플워치가 페어링 되지 않아 생긴 문제였다. 아래와 같은 방법으로 해결했다. 1. 애플 워치의 세팅에서 bluetooth와 wifi를 끈다. 2. 애플워치 비행기모드를 실행한다. 3. 맥과 아이폰을 다시 연결한다. 참고 문서 https://developer.apple.com/forums/thread/691452 https://stackoverflow.com/questions/69517131/x.. 2022. 7. 1. 앱스토어 URL 찾기 구글 플레이 https://play.google.com/store/games 에서 앱 검색하고 https://play.google.com/store/apps/details?id= 앱스토어 웹에서 찾기 https://www.apple.com/app-store/ 에서 앱 검색하고 앱을 검색하여 앱 페이지로 이동합니다. http://apps.apple.com//app//id 넷플릭스 주소 https://apps.apple.com/kr/app/netflix/id363590051 휴대폰으로 찾기 2022. 7. 1. 인터프리터, 컴파일, JIT 컴파일 들어가기 전에 우리가 작성한 코드가 컴퓨터에서 실행되기 위해서는 0과 1로 이루어진 컴퓨터가 인식할 수 있는 기계어로 변역되어야 한다. (C, 자바, C++, 자바스크립트 등과 같은 프로그래밍 언어를 사용하여 작성하는 프로그램을 고급 언어라고 합니다. 고급 언어는 사람 친화적 언어이다.) 기계어로 번역되는 방식(번역 시기)에는 인터프리터와 컴파일이 있다. 미리 번역을 해놓고 실행하면 컴파일 그때그때 번역하고 실행하면 인터프리터 컴파일 소스코드의 전체를 보고 기계어로 변역한 다음 번역된 파일을 생성해 컴퓨터에서 실행시키는 방법이다. 한 언어에서 다른 언어로 번역하는 프로그램을 컴파일러 컴파일러는 무조건 기계어로 번역할 필요 없다. (자바 → c언어) 파일들을 모두 번역해서 하나의 바이너리(또는 어셈블리)파.. 2022. 6. 2. 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. 이전 1 2 3 4 ··· 16 다음 반응형
