나의 발자취

일단 기본적으로 브라우저 작동 원리를 생각해보면,일단 브라우저는 HTML 문서를 받으면 파싱 처리를 진행한다. 파서는 받은 문서를 읽어서 DOM(Document Object Model) 트리를 생성한다. (DOM은 문서의 구조를 나타낸다.) 이 때 CSS를 처리해 CSSOM(CSS Object Model)을 만든다.브라우저는 이 DOM 트리를 사용해 콘텐츠를 렌더링한다. (렌더링의 두 가지 주요 단계는 layout, paint이다.)렌더링 1) 레이아웃: 브라우저는 CSS에 정의된 스타일과 레이아웃 규칙을 기반으로 각 요소의 크기와 위치를 계산한다.렌더링 2) 페인트: 브라우저가 각 요소를 화면에 그린다. 이제 여기서, 앱의 성격을 이해하고 이 과정에다가 적용해야한다. 예를 들어 페이지 안에 수많은 요..

원래 JS에서는 변수를 선언할 때 var만 사용할 수 있었다. 그런데 2015년부터 let과 const가 추가되었다.그러면서 원래 사용되던 var를 이제는..변수를 사용할 때 사용하게 되면 다소 superfluous한 느낌이 되어서 이제 거의 JS를 사용할 땐 변수에는 let, 상수에서는 const를 사용하는 편이 되었다.   var는 스코프 밖에서도 되지만, let과 const의 경우는 그들이 선언된 스코프 내에서만 존재한다. 스코프란 함수도 될 수 있고, 루프도 될 수 있고, if 조건문도 될 수 있다. {}를 이용해서 열고 닫는 모든 것들이 scope가 될 수 있다.그렇기 때문에 아래와 같이 루프 안에서만 j가 존재하기 때문에, 출력을 하려고 하면 오류가 나는 것이다. 만약에 내가 변수를 오버라이딩..

CRA는 Create React App의 준말으로, 리엑트 코어팀 소속이자 리덕스를 만든 Dan Abranmov가 만든 리액트 스타터 팩이다. yarn create react app projectname npm install -g create-react-app create-react-app projectname으로 하면 projectname으로 된 폴더가 만들어지면서 그 안에 리액트 프로젝트가 생성된다.  예를 들어, yarn으로 프로젝트를 설치하면 이렇게.. 아래와 같이 뜨는데   yarn startdev 서버를 시작하는 것이다. npm이면 npm start를 하면 됨. yarn build public server에 배포를 할 수 있게끔 앱의 빌드 폴더를 만드는 것이다. 개발용 빌드(yarn start..

Node.js and npmnvm을 이용해서 설치를 권장한다.   YarnNode, npm도 훌륭한 패키지 매니저긴 하지만, 페이스북에서 만든 yarn은 리액트를 좀더 쉽게 이용할 수 있도록 더 간결한 커맨드와 더 나은 캐싱을 제공하여 더 좋은 성능을 보인다.  npm install --global yarnnpm i -g yarn을 사용해서 설치하면 된다.  Babel리엑트 기반의 프로젝트를 만들 때 의존성(dependency)용으로만 사용된다(npm package임). 바벨은 이슈 없이 모던 브라우저의 기준에 맞지 않거나 표준화되지 않은 자바스크립트가 실행될 수 있도록 transpile 과정을 도와주는 역할이다. (transpiling: 소스 코드의 언어를, 기능적으로 완전히 똑같게 다른 언어로 바꾸는..

node.js로 html 띄우는 기본 원리 맛보기const express = require('express');const app = express();const port = 3000;app.listen(port, () => { console.log(`${port} 포트로 웹서버 뜸`);}); 일단 이렇게 해주고, 그다음 app.get("/home") 객체를 만들어줌.const express = require("express");const app = express();const port = 3000;// 추가된 코드app.get("/home", (req, res) => { res.send(` 환영합니다 집에 오신걸 더 환영합니다 `);});app.listen(port, () => { console.lo..

음... 아무래도 2021 뉴 버전이 개편되면서 챌린지에 좀 혼선이 있는 듯 싶다. 그 이유는 어제까지 들어야했던 강의를 또 들으라고 했고 퀴즈를 풀었기도 하고 어제 들었던 강의는 JS가 아닌 CSS에서 효과를 핸들링하는것이어서 과제도 그런 식으로 진행했는데 결국 공개된 정답은 그게 하나도 쓰이지 않은, 이전 과정의 코드였다. -_-;; 아무튼 오늘은 객관식 퀴즈가 답이었다. 그리고 내일은 챌린지 7일차지만 휴일이다. 야호~

보호되어 있는 글입니다.

보호되어 있는 글입니다.