안루피취뽀일기

기본 SyntaxuseState() state의 type을 지정할 때는 위와 같이 Generics 안에 타입을 지정해주면 된다. 그런데 사실 초기값을 지정해주면 알아서 타입을 유추하기 때문에 굳이 지정해주지 않아도 무방하다. 다만, 다음과 같은 경우에는 Generics을 사용해주는 것이 좋다. 상태가 null일 수도 있고, 아닐 수도 있을 때type Information = { name: string; description: string };const [info, setInformation] = useState(null);  상태의 타입이 까다로운 구조를 가진 객체이거나 배열일 때type Todo = { id: number; text: string; done: boolean };const [todos, ..

변수 만들 때 타입 정하기 (타입 실드씌우기) 타입스크립트는 변수만들 때 변수의 타입을 지정가능하다. let 이름: string = 'kim'  변수명 :타입 이렇게 정하면 된다.이게 변수에 실드를 씌운 것!이제 이름이라는 변수는 string 타입이 되며갑자기 숫자 이런걸 할당하려고 하면 실드로 튕겨낸다 (에러가 난다)** 참고! name이라는 변수명은 전역변수로 사용불가능하다. 비슷한 거 여러개 있음 타입은 여러가지가 있다. 자주쓰는 primitive types 들을 소개하자면 string, number, boolean 이런게 있다.let 이름 :string = 'kim';let 나이 :number = 20;let 결혼했니 :boolean = false; 추가로 null, undefined 이런 것도 ..

TypeScript 쓰는 이유= JavaScript + Type문법" JavaScript Superset"  JavaScript는 Dynamic Typing을 제공하기 때문에5 - "3" 원래는 숫자 - 숫자만 가능하지만JS가 알아서 숫자로 바꿔준다..! 이 기능이 편리하긴 하지만 프로젝트 사이즈가 커지게 되면 오히려 단점이 된다. TypeScript는 타입을 엄격히 검사해준다.5 - "3"  :=> TS error : "문자랑 숫자빼는거 이상한데요 빨리 수정하셈"근데 굳이 이거 써야하나..? 하지만 코드 천줄 만줄 짜다보면 ..ㅎㅎ  TypeScript는 에러메세지 퀄리티도 좋다.JavaScript는 에러메세지가 추상적이고 추적어려운 에러가 많다.TS error : "멍청아 숫자넣어야지 왜 문자 넣음"..

저번 게시글에 이어서 상태관리 라이브러리를 파헤쳐보자. Redux까지 저번에 얘기했는데 Redux를 보완한 MobX 2. MobX 1. Action이 실행되면, 2. 상태값이 업데이트되고, 3. 해당 값을 구독하는 곳에 Notify가 되고, 4. 렌더링이 트리거된다. class Counter { number = 0; constructor() { makeAutoObservable(this); } add() { this.number += 1; } } const counter = new Counter() function App() { return ( {count} + ) } 리덕스에 비해 코드량이 훨씬 적고, 상당히 객체지향적인 것을 확인할 수 있다. 리덕스에서는 Reducer를 정의하고, Reducer를 위..

프론트엔드 개발자라면 상태 관리 라이브러리는 필수로 알아야 하는 덕목같은,, 그동안 물론 나의 짧디 짧은 개발 커리어 (프론트엔드개발 경력 약 4개월..)동안에는 React의 useState로 모든 상태관리를 하였으나.. 점점 개발을 하면 할수록 상태관리 라이브러리 사용은 필수 인턴 업무 중 세션/쿠키 데이터 관리가 가장 나에게 어려운 일이였는데 이걸 useState로 관리하기에는 너무 복잡한 일이였다. 한번 상태관리 라이브러리를 이참에 본격 배워서 써보자..! 도전! 리액트 상태관리, 왜 하는데......? 양방향 바인딩을 하는 앵귤러나 뷰와 달리, 리액트는 단방향 바인딩을 지원한다. 즉, 부모의 상태를 자식으로 전달할 수는 있지만(props) 자식의 상태를 부모로 전달하는 방법은 없다. 어떤 분이 물..

모든 오류가 오류 메시지를 제공하지는 않는다.. initial investment를 15,000나 다른 값으로 바꾸면 이 숫자들이 폭등하는 것을 볼 수 있다. 이 오류를 찾는 것은 콘솔에 오류 메시지가 없기 때문에 조금 더 어려울 수 있다. 논리적으로 생각하자 초기에 앱을 재시작하면, 모든 것이 정상적으로 작동한다. 이 말은 오류가 calculateInvestmentResults 함수에서 발생한 것은 아닌 것 같다. 그리고 results부분이나 테이블 자료를 만드는 부분에서 생기는 것도 아닌 것 같다.. 값을 수정할 때만 오류가 생긴다. 그러므로, app 부분에서 일어나는 사용자 입력값을 가져오는 과정에서 연관이 있어 보인다. 이는 사용자 입력을 관리하는 부분을 사용자 입력 부분에서 앱 부분으로 이동했기..

Investment Calculator 개발 중.. 오류발생 정의되지 않은 값의 속성들을 읽어 들이는데 실패함을 알 수 있다. -> valueEndOfYear 속성을 읽는데 실패... 마지막 에러를 보면 이것이 접근하려고 하는 객체가 정의되지 않는 것 같기에 이 속성과 그 안에 저장되어 있던 값에 접근하는 데에 실패한 것이다. 코드의 어느 부분부터 찾아 해결해야 할지 좋은 아이디어를 주고 있다. valueEndOfYear 속성에 접근하는 부분에서 시작해야 한다. Results.jsx 여기 코드가 이 속성에 접근하려고 하는 부분이다. 하지만 이 속성의 사용을 직접 확인할 필요가 없다. 대신, 이 맨위에 오류 메시지의 실제 메시지 뒤에 단순히 이 오류 메시지 밑에 출력인 stack-trace를 얻었다. 이것..

테일윈드 css의 개념은 소규모 유틸리티 css 클래스에 요소를 추가하여 외관을 변경하고 테일윈드 팀에서 사전에 정의한 css 규칙을 사용하는 것이다. https://tailwindcss.com/docs/guides/vite Install Tailwind CSS with Vite - Tailwind CSS Setting up Tailwind CSS in a Vite project. tailwindcss.com