프론트앤드 면접준비 링크 모음 (JavaScript, SPA(React/Next, Vue/Nuxt) 정리 ing...)

 

 

 

보통

블로그에다가 정리를 하면서 프론트앤드 공부를 하는데

정리가 되지 않아서

이미 포스팅한 지식들도 다 까먹고 있더라구요

 

이참에 중구난방으로 퍼져있는 프론트앤드 지식들을 

하나에 모아놔야 할 필요가 생긴 것 같아서 만들었습니당

라우터처럼..

 

 

+ 정리하는 김에 다른 블로그 글들도 모아볼 예정,,ㅎㅎ🤫

+ 계속 업데이트 할 예정,,ㅎㅎ😮

 

---

 

 

목차

 

1. 자바스크립트

2. SPA 공통

3. 리액트/넥스트

4. 뷰/넉스트

 

 

 

---

1. 자바스크립트

1-1 돔

웹 브라우저 동작 원리
DOM		https://gallery-k.tistory.com/345 https://gallery-k.tistory.com/346
This	전역에서 사용: window     전역 함수에서 사용: window     object 의 함수 (메소드) 에서 사용: 그 함수를 갖고있는 오브젝트 (상위객체)     constructor 에서 사용: 생성자에서 새로 생성되는 오브젝트     event listener 에서 사용: e.currentTarget, 클릭한 요소의 html     ===============     arrow function 특징     내부의 this 값을 변화시키지 않음     외부 this 값 그대로 재사용 가능     ===============     전역함수_arrow function : window     이벤트리스너 콜백부분 arrow function : window     메소드에서 사용: window	https://gallery-k.tistory.com/347 https://gallery-k.tistory.com/348 https://gallery-k.tistory.com/349 https://gallery-k.tistory.com/351

 

1-2 데이터 타입과 변수

Data Type	기본형 Number string ...   참조형 Array object Symbol map set  + NodeList document.getElementsByClassName() document.querySelectorAll() 위와 같은 문법 사용 시[] 대괄호안에 담겨오는 데이터 등등...
얕은복사, 깊은복사	얕은복사   = 주소값(pc 메모리값) 복사 깊은복사   … 안의 값 복사	https://gallery-k.tistory.com/359
Symbol 자료형
Map 자료형	자료들 간 연관성을 표현하기 위해 사용하는 자료형  매핑을 할 수 있는 Map 자료형 name이 Kim과 연관되어있다~ 라고 저장하고 싶으면 Map
Set 자료형	자료를 일렬로 쭉 저장하기 위해 사용하는 자료형 (array 처럼 생김) set 자료형은 중복자료를 절대 허용하지 않기 때문에  Array의 데이터 중복제거할 때 많이 사용
변수 종류 ( + es6)	let const var   const let 은 함수밖, {} 밖으로 나가면 못씀 var 는 함수밖으로 나가면 못쓰는데 {} 밖으로 나가도 쓸 수 있음	https://gallery-k.tistory.com/352
변수 호이스팅	변수/ 함수의 선언부분을 변수범위 맨 위로 강제로 끌고간 후 가장 먼저 해석	https://gallery-k.tistory.com/354
Enumerable Iterable	Enumerable 셀 수 있는 자료형 object, array, string Iterable 반복할 수 있는 자료형 array, string , arguments, NodeList, Map, Set Object.getOwnPropertyDescriptor(오브젝트, 'name') 위에있는거로 찍어볼수있음

 

 

 

1-3 JavaScript 객체지향

Constructor	생성자 참조형 데이터 타입 object 자료를 여러개 복사할 때 사용 자식들이 값을 직접 소유하게 만들고 싶으면 constructor로 상속	https://gallery-k.tistory.com/430 https://gallery-k.tistory.com/431
Protopype	부모의 정보 자식이 부모의 함수, 데이터를 사용하고 싶을 때 사용 부모만 가지고 있고 그걸 참조해서 쓰게 만들고 싶으면 prototype으로 상속	https://gallery-k.tistory.com/432
상속(class)		https://gallery-k.tistory.com/367 https://gallery-k.tistory.com/368
Extends Super	extends 로 class를 상속받을 수 있음 super 로 자식 class 에 새 속성을 추가할 수 있음
Getter Setter	오브젝트 내의 함수들을 괄호없이 쓸 수 있게 만들어주는 키워드 + 데이터의 무결성을 보존하기 위해 쓰는 키워드   데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다루는게 좋음 (원본 데이터의 immutable) 거기에 합치되는 일종의 코딩 테크닉

 

 

 

1-4 동기비동기

동기 비동기	동기 : 순차적으로 실행되는 함수. 스택에 쌓여서 실행됨. 비동기: 이벤트리스너, setTimeout.. . 코드 실행 시 동기적 코드 실행 후에 실행.   실행이 오래걸리는 코드들(이벤트리스너, setTimeout.. . )은  web API 에 제쳐두고, 실행이 바로 가능한 동기적 코드부터 처리하는 방식	https://gallery-k.tistory.com/426
콜백함수	원하는 시점에 코드를 실행시키고 싶을 때 사용 함수안의 함수	https://gallery-k.tistory.com/427
promise	원하는 시점에 코드를 실행시키고 싶을 때 사용 Then, catch 로 성공, 실패 판단, then으로 promise 체이닝 가능   성공 실패 판정 전은 pending 성공 후는 resolved 실패 후는 rejected 한번 판정 후에는 pending 상태로 못돌림	https://gallery-k.tistory.com/428
async await	원하는 시점에 코드를 실행시키고 싶을 때 사용 Function 앞에 async 를 붙여서 함수를 선언하면 promise then 사용 가능 보통은 await 사용   Catch 는 지원하지 않기 때문에 Await 을 try catch 로 감싸서 사용해야 함

 

 

 

1-5 ES6

ES6 ~	js 신문법. 밑의 문법들을 새로 지원함 + let, const 추가
Template literals(백틱)	문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법. 문자 중간 엔터키 입력 가능 문자 중간 변수 넣기 편리 ${}
Tagged literals	함수 () 대신 백틱 사용 첫째 파라미터 문자들은 `백틱` 내의 순수 문자만 골라서 Array로 만들어놓은 파라미터이고, 둘째 파라미터 변수들은 `백틱` 내의 ${} 변수를 담는 파라미터
Spread operator(...[ ])	배열, 문자열, 객체 등 셀 수 있는 객체 (enumerable )를 개별 요소로 분리할 수 있게 나온 문법 1. Array 합치기/복사하기 (Deep Copy 깊은 복사) 2. Object 합치기/복사 (Deep Copy 깊은 복사)	https://gallery-k.tistory.com/360 https://gallery-k.tistory.com/361 https://gallery-k.tistory.com/362
Default parameter	함수를 만들 때 파라미터에 기본값(수식도 가능, 함수도 가능)을 줄 수 있는 문법	https://gallery-k.tistory.com/366 https://gallery-k.tistory.com/363
Rest Parameter(...)	원하는 파라미터 왼쪽에 … 기호를 붙이면 "이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터" 라는 뜻  rest는 항상 마지막 파라미터로 넣어야됨	https://gallery-k.tistory.com/365
Argument (구버전)
Destructing (useState)	array, object 안의 데이터를 변수에 담을 수 있는 문법   var [a,b,c] = [2,3,4] var [a,b,c = 5] = [2,3]; var {name, age} = {name:'kim',age:30} ---- var name = 'Kim'; var age = 30;   var obj = { name, age }
Import Export (모듈화)	파일간 모듈식 개발을 위한 문법 자바스크립트 코드가 길어지면 다른 파일로 쪼개는게 좋은 관습... 다른 파일로 쪼개놓고 그걸 첨부해서 사용하는 방법
for in / for of	for in : 셀 수 있는 자료형에서 사용 (인덱스 return) object, array, string -> (string 은 의미가없징) prototype 안에있는것도 출력시켜줌   for of : 반복할 수 있는 자료형에서 사용(데이터 return) array, string , arguments, NodeList, Map, Set
Optional Chaining (.?)	?. 왼쪽에 있는게 null 혹은 undefined 인 경우 마침표찍지 말고 undefined 남겨주세요~ 에러나지 않게 감추는 문법 console.log(user.age1.value1 ?? 'ㅇ')
nullish coalescing operator (??)	?? 왼쪽이 null, undefined 일 경우 오른쪽 보여달라는 뜻 console.log(user.age1.value1 ?? 'ㅇ')

 

2. SPA 공통

MPA SPA	MPA 여러 페이지로 구성된 웹 애플리케이션 SPA 단일 페이지로 구성된 웹 애플리케이션	https://velog.io/@gwanuuoo/SPA%EB%8A%94-%EA%B8%B0%EC%A1%B4-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%99%80-%EC%B0%A8%EC%9D%B4
CSR SSR	브라우저 렌더링 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것   CSR 클라이언트인 브라우저가 렌더링을 처리하는 방식 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그림 SSR 서버 사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 그림	https://gallery-k.tistory.com/423 https://ctdlog.tistory.com/46
SEO	검색 엔진 최적화 검색자의 의도를 이해하고 이에 맞춰 웹 페이지의 콘텐츠 제작 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘림	https://velog.io/@gwanuuoo/SPA%EB%8A%94-%EA%B8%B0%EC%A1%B4-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%99%80-%EC%B0%A8%EC%9D%B4

 

 

3. 리액트/넥스트

3-1 기본 문법

JSX	React 에서 사용하는 html 문법
Map	많은 요소들을 반복문으로 처리할 때 사용
Props	자식 컴포넌트가 부모 컴포넌트에 있던 state를 사용해야 할 때 사용

 

3-2 라이브러리

React Router Dom	다른 페이지를 요청할 때 내부의 컴포넌트를 보여주게 요청하는 걸 도와주는 라이브러리	https://gallery-k.tistory.com/381 https://gallery-k.tistory.com/382
Styled Component	스타일을 바로 입혀서 컴포넌트를 만들수 있게 해주는 라이브러리   1. class 만들어놓은걸 까먹고 중복해서 또 만들거나 2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나 3. CSS 파일이 너무 길어져서 수정이 어렵거나
React Hook Form	form 태그 안 데이터들을 서버측으로 쉽게 넘겨줄 수 있게 도와주는 라이브러리
Redux	props 없이 state 를 공유할 수 있게 도와주는 라이브러리

 

3-3 훅 종류

useState	React 에서 중요한 데이터를 관리할 때 사용하는 훅   일반 변수로 데이터를 관리할 때와 차이점 - 자동으로 재렌더링 됨 특징 - setState 함수는 비동기임	https://gallery-k.tistory.com/425
useEffect	컴포넌트의 생명주기에 따라 특정 함수를 실행하기 위해 사용. html 이 전부 렌더링 된 후에 특정 함수를 실행하기 위해 사용.
useRef	React 에서 특정 dom 을 선택하고 제어하고 싶을 때 사용
useReducer	useState 의 객체버전	https://gallery-k.tistory.com/424
memo	느린 자식 컴포넌트의 재랜더링 막을 때 사용 부모랑 자식을 비교해서 진짜 자식이 느린지 확인하기 때문에 (기존 props 와 바뀐 props 비교 연산 추가) 많이 사용하는것도 부담이 됨
useMemo	useEffect 와 비슷 컴포넌트 로드 시 한번만 실행시키고 싶을 때 사용
useTransition	오래걸리는 동기적 코드들 중 원하는 코드를 먼저 실행시키고 싶을 때 사용   먼저 실행시키고 싶은 코드가 있으면 나중에 실행시키고 싶은 코드를 state 변경함수로 묶어서 세팅해줌… ex) 10000*100000 을 하는 코드랑 안녕하세요 출력 코드
useDeferredValue	위랑 똑같은데, 얘는 state 변경함수에 문자를 넣어서 사용
Custom Hook	원하는 기능의 훅을 직접 만들어서 사용

 

3-4 상태관리

Redux	props 없이 state 를 공유할 수 있게 도와주는 라이브러리
주스탄드	props 없이 state 를 공유할 수 있게 도와주는 라이브러리

 

4. 뷰/넉스트

준비중...

 

 

 

 

 

출처:

코딩애플님 강의..(그저갓) + 옆에 써있는 링크들!