기타 (+ Legacy)/Legacy 검색 결과

해당 글 47건

[Nest] NestJS GraphQL 연결하기

[Nest] NestJS GraphQL 연결하기 아래 모든 작업의 결과는 #2 GraphQL 연결 (에러 있음)에서 확인하실 수 있습니다. 못 따라 오신 경우 위 commit을 확인하시면 됩니다. NestJS GraphQL 연결 GraphQL 관련 package를 설치해주어야 합니다. 명령어 : npm i @nestjs/graphql @nestjs/apollo @apollo/server graphql 명령어 : yarn add @nestjs/graphql @nestjs/apollo @apollo/server graphql 모든 설치가 끝나면 아래 에러가 발생합니다. Error: Query root type must be provided. 다음 게시글에서는 위 에러 메시지를 해결해보겠습니다. ◆ 정리 및 ..
기타 (+ Legacy)/Legacy 2023. 3. 29. 19:39

[Nest] NestJS 프로젝트 생성하기

[Nest] NestJS 프로젝트 생성하기 아래 모든 작업의 결과는 #1 프로젝트 정리에서 확인하실 수 있습니다. 못 따라 오신 경우 위 commit을 확인하시면 됩니다. NestJS 프로젝트 생성하기 NestJS 프로젝트 생성하는 방법은 간단합니다. 우선 npm을 이용하여 nestjs에서 사용할 cli를 설치해줍니다. 명령어 : npm i -g @nestjs/cli 그 다음 프로젝트 이름을 정한 후 생성해주시면 됩니다. 저는 nest-graphql-mongodb 로 정했습니다. 명령어 : nest new nest-graphql-mongodb 생성된 프로젝트를 실행하면 아래와 같은 폴더/파일 구조를 확인할 수 있습니다. 저 같은 경우 test 폴더와 src 폴더 아래 있는 app.controller.sp..
기타 (+ Legacy)/Legacy 2023. 3. 24. 07:03

[Nest] NestJS + GraphQL + MongoDB 구현하기

[Nest] NestJS + GraphQL + MongoDB 구현하기 NestJS를 공부하려고 검색을 해보면 국내외 할 것 없이 NestJS + TypeORM 정보가 많이 있습니다. 그러니 필자는 Rest API가 아닌 GraphQL을 사용하고 있기 때문에 참고할 만한 자료가 많이 없었습니다. 따라서 혹시나 NestJS + GraphQL + MongoDB 로 작업하시는 분이 있다면 약간의 도움을 드리고자 작성하였습니다. 물론 저도 입문자 수준이기 때문에 틀린 내용, 부족한 내용이 많을 것 같으니 참고만 하길 바랍니다. 그리고 서비스, 모듈, 리졸버, 엔티티, 데코레이터, dto 등 어떠한 내용인지 설명은 하지 않습니다. 해당 부분은 다른 게시글이나 공식 문서를 보고 이해하시는 것을 추천 드립니다. 해당 ..
기타 (+ Legacy)/Legacy 2023. 3. 23. 18:55

[React] 키보드 이벤트 처리

[React] 키보드 이벤트 처리 React에서 키보드 이벤트 처리하는 방법을 알아보도록 하겠습니다. (JavaScript도 방법은 동일합니다.) input element를 사용하여 키보드 이벤트 처리하는 방법을 알아보도록 하겠습니다. 이번 게시글은 제가 봐도 정말 못 적은 것 같습니다. 간단정리와 코드만 작성을 보시는 것을 추천 드립니다. 급하신 분들은 제일 밑에 코드로 정리해두었으니 복붙해서 사용하시면 됩니다. 키보드 이벤트 처리하기 웹 개발을 하다보면 키보드 이벤트 처리해야하는 경우가 있습니다. 대표적으로 사용자가 Enter를 입력했을 때 검색이 자동으로 되는 기능이 있습니다. 이러한 기능을 개발할 때 사용자가 Enter를 입력하였는 지 알아야 합니다. 이때 사용하는 것이 키보드 이벤트 처리입니다...
기타 (+ Legacy)/Legacy 2023. 2. 9. 18:34

[React] react-hook-form yup으로 validation 처리하기

[React] react-hook-form yup으로 validation 처리하기 이전 게시글에서 react-hook-form을 사용하면 얼마나 간단하게 form 처리를 할 수 있는지 알아보았습니다. 그 과정에서 에러 핸들링에 대해서도 간단하게 처리할 수 있는 것을 확인하였습니다. 그래도 불편한 점이 있습니다. ; 위 코드를 확인해보면 코드 중간에 에러 처리를 해주어야 한다는 것입니다. 물론 최상단에 변수로 따로 빼서 처리하면 되지만 불편합니다. 이러한 불편함을 해결해주고 더 간단하게 에러 핸들링을 할 수 있도록 도와주는 yup 라이브러리가 있습니다. 이번 게시글에서는 yup을 통해 이전 게시글에서 했던 에러 핸들링을 더 깔끔하게 해보겠습니다. yup 설치하기 yup을 사용하기 위해 필요한 설치 명령어입..
기타 (+ Legacy)/Legacy 2022. 9. 23. 19:06

[React] useEffect 실습

[React] useEffect 실습 useEffect 실습 이번 게시글에서는 useEffect 실습을 해보도록 하겠습니다. - 윈도우 창 resize 이벤트를 알 수 있는 방법 - 1씩 증가하는 timer 만들기 (1) - 1씩 증가하는 timer 만들기 (2) - 화면에 보여지지는 않음 위 3개의 실습을 해보도록 하겠습니다. 전체 코드 보러 가기 : 링크 ◆ resize event 코드 보러가기 : 링크 useEffect에서 윈도우 resize를 등록하고 해지하는 것을 해보도록 하겠습니다. 그리고 윈도우 width 크기에 따라 컴포넌트의 배경 색을 변경하는 것을 해보도록 하겠습니다. 코드는 아래와 같습니다. 우선 코드 설명부터 간단하게 하겠습니다. useEffect에서 마운트 시 resize 이벤트를..
기타 (+ Legacy)/Legacy 2022. 6. 17. 04:10

[React] useEffect 개념

[React] useEffect 개념 useEffect 개념 이번 게시글에서는 새로운 hook useEffect에 대해 알아보겠습니다. useEffect는 기본 hook으로 react의 life cycle을 확인할 수 있습니다. 해당 hooks은 잘 사용하면 좋지만 그렇지 않은 경우 버그를 유발하는 hook이 될 확률이 높습니다. 이번 게시글에서 한번 알아보겠습니다. 전체 코드 보러 가기 : 링크 ◆ useEffect - React life cycle react에서는 마운트, 언마운트 개념이 있습니다. 간단하게 설명하면 아래와 같습니다. 마운트 : 컴포넌트가 생길 때 언마운트 : 컴포넌트가 사라질 때 라고 생각하시면 편합니다. 그럼 useEffect로 마운트, 언마운트를 더 자세히 알아보겠습니다. 아래 ..
기타 (+ Legacy)/Legacy 2022. 6. 15. 05:34

[React] useRef 개념 및 실습

[React] useRef 개념 및 실습 useRef 개념 및 실습 (+ 작성하다 보니 전부 존댓말로 작성하여 그냥 앞으로 존댓말로 작성하겠습니다.) 이번 게시글에서는 새로운 hook useRef에 대해 알아보겠습니다. useRef의 사용 방법과 useState의 차이점에 대해 알아보겠습니다. 전체 코드 보러 가기 : 링크 ◆ DOM 접근 전체 코드 보러 가기 : 링크 useRef는 DOM에 접근하고 싶을 때 많이 사용합니다. JavaScript에서 document.querySelector() 와 같은 함수를 대신 사용한다고 생각하시면 됩니다. 그럼 어떻게 DOM에 접근할 수 있을까요? DOM에 접근하는 방법은 아주 간단합니다. useRef 변수를 선언한 후 DOM에 ref로 연결만 해주면 됩니다. 아래..
기타 (+ Legacy)/Legacy 2022. 6. 13. 05:22

[React] useState hook - 동적 테이블 구현

[React] useState hook - 동적 테이블 구현 useState hook - 동적 테이블 구현 이번 게시글에서는 state를 이용하여 간단한 동적 테이블을 구현해보자 이름과 나이만 있는 직원 리스트를 구현해보자. 실습 코드가 필요한 경우 핵심 코드만 작성할 것이다. 전체 코드는 링크해둔 url에서 확인할 수 있다. 최종 코드 보러가기 : 링크. ◆ 동적 테이블 구현하기 구현할 동적 테이블 기능은 아래와 같다. 항목 : 이름, 나이 항목 추가 항목 삭제 항목 내용 변경 그럼 위 기능을 가진 state는 어떤 구조일까? 를 생각해보아야 한다. 테이블 데이터이니 배열 형태의 구조를 가지고 있을 것이다. 또한 이름과 나이를 가지고 있으니 최종 모습은 아래와 같을 것이다. - 초기 값은 빈 배열 - ..
기타 (+ Legacy)/Legacy 2022. 6. 11. 05:14

[React] useState hook 실습

[React] useState hook 실습 useState hook 실습 내용 저번 게시글에서 확인한 useState를 실습해보려고 한다. 실습 내용은 아래와 같다. 1. state 정상 변경 - 렌더링 확인 2. state 비정상 변경 - 렌더링 확인 3. object type state 변경 - 렌더링 확인 실습 코드가 필요한 경우 핵심 코드만 작성할 것이다. 전체 코드는 링크해둔 url에서 확인할 수 있다. ◆ state 정상 변경 (setState) 전체 코드 보러가기 state 값을 변경할 때는 setState를 이용해야 하는 것을 배웠다. 예를들면 아래와 같이 변경해야한다. 이렇게 setState를 이용해 state를 변경한 결과는 아래와 같다. count 증가 버튼을 클릭하면 count가 ..
기타 (+ Legacy)/Legacy 2022. 6. 9. 05:08