1. 빌드빌드란?빌드란 개발자가 작성한 소스코드를 브라우저가 실행가능한 형태로 변환하는 과정입니다. 빌드 도구프론트엔드엔 다양한 빌드도구가 존재합니다.예시로 webpack, vite, esbuild, rollup.js , parcel, 등이 있습니다. 2. 빌드 과정속에 일어나는 일1. Transpiling우리가 작성한 타입스크립트 코드는 브라우저가 해석할 수 없어요.자바스크립트 문법이 아니기 때문입니다.리액트의 JSX 문법도 해석할 수 없기 때문에 변환과정이 필요해요.브라우저가 해석할 수 있도록, 브라우저가 아는 문법으로 변환하는 트랜스파일링 과정이 필요합니다.추가로, 타입스크립트를 사용하면 타입체킹 과정이 빌드과정에 포함되어 있어요.흔히 들어본 폴리필도 빌드과정에 지원되지 않는 문법을 해석할 수 있도..
🌳Frontend/etc
이 게시글은 실무에 바로 적용하는 프런트엔드 테스트 강의를 듣고 정리한 게시글 입니다. 더 자세한 내용과 예시는 강의 참고를 추천드립니다. 올바른 테스트 코드를 작성하려면 어떤 규칙이 있을까요? 1. 테스트코드는 인터페이스 기준으로 작성합니다. React 컴포넌트를 컴포넌트한다고 했을 때, 컴포넌트 내부의 state를 강제로 직접 변경해서 테스트하는 것이 아닌, 컴포넌트와 통신할 수 있는 외부의 인터페이스를 통해 테스트를 해야 합니다. 위의 코드는 `SpecificComponent` 의 `isShowModal` state를 강제로 수정하여 테스트하고 있어요. 이럴때 생기는 문제점은 뭐가 있을까요? 1. 변경되는 상태가 많은 경우, 테스트코드 상에서 하나하나 직접 변경해주어야 합니다. 2. 어떤 상황에서 ..
문제상황 나는 react프로젝트가 아닌, node.js 기반 프로젝트를 만들고 있었다. 환경변수 셋팅이 필요해 dotenv 라이브러리를 설치했고, 가이드대로 `.env` 파일에 `key=value` 로 환경변수를 셋팅했다. `process.env.환경변수` 를 읽었으나, 값이 `undefined` 가 뜨는 이슈 발생 원인 및 해결방안 환경변수를 사용해주기 위해 라이브러리 import 및 명령어를 사용하지 않았기 때문 아래와같이 config 를 해주자. import dotenv from 'dotenv' dotenv.config() console.log(process.env.API_KEY) 출처 https://programmers-sosin.tistory.com/entry/Error-Node-%EC%97%9..
https://careerly.co.kr/qnas/5100 주니어 프론트 개발자인데 매일 자괴감을 느낍니다 저는 2년차 프론트엔드 개발자로, 스타트업에서 일하고 있는데요. 기능 개발 일정을 맞추느라 더 좋은 코드를 고민하거나 적용하지 못하고, 당장 돌아가는 코드를 짜기... careerly.co.kr 지금 내 상황과 너무나도 유사한 고민이었다. 그 중, 가장 와닿은 답변은 인기답변으로 채택된 답변인데, 되새김질을 하기 위해 정리를 해보고자 한다. 😥 나 자신이 코드기계처럼 느껴져요 개발일정을 맞추느라 더 좋은 소스를 고민하는 것 보다, 당장 돌아가느 코드를 짜기에 급한 상황. 꼼꼼하게 짜지 못하다 보니, 버그도 많이 나오는 상황. 어떻게 해야 더 좋은 코드를 짜고 건강을 지킬 수 있을까? 이는 개발자로 ..
