[인프런 워밍업 클럽 2기] FE 1주차 발자국

[인프런 워밍업 클럽 2기] FE 1주차 발자국

[인프런 워밍업 클럽 2기] FE 1주차 발자국

1주차 학습 요약

강의 - 따라하며 배우는 자바스크립트 A-Z

https://www.inflearn.com/course/따라하며-배우는-자바스크립트 - John Ahn


1일차 OT

 

2일차 JS 기초, window, DOM, Event

JS 기초 강의에서는 console 객체들, 변수 선언, 호이스팅, 타입, 타입 변환, 연산, 반복, window 객체, DOM, Event 등을 배움

중요

  • 호이스팅

var, let, const 가 모두 호이스팅 된다.

예시 코드

console.log(a) // undefined
var a = 123
console.log(a) // 123

JS 는 위에서 부터 순차적으로 읽어 내려오는 방식으로 코드를 읽는다. 위의 코드 같은 경우 var 의 선언된 a 를 메모리에 먼저 undefined 로 할당된 뒤 console.log(a) 를 읽어온다. 그러므로 undefined 라는 결과가 출력이 되고 그 뒤에 a 에 123이 할당된다.

반대로 let과 const 는 어떨까.

console.log(a) // ReferenceError: a is not defined
let a = 123 // let 이나 const
console.log(a) // 위의 log 에서 에러가 나므로 접근 안됨

메모리에 먼저 a 를 할당 하는건 var 와 방식이 같다. 하지만 var 는 undefined 를 할당 하지만 let 과 const 는 undefined를 할당하지 않는다. 그러므로 변수 선언 위에 있는 log 에서 오류가 발생 한다.

직접 보고 싶을 경우 about:blank 로 접속해서 개발자 모드의 콘솔창에 입력해보기 바란다.

필자가 애용하는 브라우저 콘솔 테스트 환경

1번 과제 - Food Menu App

https://food-menu-app-kappa.vercel.app/ - 완성본.. title 안바꿧네

https://github.com/ygvbhy/food-menu-app.git - 코드

빌드 도구 Vite

CSS Bootstrap 5 (CDN)

js Vanilla

배포도구 Vercel

  • 해결 과정

    • 디자인은 똑같이 안했고 엇비슷하게 진행. css 보단 js 가 더 중요했으므로 css 는 신경 쓰지않음.

    • 메뉴 리스트는 데이터로 활용이 가능함. 그래서 json 파일로 따로 정리 import 해오는 방식으로 진행. 추후 api 도 json 방식으로 object 값이 반환 되는 경우가 많기 때문에 이런 방식으로 진행

    • 기초 틀 작업 - bootstrap 5 를 활용하여 전체적인 틀을 잡은 뒤 내부에 들어가는 메뉴정보를 js 에서 반복하여 작성 후 innerHTML 를 활용하여 내용 삽입

    • All 과 각 메뉴의 구분 필요하고 로딩시 All 을 기준으로 메뉴들을 표기 해야 하므로 script 로딩 될때 해당 함수 실행. window.onload 사용해도 됨.


3일차 자바스크립트 중급 1 ~ 8

this, bind, call, apply, 삼항 연산자, Event loop, Closure, 구조 분해 할당, 전개 연산자, map, filter, reduce

this 메소드 ⇒ 해당 객체를 가리킨다.(참조한다.) 함수 ⇒ window 객체를 참조 constructor ⇒ 빈 객체를 가리킨다.

화살표 함수 (Arrow Function) 은 항상 상위 스코프의 this 를 참조함.

삼항 연산자

if (a) a = 'a'
else a = 'b'

// =>

a ? a = 'a' : a = 'b' 

Event Loop

// 두 번째 인수가 시간 값. 밀리세컨드 값으로 1초 = 1000 으로 생각 하면 된다.
// 내부 함수는 비동기이다.
setTimeout(() => {}, 1000)

동기/비동기

동기 ⇒ 시간을 맞춤

비동기 ⇒ 시간을 맞추지 않음

차이 : 동기는 먼저 이전의 것이 끝나야 다음 것을 함. 비동기는 1번을 하면서 2번도 가능하고 3, 4번도 가능함.

JS 는 동기 언어임 그래서 JS 이외의 도움을 받는다. 브라우저 실행 → 브라우저 api 를 사용 (window object) Node 에서 실행 → Node api 사용 (global object)

비동기 처리 과정

브라우저 내부 : JS 엔진, web APIs, Callback Queue, Event Loop

JS 엔진 : 메모리 힙, Call Stack

메모리 힙 : 변수 저장 창고

Call Stack : 함수 호출시 함수가 줄 서는 곳

Closure

다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우 외부 함수 (outerFunction) 가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스 할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있다.

function outerFunction(outerVariable) {
	return function innerFunction (innerVariable) {
		console.log('Outer Variable: ', outerVariable) // Outer Variable:  outside
		console.log('Inner Variable: ', innerVariable) // Inner Variable:  inside
	}
}

const newFunction = outerFunction('outside');
newFunction('inside')
  1. outerFunction(’outside’) 은 변수 “newFunction” 에 할당되는 즉시 호출

  2. 호출되면 outerFunction 은 변수 “newFunction” 을 outerFunction(outerVariable) 대신 innerFunction(innerVariable)을 반환 한다.

  3. 그럼 다음 변수 newFunction(’inside’)으로 호출하여 innerFunction(’inside’)을 호출한다. 클로저는 innerFunction 이 원래 outerFunction(’outside’) 으로 설정한 outerVariable 매개변수를 기억하고 액세스 할 수 있는 것. 따라서 ‘inside’로만 호출되었더라도 ‘outside’와 ‘inside’ 를 모두 console.log() 할 수있다.

구조 분해 할당

let address = {
	city: '1234',
	zipCode: '12345'
}

const {city, zipCode} = address

let a = [1, 2, 3, 4, 5]

const [n1, n2, n3, n4, n5] = a

전개 연산자

let a = [1, 2, 3, 4, 5]

[...a, 123] // [1, 2, 3, 4, 5, 123]

// 문자열도 가능
let a = "askdjhfqkwejhr"
[...a] // ['a', 's', 'k', 'd', 'j', 'h', 'f', 'q', 'k', 'w', 'e', 'j', 'h', 'r']

// 문자열 분할 함수 - 위와 같은 효과 (배열에는 사용 못함)
a.split('') 
// ['a', 's', 'k', 'd', 'j', 'h', 'f', 'q', 'k', 'w', 'e', 'j', 'h', 'r']

map, filter, reduce

map → 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

filter → 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

reduce → 배열의 각 요소에 대해 주어진 리듀서 함수를 실행 하고, 하나의 결괏값을 반환 4개의 인자 ⇒ 누산기 (acc), 현재 값 (cur), 현재 인덱스 (idx), 원본 배열 (src)

2번 과제 - 가위바위보 게임

https://rsp-game-five.vercel.app/ - 완성 화면

https://github.com/ygvbhy/rsp-game.git - 코드

빌드 도구 Vite

CSS Bootstrap 5 (CDN)

js Vanilla

배포도구 Vercel

  • 해결 과정

     

    • 전 과제와는 다르게 js 작동이 많아서 TODO 파일에 작동을 하나하나 작성 하면서 작업

    • 컴퓨터가 고른 가위 바위 보는 Math.random() 함수를 이용해 3가지중 랜덤값을 뽑아서 진행

    • 1,2,3중 1이면 가위 2면 바위 3이면 보

    • 사용자가 고른 값을 id 에 저장 해 두고 이 값과 랜덤으로 가져온 값을 비교 하여 판단.


4일차 자바스크립트 중급 9 ~ 17

undefined, null, 얕은 비교, 깊은 비교, 얕은 복사, 깊은 복사, 함수 표현식, 함수 선언문, IIFE(Immediately Invoked Function Expression), Intersection observer, 순수 함수, 커링, strict mode

structuredClone : 깊은 복사를 지원하는 내부 함수

IIFE(Immediately Invoked Function Expression) 정의되자마자 즉시 실행되는 함수

(
	function () {
	
	}
)()
// 첫번째 소괄호 => 전역 선언 막고, IIFE 내부 안으로 다른 변수 접근 막기
// 두번째 소괄호 => 즉시 실행 함수를 생성하는 괄호 이를 통해 js 엔진은 함수를 즉시 해석 및 실행

목적 : 전역으로 선언하는 것을 피하기 위해. 또한 IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수도 있다.

Intersection observer

기본적으로 viewport 와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지 구별하는 기능

무한 스크롤 또는 이미지 레이지 로딩에 사용 됨

순수 함수

함수형 프로그래밍 패러다임의 한 부분이며, 순수 함수는 두 가지 규칙을 가지고 있다.

  1. 같은 입력값이 주어졌을 때, 언제나 같은 결과값을 리턴

  2. 사이드 이펙트를 만들지 않는다.

사용 하는 이유

  1. 클린 코드를 위해

  2. 테스트를 쉽게 하기 위해

  3. 디버그를 쉽게 하기 위해

  4. 독립적인 코드를 위해

커링 (Currying)

f(a,b,c) 처럼 단일 호출로 처리하는 함수를

f(a)(b)(c) 와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환하는 것

커링은 함수를 호출하는 것이 아닌 변환 하는 것

3번 과제 - 퀴즈 앱

https://quiz-app-mauve-beta.vercel.app/ - 완성 화면

https://github.com/ygvbhy/quiz-app - 코드

빌드 도구 Vite

CSS Bootstrap 5 (CDN)

js Vanilla

배포도구 Vercel

  • 해결 과정

     

    • TODO 에 동작을 하나하나 써가며 작업

    • 문제는 3개 정답은 2 ~ 3개 로 나눠져서 json 으로 데이터를 정리 해서 사용

    • 각 문제를 반복하여 innerHTML 로 문제를 삽입한 뒤 id 값으로 정답 값 구분

    • 정답의 구분을 위해 각 문제가 담긴 배열을 반복을 돌려 확인.

    • 이후 정답 버튼들은 각 정답 여부에 맞게 색상 입히고 배경은 정답일 경우 초록, 오답일경우 빨강으로 색 변경

    • 다음 문제 클릭시 색상 및 문제, 정답 버튼 새롭게 로딩


5일차 OOP, 비동기

OOP, 다형성, js prototype, ES6 classes, Sub Class(Inheritance), super(), Callbacks, ES6 Promise, Async, Awiat

OOP : object oriented programming - 객체 지향 프로그래밍

프로그래밍 언어의 기본이 되는 프로그래밍의 패러다임. 여러개의 독립된 단위 객체들의 모임

특징

  1. 자료 추상화

    • 불필요한 정보는 숨기고 중요한 정보만을 표현함으로써 프로그램을 간단히 만드는것. 객체안의 자세한 내용을 몰라도 중요 정보를 이용해서 해당 객체를 사용할 수 있게 됨.

  2. 상속

    • 새로운 클래스가 기존의 클래스의 자료와 연산을 이용할 수 있게 하는 기능

  3. 다형성

    • 다형성. 다양한 형태를 가질 수 있다.

    • 어떤 한 요소에 여러 개념을 넣어 놓은 것.

  4. 캡슐화

    • 클래스 안에 관련 메서드, 변수 등을 하나로 묶어줌. 이 매커니즘을 이용해서 바깥에서의 접근을 막아 보안이 강화되고 잘 관리되는 코드를 제공.

prototype

js 객체가 다른 객체로부터 메서드와 속성을 상속받는 매커니즘을 말한다. 이것을 프로토타입 체인이라 한다. 이렇게 하므로 인해 더 적은 메모리를 사용하고 코드를 재사용 할 수 있다.

callbacks

js 는 싱글 스레드. 하나의 일을 할때 다른 일은 하지 못함.

데이터를 가져오는데 10초가 걸린다면 10초동안 페이지에선 아무것도 못함. 그래서 이러한 문제를 해결하기 위해 비동기 요청을 사용함. 병렬작업 가능

Promise

js 비동기 처리에 사용 되는 객체

new 키워드와 생성자를 사용해 만든다. 생성자는 매개변수로 “실행 함수” 를 받는다. 이 함수는 매개 변수로 두 가지 함수를 받아야 하는데 첫 번째 함수(resolve) 는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출해야 하고, 두 번째 함수는(reject) 작업이 실패하여 오류의 원인을 반환할 때 호출하면 된다. 두 번째 함수는 주로 오류 객체를 받는다.

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.

4번 과제 - 책 리스트 나열 앱

https://book-list-app-three.vercel.app/ - 완성 화면

https://github.com/ygvbhy/book-list-app - 코드

빌드 도구 Vite

CSS Bootstrap 5 (CDN)

js Vanilla

배포도구 Vercel

  • 해결 과정

    • 책 리스트를 저장 하는 방법으로 배열을 선택. 로컬 스토리지와 고민 하다가 1회성으로 보여주는 방향으로 결정

    • 삭제 버튼 클릭 부분에서 헷갈렸지만, 부모 요소를 선택하여 이벤트를 추가하는 걸로 해결

    • 알림 출력 부분도 출력 후 지우는건 가능한데 연속적으로 진행 했을 경우 나타나지 않는 오류로 인해 Math 함수를 사용해 임의 숫자를 id 값으로 부여 한 뒤 setTimeout 으로 랜덤 숫자의 id 를 찾아 해당 부분을 삭제하는 것으로 진행

    • 알림은 없지만 아무런 정보를 입력하지 않고 저장시 함수에서 return


5번 과제 - Github Finder 앱

https://github-finder-app-rose.vercel.app/- 완성 화면

https://github.com/ygvbhy/github-finder-app - 코드

빌드 도구 Vite

CSS Bootstrap 5 (CDN)

js Vanilla

배포도구 Vercel

library Axios

  • 해결 과정

    • GitHub API 를 활용 하여 데이터를 받아와서 화면에 표기해주는 작업

    • api 는 axios 를 사용하여 동기/비동기 작업 진행

    • 작업 도중 도중 ip 에 할당된 api 사용횟수 초과로 인해 힘들었다..

 

 


같은 내용이지만 노션 정리 내용

https://skpost.notion.site/2-FE-1-1103a6f79dfb80da94ffd00752c9f9dd

댓글을 작성해보세요.

채널톡 아이콘