분류 전체보기

[Deep Dive] 22장 this

this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 함수를 호출할 때 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. // 전역에서 this → 전역 객체 window를 가리킨다. console.log(this); //window // 일반 함수 내부의 this → 전역 객체 window를 가리킨다. function test() { console.log(this); // window } // stric mode가 적용된 일반 함수 내부의 ..

[Node.js] Cannot find module '@aws-sdk/util-endpoints' 오류

오류 1) Cannot find module '@aws-sdk/util-endpoints' 2) this.client.send is not a function Node.js 프로젝트에서 aws-sdk와 multer-s3 를 이용해서 이미지 업로드 기능을 구현하던 중 만난 오류이다. 해결 두가지 오류는 전부 패키지 간 버전 호환이 안되어서 생기는 이슈였다. 검색해보니 multer-s3 2.x는 aws-sdk 2.x와 호환되고, multer-s3 3.x는 aws-sdk 3.x와 호환된다고 한다. 내가 설치한 aws-sdk는 2.x 버전이고 multer-s3 은 3.x 버전이어서 다운그레이드가 필요했다. 아래와 같이 기존에 설치되어 있던 multer-s3 를 삭제하고, 2.x 버전으로 설치 해주었더니 에러가 ..

[AWS S3] The bucket does not allow ACLs 오류

AWS S3 ACLs 오류 AWS S3를 이용해서 이미지를 업로드 하는 기능을 구현 하던 중 다음과 같은 오류를 만났다. 해당 오류는 버킷의 ACL(Access Control List)이 비활성화 상태라서 생기는 오류다. 해결 S3로 가서 버킷의 권한을 바꿔주면 해결된다. 1. 해당 버킷의 권한 탭으로 이동한다. 2. 스크롤을 내려서 객체 소유권 편집을 클릭한다. 3. 아래와 같이 설정을 변경한 후 변경 사항 저장을 클릭한다. 4. 새로고침 후 확인 정상적으로 콘솔창에 이미지 정보가 출력된 것을 확인할 수 있었다. 참고 https://stackoverflow.com/questions/71080354/getting-the-bucket-does-not-allow-acls-error getting "The b..

멋쟁이사자처럼 프론트엔드 스쿨 6주 차

키워드 JavaScript 기초 누리 멘토님, 혜진 멘토님 특강 6주 차 이번 주부터 본격적으로 JavaScript 기초 개념을 배우고 있는데, HTML / CSS 수업 때보다 훨씬 재미있게 듣고 있다. 다만 수업 중간에 혼자 MDN을 읽어보다가 수업의 흐름을 놓치곤 하는 문제가 있었다. 수업에 좀 더 집중하기 위해 MDN은 자습시간을 활용해서 읽어보는 것으로! 제코베 100제를 푸는 중인데 part2에 들어가니 점점 문제가 어려워진다. 다행히 호준 대표님이 제코베 강의를 제공해 주셨다. 우선 처음에는 내 실력으로 풀어보고 답안이랑 너무 차이가 나거나 궁금한 문제는 강의로 추가적인 공부를 하려고 한다. 어떤 문제는 오래 고민하다가 산으로 가버린 적이 있어서 강의를 들을 수 있는 게 정말 다행이다 싶다. ..

[과제] 천하제일 캐릭터 경진대회 - 털찐

멋사 EF 3기 천하제일 캐릭터 경진대회 멋쟁이사자 프론트엔드 스쿨에서 HTML과 CSS로 나만의 캐릭터를 만드는 대회가 있었다. 귀엽고 재미있는 아이디어가 많아서 보는 재미가 있었다. 동기분들이 제출하신 것들을 보면서 계속 감탄했다. 나는 이번 대회에서 감사하게도 대상을 받을 수 있었다. 회고도 할 겸 작업 과정을 간단하게나마 기록으로 남겨보려고 한다. 데모 https://sduu.github.io/character-contest/ 털찐 sduu.github.io Github https://github.com/sduu/character-contest GitHub - sduu/character-contest Contribute to sduu/character-contest development by cr..

[Deep Dive] 16장 프로퍼티 어트리뷰트

16장 프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // Uncaught StyntaxError: Unexpected token '[' // 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. o.__proto__ // Object.prototype 작성일 기준 Object.pro..

[JavaScript] 쉼표 연산자 (Comma Operator)

쉼표 연산자란 MDN에서는 다음과 같이 정의한다. 쉼표 연산자는 각 피연산자를 왼쪽에서 오른쪽으로 평가하고 마지막 피연산자의 값을 반환한다. 쉼표 연산자는 주로 여러 동작을 하나의 줄에서 처리하려는 복잡한 구조에서 활용할 수 있다. 연산자 우선순위에서 가장 낮은 순위를 가지기때문에 먼저 수행하기 위해서는 괄호를 사용해야 한다. let x, y, z; x = 1, y = 2, z = 3; // 3 console.log(x); // 1 let a, b, c; a = (b = 5, c = 6); // 6 console.log(a); // 6 쉼표 연산자의 활용 for 문 const array = [ ['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i'], ]; for (let..

멋쟁이사자처럼 프론트엔드 스쿨 4주 차

키워드 [CSS] flex, grid, perspective, CSS Sprite 기법, IR 기법 [CSS 특강] 지그재그 실습 [JavaScript] 스코프, let, const 키워드 4주 차 꼭 필요한 요소만 마크업 하는 것과 확장성을 고려한 마크업 사이에서 고민하다 보면 마크업에 꽤 시간을 쏟게 된다. 우선은 종찬님 특강에서 배운 것처럼 콘텐츠에 집중하기보다는 레이아웃을 고려해서 마크업 하는 것에 익숙해져야 할 것 같다. 벤딩 머신 과제를 하면서 요구하는 기능을 구현하는 것만으로도 버거웠지만 딥다이브에서 배운 것을 써 볼 수 있어서 재미있었다. 이제 자바스크립트 수업에 시작되는데, 개념적인 것뿐만 아니라 협업을 위해 좋은 주석을 작성하는 법, 가독성과 성능을 고려한 코딩 방법도 배우고 싶다. 다..

[Deep Dive] 14-15장

14장 전역 변수의 문제점 변수의 생명 주기 지역 변수의 생명 주기 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. 즉, 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다. 지역 변수가 함수보다 오래 생존하는 경우도 있다. 누군가 스코프를 참조하고 있으면 스코프는 소멸하지 않고 생존하게 된다. 지역 변수는 함수가 생성한 스코프에 등록된다. 따라서 변수는 자신이 등록된 스코프가 소멸(메모리 해제)될 때까지 유효하다. 또한 호이스팅은 스코프를 단위로 동작하며, 호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말한다고 할 수 있다. 전역 변수의 생명 주기 브..

[Deep Dive] 12-13장

12장 함수 함수란? 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 입력을 받아서 출력을 내보내는 일련의 과정이라고도 할 수있다. 이때 함수 내부로 입력을 전달받는 변수를 매개 변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다. 함수를 사용하는 이유 코드의 재사용 : 함수는 필요할 때 여러 번 호출할 수 있다 .즉 실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능하다. 코드의 신뢰성 : 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있다. 코드의 가독성 : 적절한 함수 이름은 함수의 내부 코드를 이해하지 않고도 함수의 역할을 파악..