JayGo 개발 연습장

Udemy Git Hash를 사용할 때 앞에 7자리만 사용해도 된다. git log --oneline을 실행하면 축약된 로그를 볼 수 있고, 여기엔 7자리로 축약된 해시가 있다.일반적으로 Git에서 head는 branch를 가리키고, branch는 해당 브랜치의 가장 최신 커밋을 가리킨다. 즉, head와 branch는 보통 일치된 상태이다. 하지만, git checkout 를 통해 이전 커밋으로 이동한다면 head와 commit이 분리된 상태가 된다(detached 된 상태가 된다). 이런 상황에서 커밋이나 어떠한 동작을 하려고 하면 Git은 에러를 뱉어준다.해당 상황에서 head를 다시 가장 최신 커밋이 있는 branch 위치로 이동시키고 싶다면 그냥 git switch 을 해주면 된다. 상당히 간단..

Udemy Props Drilling이 발생하면 유지 보수도 어렵고, 디버깅도 어려울 수 있다. 이런 상황을 위해 리액트는 상태를 좀 더 쉽게 관리할 수 있도록 createContext 메서드를 제공한다.createContext는 컴포넌트들이 상태를 등록하고 사용할 수 있는 Context를 제공한다. Context는 애플리케이션에서 전역적으로 접근하고 싶은 데이터를 저장할 수 있는 공간이다.createContext는 보통 컴포넌트 외부에서 정의하고 호출한다. 컴포넌트 리렌더링 시 새로운 Context를 계속 다시 만들면 비효율이 발생하고, 관리되는 상태에 문제가 생길 수 있기 때문이다.createContext()의 결과로 생성된 컨텍스트 객체에는 provider와 consumer라는 메서드가 존재한다. ..

Udemy 함수명은 동사로 시작하도록 짓자.input 태그의 required를 설정해주면 필수로 값을 요구할 수 있고, minlength 어트리뷰트에 값을 넣어주면 최소 글자수를 검증할 수 있다.input 창 입력 시 유효성 검증에서 문제가 발생하면 문제가 생긴 곳에 자동으로 포커스되게 해주거나, 유효성 검증에서 문제가 생긴 이유를 명확하게 보여준다거나, 이와 같이 User Friendly하게 개발을 하도록 항상 노력해야 한다. 에러 메시지를 alert 해준다거나 안내 문구를 띄워줄 땐 누구나 이해할 수 있도록 쉽고 직관적이게, 그리고 이후 유저의 동작이 유도되도록 포커스-하이라이트 하는 등의 UX를 클라이언트 개발자로서 신경쓰자.React로 TODO APP 만들기onChange 이벤트 핸들러의 이벤트 ..

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

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는 참조 타입 복제처럼 얕은 동결로 실행된다. 재귀적으로..

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..