차근차근

TIL React SPA SPA(Single-Page Application) SPA는 서버로부터 완전히 새로운 페이지를 불러오지 않고 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트 SPA의 장, 단점 장점 필요한 부분만 업데이트하기 때문에 사용자의 반응에 빠르게 반응한다. 서버는 요청 받은 데이터만 넘겨주기 때문에 서버 과부하 문제가 현저히 줄어든다. 화면 전체를 새로 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다. 단점 SPA 경우 JS 파일의 크기가 크기 때문에 JS 파일을 기다리는 시간으로 인해 첫화면 로딩 시간이 길어진다. 검색 엔진 최적화(SEO)가 좋지 않다. ※ 검색 엔진 최적화..

TIL 리엑트 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리다. 1. 리엑트는 선언형(Declarativ)이다. 리엑트는 HTML/ CSS / JS로 나눠 적기 보다 하나의 파일에 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. JSX는 JavaScript XML의 약자이고 문자열도 HTML도 아니다. React에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법이다. JSX은 브라우저가 바로 이해할 수 있는 JS 코드는 아니기 때문에 'Babel'을 이용해서 JSX를 JS로 컴파일한다. JSX는 HTML과 JS가 결합한 문법이기에 기존과 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 개발을 할 수 있다. 즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일..

TIL 일급 객체(first-class citizen)의 세 가지 특징 자바스크립트에도 특별한 대우를 받는 일급 객체(first-class citizen)가 있습니다. 대표적인 일급 객체 중 하나가 함수입니다. (자바스크립트가 나온 시점을 고려했을 때,) 자바스크립트에서 함수는 아래와 같이 특별하게 취급됩니다. 변수에 할당할 수 있다. 다른 함수의 인자로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 이는 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미한다. 고차 함수(higher-order function) 고차 함수(hig..

TIL DOM(Document Object Model) DOM은 프로그래밍 언어가 웹사이트를 조작할 수 있게 만들어주는 인터페이스(HTML을 조작할 수 있도록 마련된 객체 형태의 구조나 모델)이다. HTML과 CSS의 structure와 style을 파싱하기 위해서, 브라우저는 Document Object Model이라 불리는 document의 겉모양(representation)을 만든다. 이 모델(model) 은 자바스크립트가 오브젝트로서의 웹사이트 document의 컨텐츠와 엘리먼트에 접근할 수 있도록 해준다. 문서(document)와 문서의 요소(모든 element - 전체 문서, 헤드, table, text 등)는 문서를 위한 DOM의 한 부분이다. DOM의 구현은 어떠한 언어에서도 가능하지만, ..

TIL 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드는 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 이를 위해, 자바스크립트는 this라는 특수한 식별자를 제공한다. this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다, 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 단, this 바인딩(this가 가리키는..

TIL 원시 자료형과 참조 자료형 원시 자료형과 참조 자료형의 구분이 필요한 이유 메모리에 데이터를 저장할 때, 크기가 동적인 데이터가 들어오는 경우 데이터가 언제 늘어나고 줄어들지 모르기 때문에 고정된 데이터 공간을 사용하는 것은 비효율적이다. 그렇기 때문에, 크기가 상황에 따라서 커졌다가 작아지는 특별한 데이터 저장소(Heap)를 마련하여 따로 관리한다. 그래서 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 Heap에 저장된 보관함의 주소(reference)가 담긴다. // 원시 자료형일 경우 let a = 2; let b = a; a = 3; console.log(a) // 3; console.log(b) // 2; // 참조 자료형일 경우 let e..

TIL id vs class id: 하나 밖에 없는 스타일의 경우 class: 자주 사용되는 스타일의 경우 후손 셀렉터와 자식 셀렉터의 차이 후손 셀렉터 ' ' (띄어쓰기)를 사용한다. 해당요소 하위에 속해 있는 모든 요소 /* id가 container인 엘리먼트의 후손 엘리먼트 중 class가 mx-auto인 엘리먼트를 선택합니다. */ #container .mx-auto {…} /* !주의 헷갈리지 않기 id가 container이면서 동시에 class가 mx-auto인 엘리먼트를 선택합니다.(공백이 없다) */ #container.mx-auto {…} 자식 셀렉터 '>' (부등호)를 사용한다. 해당요소 바로 아래단계에 있는 해당 요소 /* id가 container인 엘리먼..

배열 Array.isArray() 변수, 데이터, 또는 특정 값이 배열인지 아닌지 판별할 수 있다. 자바스크립트 immutability / mutability 원본을 변경하는 메소드는 mutation 변경하지 않는 것이 immutation 참고: https://doesitmutate.xyz/ 배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다. 배열은 순서, 객체는 키벨류 값을 가질때(의미를 가질때) 객체 객체 속성 조회 'content' in tweet; // boolean // dot notation tweet.key; // bracket notation let foo = 'key'; tweet['key']; tweet[foo];객체 속성..

TIL Git 소스 코드를 기록, 관리, 추적하는 버전 관리 시스템 여러 사람들이 협업 하다보면 여러가지 버전이 생기기마련 어디 부분이 수정됐는지 왜 수정 됐는지 알기 좋다. 변경 이력의 저장, 이전 버전으로 회귀, 변경 내용 파악, 백업이 가능해 협업에 효율적이다. Github 깃레포지토리를 Github을 통해 여러 사람들이 공유하고 접근하는 개발자의 SNS, Code Review 등을 통해 협업하며 많은 오픈 소스 프로젝트에 참여할 수 있게 해주는 클라우드 기반 서비스 Fork 내 깃헙 계정으로 원격 저장소를 복사해오는 것 clone 원격 저장소에 있는 파일을 내 로컬 저장소로 복사해오는 것. git clone 명령어 뒤에 Repository 주소를 입력하면 해당 Repository를 내 컴퓨터(Lo..

TIL CLI(Command-Line Interface)의 장점 리눅스의 터미널은 키보드의 입력과 모니터의 출력으로 모든 작업이 가능하다. 리눅스 터미널은 GUI가 개발되기 이전부터 컴퓨터를 조작하기 위해 사용되었기 때문에, GUI가 할 수 있는 모든 작업은 CLI로 가능하다. GUI가 PC(Personal Computer, 개인 컴퓨터)시장을 지배하게 되었지만, CLI는 여러가지 측면에서 유리하다. 대표적으로 클라우드 컴퓨팅과 같이 대량의 서버 컴퓨터를 사용하는 서비스를 예로 들 수 있다. 데이터 센터에는 최소 5만개 이상의 서버 컴퓨터가 설치되어 있는데 이 모든 컴퓨터에 I/O 소스(키보드, 마우스, 모니터 등)를 부착하는 일은 불가능에 가깝고 비효율적이다. 이렇게 대량의 서버를 이용하는 서비스는 C..