반응형

분류 전체보기 92

[Next.js] create-next-app 환경에서 next.js, typescript, redux 세팅하기

먼저, create-next-app 명령어를 이용해서 기본 프로젝트를 생성합니다. --typescript 명령어를 이용하여 typescript 프로젝트로 설정했습니다. yarn create next-app --typescript nextjs-typescript-redux 그 다음은 필요한 패키지들을 설치합니다. yarn add redux redux-thunk next-redux-wrapper react-redux @type/react-redux 패키지 설치가 완료되었으면, 프로젝트 루트(root)에 redux라는 이름의 폴더를 생성합니다. 그리고 그 내부에 store.ts, types.ts 파일과 actions, reducers라는 이름의 폴더를 생성합니다. 아래 그림과 같이 생성되면 됩니다. types..

React 2021.10.15

[프론트엔드 서버] Docker란?

Docker란? 컨테이너 기반의 오픈소스 가상화 플랫폼 컨테이너 격리된 공간에서 프로세스가 동작하는 기술. 하나의 서버에 여러개의 컨테이너를 실행하면 서로 영향을 미치지 않고 독립적으로 실행 이미지 컨테이너 실행에 필요한 파일과 설정값등을 포함하고 있는 것. 이미지를 실행한 것이 컨테이너! 같은 이미지에서 여러개의 컨테이너를 생성할 수도 있다. 레이어 저장 방식 도커 이미지는 컨테이너를 실행하기 위한 모든 정보를 갖고 있기 때문에 보통 용량이 수백메가에 이름. 기존 이미지에 파일 하나를 추가했다고 모든 이미지를 교체하는 것은 너무 비효율적 이미지는 여러개의 읽기 전용 레이어로 구성되고 파일이 추가되거나 수정되면 새로운 레이어가 생성됨. 이미지에서 수정된 레이어만 다운받으면 되는 형식으로 사용. Docke..

React 2021.10.07

[프론트엔드 서버] Amazon S3 + CloudFront에 대해

Amazon S3 확장성, 데이터 가용성 및 보안과 성능을 제공하는 객체 스토리지 서비스. 특징 모든 종류의 데이터를 원하는 형식으로 저장 저장할 수 있는 데이터의 전체 볼륨과 객체 수에는 제한이 없음 Amazon S3는 간단한 Key 기반의 객체 스토리지이며, 데이터를 저장 및 검색하는데 사용할 수 있는 고유한 객체 키를 할당. Amazon S3는 간단한 표준 기반 REST 웹 서비스 인터페이스를 제공 안전함 CloudFront Amazon CloudFront는 개발자 친화적 환경에서 짧은 지연 시간과 빠른 전송 속도로 데이터, 동영상, 애플리케이션 및 API를 전 세계 고객에게 안전하게 전송하는 고속 콘텐츠 전송 네트워크(CDN) 서비스 CDN(Content Delivery Network) CDN(콘..

React 2021.10.07

[env-cmd] next.js에서 각 환경에 맞는 환경변수 설정하기

개인 프로젝트를 개발할 때는 딱히 신경쓰지 않아도 될 수도 있지만, 실무에서는 개발 환경, QA 환경, 운영 환경등 각 환경마다 서버 주소나 변수들이 다른 경우가 많습니다. 그래서 각각 환경에 맞게 변수들을 등록해두고 환경에 맞게 변수가 자동적으로 적용되도록 해야합니다. 오늘은 env-cmd 패키지를 이용하여 환경변수를 설정해보겠습니다. 먼저, env-cmd를 설치합니다. npm install env-cmd or yarn add env-cmd 설치를 했다면, 환경변수 파일을 생성합니다. 저는 아래와 같은 이름과 내용으로 두 개의 파일을 생성하겠습니다. .env.dev NEXT_PUBLIC_MODE=dev .env.prod NEXT_PUBLIC_MODE=prod 그리고 package.json 파일을 수정합..

React 2021.09.27

[Next.js] ESLint, Prettier 설정하기 (Typescript/VSCode)

ESLint란? JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구. Prettier란? 코드 포멧터(Code Formatter) Next.js 프로젝트에 ESLint/Prettier 적용하기 (VSCode) 프로젝트 생성 npx create-next-app --typescript 저는 typescript를 사용할 예정이므로 —typescript 옵션을 추가했습니다. ESLint 설치 npm i eslint --save-dev ESLint 설정하기 eslint --init 위 명령어를 터미널에 실행하면 eslint 설정이 시작됩니다. 여러가지 질문들이 나오는데, 저는 아래와 같이 설정했습니다. ❯ eslint --init ✔ How would you like to use ..

React 2021.09.13

[TypeScript] 기본 문법 정리

변수 타입 지정 let name: string = 'kim'; name = 'lee';// OK name = 100;// Error 가장 기본적인 기능으로는 변수의 타입 지정 기능이 있습니다. 위 예제에서는 name이라는 변수를 문자열(string) 타입으로 지정했습니다. 그렇기 때문에 'lee' 라는 문자열은 name 변수에 할당이 가능하고, 100은 Number 타입이기 때문에 name에 할당할 수 없습니다. 배열(Array) 타입 지정 let array: string[] = ['kim', 'lee']; 배열의 타입도 지정이 가능합니다. 위와 같이 [] 키워드를 사용하면 배열을 의미하고 그 앞에 타입을 붙이면 배열에 들어 올 수 있는 타입을 지정할 수 있습니다. 객체(Object) 타입 지정 let ..

JavaScript 2021.09.10

[Next.js] 시작하기

시스템 요구사항 Node.js 12.0 이상 MacOS, Windows 그리고 Linux 세팅 새로운 next.js 앱을 생성하기 위해서는 'create-next-app'을 사용하길 추천한다. 'create-next-app'은 프로젝트의 필요한 모든 것을 세팅해 줍니다. npx create-next-app # or yarn create next-app 만약 TypeScript 프로젝트로 시작하기 원한다면 '—typescript' 플래그를 사용하면 됩니다. npx create-next-app --typescript # or yarn create next-app --typescript 위 명령어를 이용하여 typescript를 사용하는 프로젝트를 만들어보았습니다. 프로젝트 이름은 'next-test-app'..

React 2021.09.09

[Node.js] 노드 서버에서 브라우저 화면 캡처하기(puppeteer)

안녕하세요. Jay입니다. 오늘은 서버 환경에서 브라우저 화면을 캡쳐하는 방법에 대해서 알아보도록 하겠습니다. 일반적으로 브라우저를 사용한다고 하면 당연히 클라이언트에서 브라우저 화면을 띄워서 사용해야한다고 생각합니다. 하지만, 서버 환경에서도 브라우저에 접속하는 것이 가능합니다. Headless Browser라고 해서 GUI(Graphic User Interface)가 없는 환경을 사용하면 됩니다. 화면만 표시가 되지 않을뿐 일반적인 브라우저와 동일하게 동작합니다. 오늘은 Node 환경에서 Chromium 혹은 Chrome을 제어할 수 있도록 개발된 puppeteer 라이브러리를 살펴보려고 합니다. puppeteer 라이브러리에 대한 정보는 아래 링크에서 확인 가능합니다. puppeteer/puppet..

JavaScript 2021.07.09

[Network] HTTP 상태 코드

100번대 정보를 제공하는 응답 200번대 성공적인 응답 200 OK 요청이 성공했다. 300번대 리다이렉트 400번대 클라이언트 에러 400 Bad Request 잘못된 문법으로 인하여 서버가 요청을 이해할 수 없다. 401 Unatuthorized 비인증(unauthenticated)을 의미 403 Forbidden Client는 콘텐츠에 접근할 권리가 없다. 401과 다른 점은 서버가 클라이언트가 누구인지 알고 있다. 404 Not Found 서버는 요청받은 리소스를 찾을 수 없다. 408 Request Timeout 이 응답은 요청을 한지 시간이 오래된 연결에 일부 서버가 전송. 어떨 때는 이전에 클라이언트로부터 어떠한 요청이 없었다고 하더라도 보내지기도 한다. 500번대 서버 에러 500 Int..

Network 2021.06.28
반응형