개발 신생아

Position(배치) 요소의 위치는 반드시 어떠한 기준을 잡고 설정해야 한다. position속성은 요소의 위치를 지정하는 기능을한다. 기본: static 가능값: relative(요소 자신 기준), absolute(부모 요소 기준), fixed(뷰포트 기준), sticky(스크롤 영역 기준) position: relative를 이용하는 배치는 거의 사용하지 않는다. 대부분 absolute 사용. 왜? 다른 요소들의 혼동이 올 수 있기 때문이다. top, bottom, left, right 속성은 위치를 지정한다. 기본: auto 가능값: 양수, 음수 flex position 속성 값 중 하나가 아니라 CSS의 display 속성 값이다. flexible한 박스 레이아웃을 생성하는데 사용되는 도구이다...

package.json Node.js에서 package.json 파일은 Node.js 프로젝트를 위한 구성 파일 package.json 파일은 프로젝트의 정보, 의존 모듈(dependencies), 스크립트 등을 포함한다. npm을 이용하여 Node.js 모듈을 설치하고 관리하는데도 사용된다. name: 프로젝트의 이름 version: 프로젝트의 버전 description: 프로젝트의 간단한 설명 keywords: 프로젝트와 관련된 키워드 main: 모듈 진입점 파일의 경로 scripts: 프로젝트를 실행하는데 사용되는 스크립트 author: 프로젝트의 작성자 정보 license: 프로젝트의 라이센스 정보 dependencies: 프로젝트에서 사용하는 외부 모듈의 종속성 정보 dependencies pa..

함수호출 JS에서 함수를 호출하는 방법에는 가장 일반적이고 빈번히 사용되는 함수 뒤에 ()를 붙여 호출하는 방법과 call, apply를 사용하여 호출하는 방법이 잇다. 아래 예제 코드를 보면 각각 함수 호출 방식은 다르지만, 같은 결과를 보여주고 있다. function foo(a, b, c) { console.log(a + b + c); }; foo(1, 2, 3); // 6 foo.call(null, 1, 2, 3); // 6 foo.apply(null, [1, 2, 3]); // 6 call() MDN에 기재되어 있는 call()의 매개변수의 설명을 보면 아래와 같다. func.call(thisArg[, arg1[, arg2[, ...]]]) thisArg: func 호출에 제공되는 this의 값 ..

라우터란? 라우터는 클라이언트의 요청경로(path)를 보고 이 요청을 처리할 수 있는 곳으로 기능을 전달해주는 역할을 한다. 이러한 역할을 라우팅이라고 하는데, 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 의미한다. 예를들어, 클라이언트가 /users 경로로 요청을 보낸다면 이에 대한 응답 처리를 하는 함수를 별도로 분리해서 만든 다음 get() 메소드를 호출하여 라우터로 등록할 수 있다. 즉, 한마디로 간단하게 말하자면 '연결 장치' 이다. 예시코드 // index.js const express = require('express'); // 모듈 가져오기 const app = express(); // 할당 const testRouter = require('..

Webpack 웹팩은 여러개 파일을 하나로 합쳐주는 모듈 번들러이다. 번들러(Bundler)의 탄생 배경 원시시대의 웹사이트 웹의 초창기 떄는 규모가 매우 작았다. 따라서 웹을 구성하는 HTML이나 JS파일의 크기가 지금에 비해 훨씬 작았고, 서비스의 유지보수도 그렇게 어렵지 않았다. 하지만 점점 기술이 발전하면서 파일 하나당 코드의 양과 웹을 구성하는 파일의 수 또한 커지게 되었으며, 여기저기서 문제들이 발생했다. 대표적인 문제점은 아래와 같다. 중복된 이름으로 인한 충돌, 위험 - 대규모 웹페이지의 경우, 엄청난 개수의 JS파일로 구성되며, 여러 사람이 웹서비스 개발에 참여하므로 서로 만든 함수명과 변수명이 겹치는일이 일어나기 마련이다. 파일 전송 속도 문제 - 사용자가 브라우저에서 URI를 입력하면..

CSR (Client Side Rendering) 말그대로 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이언트에게 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다. User가 Website 요청을 보낸다 CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다. CDN : aws의 cloudflare를 생각하면 된다. 엔드 유저의 요청에 물리적으로 가까운 서버에서 요청에 응답하는 방식 클라이언트는 HTML과 JS를 다운로드 받는다. (이때 SSR과 달리 유저는 아무것도 볼 수 없다.) 생략 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다. (이때 유저들은 placeholder를 보게된다.) 서버가 API로부터의 요청에 응답한..

require vs import (CommonJs와 ES6) 기본적으로 require와 import는 모듈 키워드이다. 외부 파일이나 라이브러리를 불러올때 사용한다. require는 Node.js에서 사용되고 있는 CommonJS키워드이고, import는 ES2015에서 새롭게 도입된 키워드이다. 둘다 다른 파일의 코드를 불러온다는 같은 목적을 가지고 있지만, 다른 문법 구조를 지니고 있다. const html = require("html"); import test from "test.js"; require / exports (Common JS) require는 Common JS 키워드로 (Node.js)변수를 할당하듯 모듈을 불러오는 것이 특징이다. 모듈 전체 내보내고 가져오기 module.export..

이벤트 버블링(Event Bubbling) 이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날때까지 반복되면서 핸들러가 동작하는 현상을 말한다. 버블링 예제코드 DIV1 DIV2 DIV3 const divs = document.querySelectorAll("div"); const clickEvent = (e) => { console.log(e.currentTarget.className); }; divs.forEach((div) => { div.addEventListener("click", clickEvent, false); // false 생략가능하다. }); div를 클릭하면 해당하는 클래스의 이름이 콘솔..