Ella 프론트엔드일지

0. 리액트 useState 할때도 쓰이는 구조분해할당 - 이제는 좀 그만 찾아보자!! 1. 배열 구조분해할당 - array 의 하나하나의 요소가 너무 중요한 자료여서 하나의 자료를 하나의 변수에 할당하고 싶을때는? - 아래처럼 일일히 하나하나씩 할당할것이다. let array = ['돼지','토끼','양'] let 변수1 = array[0] let 변수2 = array[1] let 변수3 = array[2] - 하지만 배열 안에 요소가 100개라면...? 하나씩 let을 선언하면서 변수를 만들어주는 건 귀찮다. 아래처럼 하면 쉽게 담을 수 있다. let [변수1,변수2,변수3] = ['돼지','토끼','양'] console.log(변수1) // '돼지' console.log(변수2) // '토끼' co..

0. async / await - ES8 에서는 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await 이 도입되었다. - async/await는 프로미스를 기반으로 동작하기 때문에 프로미스의 then/catch/finally 등의 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스를 사용할 수 있다. 🔸Promise 기존 코드 function 함수(){ return new Promise((resolve,reject)=>{ resolve('안녕') }) } 함수() .then(n=>console.log(n)) // 안녕 async 변환 코드 - async로 변환한 코드는 굳이 new Promise()로 붙여서 쓸 필요가없다..

1. fetch 란 무엇인가? - fetch cheatsheet : https://devhints.io/js-fetch - 자바스크립트에서 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 하는 함수 - fetch API를 통해 다양한 주문 전송, 사용자 정보 읽기, 서버에서 최신 변경분 가져오기 등등 다양한 일을 페이지 새로고침 없이 수행할 수 있다. - fetch API는 Promise를 기반으로 동작한다. - 즉, CRUD 기능을 구현할 수 있다. 🔸CRUD란? - 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 아래 4가지 항목을 묶어서 일컫는 말이다. 즉, 데이터를 읽고 쓰고 삭제하는..프로그램에서 꼭 필요한 기능들이다. 이름 fetch method SNS 페이지에서 일..

0. 글을 쓰게된 계기 - 분명 외웠다고 생각했는데... 이벤트리스너, 셋타임 함수등을 쓰며..분명 이해했다고 생각했는데 아직도 이해못한 나 자신에게 이해시키기 위한 마지막 콜백함수 끝장내기 뿌시기 글이다. 1. 콜백함수 너가 뭔데!! 🔸콜백함수 뜻 - 함수의 파라미터(매개변수)로 들어가는 함수다. - 콜백함수는 대표적으로 setTimeout 함수와, addEventListener 함수에 쓰인다. - 아래 예제로 설명하자면, setTimeout과 addEventListener은 모두 콜백함수를 인자로 받는다. setTimeout 은 console.log(3)을 1초 뒤에 실행해줘~ addEventListener 은 버튼을 클릭하면 console.log('버튼클릭했음') 실행해줘~ 즉, 각 함수의 기능을 ..

선언 할당 범위 호이스팅 생성 과정 var 재선언 O 재할당 O function 함수 내부 가능 1. 선언 및 초기화 단계 2. 할당 단계 let 재선언 X 재할당 O {} 블록(중괄호 내부) 가능 1. 선언단계 2. 초기화 단계 3. 할당 단계 const 재선언 X 재선언 X {} 블록(중괄호 내부) 가능 1. 선언 + 초기화 + 할당 1. 호이스팅 호이스팅의 사전적인 정의를 살펴보자 끌어올린다라...뭘 끌어올린다는거지??? 바로 변수나 함수의 선언이 코드 최상단으로 끌어올려지는 듯한 현상을 말한다. 지난번 https://ella951230.tistory.com/entry/자바스크립트-변수-const-let-var 자바스크립트) 변수 const, let, var 1.var , let , const 한눈..

1.var , let , const 한눈에 정리하기 선언 할당 범위 var 재선언 O 재할당 O function 함수 내부 let 재선언 X 재할당 O {} 블록(중괄호 내부) const 재선언 X 재선언 X {} 블록(중괄호 내부) 2. 구체적으로 살펴보기 1) var : 재선언이 가능하다?? 먼말이지? 재선언이 가능하다는 말은 아래와 같이 변수를 선언해주는 키워드를 계속 쓸수있다는 말이다. var만 재선언 가능하고 let이나 const 는 불가능하다. var 이름 = 'kim' var 이름 = 'park' var 이름 ; var 이름; 동일하게 재선언할 때 let 과 const 는 아래와 같이 오류가 난다. 2) 선언과 할당 그림으로 한눈에 보기 3) let 은 재할당이 가능하고, const 는 재할..