FE 3

리액트 빌드 npm run build 따라하기만 해봤다면 이것도 봐봐.

리액트 빌드 글에 은근 수요가 있다. 내가 궁금했던 것 들을 다른 초보 개발자들도 궁금해하리라 믿고 내가 알고 있는 지식을 조금 더 풀어볼까 한다. 실제로 뭔가를 해보고 따라 해보는 글은 아니다. 이런 내용도 있구나 알면 검색할 때 도움이 될 테니 빌드해보라니까 해 본 사람들에게만 바친다.빌드를 하면 뭐가 실행되는걸까?이것도 모르고 난 그냥 빌드를 했다. 이건 빌드뿐 아니라 start, dev에도 적용할 수 있다. 우리는 패키지 매니저를 사용하는데 보통 npm, yarn을 사용한다. 그럼 npm run build만 하면 끝일까?타입스크립트로 예시를 들어볼까 한다. 타입스크립트를 배워보면 tsc라는 커맨드를 사용해 보게 되는데 컴파일하는 과정을 입력한다 생각하면 된다. 이런 컴파일  과정에서 타입검사를 ..

FE/React 2024.06.04

리액트 - Javascript에서 Switch Case 사용하기

배경 JS로 코드를 짜다보면 Python과는 다르게 가독성이 부족하다 생각 들 때가 있다. 그게 오늘이었는데 길어지는 if문을 피하기 위한 방법 중 하나로 Switch를 알게 되었고, 이를 공유해 보고자 기록한다. Switch문이란? if문을 대신할 수 있는 문법으로 if문의 조건식은 boolean값이 들어가지만 switch는 문자나 숫자 등의 값이 주로 들어간다. 때문에 switch문은 case에 따라 실행할 코드를 정하는데 이 때 case에 조건식은 들어갈 수 없음을 주의해야 한다. switch case는 if보다 코드 읽기가 쉬워 코드가 조금 더 간결해 보인다. 또 순서가 중요하지 않다면 사용을 고려해 볼 만하다. 기본 문법 switch문은 switch의 값과 case를 비교해 일치하는 경우 해당 ..

FE/React 2023.07.12

리액트 빌드하기

빌드 관련해서 글을 하나 더 써봤다. 초보에게는 도움이 될 지 모르겠지만 키워드라도 알아가면 좋겠다. 고수는 피드백 환영이다!이것도봐봐 빌드란react는 개발자의 소스코드 상태에서는 무겁기도 하고 웹브라우저는 jsx파일을 알아듣지를 못합니다. 그래서 자신의 소스코드를 사람들에게 배포를 하기 전 불필요한 데이터를 없애고 html로 바꾸는 작업이 필요한데 이때 빌드를 하게 됩니다.빌드하는 방법프로젝트마다 상황은 다르겠지만 기본적으로 빌드는 아래 명령어를 터미널에 입력하는 것만으로도 끝이 납니다.npm run build 예시 파일파일생성작동이 되는 것을 보기 위해 리액트 앱을 하나 생성 하도록 하겠습니다npx creat-react-app build-app다른 기능은 필요하지 않고 빌드로 얻는 장점만 하나 ..

FE/React 2023.07.10