profile
Front-End 개발자가 되기 위한 과정을 기록하고 있습니다.
post-thumbnail

[GraphQL] graphQL

Data를 Graph로 표현하는 Language이자 Runtime이다. QL의 Query Language에서 질의어라고 생각할 수 있다. 실제로 프론트엔드에서는 API 데이터를 query하는 언어가 맞다. 하지만 백엔드에서는 Runtime 계층의 역할을 하기도 한다.

2022년 1월 19일
·
0개의 댓글
·

[React] Test (Jest, React Test Library)

React Test란? > https://ko.reactjs.org/docs/testing.html 리액트의 컴포넌트를 테스트할 수 있다. 테스트 할 수 있는 컴포넌트는 다음과 같다. 컴포넌트 트리 렌더링 : 간략화된 테스팅 환경 및 출력값이 확실한 경우. 완성된 앱

2022년 1월 8일
·
0개의 댓글
·

TaskAgile 애자일

출처: 스프링5와 Vue.js 2로 시작하는 모던 웹 애플리케이션 개발애자일 방식으로 요구사항 관리하기효율적인 사용자 스토리 작성하기와이어프레임 작성하기애자일 이해하기어떤 프레임워크를 쓸 것인가?순차적으로 소프트웨어 개발 프로세스를 진행하는 것. 따라서 안정적으로 개발

2022년 1월 3일
·
0개의 댓글
·

[React] React.FC, JSX.Element, ReactNode

React's Component Type Class Component의 return type은 ReactNode이다. Functional Component의 return type은 ReactElement이다. ReactNode ReactNode는 React의 jsx문법

2022년 1월 1일
·
0개의 댓글
·

[Nest] Jwt와 Passport

$ npm install --save @nestjs/passport passport passport-local$ npm install --save-dev @types/passport-localPassport는 Node.js의 미들웨어로 인증을 구현하게 할 수 있는 라이

2021년 12월 29일
·
0개의 댓글
·

[알고리즘] 문제풀기

보수를 구하는 문제이다.풀이로는 Input을 2진수로 변환하고 1bit씩 비교하는 것과 Input의 자리수만큼 1로 채우고 빼는 방법이 있다. 느낀 점: 가볍게 넘긴 비트연산자에 대해서 공부를 다시 해야겠다. 주어진 배열에서 두 수를 합쳐 target 변수와 같게끔 만

2021년 12월 27일
·
0개의 댓글
·
post-thumbnail

[NestJS] Nest 정리

NestJS의 공식문서를 보며 정리한 글입니다.https://docs.nestjs.com/IntroductionNestJS는 Node.js 서버 프레임워크 위에서 효율적으로 확장 가능한 서버 사이드 어플리케이션이라고 한다! 개발문서를 더 읽어보면 React와

2021년 12월 26일
·
0개의 댓글
·

[DB] SQL과 TypeORM

혼자 공부하는 SQL을 보며 느낀 점을 정리하는 문서입니다.데이터베이스를 구축하고 관리하기 위해 사용되는 언어이다. 대부분의 DBMS가 표준 SQL을 준수한다. 데이터 정의어. 데이터베이스를 생성, 수정, 삭제를 하는 언어. 데이터의 골격을 결정한다데이터 제어어. 데이

2021년 12월 22일
·
0개의 댓글
·

Next에 Redux를 적용하려면

yarn add next-redux-wrapper @reduxjs/toolkit react-redux reduxyarn add @types/react-redux리액트는 1개의 store를 갖지만, next는 요청할때마다 store를 생성한다.그리고 next의 getIn

2021년 12월 18일
·
0개의 댓글
·

[EsLint] lint 사용법

eslint는 문법검사기이다. 코드에 규칙을 적용하여 모두가 읽기 편한 코드로 바꿔줄 수 있는 도구이다. yarn global add eslint eslint는 한 프로젝트에서만 사용할 것이 아니라 프로젝트를 만들 때마다 적용할 것이기 때문에 global로 설치해준다.

2021년 9월 6일
·
0개의 댓글
·

[Recoil] 리코일 사용

recoil은 react의 상태관리 라이브러리이다. react는 자체로 상태관리를 할 수 있다. 하지만 컴포넌트의 상태가 공통된 상위 요소까지 끌어올림으로 공유하면서 대규모의 트리가 렌더링될 수 있기 때문에 효과적이지 않다. Context를 사용해도 단일 값만 저장할수

2021년 7월 27일
·
0개의 댓글
·

[React] Hooks Custom하기

What is Hooks? React간 재사용 가능한 로직을 붙이는 방법을 제공하지 않기 때문에 Hook을 통해 계층간의 변화없이 상태 관련 로직을 만들어 재사용할 수 있게 도와줍니다. React에서는 class component를 사용하기 위해 this를 다룰 줄

2021년 7월 26일
·
0개의 댓글
·

[JS] API 만들기

Application Programming Interface의 약자이다. 우리가 프로그래밍을 할 때 지켜야 할 규칙을 가진 모듈이라고 이해하면 간단하다.API는 대부분 RESTFul하게 작성이 된다. 우리의 프로그램이 무언가를 요청하거나 변화(CRUD)를 요청할 때,

2021년 7월 26일
·
0개의 댓글
·

[redux] redux toolkit를 사용하면서..

에어비앤비 클론코딩을 하면서 유저 정보를 리덕스 스토어에 저장하기 위해서 리덕스 설정을 알아보게 되었다. 모듈 다운로드

2021년 7월 20일
·
0개의 댓글
·
post-thumbnail

[js] bcryptjs 사용과 jwt

npm 패키지 중 하나로 비밀번호 암호화 라이브러리이다. yarn add bcryptjsbcryptjs는 hashSync함수를 통해 비밀번호를 해싱한다. var hash = bcrypt.hashSync("문자", salt)여기서 salt는 암호에 특별한 값을 추가하여

2021년 7월 20일
·
0개의 댓글
·

[TS] 타입가드

다음과 같이 두 개의 타입이 있을 때,만약 다음과 같은 flyOrSwim과 같은 함수를 구현할 때, 매개변수 o는 Bird이거나 Fish이므로 코드 작성이 모호해집니다.instanceof 연산자는 객체 instanceof 타입 // boolean형태의 타입의 값 반환처

2021년 7월 12일
·
0개의 댓글
·

[TS] 제네릭 방식 타입

배열을 다루는 함수를 작성할 때 number\[] 와 같이 타입이 고정된 함수를 만들기보다는 T\[]형태로 배열의 아이템을 한꺼번에 표현하는 것이 편리하다. 타입을 T와 같은 일종의 변수(타입 변수)로 취급하는 것을 제네릭(generics) 타입이라고 한다.다음과 같이

2021년 7월 6일
·
0개의 댓글
·

[JS] for문

다른 언어와 같이 for(초기문; 조건문; 증감문) {}for..in문은 객체를 대상으로 반복한다. 배열도 객체이므로 가능하다.for..in문은 배열의 인덱스값을 순회한다. 객체를 대입할 때에는 속성을 대상으로 순회한다.for..of문은 배열의 아이템 값을 대상으로 순

2021년 7월 6일
·
0개의 댓글
·

[React] Redux

Redux는 애플리케이션 상태를 관리하기위한 오픈 소스 JavaScript 라이브러리이다.Context API처럼 전역으로 상태(state)를 관리하는 것을 수월하게 해준다.충분히 Context API로도 전역 상태를 관리할 수 있지만, Redux는 saga라는 미들웨

2021년 6월 28일
·
0개의 댓글
·

[Data Structure] 트리

트리란?(Tree) 트리는 자식 노드를 지닌 노드들로 구성된다. 첫 번째이자 가장 상위 노드를 루트 노드(root node)라고 부른다. 일반적인 트리는 자식을 얼마든지 가질 수 있다. 이진트리(Binary Tree) 이진 트리는 자식 노드가 왼쪽, 오른쪽 두 개뿐인

2021년 6월 28일
·
0개의 댓글
·