프론트엔드 지망생

- 프론트엔드 공부 29일차 -구조분해할당구조화 되어 있는 배열, 객체와 같은 데이터를 destructuring(분해) 시켜, 각각의 변수에 담는 것 let arr = [1, 2]let [one, two] = arrconsole.log(one, two) // 1 2 let obj = { name: "otter", gender: "male" } let { name, gender } = objconsole.log(name, gender) // otter male let { name: newName, gender: newGender } = objconsole.log(newName) // otter spread 연산자하나로 뭉쳐있는 값들의 집합을 전개해주는 연산자… const arr = [ 1, 2, 3, 4,..

- 프론트엔드 공부 28일차 -API어떠한 프로그램에서 제공하는 기능을 사용자가 활용할 수 있도록 만들어 둔 인터페이스 ex) 우리가 사이트라는 음식점에 갔다. 이후 음식점에서가 API 명세서라는 메뉴판을 받았다. 우리는 API명세서를 참고하여 주문을 하였는데 이 과정을 요청(request)라고 한다. 점원이 주방에 가서 요청받은 주문을 전달하는 것을 API라고 한다. 전달받은 것을 주는 과정을 응답(response)라고 한다. HTTP (Hypertext Transfer Protocol)서버와 클라이언트가 통신하기 위해 정의된 규약 GET : 서버와 데이터를 조회하는 MethodPOST : 서버와 데이터를 등록하는 MethodPUT : 서버 내 데이터를 수정하는 MethodPATCH : 데이터를 일부 ..

- 프론트엔드 공부 27일차 -HTML ToDo 전체 삭제 JS  const todoInput = document.querySelector("#todoInput");const todoList = document.querySelector("#todoList");const savedTodoList = JSON.parse(localStorage.getItem("save-Items"));const createTodo = function (storageData) { let todoContents = todoInput.value; if (storageData) { todoContents = storageData.contents; ..

- 프론트엔드 공부 26일차 -DOM ( Document Object Model)브라우저가 HTML 문서를 파싱(해석)하는 과정에서 생겨나는 객체 DOM 트리 Document- 문서(document) 노드, DOM에 진입할 수 있는 진입점 역할을 해준다. HTML- Document를 제외하고 최상위에 위치, 이러한 노드를 루트(root) 노드라고 한다. 루트 노드는 항상 하나만 존재합니다. head, body, title, div- 요소(element) 노드라 부른다. 속성 노드를 가질 수 있는 유일한 node입니다. src=…, id=”…”- 속성(attribute) 노드라 부른다. 이들은 요소 노드에 관한 별도의 정보를 담고 있지만, 해당 요소 노드의 child node에는 속하지 않는다. A1 … ..

- 프론트엔드 공부 25일차 -전달인자, 매개변수함수의 외부에서 데이터를 전달 받아 내부에서 활용하기 위한 수단 매개변수함수를 선언할 때, 소괄호 안에 선언되는 변수 ex)const sum = function(a, b) { console.log(a) console.log(b)}                    전달인자함수를 호출할 때, 함수 내부로 전달되는 데이터 ex)sum(10, 15) Web Storage브라우저 내에 존재하는 데이터 저장소  Session Storagekey-value 형태 저장로컬 환경에 데이터 저장세션 단위로 구분되며 활용(세션: 사용자가 브라우저를 통해 웹 페이지에 접속한 시점부터, 해당 웹 페이지 접속을 종료하는 시점까지를 의미하는 단위 / 사용자의 웹 페이지 접속 상태에..

- 프론트엔드 공부 24일차 - 반복문반복적인 코드의 양을 획기적으로 압축ex)for(최초식; 조건식; 증감문){ // 반복을 수행할 코드} while문ex)최초식while( 조건식 ){ // 반복을 수행할 코드 증감식} - 최초식 : let i = 0- 조건식 : i - 증감식 : i = i + 1 while문 주의사항종료 조건을 제대로 설정하지 않으면 무한 반복이 일어남. html의 head에서 script를 이용해 JS를 사용할 때 주의사항기본적으로 html은 body 태그를 생성하기 전 head 태그의 코드부터 해석한다.그렇기에 홈페이지가 열리면  html의 코드가 수정되게 하기위해 JS를 할 수 있는데 이 경우 html 태그를 생성하기 전에 JS를 실행하기에 수정할 태그가 존재하지 않아 오류가 ..

- 프론트엔드 공부 23일차 -조건문 비교 연산자두개의 데이터를 서로 비교하는 방법 조건문 코드의 실행 분기점 비교 연산자 엄격한 비교 연산자=== 느슨한 비교 연산자== 느슨한 비교 연산자보다 엄격한 비교 연산자를 이용하는 것이 좋다 ex)1 === “1”false 1 == “1”true 0 == “0” true 0 == []true “0” == []false 배열과 객체의 비교 원시 타입 (Primitive type) 참조 타입 (Reference type) 원시 타입String, Number, Boolean, Bigint, undefined, Symbol, Null 참조 타입원시 타입 이외의 모든 것 원시 타입 특징불변성 (데이터가 변하지 않는 속성) 참조 타입의 특징가변성 ex) 값의 복사let ..

- 프론트엔드 공부 22일차 -함수 어떠한 기능을 수행하거나 계산을 수행하는 코드의 집합 함수 사용함수를 호출하는 방법,함수 선언 종류 함수 선언 방법함수의 표현식const 함수이름 = function(param1, param2, ...) { // 코드 return 결과값}함수의 선언문function 함수이름(param1, param2, ...) {    // 코드    return 결과값}​화살표 함수const 함수이름 = ( param1, param2, ... ) => {    // 코드    return 결과값}실습입력한 날짜까지 남은 시간 알려주기 버튼               const inputYear = document.querySelector('#yearInput..

- 프론트엔드 공부 21일차 -데이터 타입Array Object 배열 (Array)순서가 있는 데이터 컬렉션을 저장할 때 사용데이터 컬렉션이 논리적으로 정의된 규칙에 의해 나열된 것ex)let ranking = [“Jason”, “Alice”, “Jane”, “Tom”]index  (요소)      0           1          2           3 Index를 통해 각 요소에 접근 가능ranking[1] = “Alice” let ranking = ["Jason","Alice", "Mike"]/* undefined */console.log(ranking)/* VM760:1 (3) ['Jason', 'Alice', 'Mike']undefined */console.log(ranking[1])/..

- 20일차 프론트엔드 공부 - JavaScript JavaScript란?웹 페이지를 동적으로 동작할 수 있도록 만들어주는 프로그래밍 언어 변수와 상수데이터를 담고 꺼내쓰는 상자 변수 선언 키워드 var / let / const 선언변수의 이름을 알려주는 것변수명은 누구나 무엇에 관련된 변수인지 알 수 있도록 명시적으로 선언해야 한다ex) let box; 할당변수에 데이터를 담아주는 것ex) let box = 123; 재할당이미 데이터가 할당되어 있는 변수에 다시 변수를 할당하는 것 재선언이미 선언되어 있는 변수명으로 다시 선언하는 것const는 반드시 선언과 할당이 동시에 이루어져야 한다ex) const num = 123; 만 가능cont num ; num = 123; 은 안된다.  varletcons..