sodol-dotcom

브라우저의 렌더링 과정(Critical Rendering Path)은 웹 페이지를 사용자에게 표시하기 위해 브라우저가 데이터를 처리하고 시각적으로 표현하는 일련의 단계이다. 이 과정을 이해하면 웹페이지가 어떻게 만들어지는지, 그리고 최적화할 부분이 어디인지 알 수 있다.  1. HTML 다운로드사용자가 웹페이지를 요청하면 브라우저는 서버에서 HTML 파일을 다운로드한다. 이 파일은 웹 페이지의 구조를 정의한다. 2. HTML 파싱다운로드한 HTML 파일을 읽어들여 DOM(Document Object Model)을 생성한다. DOM은 웹페이지의 각 요소를 객체로 표현한 구조이다. 예를 들어, `` 태그는 DOM에서 하나의 객체로 만들어진다. 3. CSS 다운로드HTML을 파싱하면서 브라우저는 CSS 파일(..

두 방식 모두 기능적으로 동일하지만, 사용할 때 약간의 차이가 있으므로 상황에 따라 적절히 선택하는 것이 좋다. 1. `export default function multiply(a, b) {...}` (함수 선언과 동시에 내보내기)유의할 점: 함수 이름: 이 방식으로 내보내면 함수 이름이 명시적으로 필요하지 않은 상황에서 유용하다. 함수가 주로 기본 내보내기 용도로만 사용되고, 이름 자체는 파일 내부에서만 의미가 있을 때 적합하다.Hoisting(호이스팅): 함수 선언과 동시에 내보내는 방식은 함수가 호이스팅되기 때문에 파일 내에서 함수를 호출할 때, 선언된 위치와 상관없이 사용할 수 있다.console.log(multiply(2, 3)); // 정상 작동export default function mu..

// 1. export { multiply };function multiply(a, b) { return a * b;}export { multiply };// 2. export function multiply(a, b) {...}export function multiply(a, b) { return a * b;};// 3. export default function multiply(a, b) {...}export default function multiply(a, b) { return a * b;}; 세 가지 로직은 모두 `multiply`라는 함수를 정의하고 내보내는 방식이다. 각각의 `export` 방식에 따라 사용하는 방법이 다르다.  1. `export { multiply };`functio..

𝜗𝜚 오늘 공부한 내용Promise Chaining 이해하기: 기존의 프라미스와 반환된 프라미스 (https://sodol-dotcom.tistory.com/64)함수 참조와 함수 실행: console.log(getData)와 console.log(getData())의 차이 (https://sodol-dotcom.tistory.com/65)프론트엔드를 위한 Node.js 이해 (https://sodol-dotcom.tistory.com/66)Node.js와 패키지 스크립트 (https://sodol-dotcom.tistory.com/67)객체 구조 분해 할당 (Destructuring Assignment) (https://sodol-dotcom.tistory.com/68)  𝜗𝜚 Review오늘은..

1. 개념구조 분해 할당은 객체나 배열의 값을 간편하게 변수에 할당할 수 있도록 해주는 문법이다.이 기능을 사용하면 코드가 더 간결하고 이해하기 쉬워진다.  2. 객체 구조 분해 할당const person = { name: "Alice", age: 25, job: "developer"};`person`은 `name`, `age`, `job`이라는 세가지 프로퍼티를 가진 객체이다. 2-1. 기본적인 변수 할당객체의 속성 값을 변수에 할당하려면 다음과 같이 작성한다.const name = person.name; // name 변수에 "Alice" 할당const age = person.age; // age 변수에 25 할당이 문장은 `person` 객체에서 `name`과 `age` 프로퍼티..

프론트엔드 개발에서 Node.js는 백엔드와의 연결, 데이터 처리, 서버 실행 등 여러 용도로 사용된다.프로젝트가 커지면서 파일과 폴도의 구조가 복잡해질 수 있는데, 이럴 때 패키지 스크립트를 사용하면 더 간편하게 작업할 수 있다.  1. 패키지 스크립트란?패키지 스크립트는 `package.json` 파일에 있는 `scripts` 항목에 정의된 명령어이다. 이 명령어를 사용하면 자주 사용하는 작업을 손쉽게 실행할 수 있다. 마치 매크로처럼, 복잡한 명령어를 간단한 이름을 대체해준다.  2. `package.json` 파일 이해하기`package.json` 파일은 Node.js 프로젝트의 설정 정보를 담고 있는 파일이다.여기에는 프로젝트의 이름, 버전, 의존성, 그리고 스크립트 명령어 등이 포함되어 있다...

1. Node.js란?Node.js는 자바스크립트를 웹 브라우저가 아닌 컴퓨터(서버)에서도 실행할 수 있게 해주는 도구(실행환경 = 런타임)이다.원래 자바스크립트는 브라우저에서만 실행되도록 설계되었지만, Node.js는 자바스크립트의 사용 범위를 확장하여 브라우저 외부에서도 자바스크립트를 구동할 수 있게 만들어졌다.(웹 페이지의 버튼을 클릭하거나 이미지를 보여주는 등의 작업을 할 때만 사용되었다가 Node.js 덕분에, 브라우저가 없이도 서버라는 곳에서 자바스크립트를 사용할 수 있게 되었다.)Node.js를 사용하면 서버에서 자바스크립트를 실행할 수 있어, 웹사이트의 데이터를 처리하거나 요청을 처리하는 역할을 수행하게 되는데, 특히 비동기 처리와 서버 구축에 최적화된 구조 덕분에, 많은 요청을 동시에 처..

1. `console.log(getData)`정의: 이 코드는 `getData`라는 함수 자체를 출력한다.무엇을 출력하는가? 함수의 이름과 내용(정의)을 보여준다. 즉, 이 코드가 실행되면 "이 함수는 이렇게 생겼어!"라고 설명하는 것과 같다.출력 예시:ƒ getData() { return { name: "이정환", id: "winterlood", };}어떤 의미인가?이 코드는 단순히 `getData`라는 함수가 존재함을 보여주는 것이고, 이 시점에서는 아무것도 실행되지 않았다. 함수를 호출하지 않았기 때문에 함수가 반환하는 값은 확인할 수 없다.  2. `console.log(getData())`정의: 이 코드는 `getData`라는 함수를 호출하는 것이다.무엇을 출력하는가?함수가 호출되..

Promise(프라미스)는 자바스크립트에서 비동기 작업을 처리할 때 유용하게 사용되는 개념이다. 특히 Promise Chainning(프라미스 체이닝)을 통해 여러 비동기 작업을 순차적으로 처리할 수 있다. 공부하면서 이 과정에서 등장하는 '기존 프라미스'와 '반환된 프라미스'의 차이점을 이해하는 데 어려움이 있었다. 그래서 이번 글에서는 이 부분을 중점적으로 남겨본다.  1. 프라미스의 기본 개념프라미스는 비동기 작업의 성공 또는 실패 결과를 처리하기 위한 객체이다.비동기 작업이 완료되면 프라미스는 `resolve`를 통해 성공적인 결과를 반환하거나, `reject`를 통해 에러를 반환하게 된다.프라미스를 사용하면 비동기 작업을 보다 직관적으로 처리할 수 있다.  2. 기존 프라미스와 반환된 프라미스의..

1. 오류 메시지sodol@macpro section2 % node dist/index.js(node:61269) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.(Use `node --trace-warnings ...` to show where the warning was created)/Users/sodol/frontend/TypeScript/onebite-typescript/section2/dist/index.js:2export {};^^^^^^SyntaxError: Unexpected token 'export' at wrapSafe (node:internal/modu..