우주개발자 블로그

프로그래밍 언어/웹 프론트엔드 (28)

next.js 와 typescript를 끼얹어 보자

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2020. 5. 13. 12:00

최근 프론트엔드 생태계는 React, Vue, Angular 이 삼대장이 주류를 이루고 최근 Typescript 또한 각광 받고 있습니다. 저 또한 프론트엔드쪽 일을 자주하는 개발자로써 자연스럽게 이 삼대장 중 React를 자주 접하게 되었고, 최근 Typescript에 관심을 가지게 되었습니다. 하지만 React의 경우 큰 단점이 존재했는데, React는 클라이언트 사이드 렌더링이기 때문에 포털사이트 크롤링 봇들이 React 페이지를 수집하지 못한다는 단점이 존재하고 그로인해 자연스럽게 SEO를 적용할 수 없게 되어졌습니다. 이러한 문제는 서비스를 제공하는 업체한테는 큰 문제이며 심각하게 고민해야 될 문제입니다. 그렇기 때문에 나온게 React에 서버사이드 렌더링을 지원하는 NEXT.JS라는 프레임 워..

next.js에서 Cannot find module ".scss" 에러 해결하기

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2020. 5. 12. 08:30

최근 next.js로 웹 페이지를 만들려고 계획중에 있고 프로젝트를 환경을 구성하고 있습니다. 그러던 중에 아래와 같이 scss 모듈을 불러 올 수 없다는 에러가 발생했습니다. Cannot find module './Header.module.scss'. ts(2307) *.module.scss 형식의 스타일 모듈을 찾을 수 없다는 오류인데, 이러한 경우 간단한 설정 추가로 문제를 해결할 수 있습니다. 해결법 next-env.ts 혹은 next 설정 파일에 들어갑니다. 아래의 코드를 넣어줍니다. declare module '*.scss' { const content: { [className: string]: string }; export default content; } 짜잔! 이제 에러가 사라졌습니다. ..

Missing return type on function. (eslint@typescript-eslint/explicit-function-return-type) Warning 해결하기

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2020. 5. 11. 08:30

타입스크립트는 기본적으로 변수 또는 함수에 리턴 형식을 명시해 주어야 합니다. 그리고 이 Typescript를 React와 같이 사용할 때 함수형 컴포넌트는 React.FC라는 형식을 가지게 됩니다. import React from 'react'; import { AppProps } from 'next/app'; function App({ Component, pageProps }: AppProps): React.FC { return ; } export default App; 하지만 타입스크립트에서 함수형 컴포넌트 사용시 React.FC를 사용하지 말라는 글(링크)이 있습니다. 그 이유는 defaultProps가 잘 동작하지 않는 경우가 발생할 수 있기 때문입니다. 그래서 저 또한 React.FC를 사용하..

VSCode에서 발생하는 Delete `␍` eslint (prettier/prettier) 해결방법

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2020. 5. 10. 18:05

Prettier와 ESLint를 프로젝트에 적용하던 중 아래과 같은 오류가 ESLint에서 발생했습니다. Delete `␍` eslint (prettier/prettier) 사실 ESLint에서 발생하는 오류라서 실행은 정상적으로 되지만, 이러한 오류는 엄청 거슬리기 때문에 이러한 오류를 해결하기로 결심했습니다. 가장 간단한 방법으로는 엔드라인 시퀀스를 변경하는 방법입니다. 사진 순서대로 빨간색으로 체크한 부분을 따라가면 문제가 해결됩니다. 하지만 이러한 End Line Sequnce를 인위적으로 수정하는 방식은 근본적인 해결방법이 아닙니다. 또한 모든 파일의 End Line Sequnce가 CRLF이므로 일일히 변경하는 것도 귀찮습니다. 그러므로 근본적인 원인인 ESLint 자체에서 수정을 해주는 방법..

React에 대해서 알아보도록 합시다.(feat. JQuery)

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2020. 3. 4. 06:00

같이보면 좋은 글 2020/03/03 - [프로그래밍 언어/Javascript] - 돔(DOM)과 가상돔(Virtual DOM)에 대해서 알아봅시다. 요즘 프론트엔드 라이브러리 생태계는 무수한 변화가 이뤄지고 있습니다. 저 또한 프론트엔드에 종사하고 있는 이 시점에서 React를 처음 하고 Class Component 및 Functional Component란 생소한 개념을 이해하며, 많은 난관을 겪었지만, React에 매력에 빠져 현재는 다양한 프로젝트에 React를 적용하고 있습니다. 그렇다면 많은 프론트 엔드 개발자들이 자주 사용하고 있는 React란 무엇일까요? 한번 알아보도록 합시다. React 이전에 Front End 생태계 처음 프론트엔드의 생태계는 모든 것이 JQuery 라이브러리로 이루어..

돔(DOM)과 가상돔(Virtual DOM)에 대해서 알아봅시다.

프로그래밍 언어/웹 프론트엔드 우주개발자(SpaceDev) 2020. 3. 3. 06:00

개발자 특히 웹 개발자라면 한번쯤은 들어봤을 법한 단어 바로 돔(DOM) 입니다. 현재 웹 프론트엔드라는 세계가 존재할 수 있도록 도와주는 굉장히 중요한 개념입니다. 하지만 말만 들어봤지 정확히 이것이 뭔지 모르는 개발자들도 많이 있습니다. 오늘은 DOM과 Virtual DOM에 대해서 자세히 알아보도록 하겠습니다. 돔(DOM) 이란? 웹 개발자 특히 웹 프론트엔드 개발자는 DOM과 친해져야합니다. DOM은 Document Object Model의 줄임말로 번역하면 문서 객체 모델이라는 뜻입니다. 하지만 단어만 들었을 때는 크게 와 닿는게 없습니다. 이 DOM이란 트리 구조로 되어있는 객체 모델로써, Javascript가 getElementbyid()를 같은 함수를 이용하여 HTML문서의 각 요소(li,..

Copyright © 우주개발자 블로그 All Rights Reserved

티스토리툴바