Development Vlog

React란?React는 FaceBook에서 개발한 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다. 주로 단일 페이지 애플리케이션(SPA)에서 사용되며, 컴포넌트 기반 아키텍처를 통해 UI를 효율적으로 관리할 수 있도록 돕습니다. 특징컴포넌트 기반 : UI를 독립적인 재사용 가능한 컴포넌트로 나누어 개발할 수 있습니다.가상 DOM : 변경 사항을 효율적으로 관리하기 위해 실제 DOM을 업데이트하기 전에 가상 DOM에서 변경 사항을 비교합니다.단방향 데이터 흐름 : 데이터가 부모 컴포넌트에서 자식 컴포넌트로 흐르며, 이를 통해 데이터 흐름을 명확하게 유지할 수 있습니다.React 설치 방법Node.js가 이미 설치되어 있다고 가정하고 진행합니다.폴더 생성 :..

1️⃣ 렉시컬 스코프(Lexical scope)에 대해 설명해 주세요.렉시컬 스코프는 변수의 유효 범위가 함수의 정의 위치에 따라 결정되는 규칙입니다. 자바스크립트에서 함수가 어디에 선언되었는지에 따라 해당 함수가 접근할 수 있는 변수가 정해지며, 이는 함수의 호출이 아닌 선언에 따라 결정됩니다.  주요 특징상위 스코프 접근 : 중첩된 함수는 자신이 정의된 상위 함수의 변수에 접근할 수 있습니다.하위 스코프 접근 불가 : 상위 함수는 하위 함수에서 선언된 변수에 접근할 수 없습니다.정의 시점 : 함수가 호출되는 시점이 아닌, 정의된 시점에 따라 변수가 결정됩니다.// 예시function outerFunc() { let outerVar = 'outer'; function innerFunc() {..

`Axios`란?`Axios`는 JavaScript에서 HTTP 요청을 처리하기 위한 라이브러리입니다. `Axios`를 통해 웹에서 `API`와 상호작용할 수 있고, `GET`, `POST`, `PUT`, `DELETE` 등 다양한 HTTP 메소드를 쉽게 사용할 수 있습니다. `Axios`는 Promise 기반으로 작동하여 비동기 요청을 관리하고, 요청과 응답의 인터셉터, 자동 JSON 변환, 타임아웃 설정 등의 기능을 제공합니다.GET 리퀘스트`GET` 요청은 서버에서 특정 데이터를 조회하기 위해 사용됩니다. 클라이언트가 서버에 요청을 보내고, 서버는 해당 요청에 대한 응답으로 데이터를 반환합니다.// axiosasync function getAxios(id) { const res = await ..

HTTP 메소드란?HTTP 메소드란 웹에서 클라이언드(브라우저)와 서버 간의 통신을 정의하는 방법이며, method 옵션은 요청의 유형을 지정하며, `GET`, `POST`, `PATCH`, `DELETE` 등의 값을 가질 수 있고, method를 지정하지 않으면 기본 값은 `GET`입니다. `GET` : 서버로부터 데이터를 요청할 때 사용`POST` : 서버에 데이터를 전송할 때 사용`PUT` : 서버의 기존 리소스를 업데이트하거나 새로운 리소스를 생성할 때 사용`DELETE` : 서버에서 특정 리소스를 삭제할 때 사용`PATCH` : 리소스의 부분적인 업데이트를 수행할 때 사용`fetch()` 기본 문법const res = await fetch('url');// 리스폰스 상태 코드res.status;..

Promise란?비동기 작업이 완료되면 값을 알려 주는 객체이고, 작업이 완료되면 값을 알려줄 것을 약속하기 때문에 이름이 Promise 입니다. Promise 객체는 세 가지 상태로`Panding` : 비동기 작업이 끝나기를 기다릴 때`Fulfilled` : 비동기 작업이 성공적으로 끝났을 때, 비동기 작업의 성공 결과 값으로 갖게 됨.`Rejected` : 비동기 작업이 실패했을 때, 비동기 작업에서 발생한 오류를 결과 값으로 갖게 됨. Promise 기반의 코드// Promise 기반const response = await fetch('...');const data = await response.json();console.log(data); 평소에 사용하는 코드와 비슷한 모습이며, 비동기 작업을 처..

📚 이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요.이벤트 버블링, 캡쳐링, 위임은 웹 페이지에서 이벤트가 발생할 때, 그 이벤트가 요소들 간에 어떻게 전파되고 처리 되는지 설명하는 중요한 개념들입니다.이벤트 버블링 (Event Bubbling)`이벤트 버블링`은 자식 요소에서 발생한 이벤트가 부모 요소까지 전파되는 현상을 말합니다. 특정 요소에서 이벤트가 발생하면 해당 요소에 등록된 이벤트 핸들러가 실행된 후, 그 이벤트가 부모 요소로 전달되면서 부모 요소에 등록된 이벤트 핸들러가 차례로 실행됩니다. 이 과정은 최상위 요소에 도달할 때까지 계속되며, 이벤트가 아래에서 위로 올라가듯 전파되기 때문에 `버블링`이라는 용어를 사용합니다. 참고로 이벤트 버블링은 이벤트 객체의 `stopPropagatio..

모던 자바스크립트 종합 정리Spread 구문, 구조 분해, forEach, filter, reduce 등 복습한 내용 종합 정리 URL 모음자바스크립트 문법과 표현 (Spread 구문, 구조 분해, try...catch문 등) Codeit/JavaScript 중급/모던 자바스크립트/자바스크립트의 문법과 표현/종합정리.md at main · hwiiron/CodCodeit Sprint. Contribute to hwiiron/Codeit development by creating an account on GitHub.github.com  자바스크립트의 유용한 내부 기능 (forEach, map, filter, find, reduce 등) Codeit/JavaScript 중급/모던 자바스크립트/자바스크립트의..

자바스크립트 모듈 (module)하나의 파일에 많은 코드를 작성하게 되면 각 코드를 이해하는데 어렵고, 기능 수정이 필요할 때 그 부분을 찾기 쉽지 않기 때문에 하나의 파일에 관리하는 것이 아닌, 기능별로 여러 개의 파일로 분리해서 관리하는 것을 모듈화라고 합니다. 자바스크립트 모듈화는 코드를 효율적으로 관리할 수 있고, 다른 프로그램에서 재사용이 가능하다는 장점이 있습니다.type="module"`script` 태그에 `type="module"`을 적용하지 않으면 여러 파일에 각각 작성된 코드가 하나의 파일에 작성된 것처럼 공유가 됩니다. 이렇게 공유가 되어 버리면 문제가 없어보일 수 있지만 같은 함수명을 가진 함수는 덮어써질 수도 있고, 중복된 변수나 상수를 선언하여 의도치 않은 결과와 에러를 발생시..

forEach 배열 메소드`forEach`와 map 배열 메소드를 확인하기 전에 `for...of`문을 `forEach`배열 메소드와 비교해보려고 한다.// for...of문const members = ['휘철', '은주', '꿈', '달'];for (let member of members) { console.log(`${member}`);}// 휘철// 은주// 꿈// 달// forEach 배열 메소드members.forEach(function (member) { console.log(`${member}`);})// 화살표 함수 사용 예시members.forEach((member) => { console.log(`${member}`);}) 위처럼 `for...of`문을 `forEach` 배열 메소..

에러와 에러 객체자바스크립트에서는 코드 실행 중 발생할 수 있는 다양한 에러를 처리하기 위해 에러 객체를 사용합니다. `ReferenceError` : 존재하지 않는 변수나 함수를 호출할 때 발생하는 에러`TypeError` : 잘못된 방식으로 자료형을 다루면 발생하는 에러`SyntaxError` : 문법에 맞지 않는 코드를 작성하면 발생하는 에러 의도적으로 에러 객체 생성코드 실행 중 에러를 강제로 발생시킬 때는 `throw`를 사용하여 에러 객체를 던지고, 생성한 에러 객체를 발생시켜 이후 코드 실행을 중단합니다.// 에러 객체 생성const error = new ReferenceError('에러가 발생');const error = new TyprError('에러가 발생');const error = ..