꿈이 많은 어른 아이

인터넷에 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 커밋을 남기지 않고 기존 커밋을 따라가는 것으로 충돌 없이 따라갈 수 있는 관계를 의미한..

React나 Vue를 사용하는 과정에서 늘 항상 함께하는 단어들은 웹팩(Webpack)과 바벨(Babel)이다. 개발을 해보겠다고 이것저것 사용해봤지만 퍼블리싱에 가까운, 겉핥기 수준에서의 장난에서 좀 벗어나고자 개념들을 이해해보려고 한다. 머리 속으로만 기억하면 또 까먹을것이 뻔하기 때문에 다시 개념을 정리하고 기록해두려 한다. 웹팩(Webpack)이란 자바스크립트 애플리케이션을 위한 모듈 번들러(module bundler)를 의미한다. 최신 프론트엔트 프레임워크(Framework)에서 가장 많이 사용된다. 그럼 프레임워크는 뭘까? 프레임워크 (Framework) 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조이며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다. 흔히 라이브..

노트북이 없어 학교 노트북을 빌려 사용하던 나는 갑자기 나에게 투자한다라는 비장한 마음이 들어 중고로 맥북을 구매하게 되었다. 윈도우뿐만 아니라 맥으로도 개발작업을 한다는 이야기를 듣고 구매.. 했다고 하기엔 그냥 많이 이뻐서 구매했다. 스타벅스 이용권 구매한 기분이랄까. 여튼 이전에 윈도우에서 작업했던 부분을 맥으로도 옮겨야할텐데 하며 깃배쉬를 깔려 했더니 이것도 영 쉽지 않았다. 그래서 잊어버리기 전에 정리를 좀 해보려한다. 1. 터미널 실행 맥은 기본적으로 쉘이 zsh로 설정되어 있다. 윈도우의 cmd와는 조금 다르지만, 크게 차이점은 없다. 쉘(Shell)은 명령어와 프로그램을 실행할 때 사용하는 인터페이스를 의미한다. 커널(Kernel)과 사용자간의 다리 역할을 하는 것으로, 사용자로부터 명령을..

Git 명령어 정리 Git을 항상 사용하지만 기본적인 이해와 활용이 부족한 것 같아 주요 명령어들을 정리해 보았다. 모든 명령어 뒤에 --help 옵션을 사용해 활용 가능한 옵션을 더 알아 볼 수 있다. Ctrl + F 를 이용해 찾기 기능 사용할 수 있다. git init git 초기화를 의미한다. git status 현재 git 프로젝트에서 파일들의 상태를 보여준다. 현재 브랜치와 커밋 상태, 작업 중인 파일의 상태 등을 확인할 수 있다. git add 파일의 변경사항을 인덱스index에 추가한다. 스테이징 영역으로 추가된 변경 이력만 commit 할 수 있다. git add [-A] [..] # 모든 변경점 추가 git add -A # Readme.md 파일 추가 git add Readme.md g..

한 프로젝트에 여러명의 개발자가 함께 할 때, 동일한 소스 코드 위에서 각자 맡은 부분에 따라 제각기 개발이 이뤄진다. 그렇기 때문에 각각 서로 다른 버전의 코드가 만들어 질 수 밖에 없다. 이럴 때 여러 개발자들이 동시에 다양한 작업을 진행할 수 있도록 하는 기능이 브랜치(Branch) 이다. 각자 독립적인 작업 영역에서 마음대로 작업을 진행하고, 나중에 원래의 버전과 비교해서 새로운 버전으로 만들어 낼 수 있다. 마스터 브랜치 (Master) 나무로 치면 기둥이 되어주는 브랜치로 저장소를 처음 만들때 생기는 브랜치이다. 작업 브랜치는 마스터를 기준으로 뻗어나갈 수 있다. 통합 브랜치 (Intergration) 언제든지 배포할 수 있는 버전을 만들 수 있어야 하는 브랜치이다. 그렇기 때문에 늘 안정적인..

운이 좋게 처음 프로젝트 때 부터 git을 사용했는데, 매번 할 때 마다 구글링을 해야하니 이건 아직 내 것이 되지 못했구나 하는 생각이 들었다. 하나씩 정리해보자. Git 은 소스 코드를 효과적으로 전달하기 위해 개발된 분산형 버전 관리 시스템 이다. 원래는 Linux 소스 코드를 관리할 목적으로 개발되었다고 한다. 내가 올리려는 파일이 누군가 편집한 파일의 내용과 충돌하는 것을 방지하고자 사용한다. Git에서는 소스 코드가 변경된 이력을 확인할 수 있고, 특정 시점으로 비교할 수 있으며 그 시점으로 돌아갈 수도 있다. ​평소에는 로컬 저장소(Repository)에서 작업을 하다가 작업한 내용을 공개, 공유가 필요할 때에는 원격 저장소에 업로드할 수 있다.​ 커밋을 통해 파일 및 폴더의 추가/변경 사항..