주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

많은 사람들이 URI, URL은 혼용해서 사용하는 경우가 종종 있습니다. 뭐, 문제 없이 소통이 되기 때문이죠.. 하지만 이 둘의 정확한 차이를 알고 넘어가지 않는다면, 우리에게 발전이 없으므로^^ 오늘 URI와 URL의 차이를 짚고 넘어가보도록 하겠습니다. 플러스로 URN에 대해서도 알아봅시다. URI (Uniform Resource Identifier) - 식별자 웹 기술에서 사용하는 논리적 또는 물리적 자원을 식별하는 고유한 문자열 시퀀스입니다. 자원을 나타내는 유일한 주소이며 인터넷 프로토콜이 항상 붙어다닙니다. 이미지를 보면 URI가 가장 상위개념인 것을 알 수 있습니다. URL (Uniform Resource Locator) - 위치 웹 주소라고하며 네트워크 상에서 자원이 어디 있는지 알려주기..

들어가는 말 저는 유지보수 업무를 주로 해왔었기 때문에 사용자 인증하는 절차나 관련 기술, 정의 등등에 대해 간단히 "그런게 있다더라~ 카더라~"로만 알고 있었는데, 이번에 회사에서 관련된 작업을 진행하게 되어 정의에 대해 알아보고자합니다. (이직하고 (변명)적응하느라 포스팅을 거의 안썼는데, 다시 마음을 잡고 간단한 글이라도 쓰려고 노력 중) JWS (Json Web Token) 정의 Json을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 웹 토큰입니다. JWT는 토큰 자체의 정보를 담고 사용하는 Self-Containerd 방식으로 정보를 전달합니다. 여기서 클레임(Claim) 기반이란 무엇일까요? 클레임(Claim)은 주체가 수행할 수 있는 작업보다는 주체가 무엇인지를 표현하는 이름과 ..

Nuxt 프로젝트를 설정하는 중에 Rendering mode에 대해 궁금증이 생겼다. SPA나 SSR 방식은 알고있다고 생각했는데, Universal은 뭘까? 간단히 알아보기로 했다. SSG (Server Side Generation or Static Side Generation) (참고: https://velog.io/@longroadhome/FE-SSRServer-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-SSGStatic-Site-Generation-feat.-NEXT%EB%A5%BC-%EC%A4%91%EC%8B%AC%EC%9C%BC%EB%A1%9C) Nuxt Universal Mode? 먼저 짧게 요약하자면 몇 가지 기능을 포함하여 SSR과 CSR 방식 둘 다 상..

크롬 확장 프로그램을 아시나요? 크롬 확장 프로그램 프로젝트를 진행하기 위한 셋팅을 알아보겠습니다. 1. 프로젝트 CRA(create-react-app)로 시작 npx create-react-app extension-project 설치가 완료되면 구조가 이러합니다. 2. manifest.json 파일 수정 public > manifest.json { "name": "your project name", "icons": { "16": "icon-16x16.png", "48": "icon-32x32.png", "64": "icon-64x64.png", "128": "icon-128x128.png" }, "permissions": [], "manifest_version": 3, "version": "0.0.1"..

설치 npm i vuex store 폴더에 관리하기 위해 store폴더, 파일 생성 store/store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { //... }, getter: { //... }, mutations: { //... }, action: { //... } }) 이런 형태로 작업하면 된다. - state: 여러 컴포넌트에 공유되는 데이터 - getter: 연산된 state값을 접근하는 속성 - mutations: state값을 변경하는 이벤트 로직이나 메서드 - actions: 비동기 처리 로직을 선언하는 메서드 그리고 store 파일을 등록해줘야..

자바스크립트 전역 스코프에 정의된 것은 코드 내의 어디서든지 접근이 가능하다는 것이 문제가 되고는 합니다. 이때 외부에 공유되면 안되거나 충돌날 위험이 있는 경우 즉시 실행 함수를 통해 해결하고는 합니다. 즉시 실행 함수(IIFE) 단순하게 함수와의 차이를 보자면 즉시 실행되는지 아닌지의 차이입니다. 함수표현식은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 일련의 과정이 있습니다. 하지만 즉시실행함수는 이러한 과정없이 즉시 실행됩니다. 문법의 차이는 단순히 함수를 괄호 "()"로 랩핑한다는 것입니다. 형태 (function() { console.log('즉시 실행 함수'); }()); var now = (function () { console.log('즉시 실행 함수') })(); 익명, 기명 즉시..