[JS] DeepDive(22) this

메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체리터럴 방식으로 생성한 객체의 경우에는 재귀적 방식으로 자신이 속한 객체를 가리키는 식별자를 참조할 수 있다. // 객체 리터럴 const circle = { radius: 5, getDiameter() { // this는 메서드를 호출한 객체를 가리킨다. return 2 * this.radius; } }; console.log(circle.getDiameter()); // 10 위 예제의 객체 리터럴은 circle 변수에 할당되기 직전에 평가되어 getDiameter메서드가 호출될때 circle 식별자에 생성된 객체가 할당된 이후로 참조할 수 있다. 허나 이 방식은 일반적이지 않고 ..

→2023.08.19

프로젝트/소규모프로젝트들

[express] 라즈베리파이 이미지서버 사용

라즈베리파이를 활용해서 이미지서버를 올려보았다. 간단하게 이미지를 받으면 이를 파일로 저장하고, url로 해당 이미지를 띄워주는 간단한 기능을 하는 서버라 크게 어려울 것은 없다. 라이브러리는 아래 3개를 사용한다. "dotenv": "^16.3.1", "express": "^4.18.2", "multer": "^1.4.5-lts.1" 프로젝트를 하나 만들어준 후 3개의 라이브러리를 설치해주자. npm init npm install --save dotenv npm i express npm i multer express를 통해서 간단하게 서버를 열어 두고 이미지를 받는 API 를 하나 만들었다. multer 라이브러리를 통해서 파일을 받고 저장하는걸 관리한다. import express from "expr..

→2023.08.18

FrontEnd/Deep Dive

[JS] DeepDive(20) 빌트인 객체

JS객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다. 1. 표준 빌트인 객체 ECMPAScript에 정의된 객체로 애플리케이션 전역의 공통 기능을 제공한다. JS 실행환경에 상관없이 언제나 사용할 수 있다. 2. 호스트 객체 ECMAScript 사양에 정의되어 있지만 JS실행환경에서 추가로 제공하는 객체. DOM,BOM,Canvas 등과 같은 클라이언트 사이드 Web API를 호스트객체로 제공하며 Node.js에서는 Node.js고유 API를 호스트 객체로 제공한다. 3. 사용자 정의 객체 사용자 정의 객체는 표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체를 말한다. 표준 빌트인 객체 Object, String, Number, Boolean, Symbol,..

→2023.08.17

FrontEnd/프로그래머스

[JS] 게임 맵 최단거리

BFS의 교과서(?) 적인 문제였던 것 같다. dx,dy 배열로 상하좌우 로 갈 방향을 정해주고 visited로 방문했던 곳인지 아닌지를 체크해준다. 큐 구조를 활용해서 BFS를 구현하였다. (케이스가 크지않아 실제 큐 구조로 문제를 해결하지는 않았다) ny,nx가 갈 수 있는 범위이면서 방문한 적이 없고 map에서 갈 수 있는 곳이라면 큐에 다음 목적지를 넣어주었다. function solution(maps) { const dx = [1,0,-1,0] const dy = [0,1,0,-1] const m = maps.length const n = maps[0].length const visited = [...Array(m)].map(v => Array(n).fill(false)) const que = ..

→2023.08.17

FrontEnd/프로그래머스

[JS] 124 나라

사실 3진법 문제이다. 단 0이 없어서 조금 많이 애를 먹었다. 우리가 진수를 변환할때처럼 3으로 나눠가며 나머지를 역순으로 더해주면 된다. 단, 123이 아닌 124가 나오도록 바꿔주면 된다. function solution(n) { let ret = ""; while(n > 0){ if(n % 3 === 0){ ret = "4" + ret n = ~~(n / 3) - 1; }else{ ret = (n % 3) + ret; n = ~~(n / 3); } } return ret }

→2023.08.16

FrontEnd/Deep Dive

[JS] DeepDive(20) strict mode

function foo() { x = 10; } foo(); console.log(x); // ? foo 함수 내에서 선언하지 않은 x변수에 값 10을 할당했다. 따라서 ReferenceError를 발생시킬 것 같지만 JS는 위 경우 암묵적으로 전역 객체에 x프로퍼티를 동적으로 생성한다. 이러한 개발자의 의도와 상관없는 암묵적 전역은 오류를 발생시킬 원인이 될 수 있다. 따라서 var,let,const 등 키워드를 활용해서 변수를 선언하는것이 좋지만 사람은 누구나 실수를 할 수 있다. 이런 상황을 막아주기 위해서 strict mode가 추가되었다.물론 ESLink와 같은 도구를 활용할 수도 있다. strict mode의 적용 'use strict'를 전역의 선두 혹은 함수 몸체의 선두에 추가하면 된다. ..