JayGo 개발 연습장

Udemy 컴포넌트의 주목적은 UI를 렌더링 하는 거다. 그러니 상태를 변경하는 로직이 컴포넌트 내부에 비대해지는 것은 원래 목적과는 조금 다른 방향이 될 수 있다.useState 훅으로 만든 상태와 상태 변경 함수는 컴포넌트 내부에서만 사용 가능하다. 때문에, 상태 변경 로직을 컴포넌트 외부로 떼는 게 어려우며, 이런 문제를 해결하기 위해 등장한 것이 useReducer이다.useReducer를 이용하면 컴포넌트 외부에서 상태를 변경하는 로직을 사용할 수 있다.[state, dispatch] = useReducer(reducerFunc, initState) 형태로 사용하고, useReducer의 첫 번째 인자로 전달한 reducerFunc를 컴포넌트 밖에 선언하는 식으로 활용한다. reducerFunc..

Udemy Git 스태스(Stash) 사용 관련 내용하나의 브랜치에서 작업을 하다 다른 브랜치로 옮기고, 다시 기존 브랜치로 돌아가서 파일을 수정해서 커밋하고, 생성했던 브랜치로 돌아가보자. 그 상황에서 갈라져 나온 브랜치에서 작업을 하면 두 개 브랜치는 따로 갈라진 상황이 된다.그 상황에서 갈라진 브랜치의 작업을 하던 도중 커밋을 하지 않고 갈라져 나오기 전 브랜치의 커밋 위치로 이동하려고 하면 에러가 발생한다. 보통 이런 상황에선 갈라진 브랜치에서 생긴 변경 사항을 기존 커밋의 코드에 덮어씌우는 형태로 이동하는데, 그 과정에서 충돌이 발생할 수 있어 Git이 먼저 에러를 발생시킨 거다.이런 상황에서 git stash(git stash save의 축약형) 명령어를 사용할 수 있다. stash는 임시 저..

TODO APP 만들기TODO Item 토글했을 때 토글 여부가 서버에 post 요청으로 보내지도록 수정했다.덕분에 Goal 탭이 바뀔 때마다 todo 완료 여부 표시가 변경되는 문제를 해결할 수 있었다.API 명세를 잘 보니 done 여부를 표시하는 필드, 전체 할 일의 progress를 표시하는 API 엔드포인트가 전부 있었다. 항상 API 명세를 사전에 잘 보고 개발에 들어가자.Udemy 함수 인자의 개수 몇 개가 적당한지에 대한 정답은 없다. 맥락에 잘 어울리면 된다.그렇더라도, 인자가 너무 많아져서 고나리가 어려울 경우 객체를 인자로 넘기고 객체 구조 분해 할당을 활용하자.객체 구조 분해 할당을 사용하더라도, 필수로 넣어줘야 하는 인자가 별도로 있다면 객체에서 빼주는 것도 좋다. (name, {..

토이 프로젝트element.classList.toggle을 해주면 클래스 명이 있으면 없애고, 없으면 추가해 준다. class 이름을 바꿔주고 CSS에서 선택자로 디자인을 다르게 먹여서 토글 이벤트를 만들어낼 때 유용하다.input 창의 type="checkbox"는 이벤트 발생 시 자동으로 checked라는 속성을 추가한다. 만약에 여기서 수동으로 토글 처리를 해주면 아무 이벤트도 일어나지 않는 것처럼 보일 수 있다.React 공식 문서React에서 use로 시작하는 모든 것은 훅(Hook)이다. 훅은 React가 렌더링 중일 때에만 사용할 수 있는 특별한 함수다.훅은 컴포넌트의 최상위 수준 또는 커스텀 훅에서만 호출할 수 있다. 조건문, 반복문 또는 기타 중첩 함수 내부에서는 훅을 호출할 수 없다.훅..

Todo 앱을 다시 만들었다. 경험이 없다 보니 좋은 구조에 대한 여러 시행착오가 있었는데, 반복해서 할수록 어떠한 판단을 할 때 '이건 이런 문제가 생길 수 있어서 덜 좋다'라는 걸 생각하는 힘이 생기는 것 같아서 뿌듯했다. 물론 아직 부끄러울 정도로 부족한 실력이라, 앞으로 좀 더 많은 노력을 해야겠다.유데미 클린코드 자바스크립트 강의를 들었다.객체 구조 분해 할당을 최대한 많이 활용하자. 특히, 함수의 파라미터를 전달할 때 순서를 신경 쓰지 않아도 되도록 하거나, 필수이 파라미터와 옵셔널 한 파라미터를 구분할 수 있게 해 준다.Object.freeze를 쓰면 객체를 동결할 수 있다(Read Only로 만들어준다). 단, Object.freeze는 참조 타입 복제처럼 얕은 동결로 실행된다. 재귀적으로..

하위 컴포넌트의 상태는 상위 컴포넌트에서 관리하자. 또는, 상태를 원활하게 관리하기 위한 도구가 있다면 적절하게 사용하자.Gti 원격 레포지토리에 수정할 내용이 있으면(e.g. 브랜치 이름 등) 로컬에서 수정한 후 푸시한 뒤 원격 레포지토리에 기존 브랜치를 삭제하자. 원격 브랜치의 기존 내용을 유지하면서 커밋 히스토리를 수정하는 건 어렵다.오늘 많은 시간을 공부에 쏟지 못했는데, 개인적인 사정 때문에 어쩔 수 없었다고 생각한다. 내일부터 다시 긴장 빡 하고 잘해보자.

async를 붙인 함수의 리턴 값은 반드시 Promise 객체이다.따라서, async를 붙인 함수의 리턴 값을 받아서 처리하는 곳도 비동기로 처리가 돼야 한다. Promise 객체는 동기적으로 처리되지 않고 항상 비동기적으로 처리되며, 비동기 처리 완료 시의 로직을 붙여야만 기대하는 방식대로 동작할 수 있다.객체 또는 배열이 참조 타입이라는 걸 활용해서 async가 사용된 함수 안의 값을 리턴 값이 아니라 객체-배열에 담아서 빼올 수 있긴 하다. 하지만, 이 방법이 더 좋은지에 대해서는 아직 유즈 케이스가 많지 않아서 스스로 확신이 서질 않는다.페이지를 나눠서 SPA 애플리케이션을 개발할 때, 상태를 어디에서 어떻게 관리할지에 대해 다시 고민해봐야겠다. 최상단 App을 두고, 그 밑에 페이지들을 엮은 상..

form 태그에 대해 조금 더 자세히 공부하게 됐다.form 태그로 input 태그를 감싸고 값을 받으면 action 속성에 지정한 경로로 바로 request를 보낼 수 있다. 이때, 요청의 body에는 FormData 객체가 직렬화되어 결과로 전달된다.form 태그를 사용하면 결과를 FormData 생성자로 만든 객체에 받을 수 있다. 해당 객체를 사용하면 내부에 있는 input에 들어온 값들을 캐치할 수 있다. 이때 get, getAll, values 등이 사용된다.form 태그를 잘 사용하려면 input 태그에 name 속성을 적절하게 지정해줘야 한다. input 태그의 name 속성은 FormData 객체의 keys로 접근할 수 있고, 해당 키가 등록된 input 태그의 값을 values로 접근할..

Todo App 상위 호환 버전 개발 중, 구조가 너무 안 좋아서 개발이 어려워져서 처음부터 새롭게 다시 시작했다.컴포넌트를 나눠서 개발할 때 중요한 점은 '재사용성'이다. 재사용에 용이한 방식으로 컴포넌트를 설계해야 한다.페이지마다 컴포넌트를 다른 스타일을 먹여서 사용하려면 컴포넌트의 생성자 함수 인자로 원하는 클래스명을 내려주고, 해당 클래스 명으로 원래 정해진 CSS 스타일을 덮어 씌우는 형태로 작업을 하면 된다.컴포넌트에 어떤 값들을 내려줄지를 잘 판단해서 컴포넌트를 설계하자.좋은 설계를 가지고 개발을 시작하면 나중에 가서 부채가 커진다. 어떤 구조로, 어떤 좋은 방식으로 개발할지를 잘 고민하고 개발에 들어가자.그리고 '어떻게 하면 좋을지'에 대한 좋은 답을 얻기 위해 다양한 경험이 필요하다. 좋..

상위 호환 버전 TODO APP 만들기API에 요청을 보내고, 받아온 응답을 처리하는 경험이 부족했는데, 많은 연습이 됐다.오늘 연습해 보면서 알게 된(또는 다시 기억하게 된) 내용들fetch로 보낸 요청의 응답은 프로미스 객체다. 응답의 결과를 확인하기 위해선 then 키워드를 사용하거나, 아니면 asnyc-await 문법을 사용해야 한다.fetch 요청의 두번째 인자를 보내지 않으면 GET 요청이 된다. POST 요청을 보내기 위해선 두 번째 인자에 객체를 전달해야 하고, 객체엔 method, headers, body 정보가 담겨있어야 한다. POST 할 데이터는 body에 담아서 보낸다.fetch로 body에 데이터를 담아 보낼 땐 직렬화(Serialization)를 해야 한다. JSON객체의 St..