본문 바로가기

분류 전체보기370

OAuth 기초 공부하기

User - My Service - Big Service(google, facebook, kakao, naver) 사용자들은 자신의 흔적(id, pw)이 어딘가에 저장되어 있는 것을 좋아하지 않습니다. 사용자가 서비스의 사용을 주저하게 됩니다. 하지만, 서비스들은 개인화된 서비스를 제공하기 위해서 사용자의 인증이 필요합니다. 그렇지만, 서비스들도 사용자의 정보를 저장하고 있으면서 관리하기를 원하지 않습니다. 또, Big Service에서도 자신의 유저 정보를 My Service들이 저장하는 것을 원하지 않습니다. 이런 상황 때문에 OAuth가 사용됩니다. OAuth id와 password 대신에 accessToken을 Big Service는 My Service에게 발급합니다. 이게 OAuth입니다. OA.. 2021. 6. 5.

[리액트 세팅-1]Typescript + React + Express.js 프레임워크 + Prettiers 환경 세팅하기

📝 목차 1. Typescript + React 세팅⚙ 2. babel 세팅 및 Express.js 프레임워크 세팅⚙ 📦 운영환경 고려 배포를 생각하면, 프로젝트를 따로 만드는 게 좋을 것 같습니다. 서버와 웹 별도로 repo를 생성해서 서버와 웹 코드를 분리해서 버전을 관리하는 게 좋을 것 같습니다. 이렇게 나눠서 코드를 관리하면 좋은 점이 배포할 때, 서버와 웹을 별도로 배포를 할 수 있기 때문입니다. 로컬에는 하나의 폴더에 두 개의 repo를 넣어서 사용하기로 합니다. 프로젝트 ㄴ front-end ㄴ back-end ⚙ Typescript + React 세팅 로컬에 프로젝트 생성할 때는 아래 명령어를 입력합니다. npx create-react-app --template typescript 프로젝트.. 2021. 6. 2.

[git] 로컬 프로젝트 github에 올리기

터미널에 아래 명령어를 순차적으로 입력합니다. 당연히 경로는 자신에 피시에 만들어 놓은 프로젝트의 홈 경로에서 아래 명령어를 입력해야 합니다. $ git remote add 깃허브 레포지토리 url $ git add . $ git commit -m "메시지" $ git push origin master git add 취소하기 git reset git reset 파일명 2021. 5. 30.

[webpack] 간단하게 알아보는 웹팩 데브 서버 설정 및 사용방법

webpack-dev-server를 켜 놓으면 코드의 변경사항을 감지해서 브라우저에 변경된 점을 자동으로 반영해 줍니다. webpack-dev-server를 사용해서 개발하면, 매번 빌드하는 명령어를 입력하고, 빌드를 기다릴 필요가 없습니다. 배포를 할 경우에만, 빌드를 해서 결과물을 받아서 서버에 넣으면 됩니다. 개발을 편하게 하려고 사용하는게 webpack-dev-server입니다. webpack-dev-server의 원리는 컴퓨터 메모리 상으로만 빌드한 결과물을 만들어서 브라우저에 웹팩 빌드 결과물을 전달합니다. 1. 설치 npm i -D webpack-dev-server 설치가 완료되면, package.json에 devDependencies 객체에 webpack-dev-server가 추가되었습니다.. 2021. 5. 30.

[webpack]실전편-간단하게 따라해보는 webpack 초기 세팅 방법

안녕하세요. 이번 글은 webpack을 처음부터 세팅해서 브라우저에 아래 웹을 띄워볼게요. 목차 준비물 1. 프로젝트 디렉토리 생성 2. 프로젝트 홈 경로에서 npm init -y 3. webpack과 webpack-command line interface 패키지를 설치합니다. 4. package.json에 script 객체에 "build": "webpack"를 입력합니다. 5. webpack.config.js 파일을 생성합니다. webpack의 기본 webpack 설정파일입니다. 6. app.js에 math.js를 임포트해줍니다. 7. 중간 빌드 : npm run build(건너뛰어도 됩니다. 뒤에서 빌드 합니다.) 8. CSS 웹팩 설정(loader 설치) 9. 파일(이미지)도 webpack 설정(l.. 2021. 5. 28.

우아한테크캠프 4기 지원 결과

개탈락을 맛봤습니다. 도대체 어떤 사람들이 합격하는 걸까요? ㅋㅋㅋ 코딩테스트 1차에서 떨어졌네요 ㄹㄷㅈ러ㅑㅈ대ㅓㄹㅈ 이걸로 블로그 조회수나 늘리렵니다~~~ 2021. 5. 21.

[Javascript] (1)정규식 초 간단 필수 문법 정리-부정그룹

정규식 부정그룹 문법 2021. 5. 17.

[Vue] life cycle

Vue life cycle Vue.js 라이프사이클은 Vue 인스턴스가 생성되는 것부터 인스턴스가 소멸되는 것까지의 과정입니다. Vue 라이프 사이클이 실행되는 경우는 다음과 같습니다. - Vue 인스턴스가 생성돼서 DOM에 마운트되는 경우 - 데이터가 변경되서 DOM을 업데이트하는 경우 Vue.js 라이프 사이클은 여러 단계가 정의되어 있습니다. 그리고 각 단계마다 사용자가 정의한 로직을 실행하는 주체가 있습니다. 이를 '훅'이라고 합니다. Vue.js 공식문서에서는 '인스턴스 라이프사이클 훅'이라고 정의하고 있습니다. 인스턴스 라이프사이클 훅 Vue.js 라이프 사이클은 여러 단계를 순서대로 실행합니다. 각 단계마다 호출되는 훅이 있습니다. 주요 훅은 created, mounted, updated, .. 2021. 5. 12.

[Javascript] (2)정규식 초 간단 필수 문법 정리- 정규식 메서드

정규식 메서드 문자.search(정규식) search 메소드로 문자열에 매칭되는 index 반환하기 search는 첫번째로 매칭된 문자열의 인덱스 번호를 반환한다. 문자.match(정규식) match 메서드는 매칭되는 모든 문자열을 찾아서 그냥 반환한다. const reg1 = /\?/g; const str1 = 'few?few?few?'; 'g'를 빼면 아래처럼만 나옵니다. 문자.replace(정규식, '바꿀 문자'); replace는 매칭된 문자열을 모두 치환해 준다. const reg1 = /\?/g; 특수문자 포함 여부 파악하기 const str = "020-3212-1235"; str.match(/[?!.-]/); 단어 문자 \w = [0-9a-zA-z_] \W = \w의 역집합 참고 : wor.. 2021. 4. 26.

[SCSS]초 간단 정리 scss 변수파일 만들고 사용하는 방법 개발자 퍼블리셔라면 필수로 알아야 하는 지식!

scss를 사용하면서, CSS로 트랜스컴파일하지 않고 scss파일들에서만 사용하는 변수를 저장하기 위한 전용파일을 만들고 사용하는 방법에 대해서 살펴보겠습니다. _variable.scss파일에 black 키워드를 가지는 변수를 만들고, 다른 scss파일에서 이 변수를 통해서 background-color를 검정색으로 적용해 보는 예시로 살펴보겠습니다. 결과는 아래 사진입니다. 그럼, 작업을 순서대로 살펴보겠습니다. 1. '_'가 들어간 scss파일은 css로 트랜스컴파일에 대상이 되지 않습니다. 예를 들어서 map_control.scss는 css로 트랜스컴파일되지 않습니다. css로 트랜스컴파일되지 않는 특성을 이용해서 어차피 scss 파일들만 사용하는 변수파일에 이름을 '_'를 넣어서 만들어 줄 수 있.. 2021. 4. 23.

티스토리툴바