꿈이 많은 어른 아이

웹 페이지는 3가지 언어를 이용해 작성된다. HTML : 웹 페이지의 구조와 내용 CSS : 웹 페이지의 모양, 디자인 JavaScript : 웹 페이지의 동적 변경과 응용프로그램 작성 JavaScript 사용을 함에 있어 그 본질을 조금 더 이해하고자 이 글을 작성한다. 자바스크립트는 프로토타입 기반 언어이며, 싱글 스레드이다. 프로토타입 기반 언어란 무엇일까? 싱글 스레드란 뭘 의미하는 걸까? 자바스크립트란 프로토타입 기반 언어와 싱글 스레드 라는 단어를 알기 전에 자바스크립트의 기본적인 개념부터 알고 넘어가려한다. 자바스크립트 코드 위치 HTML 태그의 이벤트 리스너 속성 자바스크립트 파일 URL 부분 자바스크립트의 용도 자바스크립트의 일반적인 용도는 웹페이지에 기능을 더해 HTML 웹 페이지를 동..

다양한 프로그래밍 언어가 존재함에 따라 각기 다른 분야에서 다른 언어들이 사용되고 있다. 어떤 언어들이 존재하고, 그 언어들이 가진 장단점에 따라 어디서 사용되는지 알고 있어야 한다고 생각이 들어 정리해보았다. 프로그래밍 언어 (Programming Language) 컴퓨터 시스템을 구동시키는 소프트웨어를 작동시키기 위한 형식 언어를 의미한다. 쉽게 말하면, 컴퓨터를 이용하기 위한 언어이다. 이는 저급 언어와 고급 언어로 나뉘는데, 우리가 흔히 볼 수 있는 자바스크립트나 파이썬 등은 고급 언어에 해당한다. 고급 언어일수록 사람이 사용하는 언어와 가깝다. 저급 프로그래밍 언어 & 로우 레벨 프로그래밍 언어 (low-lever programming language) 컴퓨터가 이해하기 쉽게 작성된 프로그래밍 ..

REST API REST의 원칙을 기반으로 서비스 API를 구현한 것이다. 최근 OpenAPI(누구나 사용할 수 있도록 공개된 API ex. 구글맵, 공공 데이터 등), 마이크로 서비스(하나의 큰 어플리케이션을 여러 개의 작은 어플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍처) 등을 제공하는 기업 대부분은 REST API를 제공한다. 그렇다면 REST, API는 뭘까? REST(Representational State Transfer) 자원을 이름으로 구분해 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 즉, 자원(resource)의 표현(representaion)에 의한 상태 전달을 뜻한다. 자원 : 해당 소프트웨어가 관리하는 모든 것 (문서, 그림, 데이터, 해당 소프트웨어 ..

Padding, Margin Padding : 안쪽 여백 Margin : 바깥쪽 여백 Position static : 요소를 일반적인 문서 흐름에 따라 배치한다. relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. absolute : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다. fixed : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. sticky : static + fixed 특징을 동시에 가진다. - 오프셋(offset) : top, left, right, bottom 값을 의미하고 기준이 되는 곳으로 부터 얼마만큼..

클로저(Closure) 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. - 어휘적 범위 지정 (Lexical scoping) function init() { var name = "test"; function displayName() { console.log(name); } displayName(); } init(); 여기서 주의할 점은 displayName() 내부에는 자신만의 지역 변수가 없다는 점이다. 하지만 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init() 에서 선언된 변수 name에 접근할 수 있다. 만약 displa..

호이스팅(Hoisting) 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 컴파일러는 자바스크립트 엔진이 인터프리팅을 하기전에 컴파일을 한다. - 인터프리팅(Interpreting) : 컴파일과 다르게 소스 코드를 한 번에 읽어서 번역하지 않고, 런타임 상태의 소스코드를 한 줄 한 줄 번역하면서 프로그램을 구동하는 방식이다. 한 줄씩 번역한 코드가 바로 기계어가 되는 것은 아니고 중간 코드(intermediate code)로 번역된다. 이 중간 코드는 다른 프로그램에 의해 기계어로 번역되어 실행된다. 예를 들어보자 console.log(a); var a = 2; 컴파일 단계에서 자바스크립트 엔진은 이를 2개의 구문으로 확인한다. var a a = 2 var..

인터넷에 www.google.com 또는 www.naver.com 을 검색했을 때 어떤 과정을 거쳐 화면에 보이게 될까? 웹 페이지를 움직이는 그 본질을 찾아서 알아보자. 주소창에 google.com을 입력하면 일어나는 일 브라우저의 렌더링 원리 Reflow와 Repaint가 실행되는 시점 웹 브라우저 (Web borwser) : HTML 문서와 그림, 멀티미디어 파일 등 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭이다. 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 등이 있다. 월드 와이드 웹 (World Wide Web, WWW, W3) : 인터넷에 연결된 컴퓨터를 이용해 사람들과 정보를 공유할 수 있는 거미줄(Web)처럼 얼기설기 엮인 공간을 뜻하는..

리액트를 이용한 웹앱 프로젝트를 시작할 때 늘 언제나 CRA(Create React App)을 사용했다. 분명 다른 툴도 있는데 CRA만 사용한 이유는 잘 몰랐기 때문에 선택지에 아예 없었다. 그렇게 프로젝트를 진행하면서 "그럼 나는 CRA가 뭔지 잘 알고 사용하고 있나?" 라는 생각이 들었다. 리액트 측에서 추천하는 툴체인은 다음과 같다. React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App. 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js을 시도해보세요. 고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면 Gatsby를 시도해보세요. 하나씩 정리해보자. React 리액트는 메타에서 개발한 오픈 소스 라이브러리다. 메타는 페이스북에서 이름..

Git pull 에러가 또 발생했다. Fatal: Not possible to fast-forward, aborting 원인을 알아보니, 원격 저장소를 업데이트 한 후 pull 이 전에 로컬 저장소를 편집하여 commit을 한 경우에 발생한다. draw.io를 이용해보려고 웹에서 수정하는 과정에서 원격 저장소를 건드렸던 것이 원인이었다. 그냥 이럴 경우에는 rebase를 이용해서 pull을 다시 해주면 된다. git pull --rebase

Git Pull을 진행하려는데 오류가 생겼다. fatal: Need to specify how to reconcile divergent branches. repo를 pull 하여 받아올 때, rebase, merge, fast-forward 3가지 방법이 있는데 이를 명시해 달라는 에러이다. pull 할 때 rebase를 하지 않고 merge 한다 git config pull.rebase false pull 할 때 rebase를 한다 git config pull.rebase true fast-forward 일 때만 pull 한다 git config pull.ff only 이 때 fast-forward 란, Merge 커밋을 남기지 않고 기존 커밋을 따라가는 것으로 충돌 없이 따라갈 수 있는 관계를 의미한..