Pmos programming records Pmos programming records

Component component는 HTML을 반환하는 함수이다. react에서는 Javascript와 HTML 사이에 조합을 JSX하고 부른다. index.js 일반적으로 '' 이것을 컴포넌트라고 부른다. src/Potato.js 내가 만든 Potato라는 component이다. src/app.js react application은 하나의 component만 render할 수 있다. 그래서 potato component는 app.js 안에서 호출할 것이다. 출처 https://academy.nomadcoders.co

브라우저의 workflow - HTML 브라우저가 HTML 을 전달받으면, 브라우저의 render engine이 이를 파싱하고 DOM 노드로 이뤄진 트리를 만든다. 각 노드는 각 HTML 엘리먼트들과 연관되어있다. - CSS 외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱한다. 스타일 정보를 사용해 DOM 트리에 따라 새로운 트리인 렌더트리를 만든다. - attachment Webkit 에서는 노드의 스타일을 처리하는 과정을 ‘attachment’ 라고 부른다. DOM 트리의 모든 노드들은 ‘attach’ 라는 메소드가 있는데 이 메소드는 스타일 정보를 계산해서 객체 형태로 반환한다. 이 과정은 동기적 작업이며 DOM 트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행된다. ..

div 태그 Division의 약자로 웹사이트의 레이아웃을 만들때 주로 사용한다. 웹 페이지에서 논리적 구분을 정의하는 태그이다. div 태그를 사용하여 각각의 공간을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있다. index.html div id = root는 비어있다. app.js 실행 시, 코드 캡쳐화면 react는 자바스크립트로 요소들을 생성하고, html에 밀어넣는다. 그래서 html 코드에는 보이지 않지만 실제로 구동하면 보이는 것을 알 수 있다. 출처 https://coding-factory.tistory.com/188 [Html] Div 태그 사용법 & 예제 오늘은 div태그에 대해 알아보겠습니다. div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때..

npx create-react-app [project name] 단 한 줄의 명령어로 react web app을 설정할 수 있다. yarn node.js의 npm과 동일하다. yarn 대신 npm을 써도 무관하다. code [project folder] visual studio code를 실행할 수 있다. 출처 https://academy.nomadcoders.co Academy 우버 백엔드 + 프런트엔드 + 배포 [고급]Typescript, NodeJS, GraphQL, React, Apollo % Complete academy.nomadcoders.co

node.js node.js는 일반적으로 single thread 구조라고 알고있다. Event loop를 통해 하나의 thread만 받아서 실행하기 때문이다. 그러나, 해시 연산과 같은 CPU intensive한 작업들은 별도의 thread에서 처리한다. 설명 pdkdf2()라는 암호화 함수를 사용할 경우, 대략 1초가 소요된다. 이 작업을 2번 하게 될 경우에 2초가 소요되야 하지만, 똑같이 1초가 걸렸다. 이것은 별도의 thread에서 동시에 처리함을 의미한다. 출처 https://medium.com/@rpf5573/nodejs-nodejs는-single-thread가-아니다-f02b0278c390 [NodeJS] nodejs는 single-thread가 아니다 결론 medium.com

비동기 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 처리방식이다. 이런 방식으로 구동할 경우, idle time이 사라져 컴퓨터 자원을 최대한 사용할 수 있어 효율적이다. 그러나, 프로그래머가 원하는 순서대로 실행되지 않는 문제점이 발생한다. 콜백함수 코드가 순서대로 실행되지 않는 문제를 해소하기 위해 콜백함수가 탄생했다. 식당을 예약하듯이 우선 A(자리에 착석)라는 작업이 끝나야 B(음식 주문)를 실행할 수 있도록 한다. 마치 함수 안의 인자 안에 함수를 심은 모양새이다. Callback hell 위와 같은 형태를 callback hell이라고 부른다. 가독성이 떨어지고 로직을 변경하기 어렵다. 이를 해결하기 위한 두 가지 문법이 존재한다. promise pro..

라우팅 라우팅은 URI 및 특정한 HTTP 요청 메소드인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다. 각 라우트는 하나 이상의 핸들러 함수를 가질 수 있으며, 이러한 함수는 라우트가 일치할 때 실행됩니다. 라우트 예시 package.json npm start를 실행하면, node ./bin/www가 실행 되는 것을 알 수 있다. www app 변수를 이용해 app.js를 가져오고, port를 지정하고 server를 구동하는 코드가 있다. app.js app.js에서 주목해야 할 곳은 app.use이다. index.js 파일은 '/'에 연결되고, users.js는 '/users'에 연결된다. index.js request를 받아서 method에 따라서 re..

웹 브라우저 환경 - Window 객체 : 클라이언트 측 자바스크립트 코드를 위한 전역 객체와 전역 실행 컨텍스트 - DOM(Document Object Model) : 클라이언트 측 객체 계층 구조와 이 계층 구조의 일부를 이루는 문서 객체 모델 - 이벤트 구동 프로그래밍 모델 Window 객체 웹 브라우저의 주요 작업은 HTML 문서를 창에 출력하는 것이다. 클라이언트 측 자바스크립트는 Document 객체가 HTML 문서를 나타내며 Window 객체는 브라우저 창을 나타낸다. Document, Window 둘다 중요하지만 Window 객체가 클라이언트 측 프로그래밍에서 전역 객체 역할을 한다. 모든 전역 변수는 Window 객체의 프로퍼티로 정의된다. DOM Window 객체의 framse[] 배열..