행복을 담는 블로그

enum v.s. object literal 비교해보기 enum : 열거형 데이터 타입으로, 상수의 그룹화를 할 수 있는 아주 좋은 타입이다. ✅ enum의 장점 코드의 가독성을 높이고, 명확한 상수 값을 정의할 수 있다. 컴파일 시, 자동의 숫자 값이 할당되므로 따로 값을 할당할 필요가 없다! enum UserRole { ADMIN = "ADMIN", EDITOR = "EDITOR", USER = "USER", } enum UserLevel { NOT_OPERATOR, // 0 OPERATOR // 1 } function checkPermission(userRole: UserRole, userLevel: UserLevel): void { if (userLevel === UserLevel.NOT_OPER..

any, unknown, union 타입 1. any 타입 : typescript에서 어떤 타입의 값이든 다 저장할 수 있는 슈퍼 타입 object 타입과 같은 최상위 타입이라고 생각할 수 있다. ex) let anything: any; anything = 5; // 숫자 타입으로 초기 설정 anything = 'Hello'; // 문자열 가능 anything = { id: 1, name: 'John' }; // JSON 형태로 가능 🧐 any를 typescript에서 써도 되나요? typescript를 사용하는 이유는 프로그램의 타입 안정성을 확보하기 위함! 근데 any 타입을 사용하면, 타입을 지정하는 것이 아니기 때문에 코드 안정성과 유지 보수성을 저해할 수 있다..! ..

타입을 왜 제대로 알아야 하는가? 📌 변수란? : 프로그래밍 언어에서 데이터를 저장하는 공간 변수에 저장되는 데이터는 여러가지 타입을 가진다. 숫자, 문자열, 논리값, 배열, 객체 등 ✅ 타입을 잘 못 사용하는 경우? 잘못된 타입을 사용하면 오류가 발생한다. 컴파일 타임에 오류가 발생하지 않고, 실행 시간에 발생하여 오류 발생 시점을 찾기가 어렵다. ✅ 타입 안정성과 코드 품질 타입 안정성이란 예상한 타입대로 코드가 동작함을 보장한다. 타입 안정성이 높을수록 코드 품질이 좋아지며 오류를 줄 일 수 있다. 코드 안정성이 향상되며, 테스트와 디버깅 시간을 줄일 수 있다! ✅ 원활한 협업에도 도움! 타입을 명확하게 명시하면 코드의 가독성이 높아진다. 다른 개발자들이 이해하기 쉽고, 유지보수가 용이하다. 기본 ..

패키지 설치하기 yarn add react-router-dom 페이지(원래 단일 페이지) 컴포넌트 작성 -> 다중 페이지 Router.js 파일 생성. router를 구성하는 설정 코드 작성 (ex : redux 할 때도 설정 파일을 따로 만들어 주입함) App.jsx import 하고(2번) 적용 : 주입 페이지 이동 테스트 원래 페이지 localhost:3000/여기 router라는 주소가 들어간다. React router hook useNavigate : 특정 버튼을 눌렀을 때, 다른 페이지로 이동하도록 하는 기능을 제공한다. html의 a 태그랑 비슷하다 /* pages > Works,jsx */ function Works() { const navigate = useNavigate(); retur..

Error: listen EADDRINUSE: address already in use :::5000 아니 나는 분명 port 5000을 사용한 적이 없는데, db.json 파일을 json-server로 열려고 하니 이미 5000 포트가 사용 중이라고 에러가 났다. 진짜 뭐지 왜지 했는데... 이게 윈도우에서는 netstat -aon 을 사용하면 해당 port의 PID를 알 수 있고, 이 포트가 어디에서 사용되고 있는 포트인지를 확인 할 수 있다고 한다. 근데 맥북에서는 내가 원하는 값이 안 나와서 서칭을 하다보니 아래 코드로 확인해 볼 수 있었다. sudo lsof -iTCP -sTCP:LISTEN -n -P 찾았다 요놈! 찾아보니 5000 port 에는 ControlCe 가 연결이 되어 있는데, 바로..

원래는 CRA로 계속 프로젝트를 진행하다가 이번에 처음으로 vite을 쓰는 중인데,,, 그동안 안 나던 error가 알게 모르게 계속 나는 것 같다.. 그 중에서 오늘 하루종일 제일 거슬렸던 건 바로, 이 props 로 받아온 값이 계속 유효성 검사에서 누락되었다는 경고가 옆에 뜨는 것이었다. 🚨 'children' is missing in props validation근데 심지어 console.log 값도 잘 찍히고, 브라우저에서는 아무런 에러도 뜨지 않는단 말이지,,, (그냥 코드 짜는 내내 너무 거슬렸음) 그래서 막 구글링을 해보니, 부모 컴포넌트로부터 전달받은 props 중에서 특정한 prop이 컴포넌트의 PropTypes에 정의되지 않았을 때 발생한다고 한다. 즉, 해당 props..

2. useEffect : 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅 컴포넌트가 화면에 보여졌을 때 컴포넌트가 화면에서 사라졌을 때 input에 값을 입력 value, 즉 state가 변경 state가 바뀌었기 때문에, App 컴포넌트가 리렌더링 리렌더링 되었기 떄문에, useEffect()가 계속 실행 1~4 반복 **Dependency Array (의존성 배열)**라는게 필요하다 이 배열에 값을 넣으면, 그 값이 바뀔때만 useEffect를 실행한다. 의존성 배열에 아무 값도 넣어주지 않아도 동작하고 있다. = 어떤 값을 입력하던지 간에, 의존성 배열이 비어 있기 때문에, 화면이 가장 처음 시작할 때만 렌더링 된다. useEffect(() =>..

1. useState 📌 정의 가장 기본적인 hook으로, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다. ✅ 기본 형태 const [state, setState] = useState(initialState);▶️ 원래는 useState라는 함수가 배열을 반환하고, 이 배열을 구조분해할당으로 꺼내 놓은 형태이다. state를 변수로 사용, setState를 이용하여 state 값을 수정한다. ++ state가 원시 데이터가 아닌 객체 데이터 타입일 경우 불변성을 유지 해야한다. useState의 업데이트 방식 // 기존 업데이트 방식 setState(number + 1); // 함수형 업데이트 방식 setState(() => {}); 초기값이 0인 number를 setNumber를 통해 +1 씩 증가하..