JayGo 개발 연습장

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로 접근할..

바닐라 자바스크립트로 여러 페이지를 라우팅 해야 하는 규모의 프로젝트를 연습 삼아 만들어보고 있다. 해당 과정에서 SPA 애플리케이션의 라우팅 하기 위한 방법을 몰라 애를 많이 먹었다. 그 과정에서 알게 된 몇몇 내용들을 정리 차 남겨둔다.라우팅과 SPA규모가 어느 정도 있는 웹 서비스는 하나의 도메인에도 n개 이상의 페이지(화면 전환)가 존재한다. 그래서 어떠한 경로로 페이지에 접근했는지에 따라 클라이언트에 그려지는 화면이 달라지도록 처리해주는 게 필요하다.예를 들어, 어떠한 도메인에 ./라는 경로로 바로 들어오면 메인 페이지가 나오고, ./login이라는 경로를 붙여서 들어오면 로그인 페이지를 보여주고, ./signup이라는 경로를 붙여서 들어오면 회원가입 페이지가 보이도록 처리해 주는 식이다(패스 ..

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

깃 쓸 때 자꾸 오류도 나고 충돌도 나서, 공부 효율이 떨어지는 것 같아 오늘은 깃 공부를 중점적으로 했다.유데미에 있는 강의 들으면서 하나씩 배워나가니, 내가 뭘 잘못했었고, 앞으론 어떻게 관리해야 하는지 대략 감이 잡혔다.로컬에서 add, commit, push, merge하는 법까진 배웠고, 이제 원격 레포지토리 관리에 대해서 공부가 남았다.내일 마저 강의 들으면서 공부해야겠다.연습 겸 만들었던 todo 앱을 조금 더 심화해서 만들어보는 중이다.이번엔 여러 Todo 리스트를 만들어놓고서 종합적으로 관리할 수 있는 서비스로 확장해서 만들어볼 예정이다.지금 부족하다고 느끼는 게 비동기 처리 부분이라서, 간단한 서버를 준비해서 데이터 통신과 비동기 처리 작업을 연습해 볼 예정이다.이 토이 프로젝트만 끝나..