[LOLPAGO] React 설치 및 Header 구성(3)

🚗jsconfig.json

지난 시간에 이어 Header의 구성을 진행해보겠다.

 

 

 

 

보이는 화면과 같이 Header를 App.js에 import 했지만 오류가 발생했다.

 

오류 메시지를 읽어보면 경로 문제라는 것을 알 수 있는데 리엑트에서는 경로를 편하게 설정할 수 있도록 하는 json파일이 있다.

 

상대경로를 import하려면 "../../../../Main" 과 같이 복잡하게 파일의 경로를 설정해야 하는데, 절대경로를 쓰는것이 가독성이 훨씬 좋다.

 

디렉토리에 jsconfig.json파일이 있다면 해당 디렉토리가 JavaScript 프로젝트의 루트 디렉토리라는 것을 나타낸다.

 

그래서 jsconfig.json파일을 사용하면 프로젝트에 속한 파일, 프로젝트에서 제외할 파일 및 컴파일러 옵션을 나열할 수 있다.

 

여기서 컴파일러 옵션이란 컴파일 과정에서 얼마나 엄격하게 타입 오류를 검사할 건지, 컴파일 결과 생성되는 자바스크립트 코드의 버전은 어떻게 할 것인지에 대해 아주 세부적인 사항들을 결정하는 것을 컴파일러 옵션이라고 한다.

 

리액트를 사용하는 프로젝트의 경우 대부분의 소스파일은 src디렉토리에 포함되어있다.

 

그래서 jsconfig.json파일을 생성한 뒤에 아래와 같은 코드를 작성하여 저장한다.

 

이떄 jsconfig.json파일은 package.json파일과 같은 경로에 생성하면 된다.

 

{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]
}

 

 

다음과 같이 작성한다면 src의 키워드 없이 절대 경로로 import가 가능해진다.

 

즉 componenets/header/Header.jsx와 같이 접근이 가능하다는 뜻이다.

 

jsconfig.json파일을 생성해주고 제대로 동작하는지 확인해보자.

 

 

 

 

여전히 오류가 발생하지만 다른 오류가 발생했다는 것을 알 수 있다.

 

오류 메시지를 읽어보면 module이 export 되지 않았다는 것을 알 수 있다.

 

맞다.. export를 하지 않았다.

 

 

 

다음과 같이 export를 다시 해주자.

 

 

 

또 다른 오류가 발생했다.

 

이전에 div를 생성할 때 styled.div를 사용했는데 해당 모듈을 import 해주지 않았다.

 

다시 import를 해주고 확인해보자.

 

전체 코드는 아래와 같다.

 

import { LOGO } from 'assets/images';
import { Image } from 'components/img';
import styled from 'styled-components';

const HeaderDiv = styled.div`
	width: 100%;
	box-sizing: border-box;
	padding: 20px 80px 0;
`;

const Header = () => {
	return (
		<HeaderDiv>
			<Image src={LOGO} alt="LOLPAGO" />
		</HeaderDiv>
	);
};

export default Header;

 

 

 

 

다음과 같이 정상적으로 나오는 것을 알 수 있다.