글쓰는쿼카의 PM 여정

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js로 최종 프로젝트 만들기학습내용 : React Hook Form 라이브러리 써보기학습일 : 2024. 8. 12.오류일지React Hook Form 을 왜 쓰게 되었느냐?useState만으로 Input Form 을 관리하는 게 너무 귀찮으니까!!엄밀히 말하면 useState로만 input의 유효성검사 결과에 따라 UI에 변화를 주는 데 한계를 느꼈기 때문이다. 구체적인 예시로 회원가입 페이지를 들 수 있다. 나의 의도는 2가지였다.하나, 인풋에 입력함과 동시에 유효성 검사의 오류메시지를 보여줄 것두울, 중복체크 버튼을 클릭하면 DB 필터링을 거쳐 사용가능한 이메일(또는 닉네임)인지 판별할 것 참 쉬운 건데도 고려할 사항들이 ..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js로 최종 프로젝트 만들기학습내용 : supabase social login (OAuth)학습일 : 2024. 8. 9.오류 일지  카카오톡으로 로그인하기... 드디어 뚫었다.... 내가 해냈다고!!!!!!!!! 내가 만난 소셜로그인의 큰 산은 '카카오톡 개발자센터 설정'과 'users 테이블에 자동 생성하기' 부분이다. 하나, 카카오톡 개발자 센터 설정하기카카오톡 개발자 센터 설정은 supabase의 공식문서만 봐서는 해결할 수 없다. 반드시 블로그 조사가 필수다. 그러나 블로그 자료도 100% 신뢰할 수 없기 때문에 더욱 난감했다. (어떻게 해야 되는지는 다음에 다루도록 하겠다.) 여러 설정 끝에 카카오 서버에 접속할 수 ..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js로 최종 프로젝트 만들기학습내용 : supabase social login (OAuth)학습일 : 2024. 8. 7. 최종 프로젝트 D-12, 6주간의 여정 중 절반이 지나갔다.2주 정도 남은 상태에서 조금씩 성과가 나오기를 바라고 있지만 여전히 엉망진창이라 속상하다. (작업 내용)현재 진행상황 표시: 👈🏽노랑회원가입 페이지로그인 페이지헤더 & 로그인 상태관리마이페이지회원정보 변경(닉네임, 비밀번호)소셜로그인: 카카오톡, 구글 (👈🏽현재 여기!)

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : Next.js로 최종 프로젝트 만들기학습내용 :  React-hook-form학습일 : 2024. 8. 6.처음으로 혼자서 외부 라이브러리를 접목해봤다.로그인, 회원가입, 마이페이지(닉네임 변경, 비밀번호 변경) 등 내가 맡은 페이지는 form 형식이 많다. 기본적으로 각 입력창의 유효성 검사를 거쳐서 이메일이나 닉네임은 중복확인을 해야 하고유효성 검사나 중복확인에서 오류가 발견되면 오류메시지로 보여주며,최종적으로 데이터베이스 테이블에 반영되기까지 일련의 과정을 지나야 한다. useState로 상태를 관리하였는데 한계를 느끼던 중중간발표 이후 최적화 시기에 맞춰 react-hook-form 라이브러리를 사용해보려 한다. 배운 내용 요약1..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_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)평가 기간 : 2024. 6. 24.(월) ~ 6. 28.(금)평가 내용 : 자기개발 영역, 신체 영역, 기타 영역평균 점수 : 3.08점 / 5점 만점평가 기준 요약더보기1) 자기개발 영역 평가 -  항목: 5개데일리루틴(출결, TIL, 코딩테스트) : 매일 제출해야 하는 과제 관련- 출결 : 국비지원 출석(~08:59), 퇴실(21:00~) 인증하기- TIL : today I learned 의미로 개인블로그에 게시글 작성하기- 코딩테스트: 알고리즘 문제를 통해 컴퓨터 사고능력 키우기강의진도 : 매주 제공되는 정규 강의 관련 - 목표) 1일 1주차 완강프로젝트 : 개인 또는 팀프로젝트 작업 관련git push : 깃허브(Github)에 잔디 심기 =..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_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://..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : React 심화주차학습내용 : Tailwind CSS 설치, 초기세팅, 사용법(간단 요약)학습일 : 2024. 6. 27.배운 내용 요약1.  Tailwind CSS 설치 및 초기 세팅- Terminal, tailwind.config.js, src/index.css// Terminal - Bashyarn add tailwindcss postcss autoprefixernpx tailwindcss init -p더보기  yarn add tailwindcss postcss autoprefixer는 다음과 같은 의미를 가집니다.tailwindcss: Tailwind CSS는 CSS 유틸리티 클래스 라이브러리로, HTML 요소에 직접 클래스를 적..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : TypeScript학습내용 : 개인과제(favorite countries) 해설 강의 - 1회독학습일 : 2024. 6. 26. 더보기플러스 주차 발제: https://teamsparta.notion.site/Chapter-5-Typescript-be6c6284615a4d6693d102967730f81e플러스 주차 개인과제 안내: https://teamsparta.notion.site/React-5-ad7e18daff0342aa88e83798a13defe8플러스 주차 개인과제 해설강의: https://teamsparta.notion.site/React-5-202954ea72334880a18901a54847423a[강의자료] TS + Re..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)평가 기간 : 2024. 6. 17.(월) ~ 6. 21.(금)평가 내용 : 자기개발 영역, 신체 영역, 기타 영역평균 점수 : 3점 / 5점 만점평가 기준 요약더보기1) 자기개발 영역 평가 -  항목: 5개데일리루틴(출결, TIL, 코딩테스트) : 매일 제출해야 하는 과제 관련- 출결 : 국비지원 출석(~08:59), 퇴실(21:00~) 인증하기- TIL : today I learned 의미로 개인블로그에 게시글 작성하기- 코딩테스트: 알고리즘 문제를 통해 컴퓨터 사고능력 키우기강의진도 : 매주 제공되는 정규 강의 관련 - 목표) 1일 1주차 완강프로젝트 : 개인 또는 팀프로젝트 작업 관련git push : 깃허브(Github)에 잔디 심기 => (..

로그인, 회원가입 조건1. ID- 빈칸 x- 이메일 형식 O 2. PassWord- 빈칸 x- 6글자 이상 O- 영어, 숫자, 특수문자 3가지 모두 포함 (보류) 3. Recheck PassWord - 회원가입만 해당- 빈칸 x- 2번 PassWord와 일치 4. Nickname - 회원가입만 해당- 빈칸 x- 3글자 이상 O  const validateEmail = (email) => { const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i; return regex.test(email); }; const handleSignUp = async (e) => { if (!email) { alert("이메일 주소를 입..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : React 심화주차 - 아웃소싱 프로젝트학습내용 : 팀프로젝트 역할 세분화 요청학습일 : 2024. 6. 18.내일배움캠프가 국비 사업으로 프로젝트 결과보고서 양식이 많다.이 모든 것을 팀 리더인 내가 다 맡으면 좋겠지만 기한 내 완성하기에 어려움이 있어 팀원들에게 도움을 요청하였다.오늘은 그 내용을 간략하게 작성하고 마무리하겠다. 더보기깃허브 코드 정리(2명) - 정훈, 성준결과보고서PPT 담당 - 소라깃허브 리드미 담당 - 해원시연 영상 촬영 - 주신당일 발표 - 정훈호응(반응) 유도 - 세영

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : React 심화주차 - 아웃소싱 프로젝트학습내용 : 팀회의 : 리더 선정, 코드컨벤션, 깃허브룰, 프로젝트 기획(필수 구현 적용), 피그마학습일 : 2024. 6. 16. 1. 프로젝트 설명 - 프로젝트 주제 : 아웃소싱 프로젝트(아웃소싱 === 외부 API 활용)- 프로젝트 기간 : 2024. 6. 17. ~ 6. 21. (총 5일)- 프로젝트 목표 : (필수 구현 사항)외부 API 활용 : 지도 API - 한국관광공사 API전역 상태 관리 라이브러리: Tanstack Query, Zustand 활용DB 활용 : Supabase- 프로젝트 공지 : https://teamsparta.notion.site/React-8d4ac81b2e97..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)평가 기간 : 2024. 6. 10.(월) ~ 6. 14.(금)평가 내용 : 자기개발 영역, 신체 영역, 기타 영역평균 점수 : 3.83점 / 5점 만점평가 기준 요약더보기1) 자기개발 영역 평가 -  항목: 5개데일리루틴(출결, TIL, 코딩테스트) : 매일 제출해야 하는 과제 관련- 출결 : 국비지원 출석(~08:59), 퇴실(21:00~) 인증하기- TIL : today I learned 의미로 개인블로그에 게시글 작성하기- 코딩테스트: 알고리즘 문제를 통해 컴퓨터 사고능력 키우기강의진도 : 매주 제공되는 정규 강의 관련 - 목표) 1일 1주차 완강프로젝트 : 개인 또는 팀프로젝트 작업 관련git push : 깃허브(Github)에 잔디 심기 =..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : React학습내용 : axion 커스텀 인스턴스(Custom Instance), 인터셉터(interceptor)학습일 : 2024. 6. 13.1. Axios Custom Instance 개념과 필요2. Interceptor 적용하기배운 내용 요약1. Axios Custom Instance 개념과 필요코드가 복잡하고 방대졌을 때를 가정해보자.4,000줄이 넘는 코드, axios 여러 군데 흝어져 있을 때 만약 baseURL 주소나 헤더(Header)가 변경 된다면 모든 axios API를 일일이 손으로 바꿔줄 수 있을까? NOPE!'Axios Custom Instance'를 활용하면 간단하게 해결할 수 있다.! 순수한 Axioxconst..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : React학습내용 : axios - GET, POST , DELETE, PATCH (조회, 추가, 삭제, 수정)학습일 : 2024. 6. 11.1. axios 개념 및 설치/설정2. axios - GET (조회)3. axios - POST (작성)4. axios - DELETE (삭제)5. axios - PATCH (수정)6. axios vs. fetch배운 내용 요약1. axios 개념 및 설치/설정1) axios란? - 공식문서: node.js와 브라우저를 위한 Promise 기반 http 클라이언트- 쉬운 설명: http를 이용해서 서버와 통신하기 위해 사용하는 패키지 2-1) axios 설치yarn add axios 2-2) ax..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : React학습내용 : 비동기 프로그래밍 - Promise, HTTP, json-server학습일 : 2024. 6. 11.1. Promis    1) promise 개념    2) promise 상태    3) 예시코드    4) 활용방법 : promiseAll    5) async/await2. HTTP    1) HTTP 개념    2) HTTP 상태코드    3) HTTP 메서드 및 Rest API(API 명세서)3. json-server    1) 설치 / 설정    2) 서버 실행 / 브라우저 확인 배운 내용 요약1. Promise(본문2 : 공부한 내용이 들어갑니다) 2. HTTP(본문2 : 공부한 내용이 들어갑니다) 3. j..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) #알고리즘 탐험반 #week4학습일: 2024.6. 10.(월)배운 내용 요약1. 재귀함수함수 안에 자신의 함수를 다시 호출하는 함수를 의미합니다. 이러한 재귀함수는 자신의 로직을 내부적으로 반복하다가, 일정한 조건이 만족되면 함수를 이탈하여 결과를 도출합니다.   2. Splice vs. Slice / array.slice vs. string.slice1) Splice vs. Slice ==> 차이점: 기존 요소의 불변성 여부Splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경함// 기본 구문 array.splice(start[, deleteCount[, item1[, item2[, ...]..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) #알고리즘 탐험반 #week3학습일: 2024. 6. 9.(주일)배운 내용 요약1. 절대값 구하기 : Math.abs(a-b)MDN 공식문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/abs let minusNumsSum = Math.abs(numsSum - target); let minusAnswer = Math.abs(answer - target); if (minusNumsSum  타켓(target)과 가까운 거리? (어떻게 구해야 되는 걸까🤔)모든 컴퓨터 언어에는 절대값을 구하는 함수가 있다고 한다. 자바스크..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)평가 기간 : 2024. 6. 3.(월) ~ 6. 7.(금)평가 내용 : 자기개발 영역, 신체 영역, 기타 영역평균 점수 : 3.43점 / 5점 만점평가 기준 요약더보기1) 자기개발 영역 평가 -  항목: 6개데일리루틴(출결, TIL, 코딩테스트) : 매일 제출해야 하는 과제 관련- 출결 : 국비지원 출석(~08:59), 퇴실(21:00~) 인증하기- TIL : today I learned 의미로 개인블로그에 게시글 작성하기- 코딩테스트: 알고리즘 문제를 통해 컴퓨터 사고능력 키우기강의진도 : 매주 제공되는 정규 강의 관련 - 목표) 1일 1주차 완강프로젝트 : 개인 또는 팀프로젝트 작업 관련git push : 깃허브(Github)에 잔디 심기 => ..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)  어디까지 왔을까? 더보기0. 개강 및 OT1. 팀 소개 페이지 미니 프로젝트2. 프로그래밍 기초     2-1. 개인과제     2-2. 개인과제3. 주특기 기초     3-1. 주특기 입문     3-2. 주특기 숙련     3-3. 뉴스피드 프로젝트 ◀️◀️◀️◀️ 여기! 4. 주특기 심화     4-1. 주특기 심화     4-2. 아웃소싱 프로젝트5. 주특기 플러스     5-1. 주특기 플러스     5-2. 심화 프로젝트6. 최종 프로젝트7. 지원 주차1.  프로젝트 설명- 프로젝트 주제 : 뉴스피드 프로젝트(뉴스피드 === 블로그, 커뮤니티, SNS)- 프로젝트 기간 : 2024. 5. 31. ~ 6. 7. (총 8일)- 프로젝트 목표..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 학습주제 : React (숙련주차 팀프로젝트 - 뉴스피드)학습내용 : 게시글 CRUD 구현학습일 : 2024. 6. 6. 1. 트러블 슈팅2. 게시글 작성(Create) 코드3. 게시글 삭제(Delete) 코드4. 게시글 수정(Update) 코드1. 트러블 슈팅 (추가 보충 요함..!)- 삭제가 왜 안 되지? - 버튼 이슈: 상세페이지에서 게시글 수정일 경우 버튼1 : "수정 완료"/ 버튼2 : "수정 취소", 게시글 삭제일 경우 버튼1 : "삭제 완료", 버튼 2 : "삭제 취소"  - 삼항연산자를 간단하게 만들고 싶은데 어떻게 해야 되지? 2. 게시글 작성(Create) 코드▶ 핵심 코드(요약) const handleCreatePost = as..

https://www.npmjs.com/package/uuid uuidRFC4122 (v1, v4, and v5) UUIDs. Latest version: 9.0.1, last published: 9 months ago. Start using uuid in your project by running `npm i uuid`. There are 62792 other projects in the npm registry using uuid.www.npmjs.com 1. installnpm install uuid

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)학습주제: React Redux학습내용: Redux Setting 2. 모듈, 모듈의 구성요소, 스토어와 모듈 연결 확인(useSelector)학습일: 2024. 6. 4.1. Action Values (액션 벨류)//액션 value를 상수들로 만들기const PLUS_ONE = "PLUS_ONE";const MINUS_ONE = "MINUS_ONE"; 2. Action Creators (액션 생성자)// Action Creator를 만들기export const plusOne = () => { return { type: PLUS_ONE, };};export const minusOne = () => { return { type: MINU..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)학습주제 : Redux학습내용 : 리덕스 action creators, action values, payload, Ducks 패턴학습일 : 2024. 6. 5.(수)배운 내용 요약1. Action Creators, Action Values- 참고: https://joymet33.tistory.com/65 2. Payload 1) Payload 란?액션객체에 같이 담아 보내는 것(예: "N을 더해" 라고 할 때 N(=payload)을 액션객체에 담아 리듀서에게 전달)반드시 payload 란 이름을 쓸 필요는 없음{type: "ADD_NUMBER", num: 10} // ??{type: "ADD_NUMBER", number: 10} // ??{type: ..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)학습주제 : Redux 학습내용 : 리덕스 dispatch-useDispatch(), action객체학습일 : 2024. 6. 4.(화)배운 내용 요약- 리덕스 흐름(GIF) : https://velog.io/@annahyr/%EB%A6%AC%EB%8D%95%EC%8A%A4-%ED%9D%90%EB%A6%84-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0 1. 핵심내용1) Action(액션객체)// Action(액션객체) 예시// 함수 선언문 - useDispatchdispatch(action)// 여기서 action을 자세히 풀어보면..{type: "PLUS_ONE"}반드시 type이란 key를 가져야 하는 객체리듀서로 보낼 “명령..

기본정보#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) #00일/94일 학습주제 : Redux학습내용 : 리덕스 소개, 설치, 설정, useSelector학습일 : 2024. 6. 4.(화) 배운 내용 요약1. Redux?전역 상태관리 라이브러리 (전역 상태: Global State / cf. 지역 상태: Local State)(더 쉽게 말해서) '중앙 state 관리소'를 사용할 수 있게 도와주는 라이브러리(패키지) 2. Redux Setting1) 리덕스 설치, 설정코드 작성: https://joymet33.tistory.com/602) 모듈 생성 및 확인 : https://joymet33.tistory.com/61 오늘의 회고칭찬 : 오랜만에 9 to 9 집중한 날!반성 : 개인공부(redu..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)학습주제: React Redux학습내용: Redux Setting 2. 모듈, 모듈의 구성요소, 스토어와 모듈 연결 확인(useSelector)학습일: 2024. 6. 4.1. 파일이름.js - 작성 코드 (예: counter.js)const initialState = { number: 0,};const counter = (state = initialState, action) => { switch (action.type) { default: return state; }};export default counter; 후속 작업 : configStore.js - 카운터 모듈을 스토어에 연결하기import { createStore } fr..

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React)학습주제: React Redux학습내용: Redux Setting 1. 설치, 폴더 구조, 설정코드 작성학습일: 2024. 6. 4.1. 리덕스 설치 - vscode의 Bashyarn add redux react-redux상세 설명더보기yarn add redux react-redux# 아래와 같은 의미yarn add reduxyarn add react-redux 2. 폴더 구조더보기이미지와 같이 폴더 구조를 생성하세요.src 폴더 안에 redux 폴더를 생성redux 폴더 안에 config, modules 폴더를 생성config 폴더 안에 configStore.js파일을 생성합니다.각각의 폴더와 파일은 역할이 있습니다.redux : 리덕스와 관련된 코..