Every step counts

Authentication - 인증, 입증 자신이라고 주장하는 사용자가 누구인지 확인하는 행위 모든 보안 프로세스의 첫번째 단계(가장 기본 요소) 401 Unauthorized 비록 HTTP 표준에서는 미승인(unauthorized)을 명확히 하고 있지만, 의미상 이 응답은 비인증(unauthenticated)을 의미 Authorization - 권한 부여, 허가 사용자에게 특정 리소스 또는 기능에 대한 액세스 권한을 부여하는 과정(절차) 보안 환경에서 권한 부여는 항상 인증이 먼저 필요함 사용자는 조직에 대한 액세스 권한을 부여 받기 전에 먼저 자신의 ID가 진짜인지 먼저 확인해야 함 서류의 등급, 웹 페이지에서 글을 조회 & 삭제 & 수정 할 수 있는 방법, 제한구역 인증이 되었어도 모든 권한을 부여..

Cross-Origin Resource Sharing 브라우저가 요청을 보내고 서버의 응답이 브라우저에 도착 Server의 log는 200(정상) 반환 즉 Server는 정상적으로 응답했지만 브라우저가 막은 것 보안 상의 이유로 브라우저는 동일 출처 정책(SOP)에 의해 다른 출처의 리소스와 상호작용 하는 것을 제한 함 SOP(Same-Origin Policy) 동일 출처 정책 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용 하는 것을 제한하는 보안 방식 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격 받을 수 있는 경로를 줄임 Origin - “출처” URL의 Protocol, Host, Port를 모두 포함하여 출처라고 부름 Same Origin 예시 아래 세 영역이 일치하는 경우..

server란.. 클라이언트에게 정보와 서비스를 제공하는 컴퓨터 시스템 서비스 전체를 제공 == Django Web Service Django를 통해 전달받은 HTML에는 하나의 웹 페이지를 구성할 수 있는 모든 데이터가 포함 즉, 서버에서 모든 내용을 렌더링 - 하나의 HTML 파일로 제공 정보를 포함한 web 서비스를 구성하는 모든 내용을 서버측에서 제공 정보를 제공 == DRF API Service Django를 통해 관리하는 정보만을 클라이언트에게 제공 DRF를 사용하여 JSON으로 변환 client란.. server가 제공하는 서비스에 적절한 요청을 통해 server로부터 반환 받은 응답을 사용자에게 표현하는 기능을 가진 프로그램 혹은 시스템server는 정상적인 요청에 적합한 응답 제공 ser..

Navigation Guard Vue router를 통해 특정 URL에 접근할 때Ex) 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 함 다른 url로 redirect를 하거나 해당 URL로의 접근을 막는 방법 네비게이션 가드의 종류 전역 가드: 애플리케이션 전역에서 동작 라우터 가드: 특정 URL에서만 동작 컴포넌트 가드: 라우터 컴포넌트 안에 정의 전역 가드 Global Before Guard 다른 url 주소로 이동할 때 항상 실행 router/index.js에 router.beforeEach()를 사용하여 설정 콜백 함수의 값으로 다음과 같이 3개의 인자를 받음 to : 이동할 URL 정보가 담긴 Route 객체 from : 현재 URL 정보가 담긴 Route 객체 next : 지정한..

Local Storage 상태 유지하기 개발자 도구 > Application > Local Storage에서 확인 Window.localStorage 브라우저의 내장 객체 중 하나 Key-Value 형태로 데이터를 저장할 수 있는 저장소 localStorage에 저장된 데이터는 브라우저를 종료해도 계속해서 유지 됨 다른 탭에서도 동일한 데이터를 공유할 수 있는 반면, 다른 도메인에서는 접근할 수 없음 보안과 관련된 정보를 저장하기에는 적합하지 않음 setItem(key, value) - key, value 형태로 데이터 저장 getItem(key) - key 값으로 저장된 데이터 불러오기 JSON.stringify JSON(JavaScript Object Notation) 객체의 메서드 자바스크립트 객체..

UX & UI UX(User Experience) 유저와 가장 가까이에 있는 분야, 데이터를 기반으로 유저를 조사하고 분석해서 개발자, 디자이너가 이해할 수 있게 소통 유저가 느끼는 느낌, 태도 그리고 행동을 디자인 To design good UX 사람들의 마음과 생각을 이해하고 정리해서 우리 제품에 녹여내는 과정이 필요 유저 리서치, 데이터 설계 및 정제, 유저 시나리오, 프로토타입 설계 등이 필요 UI(User Interface) 유저에게 보여지는 화면을 디자인 UX를 고려한 디자인을 반영, 이 과정에서 기능 개선 혹은 추가가 필요한 경우 Front-end 개발자와 가장 많이 소통 [참고] Interface 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고 받는 경우의 접점 즉, 사용자가..

Before start 객체 메서드 축약형을 사용하기 // before const obj1 = { addValue: function(value){ return value }, } // after const obj2 = { addValue(value){ return value }, } src / store / index.js vuex의 핵심 컨셉 4가지 state 중앙에서 관리하는 모든 상태 정보 $store.state로 접근 가능 store의 state에 message 데이터 정의 getters mutations actions // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vue..

상태관리 상태(state)란 현재에 대한 정보(data) Web Application에서의 상태는 현재 App이 가지고 있는 Data로 표현 각 component는 독립적이기 때문에 각각의 상태(data)를 가짐 여러 component가 모여서 하나의 App을 구성하기 때문에 여러 component가 같은 상태를 유지할 필요가 있음 ⇒ 상태 관리 필요 Pass Props & Emit Event props & event를 이용해서 상태 관리 시 각 컴포넌트는 독립적으로 데이터를 관리하고 같은 데이터를 공유하므로 동일한 상태를 유지 가능하고 데이터의 흐름을 직관적으로 파악 가능 그러나 component의 중첩이 깊어지면 데이터 전달이 쉽지 않음 공통의 상태를 유지해야하는 component가 많아지면 데이터 ..

Data in components 여러 components 사이에서 공유되어야할 데이터들이 있음 컴포넌트는 부모-자식 관계를 가지고 있으므로, 부모-자식 관계만 데이터를 주고받게 함 pass props & emit event 부모 ⇒ 자식으로의 데이터의 흐름 pass props의 방식 자식 ⇒ 부모로의 데이터의 흐름 emit event의 방식 Pass Props 요소의 속성(property)을 사용하여 데이터 전달 props는 부모(상위) 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성 자식(하위) 컴포넌트는 props 옵션을 사용하여 수신하는 props를 명시적으로 선언해야함 props in HelloWorld Vue CLI를 설치할 때 기본 생성 되는 App.vue의 HelloWorld 컴포넌트를 ..

Vue CLI를 실행하면 이미 HelloWorld.vue라는 컴포넌트가 생성되어 있고 App.vue에 등록되어 사용되고 있음 npm run serve 명령어를 진행했을 때 나온 화면 대부분이 그것 MyComponent.vue src/components/ 안에 생성 script에 이름 등록 template에 요소 추가 // MyComponent.vue This is my component component 등록 3단계 불러오기 등록하기 보여주기 // App.vue component 등록 - 불러오기 import {instance name} from {위치} instance name은 instance 생성 시 작성한 name @는 src의 shortcut .vue 생략 가능 // App.vue compone..