상황 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..

문제 상황 React context 사용 시 기존 코드 구성이 context 내부 요소가 늘어날 수록 복잡해져서 리팩토링하려 한다. 기존 구현 // 구성 const UserContext = createContext({}); const SignInContext = createContextvoid>(()=>{}); export const UserContextProvider = ({ children }) => { const [user, setUser] = useState(); const signIn = () => {}; return ( {children} ); } export function useUserState() { const context = useContext(UserContext); return c..

문제 : 도메인(B)이 본 서비스 도메인(A)에서 분리되어 나온 상황에서 유니버셜 링크가 오동작. 원래 사용자의 선호에 따라 모바일 브라우저 상에서 이동되거나 앱을 띄워야 하는데, 무조건 앱으로 연동되는 현상 발생. 원인 : 유니버셜 링크는 다른 도메인에 대해 무조건 앱으로 연동되게 처리한다. 해결 : 유니버셜 링크를 다른 도메인에 대해 처리할 수 있다면 그렇게 처리. 아니라면 URI scheme을 이용하여 에러 시 동작을 구현하는 식으로 수정. 딥링크 딥링크는 특정 주소 or 값에 의해 사용자가 앱 내의 특정 화면으로 이동하는 기능을 말한다. 딥링크는 3가지 방식으로 구분된다. URI scheme : 앱에 URI scheme 값을 등록하는 딥링크 특정 scheme 값을 입력하면 (ex_ ohouse:/..

https://web.dev/fast/#optimize-your-images 를 참고하여 요약한 블로그 글입니다.* 도입 서비스의 속도는 UX에 영향을 미치고, UX는 곧 사용자의 유입을 결정한다. 서비스 속도 개선에는 다양한 최적화가 필요한데, 이번에는 이미지 최적화를 살펴보자. 이미지 종류 이미지는 2가지 종류로 구분할 수 있다. vector 이미지 raster 이미지 vector 이미지는 선, 점, 면 등의 벡터적 요소를 사용하여 이미지를 표현하는 방식이며, 간단한 기하학 모양 (로고, 글자, 아이콘 등)을 나타내는 데에 적합하다. vector 이미지는 사이즈에 따른 깨짐 없이 이미지를 전달할 수 있다는 장점이 있지만, 표현해야 하는 모양이 복잡할 경우 데이터 양이 많아진다는 단점이 있다. rast..

인증 방식 1. API key를 통한 인증 과정 user가 login 정보를 입력한다. Client는 이미 Server에 등록한 API key를 가지고 있다. Client는 user가 입력한 Login 정보를 받아서 API key와 함께 Login API를 요청한다. Server는 API key를 통해 해당 Client가 등록되어있는 지를 검사한다. Sever는 Login 정보를 통해 해당 User가 API를 사용할 수 있는 지를 검사한다. 단점 API key는 모든 Client들이 공통으로 사용하기 때문에 노출되면 전체 API가 노출된다. API key는 시간이 무제한이고 한 번 노출되면 API key 변경 전까지 계속 노출된다. 2. API Token을 통한 인증 과정 user가 login 정보를 입..