글쓰는쿼카의 PM 여정

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

기본 정보#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) #35일/94일 #알고리즘(탐험반) #week3학습일: 2024. 6. 4.(화)배운 내용 요약1. 자바스크립트 전역함수 Infinity절대 답(예: 최소값)이 될 수 없는 수로 대체하는 방법을 새로 배웠다. Alice = nums[minIndex]; nums[minIndex] = Infinity; 2. While문의 조건 활용빈 배열인 arr의 길이가 nums의 길이와 같아지면 반복문은 끝난다는 것을 이번에 새로 배웠다. while (arr.length  3. 배열의 자리(index)를 변수로 활용배열의 최소값을 찾는 함수(for문)를 재사용할 수 있었다.(예: Alice 찾기, Bob 찾기)정답(Alice, Bob)과 기존 배..

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

0. 기본정보#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) #31일/94일 - 학습주제 : [베이직] [리액트 2강] useState 응용 예시와 컴포넌트  - 학습내용 : useState 응용예시 - 할일목록(TodoList)- 특별사항 : [특강] 좋은 개발잘의 비밀 by 최원장 튜터- 학습일 : 2024. 5. 29.1. 배운 내용 요약▶ 제출하기 === input값 저장▶ Todo 삭제하기 버튼 구현하기▶ Todo 수정하기 버튼 구현하기 1) form> 제출하기 === input값 저장 const handleSubmit = (e) => { e.preventDefault(); // falsy한 value는 저장하지 않기 : if, trim() if (!value.tri..

0. 기본 정보#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) #30일/94일 어디까지 왔을까?더보기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.  프로젝트 설명- 프로젝트 주제 : 개인 지출 관리 애플리케이션- 프로젝트 기간 : 2024. 5. 20. ~ 5. 29. (총 10일)- 프로젝트 목표 : ..

0. 기본 정보- 학습일: 2024. 5. 27.(월)- 출처: 스파르타 부트캠프 알고리즘 탐험반(2주차 문자열)문제 1-1. 두 문자열 포함 여부 파악하기// 문제 정의:// 주어진 두 문자열에서 첫 번째 문자열이 두 번째 문자열에 포함되는지 여부를 확인하시오. 포함된다면 true, 포함되지 않는다면 false를 반환하시오.// 단, 'include' 함수는 사용하지 마시오.// 예시:// 입력: "abc", "aabcc"// 출력: true// 입력: "abc", "def"// 출력: falsefunction isSubstring(s1, s2) { //여기에 답을 작성하시오} 나의 답변 1-1)글자 s2[i]가 글자 s1[0]과 일치한다면 비교하기for문 활용 - 반복횟수: s2.length - s1..

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

0. 기본 정보- 학습일: 2024. 5. 25.(토)- 출처: 스파르타 부트캠프 알고리즘 탐험반(1주차 문자열)문제 2-1. 문자열에서 가장 많이 등장한 문자 찾기// 문자열에서 가장 많이 등장한 문자 찾기// 문제 정의:// 주어진 문자열에서 가장 많이 등장하는 문자를 반환하라. 만약 여러 개라면 그 중 아무거나 반환하라.// 조건:// 대소문자를 구분한다.// 공백도 하나의 문자로 간주한다.// 예시:// 입력: "banana"// 출력: 'a' 나의 답변 2-1)이전과 동일한 방법 : 빈 객체 answer, for문 안에 if문( ...없으면 1로 선언, 있으면 +1 증감)----------------------------------------------------------------------..

0. 기본 정보- 학습일: 2024. 5. 24.(금)- 출처: 스파르타 부트캠프 알고리즘 탐험반(1주차 문자열)문제 1. 문자열 내 각 문자의 개수 반환// 문제 1: 문자열 내 각 문자의 개수 반환// 문제 정의:// 주어진 문자열에서 각 문자가 몇 번 등장하는지 세어라. 결과는 객체 형태로 반환한다.// 조건:// 대소문자를 구분한다.// 공백도 하나의 문자로 간주한다.// 빈 문자열이 주어질 수도 있다.// 예시:// 입력: "hello world"// 출력: {'h': 1, 'e': 1, 'l': 3, 'o': 2, ' ': 1, 'w': 1, 'r': 1, 'd': 1}// 입력: "hello World"// 출력: {'h': 1, 'e': 1, 'l': 3, 'o': 2, ' ': 1, 'W..