🔸 Webpack
- Webpack의 loader는 무엇이고, 왜 사용하는가?
: Webpack이 웹 애플리케이션을 해석할 때 자바스크립트 파일뿐만 아니라 다양한 리소스 파일을 변환할 수 있도록 도와주는 역할을 함
: 다양한 리소스별로 loader를 설정해 주어야css,scss,ts,tsx,svg등 리소스 파일을 에러 없이 해석할 수 있음
- Webpack의 loader를 생성할 때 옵션으로 설정할 수 있는
test,use,exclude는 각각 무엇을 의미하는가?:
test는 어떤 확장자명의 파일을 컴파일할지 정규표현식으로 명시해주는 것을 의미함
:use는 어떤 loader를 사용할지 명시해주는 것을 의미함
:exclude는 어떤 파일을 제외하고 해석할지 명시해주는 것을 의미함
- 설정한 loader를 Webpack에 적용하려면 어떻게 해야 하는가?
: 구성 파일에
module프로퍼티를 작성한 후, 그 안의rules에 따로 설정한 loader를import해와서 작성해야 사용할 수 있음
ex)module: { rules: [ babelLoader, typeScriptLoader, styleLoaders, styleModulesLoaders, assetsLoader, svgAssetsLoader, ], },
- Webpack의 loader는 개발 중에만, 혹은 배포할 때만 사용하는가?
: 개발 중에도, 배포할 때도 필요하기 때문에 공통적으로 사용하는 Webpack 구성 파일에서
import해야 함
- Typescript 파일을 Webpack에서 사용하려면 어떻게 해야 하는가?
: Typescript loader를 따로 설정해야 하는데, 우선적으로
tsc --init명령어를 사용하여tsconfig.json파일을 따로 설정해야 함
- Typescript loader 설정 시
noEmit옵션 관련 오류가 발생하는 경우 어떻게 해결할 수 있는가?: Typescript와 Babel을 함께 사용하는 환경의 경우 각각 내보낼 파일이 충돌하여 발생하는 오류
: Typescript loader에 따로compilerOptions중noEmit값을false로 설정하면 이와 관련한 오류를 해결할 수 있음
- Webpack에서 CSS 관련 파일을 해석할 수 있도록 하려면 어떻게 해야 하는가?
: 실제 DOM에 스타일링 관련 모듈을 설정해주는 역할을 하는
style-loder를 기본적으로 설정하되, 프로젝트 환경에 맞게css-loader,sass-loader,postcss-loader등을 추가적으로 설정해주면 됨
- Webpack에서
jpg,png,webp등의 이미지 파일을 해석하려면 어떻게 해야 하는가?: 이미지 파일 관련 loader를 설정해서 사용해야 함
- 이미지 파일 관련 loader를 설정하여 사용할 때 Typescript 환경에서 발생하는 문제점은 무엇인가?
: 타입을 명시적으로 지정해야 하는 Typescript 환경의 경우
jpg,png등의 확장자명으로 된 타입을 인식할 수 없기 때문에 오류가 발생함
: 따로 생성한@types폴더 하위에 확장자 관련 타입을 커스터마이징해야 함
- SVGR loader는 무엇이고, 어떻게 사용할 수 있는가?
:
svg포맷의 파일을 React의 컴포넌트로 사용할 수 있게끔 변환해주는 역할을 함
:svg파일을 React에서 사용하려면 자체적으로 엄청 긴svg코드를 HTML에 삽입하거나img요소의src로 경로를 지정해서 삽입해야 하는데, 이는 굉장히 불편함
: SVGR loader를 사용하면 손쉽게svg파일을 React 컴포넌트로 변환할 수도 있고,title요소를svg파일 안에 props으로 추가형 접근성을 향상시킬 수 있음
🔸 Typescript
- Typescript는 무엇이고, 왜 사용하는가?
: 동적 타입 언어인 Javascript에 타입을 지정해주는 것이 Typescript의 역할
: Typescript를 사용하면 타입을 지정하지 않아서 발생할 가능성이 있었던 잠재적 오류를 코드 작성 단계에서 파악하고 수정할 수 있음
- Typescript를 사용하여 어떻게 타입을 지정해줄 수 있는가?
: 매개변수 이름 뒤에
: 타입과 같이 작성하여 해당 매개변수가 어떤 타입으로 전달되어야 하는지 명시할 수 있음
: 함수의 반환 값뒤에도: 타입과 같이 작성하면 해당 함수가 어떤 타입을 반환해야 하는지 명시할 수 있음
- Typescript의
any타입은 무엇인가?: 타입을 지정하지 않으면 암묵적으로
any타입이 지정됨
: 그러나any타입을 사용하면 Typescript를 사용하는 목적에 위배되는 것과 다름없음, 웬만하면 정적으로 타입을 지정해주는 것이 바람직함
- Typescript에서 제대로 된 타입을 지정하지 않아서 경고가 발생하면 정상적으로 컴파일이 되지 않는가?
: 경고가 발생하더라도 컴파일은 정상적으로 가능함, 따로 옵션을 설정하면 오류 발생 시 컴파일을 방지할 수 있음
- Typescript에서 커스텀 타입을 생성하고 싶은 경우 어떻게 해야 하는가?
:
@types등의 폴더 설정 후 그 하위에custom.d.ts처럼 파일을 생성해야 함, 그 후 생성한 파일에 따로 커스터마이징할 타입을 명시하여export하면 사용할 수 있음
