JayGo 개발 연습장

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

토이 프로젝트: 심리 테스트 서비스 만들기토이 프로젝트로 심리 테스트 서비스를 만들었다.자신의 결혼 생활 유형을 확인할 수 있는 심리테스트다.생각한 기능은 대부분 구현이 됐다. 그런데, 아직 선택지와 결과 도출 로직이 덜 정교해서 테스트 결과가 잘 안 맞는 것 같은 문제가 있다. 내일 조금 더 손 봐볼 생각이다.개발하면서 배운 점하위 컴포넌트의 상태를 상위 컴포넌트에서 통합 관리하는 법상태를 각각 정의하고, 상태마다 setState로 업데이트 로직을 별도 관리하기상태 관리와 로직 처리를 컴포넌트 계층 기준으로 구분하기미디어 쿼리를 이용한 반응형 처리history API, window.location.hash 프로퍼티를 사용한 SPA 서비스 라우팅 방법(시행착오 과정 별도 포스팅 예정)Vercel을 이용한..

동물 앨범 만들기효빈님 JS 강의에 있는 동물 앨범 만들기 실습을 진행했다.TODO App 한번 만들다 보니 컴포넌트 단위로 모듈을 쪼개고, App.js에서 통합으로 상태를 관리하는 방식이 상대적으로 익숙해졌다.대신, 아직 비동기 처리에 대한 부분이 많이 부족한 것 같다고 느꼈다.많이 해보지 않았으니 당연하다. 조급해하지 말고, 내일부터 다시 차근차근 공부해 봐야겠다.fetch, axios 문법 공부하기Promise 객체에 대한 상세 내용 + 활용에 대해 추가 공부하기async await에 대해서도 공부하기토이 프로젝트 준비간단한 심리 테스트? 서비스 아이디어가 떠올라서 진행해보려 한다.오늘 GPT랑 같이 논의하면서 간단한 기획은 마쳤고, 내일부터 작업에 바로 들어갈 수 있을 것 같다.간단한 서비스지만,..

TODO APP 만들기생각한 정도의 TODO APP 기본 기능을 만드는 데 성공했다.하나의 서비스를 만들기 위해 어떤 상태를 어디서 관리해야 하는지, 또 로직은 어디서 어떤 식으로 짜야하는지, 고민할 게 한 두개가 아니라는 걸 느꼈다.또, 내가 생각할 땐 '이렇게 짜면 잘 돌아가겠다' 했던 게 실제로 개발을 하다보니 예상치 못한 사이드 이펙트를 만들어내서 애를 먹기도 했다. 구조나 설계에 대한 부분을 시간을 두고 잘 고민해본 다음에 개발에 들어가야겠다는 생각을 했다.그리고, 개발을 하면서도 '지금 짜는 이 코드가 나중에 어떤 영향을 만들어낼까'라는 걸 계속 고민하는 습관을 가져야겠다. 당장 돌아가는 코드를 짜는게 중요한 게 아니다.TODO APP 만들어보긴 이 정도로 하고, 내일부턴 인프런에 있는 한 번..

TODO App 만들기자바스크립트 모듈을 이용해서 컴포넌트를 쪼개고, App.js에서 통합으로 상태를 관리할 수 있도록 애플리케이션을 만들었다.상위 컴포넌트인 App.js에서는 최대한 '상태의 관리'에 집중하고, 뷰를 그리는 것과 로직을 처리하는 것들은 하위 컴포넌트에서 처리되도록 하기 위해 고민했다(쉽지 않았다).하위 컴포넌트에서 로직을 처리하면서 변경되는 상태는 다시 App.js로 끌어올려서 의존이 있는 다른 컴포넌트의 setState()를 호출해 변경된 상태를 등록해줘야 한다. 그러기 위해 App.js에 있는 setState() 메서드를 하위 컴포턴트들의 파라미터로 전달하고, 하위 컴포넌트에서 상태의 변화를 상위 컴포넌트인 App.js의 setState()에 인자로 전달했다.해당 방식으로 하다보니,..

Udemy 클린코드 자바스크립트>임시 변수의 사용을 줄이자. 로직을 처리하기 위해 임시로 변수를 생성해서 사용할수록 예상치 못한 동작과 사이드 이펙트가 많아질 수 있다.임시 변수를 사용하지 않고 바로 로직 처리해서 리턴할 수 있는 값이면 그렇게 하자. 함수 내에 선언된 임시 변수를 통해 추가적인 수정을 하고 싶다는 유혹을 애초에 없애야한다.함수의 스코프는 좁을수록 좋다. 함수마다 각자의 고유한 역할을 부여하고, 고유한 역할 외의 로직은 다른 함수로 떼서 처리하자.전역 공간을 더럽히지 말자. 모듈, IIFE, 클로저 등을 사용해서 전역 공간을 사용하지 않는 방향으로 변수 선언을 해보자(IIFE, 모듈, 클로저에 대해 각각 좀 더 공부해봐야겠다).바닐라 JS로 TODO App 만들어보기상태는 App.js에서..