개발 신생아

라이브러리 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. 즉, 특정 기능을 모아둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미한다. 예시 Node.js에서 npm으로 설치한 모듈 HTML의 클라이언트 사이드 조작을 단순화하는 JQuery 웹에서 사용자 인터페이스 개발에 사용되는 React.js Python pip로 설치한 패키지/모듈 (tensorflow, pandas, beautifulsoup 등등) React가 여태 프레임워크라고 생각하고 있었다. 하지만 리액트 홈페이지에서도 그렇고 프레임워크로 분류되지 않고 라이브러리로 분류된다고 한다. 따라서 React.js 웹 서비스 중에서 사용자 인터페이스 개발을 위해 사용되는 라이브러리이다. 프레임워크 원하..

HTTP(HyperText Transfer Protocol) HTTP는 인터넷 상에서 데이터를 주고받는데 사용되는 프로토콜이다. HTTP는 데이터를 평문으로 전송하기 때문에, 데이터를 중간에 가로챌 수 있어 보안에 취약하다. 따라서, 중요한 정보를 주고받을때는 HTTPS를 사용해야 한다. 80번 포트를 사용한다. HTTPS(Hyper Text Transfer Protocol Secure) HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다. HTTPS는 HTTP와 다르게 443번 포트를 사용하며, 네트워크 상에서 중간에 제3자가 정보를 볼 수 없도록 암호화를 지원하고 있다. HTTPS는 SSL(Secure Socket Layer) 또는 TLS(Transport Layer Security) 프로토콜..

event.Target vs event.currentTarget 핵심은 currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다는 것이다 즉, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다. 하지만 currentTarget은 이벤트가 부착된 자기자신의 위치를 반환한다. Naver 내가 Naver를 클릭했을때 정확히 어떤 것이 반환되는지 알기 위해 콘솔을 찍어두었다. const onLogin = (event) => { console.log(event.target); // Naver console.log(event.currentTarget); // Naver }; 즉, event.target은 자식요소인 span을 리턴하고, event...

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를 입력하면..