programming study/Front-end (28) 썸네일형 리스트형 Node.js와 NPM 본 내용은 인프런 캡틴판교님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. Node.js JavaScript 실행 환경 2. NPM Node Package Manager JavaScript 프로그래밍 언어를 위한 패키지 관리자 NPM 시작하기 버전 확인 node - v npm - v 프로젝트 생성 프로젝트에 대한 여러 설정을 입력 package.json 생성 -y 옵션 입력시, 설정 입력을 생략 가능 npm init -y 패키지 설치 node_modules 아래에 설치 됨 packages.json의 dependencies에 설치한 패키지가 기록 npm install [라이브러리 명] 3. NPM의 장점 라이브러리 관리하기 용이 package.json에 정리되어 있으므로 사용된 라이브.. NPM 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. Npm 명령어 라이브러리 지역 설치 npm install [라이브러리명] node_modules 디렉토리 아래에 설치 라이브러리와 관련된 라이브러리(의존적인)를 자동 설치 --save-prod 옵션과 같음(기본값) 라이브러리 삭제 npm uninstall [라이브러리명] 라이브러리와 해당 라이브러리와 관련된 의존적인 라이브러리들을 삭제 라이브러리 전역 설치 npm install [라이브러리명] --global 라이브러리를 전역 설치 node_modules가 아닌 시스템에 설치가 된다. mac 기준 경로: /usr/local/lib/node_modules window 기준 경로: %USERPROFILE.. Node.js와 NPM 본 내용은 인프런 장기효(캡틴판교)님의 프론트엔드 개발자를 위한 웹팩 강의를 토대로 작성하였습니다. 1. Node.js와 NPM 소개 Node.js 브라우저 밖에서도 JavaScript를 실행할 수 있는 환경 NPM Node Package Manager JavaScript 프로그래밍 언어를 위한 패키지 관리자 라이브러리 관리 도구 모든 라이브러리를 관리하고 있음 2. NPM 시작하기 package.json 초기화 npm init 패키지 이름, 버전 등을 입력하여 package.json 생성 -y: 기본값으로 package.json을 바로 생성하는 옵션 패키지 설치 npm install [패키지명] node_modules 디렉토리 아래에 패키지가 설치(지역 설치) --save-prod옵션과 같은 효과 pa.. GraphQL 클라이언트 만들어보기 본 내용은 인프런 얄팍한코딩님의 얄팍한 GraphQL과 Apollo 강의를 토대로 작성하였습니다. 1. React와 Apollo Client React와 GraphQL 서버와의 연결 방법 아폴로 클라이언트 적용 npm install @apollo/client graphql ApolloClient 객체 만들기 client: GraphQL 서버로와 정보를 주고받을 ApolloClient 객체 uri: GraphQL 서버의 주소 cache: InMemoryCache를 통한 캐시 관리 const client = new ApolloClient({ uri: 'http://localhost:4000', cache: new InMemoryCache() }); React에 적용하기 root에서 ApolloProvider.. GraphQL 서버 깊이 파보기 본 내용은 인프런 얄팍한코딩님의 얄팍한 GraphQL과 Apollo 강의를 토대로 작성하였습니다. 1. 서버 구성요소 모듈화 다양한 데이터와 기능을 다루기 위해 모듈화 apollo-server 모듈화 ApolloServer의 생성자 인자 typeDefs: 단일 변수 또는 배열로 지정 가능 resolvers: 단일 Object 또는 Merge된 배열로 가능 파일 구조 . ├── node_modules ├── data-in-csv │ ├── equipments.csv │ ├── people.csv │ ├── roles.csv │ ├── softwares.csv │ ├── supplies.csv │ └── teams.csv ├── database.js ├── dbWorks.js ├── index.js ├── .. GraphQL 서버 만들어보기 본 내용은 인프런 얄팍한코딩님의 얄팍한 GraphQL과 Apollo 강의를 토대로 작성하였습니다. 1. Apollo 서버 구축하기 데이터베이스 모듈 삽입 csv: 몇가지 필드를 쉼표로 구분한 텍스트 데이터 VSC Edit csv 확장으로 편하게 볼 수 있음 목 데이터베이스(csv)를 require로 불러올 수 있다. const database = require('./database'); Apollo 서버 설치 필요 모듈 설치 npm i graphql apollo-server Apollo 서버 생성 및 실행 ApolloServer typeDef와 resolver를 인자로 받아 서버 생성 typeDef GraphQL 명세에서 사용될 데이터, 요청의 타입 지정 gql(template literal tag)로 .. GraphQL, Apollo 본 내용은 인프런 얄팍한코딩님의 얄팍한 GraphQL과 Apollo 강의를 토대로 작성하였습니다. 1. REST API란? 소프트웨어간 정보를 주고받는 방식 GraphQL 이전부터 사용 용도에 따라 적합한 것 사용하기 IT 서비스 대다수는 여러 소프트웨어 주체간의 소통으로 이루어짐 소프웨어 간의 데이터를 주고받는 형식이 필요 URI형식(어떤 정보를) X 요청 방식(어떻게 할 것인가) 요청 형식 용도 GET 정보 받아오기 POST 정보 입력하기 PUT/PATCH 정보 수정하기 DELETE 정보 삭제하기 REST API의 한계 Overfetching 원하지 않는 데이터까지 받아온다. 낭비되는 데이터의 양이 증가 네트워크의 비용과 시간이 증가 Underfetching 특정 정보에 의존적인 정보에 접근하기 위해.. Webpack - 최적화 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 최적화 코드가 많아지면 번들링된 결과물이 메가바이트 단위로 커지게 되어, 브라우저 성능에 영향을 준다. 웹팩으로 번들 결과를 압축하거나 분리하여 최적화를 한다. 2. mode 웹팩의 mode 값을 설정 development mode development는 디버깅 편의를 위해 두 개의 플러그인을 사용 NamedChunksPlugin NamedModulesPlugin DefinePlugin을 사용시, process.env.NODE_ENV 값이 development로 설정되어 전역 변수로 주입됨 production mode mode를 production으로 설정하면.. 이전 1 2 3 4 다음