Hello Hyonie World!

대부분의 프로그래밍 언어에서는 변수를 선언하고 값을 할당 그렇지만 JavsScript var 변수는 선언하기도 전에 값을 할당하고, 값을 할당하기도 전에 출력이 가능 (undefined) hoisting "끌어올려주다" 는 뜻으로 변수를 어디에서 선언 했는지 상관없이 제일 위로 선언을 끌어 올려주는 것. 또한, Block Scope를 무시함. 블록 스코프에 선언된 변수를 글로벌 console.log() 로 아무 곳에서나 값이 출력. => 이러한 문제를 해결하기 위해 ECMA Script 6에서 let 변수가 탄생✨

타입스크립트를 사용할 때는 사용할 필요가 없다. 자바스크립트는 유연한 언어이기 때문에 개발자가 개발을 할때 많은 실수를 할수 있다. ECMAScript 5에 추가 되어 use script를 선언하면 strict mode로 개발할수 있다.

자료구조와 알고리즘은 왜 중요할까? 음식 만들기에 비교하자면, 🥑재료 = 데이터 🥢도구 = 자료구조 🍳레시피 = 알고리즘 🍜결과 = 소프트웨어 자료구조 + 알고리즘 = 프로그램 올바른 데이터, 자료구조, 알고리즘을 골라서 좋은 소프트웨어를 만들 수 있다. 자료구조 메모리를 효율적으로 사용하면서 안정적으로 데이터를 처리하기 위함 상황에 맞는 자료구조를 선택해야한다. Stack, Queue, Graph, Tree 알고리즘 특정 문제를 효율적이고, 빠르게 해결하기 위함 수학적으로 표현 이진탐색, 최단거리 찾기 등.. 실무에서 중요한 3가지 기초 코딩 능력 (문제 해결 능력) 전문 분야 지식 기본 CS 지식 기초 코딩 능력은 자료구조와 알고리즘을 학습하면 문제 해결 능력을 Up할수 있다. 결국은 개발자가 올바른..

🚨 현재 발생하는 에러 map 함수를 사용하고 list태그를 사용할때 이와 같은 에러 발생했다. 이유는 리액트 JSX 문법에서는 요소의 리스트를 나열할 때는 고유한 key값을 줘야한다. ⭐key는 리액트가 변경, 추가, 제거 되는 항목을 식별하는데 도움이 된다. map 메소드에서 중괄호를 사용하면 반드시 return 사용 하자 📝 태그에 고유한 key 값을 주면 에러는 해결된다. move는 history 배열의 고유한 index 값으로 리스트에 하나 씩 할당 하면 된다. Key에는 고유한 값을 줘야한다. index는 비추천! *만약 이 리스트 중 중간에 삭제되거나 삽입되는 경우가 있다면 key값을 index로 주면 안되고, 실질적인 고유한 값을 줘야한다. index 도 0부터 시작해서 고유한 값을 가지지..

전개 연산자는 ECMAScript 2015에서 새롭게 추가 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길때 사용 배열조합 const arr1 = [1,2,3]; const arr2 = [4,5,6]; const arr3 = [7,8,9]; cont arrWrap = arr1.concat(arr2,arr3); console.log(arrWrap); // [1,2,3,4,5,6,7,8,9] 위에 배열조합을 전개 연산자 방식 사용 const arr1 = [1,2,3]; const arr2 = [4,5,6]; const arr3 = [7,8,9]; const arrWrap = [...arr1, ...arr2, ...arr3]; console.log(arrWrap); // [1,2,3,4,5,6..

Data Type 🍏Primitive Type Number String Boolean null *확실히 비어있음 undefined *비어있는지 아닌지 모르는 상태 Symbol 🔐Object Type Primitive Type은 Data 또는 Stack에 값이 보관, value copy Object Type은 Memory Sell에 다 들어갈수 없음. 그렇기 때문에 Heap이라는 Memory 공간에 보관, Reference copy

값의 재사용이 아니라. 로직의 재사용이 가능한 함수 useState(상태값 관리) useEffect(컴포넌트 생명주기 함수) useUser(서버에서 받아온 사용자) useMemo(메모이제이션 된 값을 반환하는 함수) useContext(값을 가져오는 함수)

웹팩, 바벨이란? 웹팩 오픈 소스 자바스크립트 모듈 번들러(여러가지 있는 것을 합쳐주는 것)이다. 즉, 여러개의 파일로 나누어져 있는 것을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 웹팩의 장점 - 여러 파일을 자바스크립트 코드를 압축하여 최적화할수 있기 때문에 로딩에 대한 네트워크 비용을 줄일수 있다. - 파일을 여러개로 나누고 모듈단위로 개발이 가능하고, 가독성과 유지보수가 쉽다. 바벨 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서 실행될 수 있도록 변환 시켜주는 라이브러리 * creact-react-app 을 사용하면 따로 웹팩과 바벨을 설치하지 않아도 내부적으로 설치와 설정을 전부다 해준다.

서버에서 HTML문서를 브라우저에 전달되면 브라우저가 문서에 따라서 화면을 보여준다. HTML은 DOM Tree 생성하고, CSS는 CSSOM을 생성한다. 이것들을 합쳐서 Render Tree를 만들고 레이아웃단계와 페인트 단계를 거쳐서 화면에 보여준다. ! 여기서 문제점은 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 Render Tree가 재생성된다. 즉 모든 요소들의 스타일을 다시 계산함 (레이아웃 -> 리페인트 과정 다시 반복) 작은 변화로 인해 불필요하게 DOM 조작하는 비용이 크게 된다 이러한 문제로 인해 Virtual DOM이 나왔다. 가상 돔은 실제 돔을 메모리에 복사해 준 것으로 생각하면 됨 데이터가 바뀌면 가상돔에 렌더링 되고, 이전 가상돔과 비교해서 바뀐 부분만 실제 돔에 적..

노드.js 란 크롬 v8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로 브라우저 환경이 아닌 곳에서도 자바스크립트를 연산하여 사용할수 있다. 리액트 설치시 노드.js가 필요한 이유? 리액트는 앱은 브라우저에서 실행되는 코드여서 노드.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 주요 도구들이 노드.js를 사용하기 때문에 필요하다.(바벨, 웹팩)