본문 바로가기

js18

Javascript - var, let, const, Hoisting var & letJavaScript는 es6 문법 도입 이전까지 var 키워드만을 이용하여 변수를 선언했다. 그렇기 때문에 코드 실행 중 예기치 못한 문제들이 자주 발생하게 되었다. 예를 들면 다음과 같은 문제들이다.var a = "a"console.log(a) // "a"var a = "b"console.log(a) // "b" 같은 변수에 다른 값을 두 번 할당하였는데도 에러가 나지 않고 멀쩡히 다른 값이 출력되는 것을 볼 수 있다.var는 변수의 재선언, 재할당 모두가 가능하기 때문에 유연한 변수 선언 면에서는 장점일 수 있으나, 코드양이 많아질수록 유지 관리가 힘들며 에러를 찾기도 힘들어진다.또한 var는 Hoisting과도 연관이 있다. 호이스팅이란?인터프리터가 변수와 함수의 메모리 공간을 선언.. 2024. 12. 23.
Javascript - async/await 자바스크립트 비동기 처리 3가지 방식자바스크립트는 싱글 스레드 프로그래밍 언어기 때문에 멀티 작업을 하기 위해선 비동기 처리 방식이 자주 쓰인다.비동기 처리는 백그라운드로 동작되기 때문에 그 결과가 언제 반환될지 알수 없어, 완료되면 결과를 받아 처리하기 위해 사용되는 대표적인 방법으로 콜백 함수(Callback) 와 이를 개선한 프로미스 객체(Promise)가 있다.하지만 서비스 규모가 커질 수록 코드가 복잡해짐에 따라 코드를 중첩해서 사용하다가 가독성이 떨어지고 유지보수가 어려워지는 상황이 발생되게 되는데, 이를 Callback Hell, Promise Hell 이라고 불리운다.  자바스크립트 async / awaitasync/await는 ES2017에 도입된 문법으로, Promise 로직을 더 쉽고.. 2024. 12. 22.
Javascript - Promise 콜백 지옥을 탈출하는 새로운 문법자바스크립트에서 '비동기 처리' 란 현재 실행중인 작업과는 별도로 다른 작업을 수행하는 것을 말한다.예를 들어 서버에서 데이터를 받아오는 작업은 시간이 걸리기 때문에 자바스크립트의 서버 호출 함수는 비동기 함수(링크)로 이루어져 있다.비동기는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 방식이기 때문에, 만일 비동기 작업의 결과에 따라 다른 작업을 수행해야 할 때는 전통적으로 콜백 함수를 사용했다. 콜백 함수란 비동기 작업이 완료되면 호출되는 함수의 의미로서, 비동기 함수의 매개변수로 함수 객체를 넘기는 기법을 말한다. 그래서 함수 내부에서 함수 호출을 통해 비동기 작업의 결과를 받아서 인자로 주면 이를 통해 후속 처리 작업을 수행할 수 있다.. 2024. 12. 21.
Javascript - this this란?JS에서 실행 컨텍스트에 따라 다르게 바인딩되는 객체this는 함수의 블록 스코프 내에서 선언되어야 작동 cf) 실행 컨텍스트란? - 실행할 코드에 제공할 환경 정보들을 모아놓은 객체let group = { title: "1모둠", students: ["보라", "호진", "지민"], title2 : this.title, title3() { console.log(this.title) }};console.log(group.title2); //undefinedgroup.title3(); // 1모둠  this의 기본 동작 원리'this'는 함수가 호출되는 방식에 따라 다르게 동작함- 일반 함수로 호출될 때: 전역 객체를 가리킴- 메소드로 호출될 때: 해당 메소드를 호출한 객체를 가리킴 왜냐.. 2024. 12. 21.
Javascript - Array의 map, reduce, forEach, filter 메소드 array.map()- 배열(array)내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 만들어냄- 쉽게 말해, 맵 메서드로 맵핑해준다(매개변수로 함수가 들어가면 callback이라 함)let numbers = [1, 4, 9]let roots = numbers.map(function(num){ return Math.sqrt(num)})//roots = [1, 2, 3]//numbers = [1, 4, 9]  array.reduce()- 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과값 반환- 배열 축소의 원리로 작용. 즉 여러개의 값이 담긴 배열이 줄어서 최종적으로 하나의 값으로 만드는 과정[0,1,2,3,4].reduce(function(acc,.. 2024. 12. 21.
두 번째 과제 - JS를 이용한 사진 관리 웹사이트 만들기 이번 과제로는 JS를 이용한 사진 관리 웹사이트를 만들어보았다. 먼저 기본 화면을 봐보도록 하자. 로그인 화면 관리 시스템 화면 학생 정보 등록 화면 정보 입력 화면 정보 등록 완료 시 화면 학생 프로필 및 수정 화면 학생 정보 수정 화면 수정된 학생 정보 화면 선택 박스 체크 화면 선택한 객체 삭제 화면 학생 정보 부분 리스트(스크롤) 페이지 CSS를 이용한 애니매이션 화면 반응형 화면 [흐름] 다음과 같이 구성했다. 과제 기간은 약 10일로 지난 과제 기간보다 길었지만 생각없이 신청한 공모전, 교내 경진대회 등으로 시간을 다 날려먹어서 과제 할 시간이 약 4일정도밖에 없어서 요구한 필수 기능들만 구현을 했다. 파이어베이스의 파이어스토어 데이터베이스를 사용했고 웹페이지에서 등록하면 해당 객체 정보가 파.. 2023. 8. 29.