지연응답
https://www.heropy.dev/p/71PGfA
👆 지연응답 블로그 링크
Fetching과 Loading의 차이
<h2>{isFetching ? "가져오기 중.." : "가져오기 완료!"}</h2>
<h2>{isLoading ? "가져오기 중.." : "가져오기 완료!"}</h2>처음에는 둘 다 같이 반응하지만 다시 가져올때는 fetching만 반응한다. 이유는isFetching은 매회 발생하는것이기 때문에.
https://www.heropy.dev/p/HZaKIE#h5_상태_확인
👆 상태확인 블로그 링크
구분법: 한번에 처음에만 나오면 되는것은 로딩, 블로그 방문자수 표시 같은 매번 불러오는것은 페칭
https://www.youtube.com/watch?v=EWfujNzSUmw
👆 실행 컨텍스트 영상 추천
data, loading, fetching 정도만 자주 사용됨
GC(Garbage Collection): 비어있는 메모리를 수거해가는 것
메모리는 관종이다.. 쓰레기차가 돌면서 수거하는건데 “너 바라보는게 있어없어?!”하고 없으면 가져가버림 (솔로지옥ㄷㄷ)
두개의 코드가 같다는걸 구분하는건 queryKey를 보면 된다. 안에 내용이 달라도 키값이 같다면 같다.
queryKey를 고유하게 유지시켜야한다.
zustand는 상태관리(저장소 store) tanstack은 서버상태관리
tanstack을 쓰면 zustand 비중은 자연스럽게 줄어든다.
TanStack
마운트와 렌더링의 구분이 필요하다. 마운트가 일종의 렌더링까지 포함(빨간 부분)
retry쿼리 실패 시 재시도 횟수는 2번-3번이 적당하다. 횟수가 너무 많으면 사용자들이 떠나기 때문에 적당한게 좋다.
throwOnError는 기본값이 undefined지만 true로 설정해주면 좋다. 그래야 에러객체를 제대로 받을수있다.
Zustand
https://www.heropy.dev/p/n74Tgc
👆 zustand 핵심정리 블로그 링크
**Zustand(주스탠드)는 작고 빠르며 확장 가능한 React 프로젝트에서 사용하는 상태 관리(Store) 라이브러리**
서버 상태관리 = 리액트쿼리
클라이언트 상태관리 = 주스탠드 많이 쓰는 듯
api를 여러번 찌르지 않아도 되고 그중에서 필요한 상태관리를 하면 된다
Q&A
Q:
온보딩 프로젝트때 기능정의서, 요구사항정의서, 프로젝트정의서를 각각 작성해 보았는데 실무에서도 세 개를 다 작성해야 하는 걸까요? 사실 세 개가 비슷해 보여서 어떻게 구분해서 넣어야 하는지도 알려주시면 감사하겠습니다!
A:
각 정의서는 정의하는 사람이나 조직에 따라 의미가 조금씩 다를 수는 있습니다.
굳이 순서를 매기면, 프로젝트 정의서 => 요구사항 정의서 => 기능 정의서 순으로 정리할 수 있고, 각 문서는 생략하거나 합치거나 필요에 따라서 순서를 바꿀 수도 있습니다.
프로젝트 정의서는 프로젝트의 개요나 목적 등을 정의하는 문서입니다.
프로젝트의 목표나 일정이나 예산, 인력 등을 정리해서 프로젝트를 진행하기 위한 전반적인 정보를 담습니다.
그러니까 토이 프로젝트(과제)를 진행하는 입장에서의 프로젝트 정의서는, 이 과제를 진행함으로써 얻고자 하는 목표나 목적을 정의하는 문서가 될 수 있는데, 수강생 입장에서는 필요하지 않을 수도 있겠죠!
요구사항 정의서는 강의에서 설명한 것처럼 사용자의 요구사항을 정의하는 문서입니다.
사용자가 원하는 기능이 무엇인지 정리해서 이를 바탕으로 개발을 시작할 수 있습니다.
토이 프로젝트에서는 김민태 강사님이 작성하신 과제 문서가 일종의 요구사항 정의서가 될 수 있겠습니다.
기능 정의서는 프로젝트의 구체적인 기능을 정의하는 문서입니다.
어떤 기능을 개발할 것인지를 정리하는데, 토이 프로젝트를 진행하는 팀에서 구현하고자 하는 기능을 정리한 문서가 되겠죠!
예를 들어, 댓글 기능에서 댓글을 작성하고 수정할 수는 없다거나 삭제는 가능하다거나 등의 구체적인 기능을 정의하는 문서로 볼 수 있습니다.
프로젝트 정의서는 프로젝트의 전반적인 목표나 목적을, 요구사항 정의서는 사용자의 요구사항을, 기능 정의서는 프로젝트에서 구현하고자 하는 기능을 각각 정의하는 문서로 이해하시면 될 것 같습니다.
참고로 명확히 정해진 문서 양식이나 구성은 없습니다.
필요에 맞게 문서화하거나 생략하거나 하면 되니까 너무 얽매일 필요는 없어요!
Q:
그리고 위에서 작성한 정의서를 깃허브 레포할때 리드미에도 넣는 게 좋은 건가요? 리드미에서는 대체적으로 어떤 정보를 넣어야 하는지 어느 정도 길이로 글을 작성하는 게 적당한지도 궁금합니다!
A:
정의서와 저장소의 README.md 파일 내용은 완전히 별개의 내용입니다.
정의서는 앞서 설명드린 것처럼 각 목적에 맞게 작성해야 하고, README.md 파일은 프로젝트나 저장소의 설명을 적는 문서입니다.
보통 시작하는 내용이 다음과 같이 어떻게 프로젝트를 설치할 수 있는지에 대한 내용입니다.
npm i && npm run dev그 외에 프로젝트를 확인할 때 주의사항이나 사용법 등을 적는 게 좋겠습니다.
Q:
프로젝트 폴더를 어떻게 구성하면 좋은지 아직 잘 모르겠어서 ,, 프로젝트를 시작할 때 폴더 구조는 어떻게 이루어지면 좋은지 전체적으로 간단하게 부탁드립니다. 컴포넌트를 기능별, 페이지별로 나누는 것 같은데 컴포넌트 폴더를 구성할 때 고려되는 사항이 어떤 게 있고, 각 파일들을 어떻게 배치하면 좋은지 설명을 듣고 싶습니다.
결론 : 프로젝트 폴더 및 파일들이 어떻게 이루어지는게 맞는건지 알고 싶습니다.
A:
'컴포넌트'라는 기준으로 어디에 두느냐에 따라서 폴더 구조가 달라질 수 있습니다.
예를 들어, routes 폴더에 있는 컴포넌트는 각 페이지의 정보를 가지는 단위 이고, components 폴더에 있는 컴포넌트는 재사용하거나 캡슐화하는 단위 로 볼 수 있습니다.
단지, React 프로젝트에서 .jsx나 .tsx 확장자를 가진 파일을 컴포넌트라고 지칭하는 것이고, 사용하는 위치에 따라서 부여할 수 있는 의미가 달라지니, 폴더 구조도 그에 맞게 만들어서 사용하면 됩니다.
Q:
추후에 개발 포트폴리오를 만들 때 노션으로 할까 생각 중인데 혹시 추천하시는 방법이 있을까요? 최대한 웹사이트로 만들어야 할까요? 프로젝트는 팀과 개인을 분리해서 몇 개씩 넣어야 좋을까요?
A:
포트폴리오 정리나 이력서, 자소서 등을 노션으로 만드는 경우가 많은 듯합니다.
보기에 편하고 정보를 잘 전달할 수 있다면 어떤 방법이든 상관없습니다.
그런 의미에서는 GitHub 프로필 페이지도 중요하다고 볼 수 있습니다.
그리고 웹 개발자가 웹사이트를 만들어서 포트폴리오를 보여줄 수 있다면 더 좋겠지만, 그만큼 시간도 많이 들어갈테니 필수는 아니라고 봅니다.
프로젝트는 많을 수록 좋지만, 규모도 중요합니다.
간단한 프로젝트 10개 보다 깊이 있는 큰 규모의 프로젝트 1개가 더 좋을 수 있습니다.
팀과 개인 작업을 개수로 나누지 말고, 한 번에 포함해서 보여주고 가볍게 태그로 구분하면 충분합니다.
Q:
그리고 면접 때 연봉에 관한 질문을 받을 때마다 곤란한데 어떻게 대답하면 좋을지 모르겠습니다.. 경험이 있으시다면 조언해 주실 수 있으실까요?
A:
연봉은.. 참 어렵기는 합니다.
꽤 우수한 실력의 수강생분이 3000 수준에 취업하는 경우도 봤고, 의아하게 5000 이상 받는 경우도 봤습니다.
수준에 맞는 회사 선정과 입사 전략이 필요하겠지만, 제가 그에 대해서는 전문성이 떨어져서 자세한 조언은 힘드네요.
개인적인 생각에 개발자는 실력을 비교적 쉽게 인정 받을 수 있는 직업이라고 보기 때문에, 첫 회사 연봉이 중요하기 보단 내가 성장 가능한 조건을 가진 곳인지 확인하는 게 더 중요하다고 생각합니다.
첫 연봉이 높아도 지속적인 개인의 성장 의지가 없으면, 이후에 정체되는 경우가 상당히 많습니다.
Q:
다음 달부터 시작될 코딩 테스트가 너무 걱정됩니다. 아직 개발도 못하는데 코딩테스트도 같이 공부를 하는 게 맞을까요? 프로그래머스, 백준을 계속 풀어보는게 도움 된다고 들었는데 혹시 따로 알려주실만한 공부법이나 조언 같은 게 있으실까요?
A:
당연히 사용 언어는 자바스크립트겠지만, 코딩 테스트는 프론트엔드 개발과 별개로 보셔야 합니다.
프로그래머스나 백준의 쉬운 문제 위주로 지금부터 꾸준히 공부해 보세요.
코테는 기본적으로 알고리즘이나 문제 해결 능력을 보는 것이라서 많이 풀어보는 것 말고는 방법이 없다고 생각합니다.
Q:
바닐라 자바스크립트에서 변수 앞에 $를 최대한 붙이는 게 좋은 코드인 걸까요? id 값에도 #을 붙이는 경우가 있던데 어떤 게 읽기 좋은 코드인 걸까요?
A:
변수 이름 앞에 $ 기호를 붙이는 경우가 있는 건, 대부분 예전에 쓰던 jQuery 문법 영향입니다.
예를 들어서 $btn, $input 같이 변수 이름을 만드는데, 예전에 var $btn = $('#btn') 이런 식으로 사용했기 때문입니다.
자세한 문법 설명은 필요하지 않고, btnEl, inputEl 같이 사용하시면 충분합니다.
id 값에 # 안 붙이는 경우가 어디에 있지요?
document.getElementById('btn')는 메소드 이름에서 알 수 있듯, id 속성의 값으로 요소를 얻는 것입니다.
document.querySelector('#btn')는 CSS 선택자를 사용해서 요소를 얻는 것이니, 두 메소드의 전혀 사용법이 다릅니다.
혹시 이걸 말씀하신 게 맞을까요?
Q:
강사님께서는 해커톤 참여 경험이 있으신지 궁금합니다. 그 외에 따로 개발자 밋업이나 커뮤니티, 어떤 식으로 네트워킹을 하시는지 궁금합니다!
A:
아뇨, 해커톤 참여 경험은 없습니다.
개발자 밋업이나 기타 커뮤니티는 구글 검색으로 직접 찾아서 다녔던 것 같습니다만, 요즘에는 워낙 정보를 쉽게 얻을 수 있어서 거의 참여하지 않네요.
Q:
현재는 개발자라는 목표가 있어 달성하기 위해 노력하고 있지만 개발자가 되고 난 후는 한 번도 생각해 본 적이 없습니다. 개발자가 되고 난 후에는 어떤 마음가짐으로 끝없는 공부를 하고 동기부여를 해야 할까요? 강사님은 현재 저희가 원하는 개발자라는 목표를 이루신 분이라 어떻게 공부하고 동기부여를 하시는지 궁금합니다!
A:
AI 때문에 앞으로 개발자의 역할이 어떻게 바뀔지 잘 그려지지 않네요.
그래도 지금까지의 경험으로 보자면, 꾸준히 계속해서 공부해야 한다는 건 확실합니다.
가끔 지겹기도 하지만, 그만큼 고급 인력이 된다는 생각도 있어서 저도 계속 공부하고 있습니다.
지금 저의 동기부여는 통장의 입금 내역입니다.
각자의 동기부여 원천이 다를 것이고, 앞으로 달라질 거라 생각해서 지금 상황에서 즐거움을 찾아보세요.
