목록개발/Next.js (3)
글쓰는쿼카의 PM 여정
#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js - route handler, React useState학습내용 : 닉네임에 대한 유효성 검사, 닉네임 중복 확인 기능학습일 : 2024. 7. 29. 배운 내용 요약 기능 기획 단계1. 무엇을 만들까?마이페이지에서 닉네임을 변경하는 기능을 만들어보고 싶다.유저 입장에서 귀찮은 과정은 빠르게 지나가면 좋기 때문에 타자를 치면서 오류 메시지를 바로 볼 수 있게 하고 싶다.아래 고려해야 할 큰 카데고리 중 2가지만 집중적으로 다루고자 한다. ( 👇🏻 고려해야 할 큰 카테고리)UI 뼈대이벤트 함수이벤트 함수를 통한 화면 변화유효성 검사의 기준 (⭐여기!)데이터베이스 서버 통신이 필요한 부분 (⭐여기!) 2. 유효성 검사 기..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js - route handler, Context API(useContext)학습내용 : useContext 초기세팅, 유저 상태 관리 오류 처리학습일 : 2024. 7. 25.배운 내용 요약 Context API 협업 프로젝트에 적용하기1. 유저 상태 관리가 왜 필요할까?유저의 로그인 상태에 따라 헤더의 오른쪽 끝에 변화를 주고 싶었다.(👇🏻로그인 유무에 따른 헤더 변화)더보기- 로그인 할 경우 : (좌) 배지+유저닉네임 (우) 로그아웃 버튼- 로그아웃 할 경우 : (단독) 로그인 버튼 또, 어떤 페이지에서든 로그인 한 유저 정보('users' 테이블의 userId, nickname, total_point 값)를 사용할 수..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js학습내용 : 넥스트제이에스 설치, 폴더분석학습일 : 2024. 6. 28. 결론, Next.js 가 코딩을 쉽게 만들어주기 때문!- 공식 홈페이지 : https://nextjs.org/더보기1) 쉬운 설정2) Full Stack3) 유용한 기법 제공4) Data Fetching5) 쉬운 베포 - 코딩애플 : https://youtu.be/jYJ3ygUfPrU?si=wAQFStQ94KL7QRH_- 노마드코더 : https://youtu.be/t0UocUiR5-8?si=0zIkjCFZu0U4o5fs- 메타코드M : https://youtu.be/1w70c7x62BI?si=hMfF77lwg8Ev6Lw0 - 베이직: https://..