Dev Log/Programming Language

JAVA 운영체제와는 독립적으로 동작 : 어느 운영체제에서나 동일 형태로 실행 객체 지향 언어자동 메모리 관리 : 가비지 컬렉터로 자동 메모리 관리 가능네트워크와 분산처리 지원멀티 쓰레드 지원동적 로딩 지원 : 필요한 시점에 해당 클래스만 로밍 자바 가상 머신(JVM)Java 클래스 파일을 로드하고 바이트 코드를 해석하는 가상의 기계메모리 등의 자원을 할당하고 관리하며 정보를 처리하는 작업을 하는 프로그램자바로 작성된 모든 프로그램은 자바 가상 머신에서만 실행 가능개발자는 한 번만 프로그램을 작성하고 서로 다른 운영체제라도 자바 가상 머신만 설치되어 있다면 동작 가능 가상 기계 : 소프트웨어로 구현된 하드웨어가상 컴퓨터 : 실제 컴퓨터(하드웨어)가 아닌 소프트 웨어로 구현된 컴퓨터 Java 애플..

웹팩https://webpack.js.org/오픈 소스 자바스크립트 모듈 번들러여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리의존성을 분석해 모듈을 번들화프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build) 과정을 통해 하나의 파일로 만듬 모듈프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위 모듈 번들링웹 애플리케이션을 구성하는 몇십, 몇 백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작 웹팩 장점 파일 단위의 자바스크립트 모듈 관리의 필요성자바스크립트의 변수 유효 범위 (스코프)는 기본적으로 전역 범위를 기본으로 가져 어디에서든 변수에 접근 가능따라서 파일 단위로 자바스크립트 코드를 관리할 때 모듈화 하지 않으면 문제 ..

리액트 구조node_modules 폴더npm을 통해 설치된 패키지 매니저(Package manager)들이 모여 있는 디렉토리리액트 프로젝트를 실행할 때 사용되는 dependency 모듈들이 모두 모여있는 폴더설치되어있는 모듈들은 package.json 파일의 dependencies 부분 기제프로젝트를 깃에 올릴 때 용량이 큰 node_modules은 보통 지우고 올림이 디렉터리를 지우면 프로젝트는 실행되지 않지만, package.json의 dependencies 부분에 기록되어 있다면 npm install을 이용해 다시 설치 가능 public 폴더이곳의 파일은 public/index.html 에만 쓰임html 파일들과 이미지 파일 저장소정적인 성격favicon.icon웹사이트의 상단에 위치하는 '파..

가상돔실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해서 조작 (실제 DOM의 가벼운 사본)실제DOM의 구조를 분석하여, 아래와 같은 형태로 메모리에 저장하고 관리하는 객체속도적인 부분과 많은 일을 수행하다 버그가 발생하거나 브라우저가 죽는 일 등등의 일을 개선HTML객체에 기반한 자바스크립트 객체로 표현 가능가상돔 트리는 실제 렌더링이 되지 않기 때문에 연산비용이 적어 실제 DOM 리렌더링에 비해서 효율적 재조정뷰(HTML)에 변화가 있을 때, 구 가상돔과 새 가상돔을 비교하여 변경된 내용만 DOM에 적용 참고사이트https://ko.legacy.reactjs.org/docs/reconciliation.html

DOM(문서 객체 모델)웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 스타일 요소를 구조화 시켜 표현프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 인터페이스HTML또는 XML을 스크립팅언어(자바스크립트)와 서로 이어주는 역할트리 자료 구조로 구축현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트 뿐 트리자료 구조노드들의 계층 구조계층 구조로 이루어져 부모-자식 관계, 형제관계를 표현하는 비선형 자료구조 document node (문서 노드)DOM Tree에서 최상위 루트 노드이며 document 객체를 나타냄HTML 문서 전체를 나타내는 노드window 객체의 document 프로퍼티로 바인딩 되어 있어 window.document , document..

웹 페이지 빌드 과정(CRP)브라우저가 HTML, CSS, Javascdript를 화면에 픽셀로 변환하는 일련의 단계브라우저가 서버에서 응답을 받아 하나의 화면을 그려내는 것서버에서 응답으로 받은 HTML 데이터를 파싱HTML을 파싱한 결과로 DOM Tree(Document Object Model) 생성파싱하는 중 CSS 파일 링크를 만나면 CSS 파일을 요청해서 받음CSS 파일을 읽어서 CSSOM(CSS Object Model) 생성DOM Tree와 CSSOM이 모두 만들어지면 이 둘을 사용해 Render Tree 생성Render Tree에 있는 각각의 노드들이 화면의 어디에 어떻게 위치할 지를 계산화면에 실제 픽셀을 Paint 1. DOM Tree(Document Object Model Tree) ..

컴포넌트재사용이 가능한 각각의 독립된 모듈(UI) 코드 조각이미 만들어진 컴포넌트들을 조합하여 화면을 구성 가능 컴포넌트 특징 구현소스코드가 아닌 실행코드 기반으로 재사용할 수 있도록 이미 구현이 완료되어야 함 명세화교체 가능한 컴포넌트를 개발하기 위해서는 표준을 준수하여 개발해당 컴포넌트의 용도, 유형, 기술 표준과 인터페이스 등에 대한 정보들에 대해서 명세화 패키지화컴포넌트가 개발되어 배포될 때 관련 문서와 코드들이 독립적인 단위로 패키지화 배포사용자가 필요한 기능만을 패키지한 컴포넌트를 재사용 할 수 있도록 독립적으로 배포 가능 하나 이상의 클래스 들로 구성하나 이상의 컴포넌트를 개발하기 위해서는 하나 이상의 클래스들을 바탕으로 개발컴포넌트가 되기 위해서는 반드시 클래스나 객체로 만들어야만 하는 것..

프레임 워크뼈대나 기반구조프로그램을 개발하기 위해 사용되는 틀을 제공하는 프로그램 프레임워크의 특징특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의컴포넌트들은 재사용이 가능높은 수준에서 패턴들을 조작화 가능 라이브러리(Library) 소프트웨어를 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임, 공통으로 사용될 수 있는 특정한 기능들을 모듈화 리액트는 프레임워크가 아닌 라이브러리 라이브러리 종류react: 리액트를 사용하기 위한 라이브러리react-dom: react와 DOM 사이에 연결react-scripts: 리액트 프로젝트 초기 셋업 도움babel-cli: 바벨을 터미널에서 사용하기 위해 필요babel-preset-e..

TypeScript 유형 타입 : value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법 Primitive types이름의미string문자열number숫자 값booleantrue와 false 값null하나의 값 nullundefined하나의 값 undefined, 초기화 되지 않은 변수의 기본 값symbol고유한 상수 값 Methods이름의미function함수array배열classes클래스object객체, 배열, 함수 TypeScript 타입이름의미Any모든 타입 허용Union변수, 매개변수에 대해 둘 이상의 타입 허용Tuple크기와 타입이 고정된 배열Enum특정 값을 고정하는 독립된 자료형Void함수에서 반환 값이 없을 때 반환 타입을 표현함Never절대 발생할 수 없는 타입 str..

Typescript 란? 자바스크립트동적 타입런타임에서 동작할 때 타입 오류 확인브라우저, Node.js 환경에서 직접 동작 가능 타입스크립트정접 타입컴파일 타임 코드 작성 단계에서 오류 확인브라우저, Node.js 환경에서 직접 동작 불가능-> 컴파일 과정 필수 (브라우저에서 실행하기 위해 파일을 변환)자바스크립트에 타입을 부여하여 더 많은 기능을 가진 확장 언어 Typescript를 사용하는 이유자바스크립트의 코드를 단순화 하여 가독성 향상자바스크립트를 작성 시 편리한 디버그오픈소스정접 검사와 같은JavaScript IDE 및 사례를 위한 생산적인 개발 도구 제공 Type System개발 환경에서 에러 발견에 도움오직 개발 환경에서만 활성화타입 스크립트와 성능 향상은 관계가 없음