프로그래밍9 동기와 비동기 그리고 Blocking & Non-Blocking 0. 개요 1. 동기 Synchronous와 비동기 Asynchronous ① 동기 Synchronous ② 비동기 Asynchronous 2. 블로킹 Blocking & 논블로킹Non-Blocking ① Blocking ② Non-Blocking 3. 동기 / 비동기 + 블로킹 / 논블로킹 📔 Reference 0. 개요 프로그래밍을 하다 보면 동기, 비동기라는 단어를 몇 번 본 적이 있을 것이다. 물론 필자도 두 단어를 프런트엔드 공부를 하면서 본 적이 있었고 그럴 때마다 여기서 말하는 동기와 비동기란 무엇인지 되게 궁금해져서 구글링을 해본 적도 있었다. 그리고 비교적 최근에 동기와 비동기에 대해 정리한 글을 블로그에 올린 적이 있었는데 당시 글을 올리는 시점에서 동기와 비동기에 대해 이해를 덜 한 .. 2024. 3. 26. HTML 문서가 브라우저에 랜더링되는 과정 1. 랜더링 Rendering의 정의 HTML, XML과 같은 Markup 언어로 작성된 문서를 chrome이나 Firefox와 같은 웹 브라우저에서 열면 해당 브라우저의 엔진 (Chrome = Blink, Firefox = Gecko)이 사람의 눈으로 볼 수 있는 형태로 변환해 준다. 이때 Markup 언어로 작성된 문서를 사람의 눈으로 볼 수 있는 형태로 변환해 주는 과정을 랜더링 Rendering이라고 한다. 2. 웹 문서가 브라우저에 랜더링 되는 과정 프로그래밍에서의 랜더링 Rendering이 무엇인지 간단하게 알아봤으니 이제 본격적으로 웹 문서가 브라우저에 랜더링 되는 과정에 대해 다뤄보도록 하겠다. 아래 HTML 문서, 웹 페이지를 구글 크롬과 같은 웹 브라우저로 연다고 가정해 보자. 아래는 .. 2023. 12. 18. [React] 개발 환경 설정 📃 목차 1. ReactJS 개발 환경 설정하기 ① React 설치하기 ② React 개발 모드와 배포 모드 2. Create React App ① node.js 설치 ② React 설치 ③ 프로젝트 폴더 구성 ④ React 예제 실행하기 📕 Reference React 개발 환경을 설정하는 방법은 두 가지가 존재한다. 하나는 이 글을 쓰는 시점에서 위의 ② React 개발 모드와 배포 모드 React로 개발한 웹 페이지를 배포할 때는 'development.js'를 'production.min.js'로 수정해 주자. 앞에서 태그를 통해 설치했던 React와 ReactDOM은 development, 개발 모드로 프로그램 개발 중에 버그로 이어질 수 있는 요소들에 대해 경고를 보내는 검증 코드가 포함되어 .. 2023. 12. 12. 라이브러리, 프레임워크, UI 0. 개요 우리가 게시판 형태의 웹 사이트를 만든다고 가정해 보자. 게시판을 만들 때 구현할 기능으로는 회원 가입, 게시글 작성, 게시물 목록 표시 등이 존재하고 이를 구현할 때 모든 기능을 처음부터 끝까지 만들 수도 있고 아니면 일부 기능은 다른 사람이 만들어둔 부품, 소프트웨어를 가져오고 그걸 잘 조합해서 우리가 원하는 형태의 웹 페이지로 만들 수도 있다. 여기서 웹 페이지를 만들 때 활용했던 다른 사람이 만들어놓은 부품, 소프트웨어로 라이브러리 Library와 프레임워크 Framework를 예로 들 수 있다. 이번에는 라이브러리 Library와 프레임워크 Framework의 정의를 먼저 다루고 추가적으로 UI, 사용자 인터페이스의 정의에 대해서도 정리해 봤다. 바로 본론으로 들어가도록 하자. 1. .. 2023. 11. 15. [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. [Javascript] 자료형과 형변환 목차 1. 자료형 (Data Type) ① Number (숫자형) ② String (문자형) ③ Boolean (논리형) ④ null / undefined 2. 형변환 (Type Casting) ① 묵시적 형변환 ② 명시적 형변환 0. 개요 let num = 20; console.log(typeof num); //"number" num = "Hello"; console.log(typeof num); //"string" //typeof 연산자는 피연산자의 자료형을 나타내는 문자열을 return하는 연산자이다. //처음에 변수 num의 자료형이 number, 숫자형으로 나왔고 //이후 num의 값을 "Hello"로 바꿨더니 해당 변수의 자료형이 string, 문자형으로 //변경된 것을 확인할 수 있다. 상단.. 2023. 6. 4. 이전 1 2 다음
