분류 전체보기
-
클로저, 넌 누구냐?JavaScript 2022. 4. 27. 18:14
클로저란? 클로저(closure)는 중첩 함수에서 내부 함수가 소멸된 외부 함수의 맥락(context)에 접근할 수 있는 것을 가리킨다. 내부 함수가 외부 함수의 변수에 접근할 수 있는 이유 외부 함수가 종료되면 외부함수가 가지고 있던 변수도 같이 소멸된다. 그렇기 때문에 내부 함수 안에서 함수 밖의 변수를 사용할 수 없다고 생각할 수 있다. 하지만 렉시컬 환경에 의해서 내부 함수에서 외부 함수의 변수에 접근할 수 있다. 렉시컬 환경이란? 호출된 함수가 어디서 사용되었고, 주변에 어떠한 함수가 있는지 기록한 환경. -> 포함하는 식별자, 식별자에 바인딩된 값, 상위 렉시컬 환경에 대한 참조 ex) 민수는 성북구에 2년 동안 살았지만, 지금은 이사를 갔다. => 민수는 현재 성북구에 없지만 성북구에 살았던..
-
상수 데이터JavaScript 2022. 4. 24. 15:50
개발을 할 때, UI 구성에 필요한 데이터가 정적이라면 데이터를 서버에서 가져오지 않고 프론트 단에서 직접 구성합니다. 서버에서 받아야 하는 값이고, 아직 백엔드에서 넘겨줄 데이터를 완성하지 않았다면 서버에서 받을 값을 예상해서 개발을 진행할 수 있어야 한다. 이 때, UI를 표시하기 위한 상수 데이터 와 백엔드의 데이터를 모방하기 위한 mock data 를 사용해보자. 상수 데이터 UI 구성에 필요하지만 동적으로 변하지 않아 백엔드 API 등을 통해 가져올 필요가 없는 정적인 데이터 => 상수 데이터로! 상수 데이터를 사용하는 이유? 반복되는 UI를 유지보수하기 쉽고, 가독성을 높이기 위해. 반복되는 UI = 상수 데이터 + Array.map() 를 이용해서 간결하게 표현 수정 필요시, 상수 데이터의 ..
-
날짜와 시간 다루기JavaScript 2022. 4. 21. 15:17
날짜와 시간을 다루는 방법을 알아보자. 날짜와 시간을 다루는 방법을 익히고 원하는 결과값을 출력해보자. 날짜 객체 날짜와 시간을 저장하고 보여줄 때는 날짜 객체를 사용한다. 날짜 객체는 new 연산자 다음에 Date 생성자를 사용한다. let day = new Date(); console.log(day); //콘솔 창에 찍힌 그 시간을 호출한다. //ex). Sat Feb 05 2022 00:07:04 GMT+0900 (한국 표준시)/(Whale기준) GMT란? Greenwich Mean Time의 줄임말이며 컴퓨터 언어에서는 GMT 기준으로 시간을 알려준다. = GMT는 기준이 되는 시간 GMT+0900는 GMT 기준으로 9시간 느리다는 뜻 날짜, 시간의 값 가져오기 let rightNow = new ..
-
var, let, const의 차이?JavaScript 2022. 4. 21. 11:30
var 와 let, const를 구분하고 어떨 때 사용하면 좋을지 알아보자! Javascript에서 변수 선언 방식인 let,var,const은 function-scoped와 block-scoped 중 어느 스코프를 사용하냐로 나뉘어진다. var 의 특징 var var는 함수(function) 안에서의 변수가 hoisting된다. var는 변수 재선언 / 재할당 가능하다. function안에서의 var를 사용한 변수 선언은 함수 안(scope)에서만 사용가능하지만, 함수가 아닌 다른 scope에서의 var변수 선언은 전역으로 hoisting이 되기 때문에 다른 곳에서 에러가 나지 않고 실행이 된다. 선언과 초기화가 동시에 진행 function-scoped를 사용하는 var 1) if(true){ cons..
-
Mock dataJavaScript 2022. 4. 20. 17:45
Mock data? '가짜의' 란 뜻을 가진 mock의 의미를 가진 mock data는 샘플 데이터라고 볼 수 있다. 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터 mock data는 실제 백엔드의 API의 응답값 형태인 json 파일로 만들어줘야 한다. Mock data를 사용하는 이유? 프론트에서 필요한 백엔드의 API가 아직 완성이 안되었을 때, 데이터를 기다리는 게 아니라 mock data를 만들어 상황에 미리 대비하고 의도한 대로 UI가 구현되는지 확인해야 하기 때문에 사용한다. 또한, mock data를 만드는 과정에서 백엔드에서 보내주는 데이터의 형식를 맞춰보면서 미리 확인한다면 수월하게 연결할 수 있다. mock data 생성 & 호출 moc..