인증 Best Case 기본 flow (OpenIDC) Best Case라고 생각하는 인증 flow(OpenIDC)를 먼저 설명하겠습니다. 먼저, Auth Service가 타 서비스가 아닌 자사의 서비스일 때는 OAuth 기반의 flow가 필요없이 다음과 같이 시퀀스 다이어그램이 그려집니다. (타 서비스일 경우 OAuth 보기) Client가 id(username)와 password를 입력하여 로그인합니다. 로그인 요청은 BFF → Server → Auth Service로 전해집니다. 전달된 id와 password로 Auth Service에서 인증합니다. 인증에 성공하면 access token, refresh token, id token 를 Server로 전달합니다. Server는 id token 을 d..

Sticky 스펙을 구현하는 방법 스펙에 필요한 조건을 하나씩 추가해가면서 어떻게 해결할 지를 고민해보자. css의 poistion: sticky; 를 이용하자. 우선 Sticky되어야 하는 Element가 최상단에 위치해있다면 쉽다. css를 이용하면 position: relative; 인 부모의 상단에 해당 Element가 sticky된다. .sticky{ position: sticky; top: 0; } https://codepen.io/bucketressi/pen/GROoeKE Sticky-1 ... codepen.io sticky container를 만들자. 이번에는 sticky header(첫번째 Sticky Element) 아래에 sticky sub-header가 위치해야 한다고 생각해보자...

Main Concepts 처음 React를 시작할 때 거의 이해 못하고 practice 정도만 참조했을 듯 싶어서 다시 읽어보았다. 개념을 이번에 명확히 했다거나 처음 들어본 것들을 정리해보았는데, Main concept에서도 꽤나 많았다. 이번 기회로 해당 정리 글을 주기적으로 보도록 해야겠다 😊 Introducing JSX React는 기존에 html, js 와 같이 기능 별로 문서를 나누던 데에서 한 컴포넌트 단위로 나누게 함으로써 js, html(jsx), css를 컴포넌트 단위로 다룰 수 있게 하였다. JSX의 내부의 변수들은 렌더 시점에 이미 문자열로 변경 되므로 XSS 공격을 피할 수 있다. Rendering Elements React로 만들어진 어플리케이션은 하나의 root DOM 노드를 ..

Open Graph란? 어떤 웹페이지든 social graph의 일부분이 될 수 있도록 하는 프로토콜이다. Metadata og:title : url 공유 시 제목으로 들어가는 영역이다. (카카오톡 공유는 title만 공유된다.) og:type : object의 type이다. (ex_ video.movie, website) og:image : url 공유 시 나타나는 이미지이다. og:url : graph에서 id로 쓰이는 url이다. og:audio, og:video : audio, video 파일의 url이다. og:description: object에 관한 설명이다.카카오톡 공유에서는 표시되지 않고 슬랙 공유, 블로그에서는 description까지 표시된다. og:site_name : 방대한 웹사이..

상황 next.js에서는 SSR을 사용하기 때문에 url에 있는 query를 받아올 수가 없다. 해결 1 next page에서 getServerSideProps 함수를 이용해 query를 받아올 수 있다. const Page: NextPage = ({ params }) => { } export async function getServerSideProps (context) { const req = context.req; const params = new URLSearchParams(req._parsedUrl.query); return { props: { params } }; }​ 해결 2 해결 1의 방법으로 page 내부에서는 url parameter를 사용할 수 있다. 하지만 _app.tsx와 같이 ne..

선택자 충돌 시 /*css*/ .special{ color: blue; } p{ color: red; } css는 cascade와 specificity라고 불리는 rule을 가지고 있고, 해당 rule에 따라 충돌 시 더 강한 선택자가 적용된다. cascade rule : 뒤에 적용된 스타일이 앞선 스타일을 덮어쓴다. specificity rule : 요소를 더 특정하는 선택자가 스타일을 차지한다. 따라서 위의 예제에서 specificty rule에 의해 color는 blue가 된다. specificity specificity는 4가지의 단위로 측정된다. Thousands : style 속성 내에 정의되어 있는 style(inline style)일 경우 Hundreds : ID selector를 사용하여..

만일 Typescript로 개발하던 중에 아주 잘 작성된 JS 모듈을 가져와서 쓰고자 한다면, 해당 모듈 내의 함수는 typescript로 정의되어있지 않기 때문에 컴파일 과정에서 오류가 뜬다. 모듈이 해당 속성을 가지고 있음에도 type이 정해져있지 않아서 가지고 있지 않다고 해석하는 것이다. 다음과 같이 declare 키워드를 써서 정의해두면 type이 인식되어 typescript compiler가 해석할 수 있게 된다. declare let module: any 간단히 말해서 컴파일러에게 "이건 이미 존재하고 다른 코드에서 참조할 수 있다."라고 설명하는 것이다.

배경 함수들끼리 데이터를 공유하고 싶다면 어떻게 해야할까? 전역 스코프에 해당 데이터를 둔다면 다른 내부 요소에 의해 망가질 수도 있고, 순서가 뒤엉켜 전역 스코프의 요소가 존재하지 않을 수도 있다. 따라서 모듈이라는 방식을 이용하면 각각 필요한 모듈을 import하여 사용함으로써 어디에서 에러가 나는지 파악하기 쉽다. 모듈을 만들고 import, export 하는 시스템을 모듈 시스템이라 하는데 현재 2가지의 모듈 시스템이 활발하게 사용되고 있다. CommonJS ES modules 차이점 기초 문법 CommonJS const module = require('어쩌구'); const { func } = require('어쩌구'); module.exports = '어쩌구'; // default export..