자바스크립트러 개발을 하다 보면 문법 오류나 코드 정리로 인해 시간을 소요하는 경우가 생긴다. ESLint와 Prettier는 이러한 상황을 해결해 주는 도구들이다. eslint & prettier 설정하기 ESLint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능을 한다. 쉽게 말해 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구이다. Prettier : 코드의 스타일을 잡아주는 포맷팅 기능을 한다. yarn add -D eslint prettier yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser yarn add -D eslint-config-airbnb yarn add -D eslint..
create-next-app 명령어를 사용하여 프로젝트를 생성해준다. style 폴더 styles 폴더에는 스타일을 나타내는 파일을 저장한다 global.css ) _app.tsx에서만 사용 가능 home.module.css ) 다른 컴포넌트 등에서 import 해서 사용 (다양하게 생성 가능) public 폴더 public 폴더에는 애플리케이션에서 사용되는 정적 파일들이 존재한다. 이때 create-react-app을 통해서 생성한 React 프로젝트의 public 폴더와 조금 다른 구성을 하고 있음 React 프로젝트의 public 폴더에는 index.html 파일이 존재했었지만 NexJS 프로젝트의 public 폴더에는 존재하지 않는다. 이는 NextJS가 pre-rendering을 위해서 자체적으..
Next.js로 프로젝트 구성중 styled-components가 새로고침시 적용이안되는 현상을 마주치게 됨 그 이유는 Next.js가 SSR로 작동하기 때문에 style이 적용되기 전에 렌더링이 되어서 그렇다. 아래의 방법을 통해 문제를 해결하였다. 1.babel-plugin 설치 npm i babel-plugin-styled-components -D 2.루트 디렉토리에 .babelrc를 생성 { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] } 3.pages폴더에 _documents.js를 생성 // _documents.js ..
📗 Component 란? 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. React에서 Component는 재사용 가능한 각각의 독립된 UI구성 단위라고 볼수 있다 💡 Component 사용 이유 기능별로 코드가 나뉘어 있기 때문에 수정을 해야 할 경우 쉽게 찾을 수 있어 유지 보수에 용이하다. 코드를 재사용 할 수 있어 반복되는 코드의 양을 줄일 수 있다. 여러번 사용된 컴포넌트가 있을 경우 수정작업이 들어왔을때 단순반복 작업을 줄일 수 있다. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있는데, 해당 페이지가 어떻게 구성되어 있는지 파악하기에 용이하다. 💡 어떤 HTML들을 Component 만드는게 좋을까 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋음 ..
HTML 삽입 미리보기할 수 없는 소스 CRA로 리액트 프로젝트를 생성하면 위에 사진과같이 세팅이된다. CRA에 구성폴더 및 파일들을 살펴보도록 하겠다. public 우리가 웹을 배포한다는 건 특정 폴더를 서버 컴퓨터에 올려두는 것을 말한다. public은 화면에 실제로 출력되는 파일들을 모아둔 곳이다. 리액트로 우리가 따로 설정을 안하였지만 웹펙은 public 을 바라보게 하고있다. index.html 실제 우리가 작성한 코드가 index.html파일 안에있는 id="root" 인 div 아래에 출력된다. manifest.json 웹앱 매니페스트란 앱에 대한 정보를 담고 JSON 파일이다. 배경색은 어떠한 색인지, 앱의 이름은 무엇인지, 홈스크린 화면에 추가할 때 아이콘은 어떤 것인지 등의 정보를 담고..
HTML 삽입 미리보기할 수 없는 소스 CRA로 리액트를 실행하기 위해선 먼저 node.js를 설치해 주어야 한다. 설치 방법은 아래의 링크 참고 https://velog.io/@dngur9801/Node.js-%EC%84%A4%EC%B9%98-%EB%B0%8F-LTS%EB%B2%84%EC%A0%84%EA%B3%BC-Current%EB%B2%84%EC%A0%84 create ceact app 이란? React 개발 환경을 설정하기 위해서는 babel과 webpack에 대한 설정이 필요하고, 이외에도 여러 개발 환경을 설정해 주어야 한다. 이러한 설정을 간단하게 대신해주는 것이 create-react-app 줄여서 CRA라고도 부른다. cra에서는 babel과 webpack을 포함하여 React에서 필요한..
HTML 삽입 미리보기할 수 없는 소스 📗 Node.js 란 Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다. 런타임이란? 프로그래밍 언어가 구동되는 환경 Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램이다. Node.js는 서버사이트 스크립트 언어가 아닌 프로그램(환경)이다. Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다. Node.js 다운로드 https://nodejs.org/en/ 1. Node.js 설치 LTS 버전 Long Term Support의 줄임말 오랜 기간 지원 가능 (2년) 여기서 말하는 '지원'이란, 해당 버전에 대한 안정성, 신뢰도를 보장 버전 숫자가 짝수..
HTML 삽입 미리보기할 수 없는 소스 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로** 웹 브라우저에서 동작하는 유일한 프로그래밍 언어**다. 다른 프로그래밍 언어와 마찬가지로 자바스크립트는 기존의 프로그래밍 언어에서 많은 영향을 받았다. 기본 문법은 C, 자바와 유사하고 셀프 에서는 프로토타입 기반 상속을, 스킴 에서는 일급함수의 개념을 차용했다. 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는** 인터프리터 언어**다. 대부분의 모던 자바스크립트 엔진(크롬의 V8, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore,마이크로 소프트 엣지의 Chakra 등)은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결..
