분류 전체보기
-
[REST]REST, REST API, RESTful카테고리 없음 2021. 3. 12. 11:48
REST API를 알기위해 일단 REST 부터 알아보자 REST "Representational State Transfer" : 즉, 자원을 이름으로 구분해서 해당 자원의 상태를 주고받는 모든 것을 의미한다. 상태는 즉 정보이며, 이들을 주고받을 땐 JSON 이나 XML 을 통해 주고 받는 것이 일반적이다. 상태를 전달할때는 이 상태가 요청되는 바로 그 시점을 기준으로 전달한다. 좀 더 구체적으로 설명하자면, HTTP URL 을 통해 Resource 를 명시하고 ( 즉 Resource 는 고유한 ID 인 URL 을 부여받는다 ), HTTP Method 를 통해 해당 Resource에 대한 CRUD operation 을 적용하는 것을 의미한다. http://localhost:8000/movies 위의 ur..
-
[Javascript] 구조 분해 할당 ( destructuring )IT&컴퓨터공학/Javascript 2021. 3. 10. 13:58
Vuex 를 공부하다가 destructuring에 대한 내용이 나와서 정리해보려고한다. 하나를 공부하는데 필요한 지식이 너무많아서 꼬리에 꼬리를 물고 계속 공부중이다 ! ( 재밌긴 하다 ) Destructuring 중 객체 구조 분해 할당 let obj = { name : "devlog", age : 1 }; let { name, age } = obj; // { "devlog" , 1 } 객체를 구조분해 할 때 주의해야 할 것은 할당 연산자의 왼쪽에 객체리터럴이 와야 하고,할당 연산자의 오른쪽에 오는 값이 null이나 undefined여서는 안된다는 것이다. Vuex - action 예시 // store/index.js const store = new Vuex.Store({ state: { count: ..
-
[Vuex] GettersIT&컴퓨터공학/Vue 2021. 3. 10. 10:58
Getters 앞에서 Vuex 의 property 중 state 와 mutations 에 대해 다뤄봤다. 쉽게말하면 state 는 전역으로 사용될 데이터의 집합이고 mutations 는 이 state 의 값에 접근해서 값을 바꾸는 함수의 모음이다. 그럼 Getters 란 무엇일까 ? 여러 컴포넌트에서 Vuex state 를 각자 참조하고 계산하면 효율이 떨어진다. 때문에, state 에 기반한 별도의 값을 만들어 getters 내에 속성으로 저장(캐쉬) 해두고, 이 getters 내에 저장된 속성을 참조해서 사용하게 한다. // store.js (Vuex) getters: { doubleCounter: function (state) { return state.counter * 2; } }, // App...
-
[Auth] 쿠키, 세션 그리고 jwtIT&컴퓨터공학/Server 2021. 3. 9. 17:48
인증을 왜 하는가 ? 프론트엔드 관점 : 사용자의 로그인, 회원가입과 같이 사용자의 도입 부분 백엔드 관점 : 모든 api 요청에 대해 사용자를 확인하는 작업 HTTP 요청에 대해서 현재 가장 많이 쓰이는 통신 방식은 HTTP통신이다. HTTP 통신은 응답 후 연결을 끊기게 되며 과거에 대한 정보를 전혀 담지 않는다. 이 말은 지금 보낸 HTTP 요청은 과거에 내 정보를 담아 보낸 HTTP요청과는 전혀 관계가 없다. 따라서 각각의 HTTP요청에는 보내는 주체가 누구인지에 대한 정보가 필수적이다. 헤더 : 요청에 대한 정보들이 들어간다. 보통 이 헤더에 인증 수단을 넣어 요청을 보내 인증을 수행함. 바디 : 서버로 보내야 할 데이터가 들어간다. 인증방식 1. 계정 정보를 요청 헤더에 넣는 방식 : 보안이 ..
-
-
[Bootstrap] 유틸리티카테고리 없음 2021. 3. 9. 11:01
Bootstrap 유틸리티 클래스 유틸리티 클래스를 잘 사용하면 추가적인 CSS 속성정의 없이 편하게 원하는 결과물을 쉽게 만들 수 있다. 유틸리티 클래스란, margin, padding, color, position, size 등 다양한 CSS 속성들을 사용하기 편하도록 미리 정의해 둔 클래스들로 기본 컴포넌트 클래스들과 결합해 사용하는 클래스다. 자주 쓰이는 유틸리티 클래스 color .text-primary .text-secondary .text-success .text-danger .text-warning .text-info .text-light .text-dark .text-body .text-muted .text-white .text-black-50 .text-white-50 Spacing 박..
-
[Bootstrap] 유틸리티로 Spacing 하는법카테고리 없음 2021. 3. 9. 10:31
Box model 박스모델 bootstrap의 공백의 자세한 클래스들을 알아가기 전에, 먼저 박스 모델부터 잠깐 살펴보도록 하자! 박스 모델은 HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는 것을 말한다. 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다. margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음 border : 박스의 테두리 padding : 테두리와 content간의 간격 content : 엘리먼트 안에 포함되는 컨텐츠 Bootstrap 에서 Spacing ( 공백주기 ) 하는 법 부트스트랩에선 기본적인 반응형 utility classes 에 대한 전형적인 margin 과 padding 클래스를 제공한다. 기존에 margin..
-
[HTML] Form 태그IT&컴퓨터공학/HTML&CSS 2021. 3. 9. 10:09
Form 태그 웹 페이지에서의 입력 양식을 의미한다. ex) 로그인 창, 회원가입 폼 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 된다. 속성 action : 정보를 전송할 서버 쪽 스크립트 파일을 지정한다. 즉 Form 안에 button을 누르면 submit 이라는 동작을 진행하는데, 이때 action 값에 쓰여져있는 URL 로 이동한다. name : Form 을 식별하기 위한 이름 method : Form 을 서버에 전송할 http 메소드 지정 ( GET, POST )