본문 바로가기

전체보기

(286)
OAuth 2의 인증 과정 OAuth 2는 특정 웹 서비스(Client)에서 구글과 같은 서비스(Resource Server, Authorization Server)의 기능을 이용할 때 사용한다. 여기서는 특정 웹 서비스를 쇼핑 웹이라하고 쇼핑 웹에서 구글의 기능을 사용한다고 가정하겠다. Client 등록쇼핑 웹(Client)에서 구글의 기능을 사용하려면 쇼핑 웹을 구글에 등록해야 한다.보통은 등록을 하면 Client ID와 Client Secret, Authrized Redirect URI를 받는다. Access 토큰 요청사용자가 쇼핑 웹에 접속하고 여기서 구글의 어떤 기능을 사용하려면URL에 client_id와 특정 기능을 나타내는 scope, redirect_uri를 넣어서 요청한다. 여기서 사용자가 구글에 로그인이 돼 있지..
Docker 시작하기 - Dockerfile을 이용한 간단한 node express 예제 설치 도커 홈페이지에서 Docker Desktop을 설치한다. 터미널에서 docker --version 명령어로 설치 확인이 가능하다. 이미지 빌드 Dockerfile을 루트에 생성하고 아래 내용을 입력한다. # 다음 이미지에서부터 시작한다. FROM node:12.18.4 # 현재 경로의 모든 파일을 복사해서 이미지의 루트에 붙여넣는다. COPY . . # 이미지를 생성하는 과정에서 실행할 명령어 (package.json의 express를 설치한다.) RUN npm install # RUN, CMD, ENTRYPOINT의 명령어(아래)를 실행할 위치 설정 WORKDIR /src # 콘테이너가 시작됐을 때 실행할 명령어 CMD ["node", "index.js"] 위 설정을 토대로 이미지를 생성하려면 다..
파이썬 리스트 메소드 append 제일 뒤에 추가 numbers = [1, 2, 3] numbers.append(4) # [1, 2, 3, 4] insert 첫 번째 인자로 받은 인덱스에 두 번째 인자의 값을 추가 numbers = [1, 2, 3] numbers.insert(1, 4) # [1, 4, 2, 3] remove 인자로 받은 값을 제거 numbers = [1, 2, 3] numbers.remove(2) # [1, 3] clear 모든 값을 제거 numbers = [1, 2, 3] numbers.clear() # [] pop 제일 뒤의 값을 삭제 numbers = [1, 2, 3] numbers.pop() # [1, 2] index 해당 값의 인덱스 numbers = ['a', 'b', 'c'] print(numb..
파이썬 기본 변수 age = 10 # int rate = 9.9 # float subject = '수학' # str is_passed = True # bool input 메소드 터미널에서 입력을 받을 수 있는 빌트인 메소드 value = input('값을 입력하세요. ') print(value + '이 입력됐습니다.') int, float, bool 메소드 타입을 바꿔주는 빌트인 메소드 int('1') float('1.1') str(1) bool('1') type 메소드 타입을 알려주는 빌트인 메소드 print(type('글자')) # String string 조회 alphabets = 'abcde' print(alphabets[-1]) # 'e' print(alphabets[0:3]) # 'abc' print(al..
Create React App에서 SVG 파일을 간단히 불러오는 방법 아래와 같이 불러오면 컴포넌트처럼 활용할 수 있다. import React from 'react'; import { ReactComponent as Arrow } from '../assets/icons/arrow.svg'; const App = () => { return ( ); }; arrow.svg를 ReactComponent로 불러오고 이름을 Arrow로 바꿔서 fill이나 width 같은 속성을 넣을 수도 있다.
Fetch 기본 사용 방법 fetch를 이용하면 서버에서 데이터를 가져오거나 추가하는 등의 요청을 할 수 있다. fetch는 새로 생긴 메소드이고 이전에는 XMLHttpRequest 객체를 이용해서 데이터를 주고 받았다. 대부분 fetch를 쓰겠지만 다음의 경우에는 XMLHttpRequest을 이용해야 한다. 1. XMLHttpRequest가 사용된 예전 코드를 유지보수 할 때 2. 폴리필 없이 구형 브라우저에서도 돌아가도록 해야 할 때 3. fetch에 없는 기능을 사용할 때 GET 요청 app.get('/user', (req, res) => { res.status(200).send({ id: 1, name: 'john' }); }); NodeJS Express의 서버 코드가 위와 같다면 아래 getData 메소드를 클라이언트에..
Netlify를 이용해서 NextJS 앱을 배포할 때 발생하는 문제 해결 방법 npx create-next-app 명령어를 입력하면 손쉽게 NextJS가 설정된 프로젝트를 만들 수 있다. 이를 Netlify에 배포하려다 보면 몇 가지 문제가 발생한다. 1. 컴포넌트 인식 문제 Netlify에서 배포를 위한 빌드 중 터미널에 다음 에러가 나타났다. ModuleNotFoundError: Module not found: Error: Can't resolve '../components/header' in '/opt/build/repo/pages' header라는 컴포넌트를 찾을 수 없다는 문제다. pages 폴더에 위치한 컴포넌트와 components 폴더에 위치한 컴포넌트 파일의 이름에 차이를 둬야 한다. 아래에 따르면 Netlify에서는 우분투를 사용하기 때문에 파일 이름의 시작이 대..
REST API에 대해서 의미 API(Application Programming Interface)는 서로 다른 두 프로그램이 소통할 수 있게 해준다. 웹에서는 서버와 클라이언트가 데이터를 주고 받을 때 사용된다. REST API(Representational State Transfer)는 API의 한 방식으로 간단히 말하자면 URL을 통해서 데이터를 주고 받는다고 할 수 있다. 클라이언트에서 HTTP를 이용해 요청(request)을 보내면 서버에서 이에 따른 응답(response)을 보내주는 식으로 소통한다. 요청 REST API로 서버에 요청을 보내기 위해서는 다음의 4가지 구성요소가 필요하다. URL (endpoint) URL은 요청할 데이터의 위치를 가리킨다. URL은 root-endpoint와 path로 나뉘는데 roo..