JWT Token Flow
[SPA] JWT Token Flow JWT의 구체적인 구현 방법에 대해서는 정해진 정답이란 정석은 없다.AccessToken이나 RefreshToken 의 만료 기간이라든가, refresh 할 때 AccessToken을 같이 보낼 것인지 정보를 재사용할것인지, RefreshToken의 payload에 무엇을 담아야 하는지.. 등등.. 서비스에 따라 구현하
카테고리: Frontend
React.js Storybook Typescript Design System Utilization
Storybook을 활용하여 본격적으로 디자인 시스템 구축하기 스토리북을 쓰는 방법을 어느정도 배웠으니, 이제 Hello 컴포넌트 말고 정말 디자인 시스템에 있어서 유의미한 컴포넌트들을 만들어봅시다. 그런데, 어떤 컴포넌트를 만들어야 할까요? 사실 가장 이상적인것은 프로젝트를 만드는 과정에서 처음부터 디자인 시스템을 구축하고 재사용이 자주 될 것 같은 컴포
React.js Storybook Typescript Component Props
Storybook 프로젝트에서 TypeScript로 컴포넌트의 props 문서화 편하게 하기TypeScript 를 사용하면 JavaScript의 불편함을 해결해줄 수 있고, IDE를 더욱 적극적으로 활용 할 수 있게 해줍니다. 특히, 리액트 컴포넌트를 TypeScript 로 작성하면, PropTypes 를 완전히 대체 할 수 있고 훨씬 유용하고 편합니다.
React.js Storybook Addon
Storybook을 다양한 Addon과 함께 활용해보면서 사용법 정복하기 storybook addon actions addon knobs addon docs 2. 스토리북, 시작하기.Storybook을 사용할 때 create-react-app으로 만든 프로젝트에서 Storybook 설정을 하여 사용할 수도 있고 아예 새로운 Storybook 전용 프로젝트
React.js Storybook Typescript Design System
TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기이 튜토리얼은 TypeScript와 Storybook을 사용하여 리액트 디자인 시스템을 구축하는 방법을 다룹니다. 이 문서를 통하여 여러분들은 다음과 같은 주제들을 배우게 됩니다. 디자인 시스템 이해하기 Storybook의 주요 기능 살펴보기 및 컴포넌트 문서화하기 디자인 시스템
Javascript Attributes
꼼꼼히 살펴보는 SCRIPT 엘리먼트아마도 <script>는 자바스크립트를 공부할 때 가장 먼저 배우는 HTML 엘리먼트일 것이다. 속성이 많지도 않고 심지어 아무런 속성을 입력하지 않아도 유효하고 잘 동작하는 엘리먼트라서 지나치기 쉽다. 하지만 자바스크립트 실행에 있어서는 어쩌면 가장 중요한 엘리먼트이기에 한 번쯤은 제대로 꼼꼼히 살펴보는 게
[Chrome] Webfont Cross Domain
웹폰트 크로스도메인 문제 해결https://www.example.com 의 웹폰트(CSS)를 https://example.com 으로 웹 브라우저에 접속할 때 아래와 같이 웹폰트를 로드하지 못하는 에러가 발생 될 수 있습니다. 12345Font from origin 'https://www.example.com' has been blocke
[Chrome] Ajax로 로컬파일 테스트
크롬 브라우저에서 Ajax로 로컬파일 사용하기웹 개발을 하다보면 WAS나 웹서버 없이 그냥 로컬에서 파일만 가지고 개발하는 경우가 생기게 됩니다.html 파일을 서버에 올리지 않고 로컬의 파일을 바로 크롬 브라우저에서 테스트 하는 경우 1Cross origin requests are only supported for protocol schemes: http
Shadow DOM
Shadow DOM은 무엇일까?DOM(Document Object Model)은 HTML 문서의 구조화된 표현입니다. 이것은 브라우저가 페이지에 무엇을 렌더링 할지 결정하기 위해, 혹은 자바스크립트 프로그램이 페이지의 콘텐츠 및 구조, 스타일을 수정하기 위해 사용됩니다. 12345678910<!DOCTYPE html><html lang=&q
CSS3 Skeleton Screen
linear-gradient로 skeleton screen 만들어보기페이스북이나 유튜브의 첫 화면을 보면, 아주 잠깐 프레임을 그려주는 빈 페이지를 확인할 수 있다.이러한 페이지를 개발에서 skeleton screen(스켈레톤 스크린) 이라고 한다.참고로 skeleton은 뼈대를 의미의 단어를 뜻한다. skeleton screen을 적용하면 사용자가 “대기