frontend
-
NextJS + StyledComponents : Font Flickering Issue (최초 로딩 시 폰트 깜빡임 문제 해결)frontend/오답노트 2022. 8. 31. 14:26
문제 : NextJS와 StyledComponents로 작업한 프로젝트에서 createGlobalStyle 이라는 StyledComponents의 함수를 사용하여 전역 폰트를 지정하였을 때 폰트 깜빡임 현상이 발생 - GlobalFonts.tsx import { createGlobalStyle } from "styled-components"; const GlobalFonts = createGlobalStyle` @font-face { font-family: 'NotoSansKR'; src:local('NotoSansKR'), url('/assets/fonts/NotoSansKR-Black.woff2') format('woff2'), url('/assets/fonts/NotoSansKR-Black.woff..
-
html - DOCTYPEfrontend/html 2022. 4. 21. 12:36
오늘은 프론트엔드 면접 기출 문제이자 아주 간단한 내용인 DOCTYPE에 대해서 알아보도록 하겠습니다. 우리가 보통 front end 개발을 할 때 HTML의 최상단에 작성하는 이 DOCTYPE의 용도는 아주 간단합니다. DOCTYPE 브라우저가 HTML문서를 렌더링 할 때 어떤 스펙으로 렌더링 할지 정의 하기 위함 브라우저는 렌더링을 하기위해 두가지 방식 중 하나의 방식을 선택하게 됩니다. W3C에서 정의한 standard mode ( 스탠다드 모드 )와 quirks mode ( 브라우저별 호환모드 ) 입니다. 기본적으로 을 지정하지 않으면 default로 quirks mode로 렌더링 하게 됩니다. 또한, 을 통해 html5 뿐만 아니라 과거의 html 표준으로도 선언할 수 있습니다. 최신 html5..
-
React18 + Recoil + TypeScript : Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'.frontend/오답노트 2022. 4. 13. 21:39
문제 : Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'. Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'. 리액트 18 버전 업데이트에 대응하여 recoil의 type대응이 제대로 되지 않아서 그렇다. 해결방법 : yarn upgrade --latest 0.7.0 이하의 버전을 사용하고 있으신분들은 0.7.1버전(4월13일 한국시간으로 낮에 release)이상으로 버전을 업데이트 시키자. (참고. 위의 방식으로 업그레이드 하면 원치않은 패키지까지 업그레이드 될..
-
React18 + typescript : Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment'frontend/오답노트 2022. 4. 10. 18:09
문제 : Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment' Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment' 이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 react-d..
-
[VueJS] 적응형 모바일 - 태블릿 멀티 디바이스 환경 구축기 (구조 편)frontend/vue&nuxt 2022. 4. 5. 17:10
오늘은 제가 작년 이 맘때쯤 진행했던 Vue 멀티 디바이스 환경 프로젝트에 대해서 얘기해보려고 합니다. 일단 제게 주어진 상황은 다음과 같았습니다. 짧은 개발기간 재구축건으로 AS-IS가 있음 프론트엔드 개발자 단 1명..(본인)..분량 많음 반응형 웹이 아닌 적응형 웹으로 분기 ( 모바일과 태블릿의 화면 depth 차이) 이러한 상황이였기 때문에 최대한 빠른 시간내에 정확히 많은 양을 처낼 수 있는 방법이 필요했습니다. 위와 같은 조건으로 인해 반응형으로도 개발할 수 없었기 때문에 저는 다음과 같은 방법을 생각했었습니다. 이 방법이 정답이 아니며 그냥 여러 방향중 가능성 있는 하나 정도로 보시면 될 것 같습니다. 그럼 제가 진행했던 방식과 그렇게 진행한 이유에 대해서 천천히 살펴보도록 하겠습니다. 1...
-
[webpack] resolve alias 절대경로 설정 ( javascript / typescript )frontend/bundler 2022. 3. 28. 16:34
오늘은 webpack의 절대경로 설정에 대해서 알아보겠습니다. 절대경로 설정이 자바스크립트와 타입스크립트가 조금 다르게 설정 해야됩니다. 타입스크립트에서 설정할게 더 있다고 볼 수 있습니다. 간단한 설명과 함께 진행해보겠습니다. 자바스크립트 우리는 절대경로를 사용하기 위하여 webpack의 resolve옵션을 사용하게 될 것입니다. resolve는 모듈해석에 대한 설정으로 특정 모듈을 호출할 때 모듈을 찾는 위치를 변경할 수 있습니다. //webpack.config.js module.exports = { resolve: { alias: { "@": path.resolve(__dirname, "./src/"), }, } }; 위와 같이 한다면 src를 기점으로 모듈을 찾고 모듈을 찾을때는 아래와 같이 찾습..
-
Webpack : Cannot find module 'vue-loader/lib/plugin'frontend/오답노트 2022. 3. 26. 15:35
문제 : Cannot find module 'vue-loader/lib/plugin' Cannot find module 'vue-loader/lib/plugin' 이런 관련한 문제가 발견된다면 해결방법은 아래와 같습니다. 해당 문제는 구버전의 VueLoaderPlugin와 신버전의 VueLoaderPlugin의 import 방법이 바뀌었기 때문입니다. 해결방법 : const { VueLoaderPlugin } = require('vue-loader') 위와 같이 변경하여 준다면 정상적으로 VueLoaderPlugin이 동작하게 됩니다. vue3가 공식이 되면서 미뤄두었던 vue2프로젝트의 마이그레이션을 진행하다가 발견한 문제였습니다.
-
Webpack : Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): 오류frontend/오답노트 2022. 3. 25. 16:08
문제 : Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: document is not defined Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: document is not defined 이런 관련한 문제가 발견된다면 해결방법은 아래와 같습니다. 해당 문제는 webpack의 빌드과정에서 loader의 충돌이 발생해서 생기는 문제입니다. 저는 최적화를 위해 넣어둔 mini-css-extract-plugin과 style-loader의 충돌로 발생하..