JayGo 개발 연습장

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

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

Git Branch란?Git은 코드의 변경 이력을 추적 관리하고, 다른 사람과의 협업을 원활하게 하기 위한 도구이다. 그리고, 해당 목적을 위해 브랜치(Branch)라는 개념이 사용된다.프로젝트를 진행하다 보면 작성하던 코드에 오류가 있어서 뒤로 돌아가야 하는 상황이 생길 수 있다. 예를 들어, A 시점까지 커밋을 했다 문제가 생겨 B 시점으로 코드를 되돌리고, 해당 시점에서 기존과는 전혀 다른 방식으로 개발을 이어가게 되는 경우가 생길 수 있다.이 상황에서 A까지 개발이 진행됐던 프로젝트 흐름과 B 시점으로 돌아가서 새롭게 (다른 방식으로) 개발을 진행하는 프로젝트의 진행 흐름은 두 개로 쪼개진 셈이다. 이런 상황을 '브랜치가 나눠졌다'라고 부른다. 실제론 프로젝트가 잘못됐기 때문에 롤백하는 차원에서 ..

form 태그에 이는 여러 기능들을 찾아보면서 사용해 봤다. 사용하면서 유용하다고 생각하게 된 몇 가지 기능들이 있어 내용 정리해 둔다.reset()로그인, 회원가입처럼 하나의 form 태그 안에 여러 input 창들이 있을 경우 submit 이벤트 후 창을 초기화하기 위해 모든 input 창들을 하나씩 선택해 ''으로 초기화해줘야 한다(form 태그의 기본 동작은 input에 들어온 값들을 바로 비워주는 것이지만, 로직 처리를 위해 e.preventDefault()를 사용한 상황을 가정한다). submit 위의 예제에서 form 태그가 속성으로 가지고 있는 ..

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 스타일을 덮어 씌우는 형태로 작업을 하면 된다.컴포넌트에 어떤 값들을 내려줄지를 잘 판단해서 컴포넌트를 설계하자.좋은 설계를 가지고 개발을 시작하면 나중에 가서 부채가 커진다. 어떤 구조로, 어떤 좋은 방식으로 개발할지를 잘 고민하고 개발에 들어가자.그리고 '어떻게 하면 좋을지'에 대한 좋은 답을 얻기 위해 다양한 경험이 필요하다. 좋..

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

프로젝트에 Git 설치하기: git init터미널을 켜서 프로젝트를 관리할 위치로 이동한다. 이동에는 cd 명령어를 사용하고, 디렉토리를 터미널로 드래그해서 넣으면 절대 경로가 생성된다. 해당 방식으로 쉽게 원하는 디렉토리로 이동이 가능하다.cd {절대 경로}처음 디렉토리에 위치하면 아직 Git이 설치되지 않은 상태이다. Git은 로컬에서 동작하는 설치 프로그램으로, 터미널에 git init 명령어를 치면 쉽게 설치할 수 있다. Git을 설치하면 .git 폴더가 숨김 처리되어 생성되고, 해당 폴더에서 다양한 버전 히스토리가 관리된다.Git 상태 확인하기: git statusGit에는 크게 세 가지 상태(영역)가 있다(현재 디렉토리의 깃 상태를 확인하기 위해선 git status 명령어를 사용하면 된다)...

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

Git이란?Git 홈페이지에 가면 아래와 같이 Git을 정의하고 있다.Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.해당 정의에 나와있듯이, Git은 '버전'을 '분산'해서 관리하는 도구이다.하나의 큰 프로젝트를 만들다 보면 개발의 진행 상황을 중간 저장해서 체크 포인트를 만들어야 할 필요가 생긴다. 만약 체크 포인트가 없이 개발한다면 개발을 쭉 하다가 과거 시점으로 코드를 되돌리고 싶을 때 과거 해당 시점부터 그 이후에 작성된 코드들을 하나씩 제거해 나가면서 롤백을 해야 할 ..