전체 글
-
[VueJS] Vue2 업데이트 시작 Vue2.7 Naruto 공식 릴리즈frontend/vue&nuxt 2022. 9. 2. 09:54
오늘은 멈춰있던 Vue2를 다시 움직이게 할 Vue 2.7 공식 릴리즈 Naruto에 대해서 알아보겠습니다. 기존의 Vue 2.6에서의 변경점과 Vue3와의 차이점에 대해서 알아 보겠습니다. Vue3로 넘어가기 위해서 파격적으로 공식적으로 Vue3를 지원하기도 하고 많은 변화들이 있었는데 Vue2에서도 Vue3의 기능을 사용할 수 있게 2.7 릴리즈가 된다고 알고 있었는데 드디어 되었습니다. 사내에선 Vue2 기반으로 프로젝트가 진행되었었는데 Vue3로 마이그레이션을 진행해야될지 고민하던 찰나에 2022 7월에 Naruto가 나와서 일단은 Vue2에서 최신버전으로 올리겠습니다. 올리면서 알게된 변경점들에 대해서 말씀드리겠습니다. 바뀐점(2.7 release) 어차피 vue3를 사용하신분이라면 다들 아실 ..
-
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를 기점으로 모듈을 찾고 모듈을 찾을때는 아래와 같이 찾습..