Frontend 7

<Frontend> JavaScript / 비동기 처리

비동기 처리 2024.04.02 - [IT] - JavaScript / 동기/비동기 JavaScript / 동기/비동기 Block / NonBlock , Sync / Async 이번에는 JS에서 가장 중요하면서 어렵고 헷갈리는 개념 중 하나인 "Block / Non - Block", "Sync / Async"를 알아보겠습니다! 머리로는 이해해도 설명해보라고 하면 뭐라 설명할 rezerocodinglife.tistory.com 이전 글에서 다룬 비동기를 처리하는 방법들을 알아보겠습니다. 이번에 다룰 비동기적 코드 결과 처리 방법은 총 3가지입니다. Call Back Promise Async / Await (syntactic sugar) 파이팅! 1. 콜백 (Call Back) call back은 비동기 작..

Frontend 2024.04.03

<Frontend> JavaScript / 동기/비동기

Block / NonBlock , Sync / Async 이번에는 JS에서 가장 중요하면서 어렵고 헷갈리는 개념 중 하나인 "Block / Non - Block", "Sync / Async"를 알아보겠습니다! 머리로는 이해해도 설명해보라고 하면 뭐라 설명할 수 없는 그런.... 저도 100% 이해가 어려워 계속해서 코드를 작성해 보며 이해해 나가고 있습니다. 파이팅!! Block / NonBlock Block 현재 작업이 다른 작업을 실행을 차단하는가 제어권을 기준으로 함. const fs = require('fs'); const data = fs.readFileSync('./file_path'); console.log('파일 읽기 완료', data); // data에 파일이 읽힌 후, '파일 읽기 완료..

Frontend 2024.04.02

<Frontend> JavaScript / 모듈 시스템 (Module)

Module 모듈(Module)이란 무엇인가? 재사용 가능한 코드 조각 코드를 분리해 작고 관리하기 쉬운 파일로 구분 모듈은 자체적인 스코프를 가져 코드와 네임스페이스 충돌을 막음 모듈 사용법은 크게 ESM, CJS 방식으로 나뉨 JS에서 모듈은 코드를 구성하고 재사용하기 위한 도구입니다. 모듈을 사용하면 코드를 논리적으로 구성하고 다른 파일에서 재사용할 수 있어 편리합니다. ESM ( ECMAScript ) Module 프론트엔드 영역에서 표준화되어 널리 쓰이는 방식 node.js 12버전 부터 ESM을 공식 채택 했으나 CJS 방식을 주로 사용 import, export 키워드를 사용 비동기적 장점 비동기적 로딩을 통해 성능 향상을 기대할 수 있다. 브라우저 및 최신 Node.js에서 기본적으로 지원..

Frontend 2024.03.27

<Frontend> JavaScript / This

This this는 JS에서 가장 혼란스러운 개념 중 하나로 꼽힙니다. 상황에 따라 this가 바라보는 대상이 달라지는데, 어떤 이유로 그렇게 되는지를 파악하기 힘든 경우도 있고 예상과 다르게 동작할 때도 있습니다 함수와 객체의 구분이 느슨한 JS에서 this는 실직적으로 이 둘을 구분하는 거의 유일한 기능입니다. 상황별로 this가 어떻게 달라지는지, 왜 그렇게 되는지 그 원인과 효과적으로 추적하는 방법 등을 작성해 보겠습니다. 시작!! This란? 함수가 실행될 때 함수 내부에서 사용되는 값. 함수를 호출한 컨텍스트를 가리킨다. "실행 컨텍스트" 포스팅에서 다뤘던 컨텍스트 개념의 이해가 필요합니다. 2024.03.26 - [IT] - JavaScript / 실행 컨텍스트 JavaScript / 실행 ..

Frontend 2024.03.27

<Frontend> JavaScript / 객체(Object)

Object Object란? 원시 타입(숫자, 문자열, boolean, null, undefined, Symbol)을 제외한 나머지 값들. key와 value로 구성된 property(속성)의 집합 Object는 key와 value의 쌍으로 이루어진 container 그런 여기서 Property(속성)이 무엇인지 알아보겠습니다. - Property Property Name = key Porpery value = value let person = { name: "John", // 'name'은 property name, "John"은 property value age: 30, // 'age'는 property name, 30은 property value greet: function () { // 'gree..

Frontend 2024.03.26

<Frontend> JavaScript 기초 및 용어

- Backend 공부만 해본 제가 Frontend를 시작해 봅니다. - 열심히 가봅시다! * 왜 Frontend를 시작했나? Backend 개발자가 되고 싶어 공부를 시작했습니다. 웹 서비스 프로젝트를 진행할 때에도 "HTML, CSS, JS는 공부 안 해도 괜찮다!" "그때그때 찾아보면서 하면 된다." 라는 안일한 생각을 가지고 진행하였습니다. 하지만! 더 나은 개발자가 되기 위해서, 스스로의 경쟁력을 높이기 위해선 프런트엔드 공부가 필수적입니다! 스스로 공부하고 이해한 내용을 바탕으로 블로그를 작성하려 합니다. JavaScript를 시작으로 공부해 나가겠습니다. * 목 차 변수란? JS 변수 종류 선언과 할당 리터럴(Literal) var Hoisting 함수란? 함수 표..

Frontend 2024.03.24