분류 전체보기
-
[Typescript,React] Typescript로 Form,UseState 사용해보기Front-end/React 2021. 12. 14. 18:04
안녕하세요! 오늘은 React + Typescript의 환경에서 useState와 form에서의 타입선언 등을 알아보겠습니다! 자바스크립트를 사용하다가 처음으로 타입스크립트로 프로젝트를 진행할 때, 타입스크립트에 익숙하지 않은 사람들이 힘들어하는 부분일 것이라 생각해서 정리해보도록 하겠습니다! #1. Form event with react+typescript 저도 처음 타입스크립트환경에서 리액트로 프로젝트를 할 때 form의 타입을 무엇으로 설정하는지 몰라 한참 찾았던 기억이 있습니다 ㅠㅠ javascript에서는 form의 event의 타입을 지정해주지 않아도 진행이 되지만, 타입스크립트는 event가 어디서 발생하는지에 대한 타입을 지정해달라고 에러를 내뱉습니다. 간단하게 말하면 타입스크립트는 inp..
-
[Styled-component] styled-component 좀 더 똑똑하게 쓰기Front-end/React 2021. 12. 13. 17:22
안녕하세요. 오늘 포스팅할 주제는 'styled-component'입니다! 리액트를 사용하는 분이라면 다양한 css 라이브러리를 사용하실텐데 저는 CSS-IN-JS의 대표적인 라이브러리 중 하나인 styled-component를 사용 중입니다. 하지만 요즘 styled-component의 재사용성을 제대로 사용하지 않는 저를 발견하고 styled-component의 다양한 기능과 재사용성을 더욱 심도있게 사용해보자라는 마음에 포스팅을 하게 되었습니다! 우리 모두 styled-component를 제대로 사용해 보도록 합시다! #1 Styled-component의 props전달을 잘 사용하자. 같은 h2 태그를 가진 element를 사용해야 한다고 가정해보겠습니다. 둘 다 부제목이지만 다른 폰트 사이즈를 사..
-
[Nest.js, Guard, Save request] Guard를 활용한 엔드포인트 보호Back-end 2021. 12. 13. 15:55
안녕하세요! 오늘은 프로젝트에서 허용되지 않은 접근에 대한 자원 request를 막을 수 있는 nest.js guard에 대해서 알아보도록 하겠습니다! 로그인을 한 유저만 엔드포인트에서 자원을 요청할 수 있는 작업을 해야할 때 우리는 이 nest.js의 guard를 사용할 수 있습니다. 미들웨어로도 처리해도 충분하지 않나요? 가드와 미들웨어의 차이는 실행 시기에 있습니다. 우선 미들웨어는 next() 함수를 호출한 후 어떠한 핸들러가 실행될 지 알 수 없습니다. 반면 가드는 ExecutionContext 인스턴스에 액세스할 수 있으므로 다음에 실행될 작업을 정확히 알고 있습니다. request와 response의 정확한 지점에 우리는 이 Guard를 삽입하여, 요청에 대한 거부, 혹은 승인을 할 수 있는..
-
[Authentication, Nest.js, JWT] Nest.js에서 JWT 동적모듈,미들웨어 구현해보기Back-end 2021. 12. 12. 21:40
안녕하세요! 오늘은 더 나은 사람들 서비스의 로그인 부분 진행 중 nest.js 환경에서 JWT를 이용해 로그인을 구현하고 있었습니다. 🐤 다들 로그인 인증 부분을 어떻게 처리하시나요? 👀 nest.js의 강력한 인증라이브러리인 passport가 있지만, JWT 동적 모듈을 따로 구현하여 컨셉도 다시 익히고 개념 정리도 하면서 포스팅을 할려고 합니다. 구현 방향은 다음과 같습니다. 프로젝트 내 구현 프로세스 1. 로그인 시 JwtService의 signToken 함수로 praviate key와 함께 토큰을 사인 (JSON 안의 내용은 다음과 같습니다.) const token = this.jwtService.signToken({ id: (await user).id, nickname: (await user)..
-
[Nest.js, TypeORM] RepositoryNotFoundError에러와 마주할 때 2021. 12. 11. 20:06
Nest.js 환경에서 서비스 개발 도중 만난 에러입니다. 새로운 모듈에서 데이터베이스 Entity를 생성하던 도중 에러가 발생하였는데, 결론부터 말하자면 app.module.ts에 존재하는 TypeOrmModule에 엔티티를 inject하지 않아서 발생한 에러였습니다. 에러 내용을 살펴보면, 현재 ImageContainer Entitiy가 등록되지 않은 것 같다는 에러를 보입니다. TypeORM은 app.modules.ts의 루트 모듈에 엔티티를 등록을 해줘야하는데 이 것을 하지 않아 발생하는 에러였습니다. TypeOrmModule.forRoot({ type: 'postgres', host: process.env.DB_HOST, port: +process.env.DB_PORT, username: pro..
-
[security] hashing password with bcryptBack-end 2021. 12. 10. 01:23
비밀번호의 보안? 백 엔드에서 유저의 비밀번호를 데이터베이스에 그대로 저장하는 경우가 있을까요? 🐱 그 것은 정말 엉망진창의 보안일 것입니다. 누군가가 데이터베이스에 접근 하더라도 유저의 비밀번호는 확인할 수 없어야하지만, 우리는 비밀번호를 Compare하여 로그인을 진행하여야 하기 때문에 비밀번호의 데이터베이스 저장은 필수불가결합니다. 그렇다면 어떻게 우리는 비밀번호를 숨길 수 있을까요? "그 것은 비밀번호를 Hashing 하는 것 입니다." 우선 비밀번호 해쉬화 알고리즘은 예전부터 발달되어 오던 기술입니다. 해싱에 관한 많은 알고리즘이 있지요. 그 중 우리는 Blowfish를 이용한 Bcrypt를 이용하여 비밀번호를 해싱할 것입니다. 많은 다양한 기술이 있습니다만 ex) SHA SHA를 사용하는 암호..
-
[Nest.js] TypeORM 사용기Back-end 2021. 12. 9. 23:43
i새로운 서비스(더 좋은 사람들 save earth) 를 기획하고 백 엔드를 Nest.js + graphql server + postgres DB 로 스택을 정하고 빌드를 시작했습니다. typescript를 더욱 강력하기 사용하기위해 TypeORM 라이브러리를 사용하기로 하였고, 간단한 세팅을 포스팅으로 남길려고 합니다. TypeORM은 우리의 백엔드에서 SQL문을 직접 작성하지 않아도, 데이터베이스와의 통신을 간편하게 해결해주는 라이브러리입니다. 이와 비슷한 라이브러리인 sequelize도 있습니다. 이 두 라이브러리는 코드를 통해 데이터베이스와 통신하고 상호작용합니다. 타입스크립트 코드로써 데이터베이스에 POST, GET등의 처리를 해결하는데 도움을 주는 라이브러리입니다. TypeORM은 Node.j..
-
[Nest.js, Graphql] 간단하게 Nest.js와 Graphql 기반의 프로젝트 구성하는 법Back-end 2021. 12. 8. 18:39
안녕하세요. 이 포스트는 node.js위에 가동하는 프레임워크인 nest.js와 Graphql 기반의 프로젝트 초기 구성하는 법을 포스팅해보겠습니다. Nest.js? Nest(NestJS)는 효율적이고 확장 가능한 node.js 서버 측 애플리케이션 을 구축하기 위한 프레임워크입니다 . 프로그레시브 JavaScript를 사용하고 Typescript 구축되고 완벽하게 지원합니다 하지만 우리는 자바스크립트로도 프로젝트를 진행할 수 있습니다. OOP(객체 지향 프로그래밍), FP(기능 프로그래밍) 및 FRP(기능 반응 프로그래밍)의 요소를 결합합니다. 내부적으로 Nest는 익스프레스와 같은 강력한 HTTP 서버 프레임워크 를 사용합니다. Nest는 이러한 일반적인 Node.js 프레임워크(Express/Fas..