TIL

팀 소개 웹페이지를 만드는 프로젝트를 진행중이다.첫날은 대부분 Todo List 만들었을 때 사용했던 것들이라 새롭게 알게 된 건 별로 없었다. 새 창을 열 때, 주로 팝업창을 열 때 사용한다.이름은 그 창의 고유값 같은 것이다. default 는 "\_blank" 이

어떤 변수에 한 element의 id 값을 넣었다.이때, id가 string의 형태로 나타낼 수 없고 오직 그게 저장된 변수 이름만 아는 상황이라고 해보자.그렇다면 이때 jquery를 사용해서 그 변수의 값으로 저장된 id를 가진 element에 어떻게 access 할

예를 들어, 아래와 같은 경우 (참고로 target element의 class에 링크를 저장해놨다.)this 를 사용해봤는데 오류가 생겼다.jquery를 사용해서 아래처럼 해봤는데 그것도 오류가 생긴다.이유는 모르겠다.특정 element에 마우스 오버를 하면 생기는

css: 부모 &nbsp&nbsp->&nbsp&nbsp position: relative; 자식 &nbsp&nbsp->&nbsp&nbsp position: absolute; 이렇게 하면 자식의 위치를 창 전체가 아니라 부모 안에서 조절 가능하다. 예를 들어 이렇게 하면 자식 element인 이 부모 element인 의 우측하단에 위치하게 된다. >...

addEventListener 위치의 중요성 jQuery 에서는 그냥 이런 식으로 작성하면, document가 다 Load 되고나서 저 클릭 이벤트가 실행되도록 할 수 있었다. 하지만 바닐라 자바스크립트에서는 그걸 어떻게 해야할까 찾아보다가 등의 방법이 있다는

JS는 동적 타입 언어 (dynamic typing language) 이다. 변수 타입이 런타임때 결정된다. (the interpreter assigns variables a type at runtime based on the variable's value at the time.) 내가 코딩을 처음 접한 게 C 이다 보니, C는 진짜 하나하나 신경 쓸 ...

객체, 즉 참조형 변수를 복사하는 것에 대한 이해 우선, 기본형 변수(variable of primitive type) 복사의 결과는 다른 값을 준다. 예시) 결과는 var1 !== var2 var1 = 7 var2 = 5 따라서 기본형 변수를 복사해서 사용하다가 어느 하나의 데이터 값을 바꾸더라도, 복사한 변수나 원본 변수는 서로 독립적이라고 ...

실행 컨텍스트 (Execution Context) 실행할 코드에 제공할 환경정보를 모아놓은 객체이다. > #### 호이스팅 (hoisting) 에 대한 이해 : 변수 선언부(record 혹은 식별자) 및 함수 선언부를 맨 위로 끌어올리는 것을 의미 호이스팅의 개념을 모른다면, 코드를 실행을 했을 때 결과값이 예상한 것과 다르게 나올 때 그 원인을 파...

콜백함수의 this binding 콜백함수의 제어권 콜백지옥 Promise async/await

HTTP 응답 상태 코드 아래 코드에서 response.status 는 'HTTP 응답 상태 코드'로서 응답 상태 코드는 웹 서버가 요청을 받은 후 처리한 결과를 클라이언트에게 알려주는 '세 자리 숫자'를 뜻한다. 대표적인 예시로 에러가 생겼을 때 나오는 404가 있다. 아래 코드에 나오는 200은 "OK"를 의미한다. 이는 서버가 클라이언트의 요청을...

&nbsp &nbsp or &nbsp &nbsp html parsing을 하다가 를 만나면 parsing을 잠시 멈추고 js 파일을 다운로드 받고 제어권을 js 파일로 넘겨준다. 즉, html parsing이 다 끝나지 않아 html DOM이 다 완성되지 않은 상태에서 js 파일 속 코드가 실행되는 것이다. 이를 막는 방법은 크게 3가지...

모듈화 (modularisation) 모듈(module)이라는 건 말 그대로 전체를 설계할 때 조립, 해체, 수정을 쉽게 할 수 있도록 전체의 구성요소들을 최소 단위의 블럭들로 규격화 한 것을 말한다. 쉽게 얘기하면 레고 블럭 같은 거라고 생각하면 된다. 코딩도 마찬가지다. 소위 말하는 '좋은 코드'란 처음 코드를 작성한 사람 뿐만 아니라 다...

지금껏 input 창과 button의 이벤트 핸들러를 각각 따로(Enter key, click) 지정해왔었는데 form 태그를 사용하면 한 번에 처리할 수 있다는 걸 알게 됐다. 우선, 사용 방식은 아래와 같다. 이렇게 input과 button을 form 태그로

select-option 태그 (다운 버튼으로 옵션 선택) 기존 수정 검색 버튼을 누르면 select에서 선택한 option의 value를 가져와서 그에 맞는 검색을 하려고 하는데 방법을 몰랐다. 어떤

method를 사용하는데 만약 같은 id를 가진 element가 여럿 있다면 그 중에 첫번째 element만 반환한다. 애초에 id라는 attribute가 element들을 구분하는 고유한 식별자, 말 그대로 id 역할을 하게끔 설계되었기 때문이다. 따라서 은 복수형 "-s"가 붙은 반면, 는 단수형이다. 복수형을 method는 없다. 그렇다면,...

일반적으로 Promise는 비동기 작업을 수행하고 그 결과를 반환한다. 예를 들어, fetch 함수를 사용하여 네트워크 요청을 보내면 Promise가 반환된다. 이때 .then()을 사용하여 이행될 때 실행할 콜백 함수를 지정할 수 있다. 또한 .catch()를 사용하여 거부될 때 실행할 콜백 함수를 지정할 수도 있다. Promise.all() 은 여러 ...

.some() 은 array의 method 중 하나이다. array의 elements 중에 적어도 하나는 괄호 안의 콜백함수의 조건을 만족한다면 true를 반환하고, 만족하는 element가 하나도 없으면 false를 반환한다. 따라서 element 자체를 찾기보다 이 array가 내가 찾고자 하는 특정 element를 포함하고 있는지의 여부를 알고싶을...

아래 코드는 내가 작성한 코드의 일부이다. 하지만 제대로 작동하지 않았는데, 왜냐하면 위 코드에서 fetchMovies 함수 내에서 fetch 함수를 호출할 때 await 를 사용하고 있지만, forEach 메서드는 비동기적인 콜백 함수를 지원하지 않는다!!! > #### 해결방법 (1) forEach 대신에 for...of 나 map 과 같은 반복문...

정규식 (regular expression) The RegExp object is used for matching text with a pattern. There are two ways to create a RegExp object: a literal notation and a constructor. The literal notation takes a ...

STEP 0 node.js 설치 (npm 자동 설치됨) yarn 설치 npm install -g yarn node.js란? 원래는 JavaScript라는 언어가 브라우저 환경에서만 실행될 수 있었는데(애초에 브라우저에서 동작하도록 만든 언어다. 때문에 브라우저는 자체적으로 JS 엔진을 가지고 있다.), Google이 Chrome에서 사용하는 JS 엔진 V...

const todoMaxOrder = await Todo.findOne().sort("-order").exec(); 이게 맞는 코드인가? 실제로 코드에서 findOne()을 먼저 호출하고 sort()를 사용하는 것은 논리적으로 이해하기 어려울 수 있습니다. 올바른

각각의 폴더 및 파일은 아래와 같은 역할을 담당하고 있습니다. app.js 전체 어플리케이션의 시작점입니다. 미들웨어(Middleware)와 라우터(Router)를 등록하며, 서버를 시작하는 역할을 담당합니다. middlewares 미들웨어를

try ... catch error 가 발생했을 때 서버가 종료되지 않게 하기 위함 에러 처리 미들웨어 (called as 'Exception Filter' in Nest.js) express.js에서 공식적으로 제공하는 기능 와 같이 err, req, res,

Schema Model findOne() sort("-order") 내림차순 sort("+order") 오름차순 exec() constructor instance 비슷한 성질을 가진 여러개의 객체를 만들기 위해, 일종의 설계도라고 할 수 있는 생성자 함수(Con

RDB란? Relational Database: 쉽게 말해서, 데이터를 엑셀 표처럼 column 마다 다른 속성을 가지는 row들로 데이터를 저장하는 방식이다. | RDB | NoSQL | Excel file | |--------|------------|------------| | Table | Collection | Sheet | ...

Abstract 인증: 사용자가 누구인지 확인하는 과정. (로그인) 인가: 사용자가 특정 자원에 접근할 권한이 있는지 확인하는 과정. (권한 부여) Authentication과 Authorization은 웹 애플리케이션 보안에서 중요한 개념으로, 각각의 역할이 다르

Access Token 특정 리소스에 access하기 위한, 즉 Authorization를 위해 발급해주는 토큰 예시: 이전 글에서 언급한 JWT가 Access Token으로 쓰였었다. 문제점: 데이터 위변조를 막을 수 있고, stateless하게 데이터를 관리

서비스를 만들다 보면 만약 사용자 정보 저장에 실패하게 될 경우, Users 테이블은 생성됐는데, UserInfos 테이블의 사용자 정보는 저장되지 않은 상태로 남아있게 되는 상황이 발생할 수도 있다. 이런 종류의 문제를 해결하기 위해 MySQL과 같은 RDBMS에서

Object Relational Mapping Javascript의 객체(Object)와 DB의 관계(Relation)를 Mapping 해주는 도구 Node.js 환경에서는 대표적으로 TypeORM, Prisma, Sequelize 등이 있다. ODM : Obje

문제 발생 폴더구조가 src/app.js 처럼, app.js가 다른 폴더 안에 들어있는 경우에 nodemon이 잘 설치 되어있는데도 nodemon src/app.js 를 실행했을 때 zsh: command not found: nodemon 이라는 오류가 뜨는 문제가 있다. > ### 문제 원인 패키지 매니저로 yarn을 사용해서 yarn add glo...

문제 설명 다음은 어느 한 서점에서 판매중인 도서들의 도서 정보(BOOK), 저자 정보(AUTHOR) 테이블입니다. BOOK 테이블은 각 도서의 정보를 담은 테이블로 아래와 같은 구조로 되어있습니다. | Column name | Type | Nullable | Description | | --- | --- | --- | --- | | BOOK_ID |...

1. 환경변수 불러오기 기존에 알고 있던 방식 기존에는 .env 파일에 저장된 환경변수를 불러오기 위해 import dotenv from 'dotenv'; 로 import를 한 뒤 dotenv.config(); 를 했었다. 새로 알게 된 방식 그냥 import 'dotenv/config'; 를 하면 된다. 추가로 알게 된 것 프로그램을 실행할 때 가장...

.splice() method > ### Documentation array.splice(start, deleteCount, item1, item2, ...) 설명 start : 배열에서 변경을 시작할 인덱스. 양수를 사용하면 배열의 앞에서부터, 음수를 사용하면

users 테이블을 로그인 아이디(또는 이메일주소)와 비밀번호만 담긴 auth와 나머지 정보가 담긴 users로 쪼갤지 말지users 테이블을 자주 변경하지 않을 것 같은 email, 비밀번호 등이 담긴 users와 자주 변경할 것 같은 닉네임, 프로필 이미지, 자기소

문제 발생 게시글 및 댓글에 좋아요를 누르면 그 데이터를 저장하는 테이블, postlikes와 commentlikes의 primary key의 데이터 타입을 BigInt로 설정했었다. (게시글과 댓글 수) * (좋아요 누르는 사용자 수)를 곱한 만큼의 데이터가 쌓일 테니 Int로는 부족하지 않을까 하는 이유였다. 그런데 그렇게 하고 보니 에러가 발생했...

참고: https://resilient-923.tistory.com/419 예) 욕설/트롤 유저 계정삭제 -> 재가입 가능 -> 어떻게 막나? -> soft delete를 한다.(플래그 컬럼을 추가해서 구분 및 권한을 제한한다) -> 예) 방법1) isDeletedAt 컬럼 추가해서 시간 기록 (default: null) 방법2) isDeleted 또는 ...

setInterval은 설정된 함수의 실행시간에 관계 없이, 간격으로 설정된 시간이 지나면 곧바로 다시 함수를 실행시킨다. 그에 반해 setTimeout은 함수가 끝나게 되면 다시 간격대로 함수를 실행시킨다. https://developer.mozilla.org/en-

Presentation Layer -> Controller Request 수신, 예외 처리, 유효성 검증, Response 반환 Business Logic Layer -> Service Persistence Layer (Data Access Layer) -> Rep

문제 의식 인스타 피드(feed)나 스토리(story)를 꾸밀 때 많은 것들로 꾸밀 수 있다. 그러면 그게 개수가 많아질 수도 있고, 종류도 스티커, 링크, 텍스트 등등 많은데 어떤 식으로 DB에 저장해야 할까? > ### 틀린 방법 종류 하나하나마다 테이블을 따

객체가 다른 객체를 직접 생성하거나 관리하지 않고, 객체 간의 의존성을 외부에서 주입하는 방식으로, 객체 간의 의존성을 낮추는 중요한 설계 원칙 중 하나이다.유연성: 객체 간의 결합도가 낮아져서, 각각의 객체를 독립적으로 변경하거나 교체할 수 있다.테스트 용이성: 테스

테스트 코드의 중요성 Unit Test: 가장 작은 규모의 기능을 테스트 Integration Test: 다양한 기능을 합쳤을 때 생기는 문제가 있는지 테스트 E2E(End-to-end) Test: Backend부터 Frontend까지 원하는대로 동작하여 원하는

캡슐화 (Encapsulation) 객체 내부에 세부적인 사항을 외부에 노출시키지 않도록 감추는 것 데이터에 접근할 수 있는 방법을 제한 private : Access modifier 인스턴스 내부에서만 해당 변수에 접근이 가능하도록 제한하는 Typescript 문

prisma 에서 제공하는 기능 중에 model의 둘 이상의 field를 묶어서 그 model의 id(primary key)로 설정하거나 uniqueness constraint로 설정하는 기능이 있다. 참고: prisma 공식 Docs: composite-ids-and-constraints > ## Composite Id 설정 공식 문서 예시 이렇게...

// base.repository.js // review.repository.js // review.service.js

url 중간에 끼워져있는 params를 얻어내려면{ mergeParams : true }를 라우터에 매개변수로 넣어주면 된다.예)

개념 참고1: 한글 참고2: 영어 객체를 하나만 생성 하도록 하며, 생성된 객체를 어디에서든지 참조할 수 있도록 하는 패턴 > ### 적용 repository, service, controller의 instance를 미리 생성해놓고 export 하여 impor

schema.prisma의 model에서 설정한 composite unique constraint를 바탕으로 findUnique 검색을 할 수 있다.fieldName1 과 fieldName2 을 합쳐서 composite unique constraint 설정이 되어있다면

MySQL에는 당연히 있겠지만, prisma에도 여러 데이터를 동시에 create, update, delete 하는 방법이 존재한다. C,U,D 할 데이터가 배열로 주어질 때, 이 배열을 for loop으로 돌면서 하나하나 await 써가며 DB에 접근하는 것은 너무

일반 객체에서의 this binding 일반 함수 선언문 사용 화살표 함수 사용 아래와 같은 효과: 상위 scope의 this를 참조 > ## class 객체에서의 this binding instance 생성 후 instance의 method로서 함수 실행

class 의 method로서의 함수를 정의 할 때, 화살표 함수로 정의 arrowFunc = () => { console.log(this); } 화살표 함수는 자신의 this context를 생성하지 않는다. 대신, 화살표 함수가 정의된 위치(상위 scope)

tuple number[], string[] 처럼 같은 타입의 원소만 가질 수 있는 배열과 달리, 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 배열 ex) 타입 순서에 맞게 할당하는 경우 ex) 타입 순서에 맞지 않게 할당하는 경우 > ### enum 열거

Partial 어떤 interface T에서 필요한 property 일부만 선택하는 방법. 어떤 property를 선택할지 명시하지는 않는다. 최소 1개는 가져와야 한다. > ### Required 어떤 interface T에서 optional한 propert

Cannot redeclare block-scoped variable '변수이름' 변수 이름 정할 때 다른 파일에서 선언된 변수인데 같은 이름으로 선언된 게 있다고 빨간줄 오류 뜨면 tsconfig.json 에서 이렇게 설정해주세요 저거 설정하지 않으면 타입스크

위 코드에서 뭐가 잘못됐을까? 정답은 constructor 안에 super(); 를 쓰지 않은 것이다. 그렇다면 super(); 가 왜 필요할까? 안쓰면 superclass 를 상속받지 못하나? The requirement to call super() in a s

app.module.ts 파일password 부분에서 에러 발생TypeScript와 NestJS에서 환경 변수를 설정할 때, configService.get() 메서드의 반환 타입이 string | undefined이기 때문에 타입 오류가 발생할 수 있다고 한다. 따라

SOLID > ### Single Responsibility Principle, SRP (단일 책임) SRP를 위반하는 예시 SRP를 따르도록 변경 > ### Open-Closed Principle, OCP (개방-폐쇄) 소프트웨어 엔티티 또는 객체는 확장에는

@Entity({ name: 'users' }) Entity를 정의하겠다고 선언. Entity는 Typeorm으로 DB에 만들 테이블에 대한 정보를 담고 있다. prisma schema에서의 model와 같다. { name: 'users' } 해당 entity에

Nest.js 에서 *.module.ts는 기본적으로 Express.js에서 router의 역할과 유사하다. > ## import 현재 모듈이 다른 모듈에서 제공하는 기능을 사용할 수 있도록 하는데 사용된다. 즉, 다른 모듈을 가져와서 이 모듈에서 사용할 수 있게 만든다. > ## controller 이 모듈에서 사용되는 컨트롤러를 지정한다. > ...