CS겸 취준까지

1. 원시 값과 참조 값의 개념 - 원시 값 : 변경 불가능한 작은 데이터 조각. 예) String, Number, Boolean, undefined, null - 참조 값 : 변경 가능한 객체들 예) {name: 'Alice'}, ['apple', 'banana'], Object, Array, Function 2. 원시 값과 참조 값의 메모리 저장 방식 2-1. 원시 값의 메모리 저장 - 스택 메모리에 저장 - 불변성 : 데이터가 한번 생성이 되면 변경될 수 없는 성질 즉, 데이터가 불변하다면 원본 데이터는 수정이 되지 않고, 변경이 필요한 경우에는 새로운 데이터를 생성 - 자료의 크기와 생명 주기가 정해져 있음 2-1. 참조 값의 메모리 저장 - 힙 메모리에 저장 - 힙 메모리는 구조가 느슨하며, 크..

jQuery 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리 “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 개발됨 jQuery의 특징 HTML/DOM 조작 HTML 이벤트 메서드를 쉽게 사용 크로스 브라우징 네트워크, 애니메이션 등 다양한 기능을 제공 메서드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원 플러그인을 직접 구현하거나 확장 jQuery의 추락 jQuery는 다루기 까다로운 DOM API를 직관적으로 손쉽게 다룰 수 있는 모델을 제시했으나, 성능 최적화의 아쉬움과 개발 생산성의 문제가 있었다. 웹 표준 API의 확장 : 제이쿼리가 없어도 쉽게 사용 가능해진 웹 api 웹브라..

바벨 이전의 브라우저 또는 환경에서 이전 버전의 자바스크립트로 변환하는데 주로 사용되는 트랜스파일러 바벨의 기능 변환구문 대상 환경에서 누락된 폴리필 기능 소스코드 변환 트랜스파일러란? 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 의미 예시) c++ → c ES6 → ES5(babel) typescript → js sass/scss → css 폴리필(polyfill)이란? 브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 의미 바벨은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해 주지만, ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 등등은 존재하지 않음 존재하지 않는 문법..

[ use strict(엄격모드) ] ES5부터 지원하는 use strict는 암묵적인 "느슨한 모드(Sloppy Mode)"를 해제하고 명시적인 "엄격 모드(Strict Mode)"를 사용하는 방법 JS의 제한된 버전을 선택함으로써 런타임시 JS 코드에 대하여 향후 버전의 ECMAScript에서 사용될 수 있는 일부 구문을 제외하는 등보다 엄격한 parsing 및 error handling을 자발적으로 시행하도록 적용함으로써 일반적인 코딩 실수나 안전하지 않은 동작을 포착함 strict 모드에서는 일반적인 JS의 의미에 몇가지를 변경함 JS오류는 아니지만 함정이 될 어떤 일을 오류가 발생하도록 변경하여 제거 코드의 문제를 더 빨리 알리고 소스로 더 빨리 안내하므로 결과적으로 디버깅이 쉬워짐 JS 엔진의..

탐색 알고리즘 특정 데이터를 많이 가지고 있을 때, 원하는 데이터를 찾는 방식 난이도별 종류 이외 많은 탐색 알고리즘이 존재 난이도 알고리즘 초급 선형 탐색, 이진 탐색, DFS, BFS 중급 이분 탐색 트리, 다익스트라 알고리즘, A* 알고리즘 고급 유전 알고리즘, 몬테 카를로 트리 탐색 기초 탐색 알고리즘 한눈에 보기 탐색 알고리즘 시간 복잡도 [최고 평균 최악] 장점 단점 선형탐색 O(1)/O(n)/O(n) • 구현이 간단 • 정렬되지 않은 데이터에서도 사용 가능 • 데이터의 순서에 영향을 받지 않고 동작 • 큰 데이터 세트에서 성능이 저하 • 다른 탐색 알고리즘에 비해 느린 속도 이진탐색 O(1)/O(log n)/O(log n) • 빠른 속도와 메모리 효율적인 알고리즘 • 정렬된 데이터에서 원하는..

[ 삽입정렬 ] 모든 요소를 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여 자신의 위치를 찾아 삽입하여 정렬 매 순서마다 해당 원소를 삽입할 수 있는 위치를 찾아 해당 위치에 넣음 과정 손 안의 카드를 정렬하는 방법과 유사함 새로운 카드를 기존의 정렬된 카드 사이의 올바른 자리를 찾아 삽입 새로운 삽입될 카드의 수만큼 반복하게 되면 전체 카드가 정렬됨 알고리즘의 구체적인 개념 2번째 자료부터 시작하여 (즉 첫번째 key 값은 두번째 자료부터 시작함) 앞의 원소들과 비교하여 삽입할 위치를 지정한후 원소를 뒤로 옮기고 지정한 자리에 원소를 삽입하여 정렬 2번째 자료는 1번째 자료, 3번째 자료는 1-2번째 자료 ... 와 비교한후 원소가 삽입될 위치를 찾음 삽입될 위치를 찾았다면 그 위치에 자료를 삽..

1. 연결 리스트 연결 리스트는 선형적인 데이터 구조라는 점에서 배열과 유사하다. 하지만 배열과 달리, 연결 리스트의 요소(elements)들은 특정 메모리 주소나 인덱스에 저장되지 않는다. 오히려 각 요소는 포인터 또는 다음 객체에 대한 링크를 가지고 독립적인 개체에 가깝다. 연결 리스트의 각 요소를 노드(node)라 부른다. 노드는 일반적으로 데이터 그리고 다음 노드를 가리키는 링크, 이 2가지 아이템으로 구성된다. 참고로 데이터의 유형은 다양하게 올 수 있다. 연결 리스트의 가장 첫 번째 지점을 헤드(head)라 부른다. 헤드는 연결 리스트의 첫번째 노드를 의미한다. 마지막 노드는 null을 가리킨다. 만약 연결 리스트가 비어있는 경우, 헤드는 null을 참조하게 된다. 자바스크립트로 연결 리스트를..

1. 복잡도(Complexity) 복잡도란 알고리즘의 성능을 나타내는 지표이다. 복잡도는 가독성(Readability)와 다른 의미로 쓰인다. 즉, 코드가 얼마나 복잡하고 알아보기 어려운지를 의미하는 것이 아니라, 불특정한 함수의 성능적인 측면에서의 복잡도를 의미한다. 시간 복잡도(Time Complexity) : 특정한 크기의 입력에 대하여 알고리즘의 수행 시간 분석 공간 복잡도(Space Complexity) : 특정한 크기의 입력에 대하여 알고리즘의 메모리 사용량 분석 이때, 동일한 기능을 수행하는 알고리즘이 있다면, 일반적으로 복잡도 가 낮은 알고리즘이 좋은 알고리즘이다. 2. 시간 복잡도(Time Complexity) 시간 복잡도란 특정 알고리즘이 문제상황을 해결하는데 걸리는 시간을 의미한다. ..

스택(Stack) 스택(Stack)은 가장 마지막에 저장된 데이터가 가장 먼저 삭제되는 후입선출(LIFO, Last In Firist Out) 구조이다. 스택은 한쪽 방향에서만 데이터의 삽입과 삭제가 가능하다. 스택 용어 top(peek) : 가장 최근에 저장된 데이터이자 먼저 삭제 될 데이터이다. 그림상 요소4에 해당 push : 데이터를 삽입하는 것을 말하며, 삽입된 데이터는 삭제시 가장 먼저 삭제 될 데이터 pop : 데이터를 삭제 할 때 사용하며, 가장 최근에 저장된 데이터가 삭제된다. 사용되는 예 브라우저의 뒤로가기 실행 취소(Ctrl + z) 재귀 함수 : 자기 자신을 호출하는 함수 함수를 호출할 때마다 해당 함수의 지역변수, 반환주소, 매개변수 등의 정보를 호출 스택이라는 메모리 영역에 저장..

리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리다. 리덕스를 사용하면 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다. Context API 를 사용해도 글로벌 상태 관리를 할 수 있고 상태 관리 로직을 분리 할 수 있다. 특히, Context API 와 useReducer Hook 을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 매우 개발 방식이 유사하다. 리덕스에서도 리듀서와 액션이라는 개념을 사용한다. Redux는 Context API 가 지금의 형태로 사용방식이 개선되기도 전에, 그리고 useReducer 라는 Hook 이 존재하기도 전 부터 만들어진 라이브러리다. 사실 C..