잉여로운 글쓰기
GraphQL은 서버 등에서 API를 제공하기 위한 쿼리 언어입니다. RESTful API를 대체할 수 있는 방법이며, RESTful API와의 차이점으로 GET과 POST 방식만 사용하고 PATCH, DELETE 방식은 사용하지 않는다는 점 등이 있습니다. 자세한 내용은 https://graphql-kr.github.io을 참고… 여기선 GraphQL을 사용하여 간단하게 CRUD(Create, Read, Update, Delete) 하는 방법을 알아보겠습니다. 테스트 환경 구축 node 프로젝트에 graphql, express, express-graphql 라이브러리를 설치합니다. 이는 […]
이 글은 Code with Mosh의 [Mastering React](https://codewithmosh.com/courses/enrolled/357787 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… React는 백엔드에 서비스 요청 시 개발자가 선호하는 라이브러리를 선택하여 사용하면 됩니다. 여기서는 Axios를 사용하여 백엔드에서 데이터를 가져오는 방법을 알아보겠습니다. JSON Placeholder JSON Placeholder는 Fake REST API를 제공하는 사이트입니다. 포스트, 이미지, 유저정보 등 다양한 가짜 API를 제공하여 백엔드 테스트용으로 […]
이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… Forms 여기서는 Bootstrap Forms를 사용하여 Username과 Password를 입력받아 로그인하는 컴포넌트를 만듭니다. 그리고 Joi를 사용하여 입력값을 검증하는 방법을 알아봅니다. Bootstrap을 이용한 기본적인 로그인 컴포넌트 만들기 React 프로젝트가 위치한 경로에서 npm i bootstrap 명령어로 Bootstrap 패키지를 설치한 후 index.js 파일에 […]
이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… 라우팅(Routing) 라우팅(Routing)이란 경로(URL)에 따라 페이지의 이동을 설정하는 것입니다. 여기서 알아볼 내용은 다음과 같습니다. 페이지 별 URL 설정 URL로부터 정보를 추출하기 위한 쿼리 스트링(Query String) 잘못된 URL로 접속 시 404 Not Found 페이지를 띄우기 위한 리디렉션(Redirection) 중첩 라우팅(Nested Routing) […]
이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… 리알못 React: 3. 페이지 매기기(Pagination) 글에 이어 영화 정보를 장르에 따라 필터링하여 보여주거나 특정 컬럼(Column) 기준으로 정렬하는 방법을 한번 알아봅니다. 최대한 간단하게 필터링과 정렬 코드를 설명해보려 했지만 너무 복잡해졌습니다… 사전 준비 Bootstrap 설치 React 프로젝트 경로에서 npm i […]
이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… 사전 준비 Bootstrap 설치 npm i bootstrap@4.1.1 명령어로 React 프로젝트에 Bootstrap을 설치한 후 index.js 파일에 import 'bootstrap/dist/css/bootstrap.css';를 추가해줍니다. lodash 설치 lodash는 자바스크립트 유틸리티 라이브러리입니다. 여기서는 배열을 편집하기 위해 사용합니다. npm i lodash@4.17.10 명령어로 React 프로젝트에 lodash를 설치한 후 […]
이 글은 Code with Mosh의 Mastering React 과정과 리액트를 다루는 기술(김민준 저) 책을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… Props Props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달하기 위해 사용됩니다. 객체 데이터를 표시하거나 변경 사항 등을 알리기 위해 사용되며 읽기전용이므로 값을 수정할 수 없습니다. 다른 컴포넌트에 값 전달 Props를 이용하여 전달 아래 예제는 […]
이 글은 Code with Mosh의 Mastering React 과정과 리액트를 다루는 기술(김민준 저) 책을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… 클래스형 컴포넌트 vs 함수형 컴포넌트 클래스형 컴포넌트는 말 그대로 클래스 형태로 구성된 컴포넌트를 말합니다. 클래스형 컴포넌트는 render() 함수가 꼭 있어야 하며, 이 함수는 JSX를 반환해야 합니다. 함수형 컴포넌트도 말 그대로… 함수 형태로 구성된 […]
이 글은 Code with Mosh의 Mastering React 과정을 공부하며 정리한 글입니다. 리알못이라 이상하거나 틀린 내용이 있을 것입니다… 개발환경 구축 NPM 설치 주소: https://nodejs.org create-react-app 다운로드 npm을 사용하여 create-react-app 패키지를 다운받습니다. 터미널에서 실행할 명령어는 npm i -g create-react-app 입니다. permission 오류가 발생하면 sudo npm i -g create-react-app 명령어를 실행합니다. 사용한 파라미터는 다음과 같습니다. i: install -g: […]
이 글은 Node.js 교과서(조현영 저) 라는 책으로 공부한 내용을 정리한 글입니다. 보안 쪽은 좀 더 보완이 필요할 듯 싶습니다… JWT(JSON Web Token) JWT는 JSON 형식의 데이터를 저장하는 토큰입니다. 헤더.페이로드.시그니처 세 부분으로 구성되어 있습니다. 헤더: 토큰 종류, 해시 알고리즘 정보 페이로드: 토큰 내용물이 인코딩된 부분. 내용을 볼 수 있으므로 민감 정보는 넣지 않아야 함. 시그니처: 토큰 […]
REST(REpresentational State Transfer) API 서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법 REST API를 사용한 주소 체계를 RESTful하다고 표현함 주소와 HTTP 요청 메서드(GET, POST, PUT, PATCH, DELETE) 사용 GET: 서버 자원 가져오기 POST: 서버에 자원 등록 PUT: 서버 자원 치환 PATCH: 서버 자원 일부 치환 DELETE: 서버 자원 삭제 예: GET 메서드의 /user 주소로 요청을 […]
이 글은 Node.js 교과서(조현영 저) 라는 책으로 공부한 내용을 정리한 글입니다. NoSQL 고정 테이블이 없음 테이블에 상응하는 컬렉션이 존재하나 컬럼을 따로 정의하지 않음 컬렉션에는 어떠한 데이터도 다 들어갈 수 있음. 트랜젝션 미지원 여러 쿼리가 모두 정상적으로 수행되거나 아예 하나도 수행되지 않음을 보장하지 않음 MongoDB 4 버전부터 트랜젝션 지원 사용하는 이유: 확장성 및 가용성 때문 데이터를 […]
이 글은 Node.js 교과서(조현영 저) 라는 책으로 공부한 내용을 정리한 글입니다. 이 책에선 MySQL을 설명하지만 개인적으로 MariaDB 사용법에 대해 알아보고자 합니다. MariaDB 설치 및 설정(MacOS) Homebrew 설치 패키지 관리자인 Homebrew 설치 필요 설치 명령어: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 설치 후 Homebrew에서 관리하는 패키지의 최신버전이 있는지 확인: brew update MariaDB 설치 설치할 수 있는 MariaDB […]
이 글은 Node.js 교과서(조현영 저) 라는 책으로 공부한 내용을 정리한 글입니다. Express 서버 node.js로 서버 구축을 위한 프레임워크 Express-generator Express를 손쉽게 구축할 수 있도록 도와주는 패키지 package.json 파일 자동 생성 및 서버 구축에 필요한 기본 폴더 구조까지 자동으로 잡아줌 공식 사이트: https://expressjs.com 설치 설치 명령어: npm i -g express-generator Express-generator는 콘솔 명령어로 사용해야 하므로 npm […]
이 글은 Node.js 교과서(조현영 저) 라는 책으로 공부한 내용을 정리한 글입니다. package.json으로 패키지 관리 package.json 파일은 설치한 패키지의 버전을 관리하는 파일 프로젝트를 시작하기 전에 package.json 파일을 만들고 시작하는 것이 좋음 package.json 파일을 만드는 명령어: npm init 패키지 정보 package name: 패키지 이름 version: 패키지 버전 entry point: 자바스크립트 실행 파일 진입점 test command: 테스트 명령어 […]