프론트엔드6 동기와 비동기 그리고 Blocking & Non-Blocking 0. 개요 1. 동기 Synchronous와 비동기 Asynchronous ① 동기 Synchronous ② 비동기 Asynchronous 2. 블로킹 Blocking & 논블로킹Non-Blocking ① Blocking ② Non-Blocking 3. 동기 / 비동기 + 블로킹 / 논블로킹 📔 Reference 0. 개요 프로그래밍을 하다 보면 동기, 비동기라는 단어를 몇 번 본 적이 있을 것이다. 물론 필자도 두 단어를 프런트엔드 공부를 하면서 본 적이 있었고 그럴 때마다 여기서 말하는 동기와 비동기란 무엇인지 되게 궁금해져서 구글링을 해본 적도 있었다. 그리고 비교적 최근에 동기와 비동기에 대해 정리한 글을 블로그에 올린 적이 있었는데 당시 글을 올리는 시점에서 동기와 비동기에 대해 이해를 덜 한 .. 2024. 3. 26. [JavaScript] 구조 분해 할당 1. 구조 분해 할당 Destructuring Assignment 구조 분해 할당은 배열의 요소나 객체의 Property를 말 그대로 분해해서 각 변수에 할당하는 문법이다. 기존 배열이나 객체에 저장된 데이터 중 일부만 필요한 경우에 활용할 수 있는 문법이다. 먼저 배열의 요소를 분해해서 할당하는 방법부터 알아보도록 하겠다. ① 배열, 구조 분해 할당 (1). 배열 요소를 각 변수에 분해 할당하기 const colors = ["Red", "Green", "Blue"]; let [c1, c2, c3] = colors; console.log(`c1 : ${c1}`); //c1 : Red console.log(`c2 : ${c2}`); //c2 : Green console.log(`c3 : ${c3}`); /.. 2024. 1. 9. [React] React Component 생성법 1. React Component 2. React.createElement() 3. JSX ① JSX ② JSX 코드에 JavaScript 추가하기 1. React Component React는 사용자 인터페이스 User Interface, 속칭 UI를 만들기 위한 JavaScript 라이브러리로 React로 개발한 웹 페이지는 여러 개의 Component를 조합해서 만들어진다. 여기서 Component란 '구성요소', '부품'이라는 의미를 가지고 있다. 이를 참고해서 React에서 Component는 UI를 만들기 위한 구성 요소 및 부품이라고 할 수 있다. 이해를 돕기 위해서 React로 개발된 웹 페이지 하나를 예시로 가져와봤다. https://www.instagram.com/ Instagram w.. 2024. 1. 5. [TypeScript] 타입 단언 Type Assertion 1. 개요 ① 문제 발생 (ts2339: Property does not exist on type) ② 문제 해결과정 1 (변수 SearchInput에 저장되는 DOM 객체의 타입을 HTMLElement로 단언) ③ 문제 해결과정 2 (변수 SearchInput에 저장되는 DOM 객체의 타입을 HTMLInputElement로 수정) 2. 타입 단언 (Type Assertion0) 3. Reference 1. 개요 ① 문제 발생 (ts2339: Property does not exist on type) '나만의 크롬 시작화면'의 검색창을 구현하다가 아래와 같은 Error를 보게 되었다. const SearchInput = document.getElementById("Search_Input"); const .. 2023. 10. 6. [TypeScript] Object is possibly 'null' 현재 수강 중인 자바스크립트 강의에서 나온 '나만의 크롬 시작화면 만들기' 프로젝트에 타입 스크립트를 무작정 도입을 시도했다가 자잘한 부분부터 문제가 생기기 시작했다. 이번에 정리한 것은 프로젝트를 빌드한 2023.09.20 일자에 발생했던 문제를 해결하는 과정에 대한 것이다. const dateElement = document.getElementById("Today_Date"); const setNowDate = (month: number|string, date: number|string, day: string) => { dateElement.textContent = `${month}월 ${date}일 ${day}`; //문제가 발생한 부분 }; 이런 식으로 'dateElement'라는 객체가 null.. 2023. 9. 23. [TypeScript] TypeScript 설치 목차 1. Node.js 설치 ① node, npm 버전 체크 ② Node.js 설치하기 (1) / LTS 버전과 Current 버전 ③ Node.js 설치하기 (2) 2. TypeScript 개발 환경 세팅 ① 프로젝트 폴더 생성 / package.json 파일 생성 ② TypeScript 설치 ③ ts-node 설치 ④ tsconfig.json 파일 생성 ⑤ TypeScript 예제 생성 및 컴파일 3. Reference 1. Node.js 설치 ① node, npm 버전 체크 Node.js를 설치하기 전에 먼저 내 컴퓨터에 node와 npm이 설치된 상태인지를 확인해야 한다. [시작] 메뉴에서 [Windows 시스템] 폴더 내부에 있는 '명령 프롬포트' 프로그램을 실행하고 아래의 명령어를 입력해 보.. 2023. 9. 9. 이전 1 다음
