개발 신생아

공유 자원(Shared Resource) 공유자원(shared resource)은 여러 프로세스가 공동으로 이용하는 변수, 메모리, 파일 등을 말한다. 공유자원은 공동으로 이용되기 때문에 누가 어떻게 데이터를 읽거나 쓰느냐에 따라 결과가 달라질 수 있다. (프로세스 : 실행중에 있는 프로그램을 의미) 경쟁 상태(Race Condition) 2개 이상의 프로세스가 공유자원을 병행적으로 읽거나 쓰는 상황, 타이밍이나 순서등이 결과 값에 영향을 줄 수 있다.(동시성 문제) Ex) 프로세스 a와 b가 전역 변수 예금을 읽는다. 둘 다 1000원을 읽었다. 그 후 a가 500원을 더한 후 저장했고, b가 뒤이어 500원을 뺀 후 저장한다. 결과값은 1000원이 저장돼야 하지만, b가 나중에 저장했으므로 500원이..

메모리의 생명 주기 JS에서, 변수나 함수 등 생각할 수 있는 모든 것들을 만들 때 JS엔진은 이에 대한 메모리를 할당하고 더 이상 필요하지 않으면 해제한다. 메모리 할당은 메모리에 공간을 예약하는 과정이며, 메모리를 해제하면 공간이 확보되어 다른 용도로 사용할 수 있게 된다. 변수를 할당하거나 함수를 생성할 때마다, 메모리는 항상 다음과 같은 단계를 거치게 된다. 메모리 할당 JS는 생성한 객체에 필요한 메모리를 할당한다. 메모리 사용 코드에서 명시적으로 수행되는 작업으로, 메모리를 읽고 쓰는 작업은 곧 변수에서 읽거나 변수에 쓰는 작업을 의미한다. 메모리 해제 이 단계는 JS엔진에서도 처리된다. 이때 '객체'는 메모리 관리의 맥락에서 자바스크립트의 객체(Object)뿐만 아니라 함수와 함수의 스코프까..

라이브러리 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. 즉, 특정 기능을 모아둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미한다. 예시 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의 값 ..