본문 바로가기

전체 글108

241112 TIL- async, 개인과제01 async 추가 내용async로 비동기 처리가 된 함수는 자동으로 Promise를 반환함!! await를 맥일 수 있다는 뜻!! 개인과제 LoveLike[ 오늘 한 작업 ][update] 1. Classmate 클래스 변경점 - 생성자 함수에 stage 매개변수로 받게 함 - 이름 속성 배열 형태로 추가 - 스테이지 속성 추가 - isTalk 메서드 기능 추가(스테이지 별 분기 나눠야함, 아직 기본형)2. Player 클래스 변경점 - 훈련 별 메서드 기능 추가 - 상호작용 메서드 Classmate 클래스로 이동3. 스테이터스 함수 세분화 - 내방 장면과 교실 장면으로 세분화 혹시 리팩토링 과정에서 다시 합쳐질 수 있음4. battle 함수 삭제 및 세분화 - 훈련을 위한 myRoomScene 함수와 상.. 2024. 11. 12.
241111 TIL - package.json, package-lock.json, export, import, prettier, 더하기단항연산자 package.json내 프로젝트의 현재 환경을 알려주는 파일. 이름과 버전은 뭐고, 라이센스나 타입은 뭐고, 현재 활용 중인 모듈들엔 뭐뭐가 있는지 등등"dependecies"는 배포 시에도 적용되는 모듈들 "devDependencies"는 개발 환경에서만 적용되는 모듈 (대표적으로 prettier)  package-lock.json프로젝트에서 활용하는 패키지(모듈들)에 대한 상세한 정보를 알려주는 파일! 버전 통일 및 공유 절차 간소화 목적이 프로젝트에서 활용한 모듈들의 버전 정보 등이 담겨있어서 협업자들끼리 일관된 모듈을 이용할 수 있게 해줌 또한 이 파일이 있기에 프로젝트를 공유받은 다른 사람이 node_modules를 불러올 수 있게됨!   export 선언부 앞에 export 지시자를 붙임으로.. 2024. 11. 11.
JS문법종합반 정리 5주차 - DOM, Class, Closure 웹 페이지가 로드되는 과정사용자가 브라우저에 주소를 입력 (= 클라이언트가 서버에 요청)→ 서버로부터 HTML 문서를 수신 (= 서버가 클라이언트에 응답)→ 브라우저가 HTML 파일을 해석(= parsing, rendering)→ DOM tree와 CSSOM tree 구성 후 둘을 묶어서 Render Tree 구성(= 최종 문서 모델을 나타내는 객체의 계층 구조)→ 브라우저 레이아웃 계산 → 페인팅  DOMDocument Object Modeling, HTML파일을 자바스크립트가 해석할 수 있는 객체 형태로 모델링한 것브라우저 환경에 기본적으로 내장된 API(= 시스템과 사용자 간의 중간 인터페이스)DOM Tree의 최상단 node는 항상 documentchildeNodes, parentNode 속성을 .. 2024. 11. 10.
241108 TIL - map() 복습, join(), Math.trunc, indexOf(), iterable, array-like map() 콜백함수의 매개변수/* map()의 기본 구조 */arr.map(function(currentValue[, index[, array]]) { // 변환(mapping)할 로직: 변환된 결과를 반환해야 합니다.}[, thisArg]);currentValue : (필수) 처리할 현재 요소, arr에서 순회할 요소들이 할당됨index : (선택) 처리할 현재 요소의 인덱스array : (선택) map을 호출한 배열. 원본 배열에 접근이 필요할 때 활용thisArg : (선택) 콜백함수에서 this로 사용할 객체를 지정 Array.join()배열의 각 요소를 지정된 구분자로 연결해 하나의 문자열로 반환/* join() 기본 구조 */arr.join(separator)separator : (선택).. 2024. 11. 8.
JS문법종합반 정리 4주차 - 콜백함수와 제어권, 동기와 비동기, 비동기작업의 동기적 표현 콜백함수와 제어권 콜백함수란 다른 코드의 인자로 넘겨주는 함수. 이때 콜백함수의 매개변수, 양식, 실행, 호출 시점 등에 대한 모든 제어권은 얘를 인자로 받는 코드가 가짐!! 사용자가 실행시키고 싶을 때 실행할 수 없음!  동기와 비동기 개념동기 synchronous : 현재 실행 중인 코드가 종료돼야만 다음 코드를 실행비동기 asynchronous : 실행  중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감별도의 "요청, 실행 대기, 보류" 등의 기능을 갖는 코드는 모두 비동기적인 코드  비동기 작업의 동기적 표현1. Promise 활용Promise는 처리가 끝나면 알려줘~ 하는 약속임.new 연산자로 호출한 Promise의 콜백함수는 바로 실행됨콜백함수 내부의 resolve(처리 성공) 또는.. 2024. 11. 8.
241107 TIL 함수를 매개변수로 넣을 때 주의할 점 func란 변수에 어떤 함수가 할당돼있다고 할 때, 이 변수를 인자에 넣을 때 func로 넣는 것, func()로 넣는 것, func(인자O)로 넣는 것의 결과가 모두 다르다!! 아래 예시를 보자구// x와 y를 인자로 받는 함수가 상수 add에 할당돼있음const add = function(x, y) { return x + y;}// argu를 인자로 받는 함수가 what_return에 할당돼있음const what_return = function(argu) { let return_val = `${argu}`; console.log(return_val);} 1) 매개변수에 func로 넣는 경우 : "소괄호가 붙지 않았음 = 함수가 실행되지 않음"이므로.. 2024. 11. 7.