전체 글

원하는 구현기능 1. 모달창을 열고, 사용자가 입력란을 작성한다 2. 모달창의 작성 아이콘을 클릭하면 사용자 입력데이터가 새로운 메모로 화면에 업로드 된다 2번에서 2일 동안을 고민했다. 다음은 내가 시도한 방법과 결과들이다. 1. 상태를 다른 컴포넌트에서 가져오려고 useSelector 사용 (화면이 렌더링될때 초기값만 가져오고, 업데이트가 되지않았다) => 이유는 TodoItem 컴포넌트 내에서 어떤 동작을 하고, 상태를 변경해줘야 하는 경우에 useSelector로 잡아서 쓰는게 맞다. => 그런데, useSelector는 상태변화를 시키는 훅이 아니기 때문에 이 방법도 아니다 2. Redux의 reducer로 상태변화도 시켜보아도 맴돌았다 => 상태변화의 영역이 모달로 제한되는 느낌입니다 3. 부..

코드를 치고 화면을 렌더링 하니 이런 오류가 떴다. 겁먹지 말고, 첫번째 오류부터 해결해나가보겠다.... react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy..

최근들어 프로젝트를 하다보면 자잘한 오류가 많이 난다. 자잘하다고 무시하면 안되는게, 코드 한줄만 잘 못써도 렌더링이 안되서 화면이 흰바탕이 된다. 내가 왜 이렇게 오류가 많이 날까? 생각해보니 나는 참 나쁜 습관을 가지고 있었다. 그래서, 나쁜 습관을 고치기 위한 강력한 해결방법이 필요했다. 난 오늘부터 프로젝트를 하면서 오류를 마주치면, 그 오류의 원인을 파악하고, 해결하는 그 과정을 모두 블로그에 적기로 했다. 어떤 오류는 1시간, 어떤 오류는 2일이나 걸려 해결하기도 하지만, 결론적으로는 문제원인이 무엇이었고, 어떻게 해결했는지가 중요하다고 생각한다. 문제를 차근차근 해결해나간다면, 앞으로 마주할 문제의 경우에는 걸리는 시간이 줄어들 것이다. 1. 영어로 된 에러코드를 읽고, 직관적으로 해석한다...

예전부터 클론코딩보다 내가 디자인부터 손 댄 그런 작업물을 만들고 싶었다... 그래서 시작하게 된 인생관리 웹! 인생관리 웹은 인생을 밸런스 있게 관리해보면 어떨까? 에서 시작되었다. 건강, 돈, 인간관계, 자아실현(취미) 총 4가지 항목에 대해서 목표를 세우고, 진행상황에 맞게 목표기록을 조절할 수 있도록 만들었다. 목표라고 해서 뭔가 거창하게 느껴질 수도 있으나, todolist의 발전적인 버전이라고 생각하면 이해하기 쉽다 피그마를 만들면서, 그래도 나름 괜찮은 디자인에 대해 고민해보게 되었고, 피그마를 만들면서 전체적인 구조나 컴포넌트 파악이 더 쉬워져서 좋았다 (물론 피그마를 만드는 과정은 힘들지만...) 이렇게 메모를 선택하면 편집과 삭제가 가능하도록 모달창을 만들었다. 평소에 사용하던 캘린더 ..

Github Action 이란? Github Action 이란 Github가 공식적으로 제공하는 빌드, 테스트, 및 배포 파이프라인을 자동화할 수있는 CI/CD 플랫폼입니다. 레포지토리에서 Pull Request나 push 같은 이벤트를 트리거로 깃헙 작업 워크플로우(Work Flow)를 구성할 수있습니다 워크플로우는 .yml 또는 .yaml 파일에 의해 구성되며, 테스트,배포 등 기능에 따라 여러개의 워크 플로우로도 만들 수 있습니다 생성된 워크 플로우는 .github/workflows 디렉토리 이하에 위치합니다 YAML 이란? Yet Another Markup Language의 약자로, 사람이 읽을 수 있는 데이터 직렬화 언어를 의미합니다. 여기서 YAML을 YAML ain’t markup langu..

0. 함수타입 자바스크립트 함수가 있을 때, 이 함수를 다른 사람에게 설명하는 가장 좋은 방법은 이 함수가 어떤 매개변수를 받고 어떤 값을 반환 하는지 이야기 하는 것 입니다. 그럼 타입스크립트에서는 어떨까요? 어떤 타입의 매개변수를 받고, 어떤 타입의 값을 반환하는지 이야기 하면 됩니다. /** * 함수의 타입 정의하기 */ //함수를 설명하는 가장 좋은 방법 // 어떤 매개변수를 받고, 어떤 결과값을 반환하는 지 이야기 // 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과값을 반환하는 지 이야기 function func(a:number, b:number){ return a+b; //function func(a: number, b: number): number //return 문을 보고 함수 타..

1. 타입은 집합이다 타입스크립트의 '타입'은 사실 여러개의 값을 포함하는 '집합'입니다. 그리고 이러한 타입(집합)들은 수직관계를 가지고 있습니다 let num1:number =10; let num2: 10 = 10; num1 = num2; 특별히 서브 타입의 값을 슈퍼 타입의 값으로 취급하는 것은 업 캐스팅 이라고 부르고 반대는 다운캐스팅이라고 부릅니다. 따라서 쉽게 정리하면 업캐스팅은 모든 상황에 가능하지만 다운 캐스팅은 대부분의 상황에 불가능하다고 할 수 있습니다. 2. 타입계층도와 함께 기본타입 살펴보기 /** * unknown 타입 => 모든 타입 중 가장 슈퍼타입(전체집합 개념) */ function unknownExam(){ let a:unknown =1; //언노운에 캐스팅되는거 가능(업..

타입별칭 타입 별칭을 이용하면 다음과 같이 변수를 선언하듯 타입을 별도로 정의할 수 있습니다. type 타입_이름 = 타입 형태로 타입을 정의합니다. //타입별칭 type User = { id: number; name: string; nickname: string; birth: string; }; // 같은 스코프 내에서는 중복정의 X function func(){ type User = { // 이 스코프 내에서는 User를 이런식으로 정의, 밖에서는 저런식으로 정의 } } let user: User ={ id: 1, name: "정지응", nickname:"Becky", birth: "1999.06.30", } let user2: User ={ id:2, name:"이동웅", nickname: "이동곰..