개발자 도담씨

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

📃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..

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(); } } /*****************************************************..

# 방법1 import "styles.css" # 방법2 import styles from "styles.module.css" 단점: class 명칭이 이상하여 소규모 프로젝트에 적합 # 방법3 - yarn add styled-components - import styled from "styled-components"; - const List = styled.ul`display: flex;`; Movies TV search

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 친구도 설치 ( 변수 확인 해주는 친구 ...

리액트 매번 혼자 끄적이다가 생각보다 감이 잘 안오고 게을러서 그런지 매번 시작을 안하고 있다가 이번에 강좌를 구매했다 :) 리액트 시작전 알면 좋은 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; ..

노마드코더 개발자 분의 리액트 강좌를 듣다가 정리해놓으면 추후에 좋을 것 같아 오랜만에 끄적여 본다. 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..

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

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :) 참고1 : sujinlee.me/webpack-react-tutorial/ 참고2 : 3트째 참고한 블로그 저번에 혼자 맨땅에 헤딩으로 리액트를 하면서 DB붙이고 하려니 구조를 어떻게 해야하는지 혼동이 오면서 접었었는데... 해당 참고글을 보고 2트해본다! 1트는 버전 문제 때문에 잘 안됐는데 오늘은 다시 해결해보는걸로 😥 준비사항에 있는 node와 yarn을 설치해주고 React Route는 또 몰라서 공부해왔다... 살펴보고 역시 이렇게 있었어 라고 생각이 들었다. 나 역시도 이 친구를 모를때 다른 주소에 따라 다른 뷰를 보여주고싶은데 어떻게 하는지 몰라서 조건문으로 1번을..

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :) 호옥시 잘못된 정보를 공부하고있다면 알려주세요! 참고1: beomy.github.io/tech/javascript/javascript-runtime/ 참고2: geonlee.tistory.com/92 참고3: velog.io/@stampid/React%EB%9E%80 React 기초를 다시 한번 공부하려니 Node를 다시 알아야 했고 Javacript 런타임 기반이다보니 해당 부분까지 공부하게 됐다. 매번 1화만 보다가 끝나는 기분이야..😢 자바스크립트는 싱글쓰레드-논블로킹 언어로 쉽게 말해서 쓰레드 하나에 비동기식으로 작동한다. 하긴 단일쓰레드인데 동기식(블로킹) 형식이였으면..