웹 프론트엔드를 위한 자바스크립트 첫 걸음
1.얼리 리턴 패턴(Early Return Pattern)
특정 조건을 만족할 경우 바로 return하여 코드의 구조를 단순하게 만들어주는 패턴이다.
2.구조 분해 할당
배열이나 객체의 요소 및 프로퍼티들을 분해해 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식
3.spread와 rest
spread와 rest spread 객체나 배열에서 중복된 부분을 퍼트릴 때 함수를 호출 할 때 인수로 전달할 값을 퍼트릴 때 예제 1. 예제 2. 예제 3. rest 객체나 배열에서 특정 부분들을 하나의 객체나 배열로 묶어야 할 때 구조분해 할당을 사용해 배열이나 객체의 값을 묶어서 할당할 때 함수의 매개변수로 많은 값들을 전달받거나 특정 매개변수들...
4.비동기 처리
동기와 비동기 동기란? 하나의 작업이 실행되는 동안은 다른 작업을 동시에 진행하지 않는 방식으로, 다시말해 앞의 작업이 종료된 이후 다음 작업을 진행할 수 있는 순차적인 방식을 말한다. 스레드와 멀티스레드 아래와 같이 workA, workB, workC 3가지 함수가 실행 후 종료되기 까지 걸리는 시간이 각각 5초, 3초, 10초 라고 가정해보자. 스레...
5.Promise 객체
Promise 객체 프로미스 객체의 필요성 프로미스 객체에 대해 이야기 하기전에 자바스크립트의 비동기 처리에 대해 다시 한 번 살펴보자. 앞서 setTimeout함수를 이용해 작업을 비동기적으로 처리했었고, setTimeout함수는 작성된 코드와 같이 콜백함수와 ms단위의 지연 시간을 매개변수로 입력받는 함수라고 배웠었다. 아래는 지난시간 작성했던 wo...
6.async와 await
async/await async 와 await는 프로미스 객체를 더욱 쉽게 작성할 수 있고, 직관적으로 코드를 해석할 수 있는 문법이다. 먼저, 프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성해보자. delay함수는 setTimeout함수에서 사용될 지연 시간을 매개변수로 받는다. 그 다음 프로미스 객체를 반환한다. resolve함수를 호출한다....
7.API 호출
클라이언트와 서버의 통신 웹브라우저에서 서버에게 원하는 데이터를 요청한다. 서버는 데이터베이스에서 요청받은 데이터를 찾는다. 서버가 데이터베이스에서 찾은 데이터를 꺼내온다. 꺼내온 데이터를 서버가 웹브라우저에게 전달한다. 클라이언트와 서버의 통신은 클라이언트가 서버에 데이터를 요청하면, 서버는 데이터베이스에서 요청받은 데이터를 찾아서 꺼내온 뒤 다시 클...
8.웸페이지는 조작하는 DOM
웹과 DOM 웹이란 웹이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다. 웹에서 HTML로 작성된 페이지를 웹 페이지라고 하며, 이 웹 페이지들이 여러개 모여있는 집합을 웹 사이트라고 부르는데 웹 사이트는 보통 HTML, CSS, Javascript로 이루어져 있다. 웹 사이트의 구성 HTML (Hyper Text Markup...
9.[한입 JS 챌린지] Day 1
강의 진도 변수와 상수 자료형과 형 변환 진행 날짜 2023년 12월 5일 Quiz 코드샌드박스
10.[한입 JS 챌린지] Day 2
강의 진도 연산자 조건문 함수와 지역변수, 외부변수 관련 게시글 얼리 리얼 패턴(Early Return Pattern) 진행 날짜 2023년 12월 6일 Quiz 코드샌드박스 문제 1. 코드의 출력값 작성하기 문제 2. 코드의 출력값 작성하기 문제 3. 함수 알맞게 수정하기
11.[한입 JS 챌린지] Day 3
강의 진도 스코프 호이스팅 함수 표현식 객체 진행 날짜 2023년 12월 7일 Quiz 코드샌드박스 문제 1. sayHello 함수와 코드의 순서를 알맞게 변경하기 문제 2. 알맞은 코드를 작성하기
12.[한입 JS 챌린지] Day 4
강의 진도 배열 반복문 진행 날짜 2023년 12월 8일 Quiz 코드샌드박스 numbers 배열 요소들의 2배 값이 들어있는, 새로운 배열을 출력하는 doubleNumbers 함수를 만들기
13.[한입 JS 챌린지] Day 5
강의 진도 배열 내장함수 진행 날짜 2023년 12월 9일 Quiz 코드샌드박스 점수가 낮은 사람 순서대로 정렬하는 함수를 만들기 Challenge Quiz 코드샌드박스 코드가 알맞게 작동하도록 calculateFilteredAndDoubledSum 함수를 완성하기 풀이 홀수만 필터링하기 각 숫자를 2배로 만들기 총 합 구하기
14.[한입 JS 챌린지] Day 6
강의 진도 배열과 객체 구조분해할당 spread와 rest 비동기 처리 관련 게시글 배열과 객체 구조분해할당 spread와 rest 비동기 처리 진행 날짜 2023년 12월 10일 Quiz 코드샌드박스 알맞은 코드 작성하기 
강의 진도 Promise 객체 async와 await API 호출 관련 게시글 Promise 객체 async와 await API 호출 진행 날짜 2023년 12월 11일 Quiz 코드샌드박스 조건에 알맞은 코드 작성하기 정답
16.[한입 JS 챌린지] Day 8
강의 진도 웹 페이지를 조작하는 DOM DOM API - 1 DOM API - 2 관련 게시글 웹 페이지를 조작하는 DOM 진행 날짜 2023년 12월 12일 Quiz 코드샌드박스 조건에 알맞은 코드 작성하기 정답
17.[한입 JS 챌린지] Day 9
강의 진도 Date 객체와 날짜 VSCode 설치 및 설정 입력 폼 활용하기 localStorage로 데이터 저장 진행 날짜 2023년 12월 13일 Mission index.js 파일에 자신의 닉네임을 localStorage에 저장하는 코드를 작성한 후, 로컬 스토리지에 저장된 자신의 닉네임이 보이게 화면을 캡쳐하기 정답
18.[한입 JS 챌린지] Day 10
강의 진도 요소의 레이아웃을 결정하는 방법 - display 요소를 배치하는 방법 - position 프로젝트 미리보기 디지털 시계 개발하기 진행 날짜 2023년 12월 14일 Mission 디지털 시계 개발하기 코드 html css js
19.[한입 JS 챌린지] Day 11
강의 진도 검색 바 만들기 API를 사용해 명언 설정하기 북마크 바 만들기 진행 날짜 2023년 12월 15일 Mission 검색 바, 명언, 북마크 바 구현하기 코드 html css js
20.[한입 JS 챌린지] Day 12
강의 진도 북마크 아이템 추가하기 프로젝트 적용하기 진행 날짜 2023년 12월 18일 Mission 강의의 내용대로 프로젝트의 모든 기능을 개발하고, 프로젝트를 적용시키기 코드 html css js 
진행 날짜 2023년 12월 20일 Mission 추가, 삭제, 수정을 할 수 있는 TODO LIST를 만들어 보기 프로젝트 배포사이트
22.[한입 JS 챌린지] LAST DAY
진행 날짜 2023년 12월 20일 Mission 아래의 질문에 스스로 대답해보는 형태로 2주를 돌아보기 위한 회고록 작성하기 회고