Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

전체 글 149

웹 프로그래밍/에러로그
[Nest.js] Mailer Error :: Username and Password not accepted

Nest.js Email 보내기를 시도하다가 난 오류를 정리해놓으려고 한다! 나는 env파일에 보내는(FROM) 메일 주소와 비밀번호를 바르게 입력해두었는데도 불구하고 'Username and Password not accepted' 라고 떴었다. 이 오류 문구가 상당히 짜증났었는데(추후 알게 됨!) 우선 2차 인증이 안되어 있는 경우 해당 오류가 발생한다. 구글 우측상단의 프로필을 눌러서 Google 계정 관리로 이동 👍 그리고 보안탭에서 2단계 인증을 눌러 추가해준다. . . . 그다음 메일 발송을 해보면 오류가 바뀌어있다. 'Application-specific password required' 앱 비밀번호가 필요하다는 말이다! 개인적으로 처음부터 해당 오류가 나왔으면.. 찾기 더 편하지 않았을까..

2023.05.18 ﹒ 12:53
웹 프로그래밍
INDEX.

최근 업무를 하다가 인덱스의 중요성에 대해 한번 더 느낄 수 있는 상황이 오게 되어 메모해 놓으려고 한다. . . . 인덱스가 없는 경우 SELECT를 했을 때 해당 테이블의 레코드를 전부 읽어 찾게 되는 FULL SCAN이 발생된다. * FULL SACN 하드디스크에 저장되어있는 데이터들을 전부 탐색 만약 백만개의 데이터가 있는 테이블에서 값을 찾고 싶다면 우린 백만개의 데이터를 읽게 되는것이다! (이 얼마나 비효율적인 상황인지 😥) 그렇다면 해당 상황에서 검색되는 컬럼에 인덱스가 걸려 있다면 어떻게 되는지 알아보자. 여러 블로그를 읽어보니 대표적으로 B-TREE 구조 기반으로 다른 구조들도 비슷하여 대부분 B-TREE 구조를 다루고 있는 듯 하다. 해당 블로그에 너무 잘 정리 되어있어 링크로 대체하려..

2023.01.18 ﹒ 11:22
웹 프로그래밍/공부일지
[React] 리액트 컴포넌트 테스트 환경 설정

[ TESTING REACT COMPONENTS ] 리액트 관련한 코드를 테스트 하는 환경을 설정해보려한다. Jest라는 친구를 사용해 볼건데 create-react-app할때 이미 셋팅이 되어 있을 것이다. *Jest : 코드가 제대로 동작하는지 확인하는 Test Case 를 만드는 페이스북이 개발한 'JS 테스팅 프레임워크' 우선, npm test -- --coverage --watchAll로 내가 얼마나 코드를 테스트 했는지 현황을 볼 수 있다. 해당 명령어를 쳐서 보니 내가 검사를 하고 싶지 않은 파일까지 함께 떠서 설정을 조금 해주려한다. package.json에서 jest 설정을 해주었다. 해당 경로에 해당하는 파일들만 검사를 하는걸로..! 그리고 다시 coverage 명령어를 사용해보면 내가..

2022.06.28 ﹒ 19:25
카테고리 없음
[NestJS] Task Scheduling

📃NestJS Task Scheduling 문서 바로가기 이전에 우분투에서 cron이라는 친구를 써본 경험이 있는데 그냥 이친구랑 같았다 :) 간단해서 문서만 될 것 같지만 우선 정리해 놓는걸로..! 먼저 해당 패키지를 설치 해준다음 npm install --save @nestjs/schedule app.module에 추가해줄것이다. @Module({ imports: [ ScheduleModule.forRoot() ], }) // 특정 시간에 한번 실행 @Cron('30 * * * * *', { name: 'myJob', }) checkForPayments() { console.log('Checking for payments....(cron)'); const job = this.schedulerRegis..

2022.05.22 ﹒ 14:47
웹 프로그래밍
[TypeORM] update시 @BeforeUpdate가 작동하질 않아 😩

nestJS에서 typeORM과 함께 백엔드를 공부하고있는데 User 정보를 업데이트 하는 과정에서 비밀번호를 암호와 해야 했기에 @BeforeUpdate()를 사용해주었는데 작동을 안하잖아..? 💡기존 코드 // user.entitiy.ts @BeforeInsert() @BeforeUpdate() async hashPassword(): Promise { try { this.password = await bcrypt.hash(this.password, 10); } catch (error) { console.log(error); throw new InternalServerErrorException(); } } /*****************************************************..

2022.03.19 ﹒ 19:38
웹 프로그래밍/공부일지
20211101 REACT REPORT

create-react-app을 사용하여 리액트 앱을 만들어 볼려고 하는데..! yarn global add create-react-app create-react-app 음 마치 css나 js 라이브러리 처럼 한번 다운받아놓으면 업데이트 되었어도 업데이트가 되지 않고 계속 그때 다운 파일만 남아있다는 단점이 있지. 맨 처름 프로젝트를 만들고 사용하지 않을 명령어지만 매번 프로젝트를 생성할때 해당 패키지를 업데이트 해주고 다시 설치한다? 너무 불편할 수 밖에...🙄 그래서 우리는 npx라는 친구를 사용하기로 한다 :) yarn global add npx npx create-react-app {project name} 앱이 만들어졌는지 확인하고! prop-types 친구도 설치 ( 변수 확인 해주는 친구 ...

2021.11.01 ﹒ 17:32
웹 프로그래밍/공부일지
[ React ] 시작전 알면 좋을 Javascript 문법

리액트 매번 혼자 끄적이다가 생각보다 감이 잘 안오고 게을러서 그런지 매번 시작을 안하고 있다가 이번에 강좌를 구매했다 :) 리액트 시작전 알면 좋은 Javascript 개념 몇가지를 정리해 놓으려고한다 🙂 화살표 함수 [ 기존 ] function sayHello ( name ) { return name; } [ 화살표 함수 ] const sayHello = ( name ) => { return name; } * 매개변수가 하나일 경우 괄호 생략 가능 ex) name => { return name; } * 중괄호 생략시 자동 return ex) name => name; Template Literals [ 기존 ] const sayHello = name => { return "Hello " + name; ..

2021.09.30 ﹒ 11:22
웹 프로그래밍/공부일지
[React.js] LifeCycle

노마드코더 개발자 분의 리액트 강좌를 듣다가 정리해놓으면 추후에 좋을 것 같아 오랜만에 끄적여 본다. React Component의 Life Cycle에 관한 이야기다. 크게 어렵진 않았다 사실 vue랑 같아서... 크게 3가지 단계로 나뉘어진다 :) 1. Mounting 2. Updating 3. Unmounting Mounting @ constructor() - JavaScript에서 Class를 만들 때 호출 - Coponent가 Mount될 때 || 화면에 표시 될 때 호출 @ render () @ componentDidMount() - Component가 처음 render될 때 호출 Updating : state를 변경할 때! @ render() @ compontnetDidUpdate() Unm..

2021.08.21 ﹒ 16:35
웹 프로그래밍/공부일지
[ JavaScript ] Select박스를 검색가능하게 만들어보자 :P

예전에 업무를 하면서 Vue를 이용해 우선 만들었던 기능을 순수 JavaScript로 만들 기회가 또 생겨 확장성을 더 생각해서 구현해 보았다. jQuery에 익숙해져있다가 순수 JavaScript로만 하려니 생각보다 힘들었다😥 내가 만들고자 한건 우리가 일반적으로 쓰는 select box를 사용하면 아래와 같이 검색 선택 박스로 바뀌는 것이다. 마우스 이벤트로도 구현을 했고 아래, 위 키를 눌러서 엔터를 누르면 선택 되도록 키이벤트도 구현했다! 코드 리뷰 function setCustomSelect (instance, list, width){ var box = document.createElement("span"); var input = document.createElement("input"); var..

2021.03.29 ﹒ 18:33