Today Hailie Learned

=> 위의 .DS_store과 위 사진에는 없는 test.md파일이 말썽을 피웠다. 🤔문제 사항 깃헙 main 브런치에 공부한 내용을 내 브런치에 push 후, main 브런치에 merge를 해야한다. 그런데 어느날부터인지 pull, switch, add, commit, push시 .DS_store, test.md파일이 지속적으로 문제를 일으키고 있었다. 그리고 대부분은 위의 에러코드처럼 아래 파일이 덮여쓰인다고 변경되는 내용을 commit하거나 stash 하라고 오류창이 계속 떴다. 그런데 문제는 commit하거나 stash을 해도 해결되지 않는다는 점이였다!!! 🤔 해결 방법 내 브랜치에서 문제가 되는 폴더에서 .DS_Store와 test.md 파일을 제거하고 메인 폴더에서 .DS_store와 tes..

🤔nvm이란? nvm(Node Version Manager)= Node.js 를 설치하는 툴이자, Node.js의 다양한 버전을 관리하는 프로그램 (Node.js의 다양한 버전을 쉽게 설치할 수 있다. ) nvm을 왜 쓰지? OS에 특정 버젼의 Node.js 를 설치하면, 여러 버전의 Node.js 를 설치해야 할 경우에 대응을 할 수가 없게 된다. 그렇기 때문에 먼저 nvm 을 설치하고, 설치한 nvm 을 통하여 원하는 특정 버젼의 Node.js 를 원하는 조건에 따라 복수로 설치하는 방법이 나중을 위해서는 더 좋은 방법이 된다. ⭕️ nvm 설치 후 ➝ Node.js 설치 후➝ npm 설치! 🤔npm이란? npm(Node Package Manager) = Node.js 로 개발된 프로그램을(npm 패..

깃헙에서 포크를 하고, 클론을 해오고, 클론해온 파일을 VS Code로 실행할 때 엄청나게 간단하고 멋있는 방법을 알게 되었다! 페어 활동으로 만났던 분이 터미널에서 간단한 명령어로 바로 VS Code로 실행하는 것을 보고 바로 물어보았다. 👇 명령어 code . 다른 엄청난 설정이 있는게 아니고 그냥 구글링하는 정보로 정말 간단하게 설정할 수 있다는 정보를 얻게 되었고, 블로그에 남기고자 한다. step 1. VS Code를 실행한다. step 2. 셀 명령을 연다. (Shell Command) 단축키 = shift cmd p (⇧⌘P ) step 3. 바로 아래 뜨는 "Shell Command: Install ‘code’ command in PATH"를 클릭한다. 끝!!! 👇 클릭만 하면 아래와 같이..

Node는 무엇일까? JavaScript의 런타임이다. 우리는 JavaScript을 따로 설치하지 않는다. 대신 일정한 사양을 갖추어야 한다. ECMAScript 사양을 갖추면 브라우저가 JavaScript를 실행한다! 오랫동안 브라우저는 JavaScript를 작성하고 실행할 수 있는 유일한 장소였다. 그래서 JavaScript는 웹 애플리케이션에 적합하다. Node는 브라우저 밖에서 작동되는 JavaScript의 실행 환경이다. 이제 JavaScript 코드를 브라우저를 열지 않고, 심지어 브라우저가 없어도 실행할 수 있다. (그렇다고 똑같은 일을 할 수 있는 건 아니다. ) (-> 브라우저가 없으면 문서 객체 모델을 쓸 수 없고, 사용자의 입력, 이벤트 등을 사용할 수 없다. ) 그래도 Node는 정..

Async function는 비동기 코드를 아주 깔끔하게 작성하도록 돕는 함수이다. (Promise함수보다 더 깔끔!) Promise 위에 적용되기 때문에 Promise에 뿌리는 설탕이라고도 한다. 참고 **IE에서는 지원하지 않는다. ** async & await async 자체가 함수를 비동기 함수로 선언하는 키워드이다. 함수 앞에 async를 입력해서 함수를 비동기 함수로 선언하면, 함수는 자동으로 Promise를 반환한다. ➥ 빈 함수를 호출하면 undefined가 출력된다. ➥ 비어있는 async 함수를 호출하면 Promise가 출력된다. ➥ 비어있는 async 화살표 함수를 호출하면 Promise가 출력된다. ➥ async 화살표 함수를 호출하면 Promise가 리턴된다. Promise의 원리..

👇 우리가 콜백을 해야하는 이유 반복해야할때마다 같은 식을 여러번 써야한다. setTimeout(() => { document.body.style.backgroundColor = 'red'; }, 1000) setTimeout(() => { document.body.style.backgroundColor = 'orange'; }, 2000) setTimeout(() => { document.body.style.backgroundColor = 'yellow'; }, 3000) setTimeout(() => { document.body.style.backgroundColor = 'green'; }, 4000) setTimeout(() => { document.body.style.backgroundColor ..

SPA 등장배경 전통적인 웹사이트 => 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러왔다. 시간이 지나면서 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었다. 하지만 이때마다 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰고, 매번 모든 페이지를 불러옴에 따라 더 느린 반응성을 갖게 되었다. 이에 대한 고민을 해결하기 위해 나온 것이 바로 SPA!!! 1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주..

컴포넌트란? 하나의 기능 구현을 위한 여러 종류의 코드 묶음이다. // UI를 구성하는 필수 요소이다. // 컴포넌트는 리액트의 심장이다. const Component = () => { return ( {정의1} {정의2} ) }; 컴포넌트를 여러개 만들고 조합해서 어플리케이션을 만들 수 있다. 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있고, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다. ➥ 위 그림에서 최상위 컴포넌트인 A가 root (근원)이 되고, 다른 자식 컴포넌트를 가질 수 있다. ➥ 이러한 트리 ..

보호되어 있는 글입니다.