profile
비전공자에서 전문가가 되는 그날까지
태그 목록
전체보기 (118)내배캠(83)내일배움캠프(83)TIL(66)본캠프(36)사전캠프(22)알고리즘(17)팀프로젝트(12)트러블슈팅(12)리액트(8)회고(8)CSS(8)html(7)파이썬(7)Fetch(7)python(7)sql(7)Firebase(6)데이터베이스(6)React(5)kpt회고(5)github(5)CS지식(5)bootstrap(5)데이터(5)KPT(5)git(5)반복문(4)jquery(4)토이프로젝트(4)배열(4)변수(4)조건문(4)함수(4)개인프로젝트(4)구조화(3)비동기(3)데이터타입(3)grid(3)SQL문법(3)JavaScript(3)제어문(3)db(3)Table(3)태그(3)redux(3)API(3)toy project(3)git명령어(2)obs(2)팀프로젝트 회고(2)JOIN(2)js(2)리스트(2)vite(2)프로퍼티(2)form태그(2)배포(2)테이블(2)styled components(2)웹팩(2)promise(2)authentication(2)객체(2)딕셔너리(2)firestore(2)Props(2)로그인(2)자료형(2)부트스트랩(2)제이쿼리(2)프로젝트(2)자료구조(2)sorting algorithm(2)sakila(2)모바일청첩장(2)html태그(2)useEffect(1)useState(1)문서id(1)데이터관리(1)async(1)distinct(1)class(1)while(1)for(1)(1)if-elif-else(1)hr태그(1)Prettier(1)프로그래밍언어(1)compatibility(1)Flexbox(1)env(1)div(1)알고리즘 Code Kata(1)document ready(1)자바스크립트(1)Time Complexity(1)JWT(1)json(1)오류 및 해결(1)redux-toolkit(1)table태그(1)replace(1)회원가입(1)repeat(1)Math.min(1)readme(1)filter(1)프로그래밍(1)regex(1)리액트숙련(1)Big O(1)bool(1)아웃소싱(1)react-query(1)개인과제(1)reset.css(1)조건부 스타일링(1)addDoc(1)모달창(1)useContext(1)useMemo(1)useRef(1)Sort(1)this(1)프로젝트회고(1)정렬알고리즘(1)count(1)DOM(1)rtk(1)mysql(1)if else(1)getdoc(1)구조분해할당(1)useCallback(1)하드웨어(1)Context API(1)condition(1)reduce(1)font(1)모달(1)Java Script(1)onKeyPress(1)프로젝트 회고(1)데이터 타입(1)reverse(1)data(1)Git Graph(1)마크다운(1)gitignore(1)array(1)todoList(1)css언어(1)호환성(1)workbench(1)nosql(1)sakila데이터(1)action creator(1)git ignore(1)semantic web(1)LIMIT(1)커널(1)Grid Garden(1)Math.max()(1)CDN(1)파이어베이스(1)Today I learned(1)기초(1)시스템콜(1)action type(1)TMDb(1).val()(1)else(1)if(1)뉴스피드(1)openapi(1)기본구조(1)운영체제(1)algorithm(1)data structure(1)논리(1)modal(1)css속성(1)Payload(1)시간복잡고(1)OS(1)비관계형 데이터베이스(1)html5(1)기본데이터(1)웹폰트(1)분기문(1)정규표현식(1)React.memo(1)radix(1)javascript강의(1)JSON Server(1)virtual DOM(1)비구조화(1)variable(1)position(1).toggle(1)와이어프레임(1)실습(1)관계형 데이터베이스(1)조건(1)figma(1)동기(1)link(1)npm(1)indexOf(1)DML(1)git push(1)React Hooks(1)스코프(1)flex box(1)오름차순(1)travel vibe(1)REST(1)react router dom(1)fake-api(1)css - box model(1)findIndex(1)Dinamic Route(1)시멘틱 웹(1)형변환(1)color(1)youtubeapi(1)시간복잡도(1)연산자(1)내림차순(1)리덕스(1)Toyproject(1)실행컨텍스트(1)(1)TanStack(1)파이어스토어(1)공간복잡도(1)dotenv(1)Document(1)await(1)
post-thumbnail

2024.03.02 TIL - form태그의 활용!, tanstack-query(todo list), 한 컴포넌트에서 mutate 2개 쓰는법

const TodoForm = ({ onSubmitTodo }) => { const handleSubmit = (e) => { e.preventDefault(); // form태그는 제출 시 자동으로 새로고침되는 특성이 있음 // ⭐️ 새로고침 방지

약 9시간 전
·
0개의 댓글
·
post-thumbnail

2024.03.01 TIL - useRef(모달창 배경 클릭시 닫힘), axios instance, axios

useRef란?리액트에서 특정 DOM요소를 지정하고 싶을 때 유용하게 사용됨ex 1) 화면 렌더링 시 input태그에 커서를 focusing 시키고 싶을 때ex 2) 모달창 배경 클릭 시에도 모달창 닫고 싶을 때DOM 요소 접근방법으로서의 useRef : 특정 DOM요

어제
·
0개의 댓글
·
post-thumbnail

10. Utrend(Youtube API, React Query) - 팀프로젝트 KPT 회고

배포 링크 : https://nbc-outsourcing-project-utrend.vercel.app/github : https://github.com/Sparta-outsourcing-Project/Sparta-outsourcing-Project시

2일 전
·
0개의 댓글
·
post-thumbnail

2024.02.29 TIL - Redux Toolkit 사용법, React query(tanstack)정리, mutation 사용법 2가지, mutation.isPending, firebase(firestore, storage), vercel 오류

✅ 방식 1. mutation으로 정의 후 mutation.mutate()로 사용✅ 방식 2. mutation에 이름 붙이기, 붙여준 이름으로 mutation사용하기https://medium.com/marlinelee2/react-firebase-storage

3일 전
·
0개의 댓글
·
post-thumbnail

2024.02.28 TIL - 팀프로젝트 회고(Utrend)

이번 프로젝트는 수준 별 수업 중 베이직반 수강생들이 모여 팀을 이루었는데, 처음에는 우리끼리도 잘 할 수 있을까 걱정이 되었습니다. 그런데 걱정에 비해 다들 본인이 할 수 있는 최대한을 구현하려 적극적으로 노력하는게 느껴졌고, 결과물 또한 걱정에 비해 긍정적으로 나

3일 전
·
0개의 댓글
·
post-thumbnail

2024.02.27 TIL - youtube API키 발급하기, dotenv 오류, props validation 오류, session storage, firebase 로그인, 소셜로그인, firestore 문서id 지정

youtube API 키 생성하기새 프로젝트 생성검색 > 'youtube data api' > v3 api 찾기 > '사용' 선택프로젝트 > '사용자 인증 정보' > '사용자 인증 정보 만들기' > API키생성중 '키 제한'에서 'Youtube Data API v3'

5일 전
·
0개의 댓글
·
post-thumbnail

2024.02.26 TIL - swiper, slick 비교(slider 리액트 라이브러리)

이번 과제하며 느낀 swiper와 slick 비교장점header의 배너처럼 간단하고 단순하게 넘어가는거 만들기엔 쉬움공식문서가 잘되어있어 처음 접하더라도 쉽게 사용할 수 있음(예시로 보여주는것까진 없지만 비교적 친절한 편)단점자율성이 좀 떨어지는 느낌을 받았음섬세한 작

5일 전
·
0개의 댓글
·
post-thumbnail

2024.02.24 TIL - firestore Vite에서 사용하기, swiper로 slider 만들기

기존 CRA혹은 yarn으로 만든 리액트 프로젝트에서 firestore를 쓰려면 env파일에서 이렇게 쓰면 됐는데,Vite으로 프로젝트를 생성한 경우에는 이렇게 앞에 VITE\_ 이렇게 붙여줘야함config.js에 하던 설정 중 = process.env; 이 부분도

2024년 2월 24일
·
0개의 댓글
·
post-thumbnail

2024.02.23 TIL - 아웃소싱 팀프로젝트 시작(초기세팅)

기업이나 조직이 자체적으로 처리하기 어려운 작업을 외부 업체나 개인에게 위탁하여 수행하는 것지도 API, 유튜브 API, 설문조사 API 등을 사용할 수 있음ex) 사람인, 전기차 충전소 찾기, 지역별 축제 찾기 등프로젝트 주제 : 광고주가 자신의 상품 광고에 적합한

2024년 2월 23일
·
0개의 댓글
·
post-thumbnail

2024.02.22 TIL - 개인프로젝트(팬레터함 심화) 회고, Redux thunk

회고 사용한 기능 : Redux toolkix, axios, json server, JWT 인증/인가 기능별 회고 redux toolkit 처음엔 리덕스 자체도 제대로 이해하지 못한 상태에서 작성되어있는 리덕스 코드를 리덕스 툴킷으로 바꾸려니 뭐가 뭔지도 모르겠

2024년 2월 22일
·
0개의 댓글
·
post-thumbnail

2024.02.21 TIL - 트러블슈팅(JWT 회원정보수정 - 이미지변경 오류, 토큰의 일시적 유효성, thunk, Date.now)

문제 : 프로필정보중 이미지와 닉네임을 변경하면 닉네임만 변경되고 이미지는 JWT서버로 PATCH가 제대로 이뤄지지 않음문제의 코드원인 : 프로필정보를 변경할때는 PATCH로 정보를 넘겨주는것 뿐만아니라 추가적인 과정이 더 필요함!accessToken이 유효한 경우,

2024년 2월 21일
·
0개의 댓글
·
post-thumbnail

2024.02.20 TIL - 트러블슈팅(로그인 401, 리듀서 state수정 오류, 로그인상태 유지, 이미지 preview 및 업로드)

문제 : 로그인시 토큰 전달하여 유저정보를 GET하려는데 토큰 전달이 제대로 안됨(비동기 통신에서 처리 순서의 문제)로직 : 로그인 시 3가지를 실행JWT 서버에 POST 메서드로 로그인 Request 보내기(Response로 유저정보 들어옴 - token, id, n

2024년 2월 20일
·
0개의 댓글
·
post-thumbnail

2024.02.19 TIL - json server, JWT(회원가입, 로그인, 정보수정), 로컬스토리지

json-server 구축하기 json-server 패키지 설치 npm i json-server yarn add json-server root경로에 db.json 파일 생성 -> http://localhost:5002/letters (1번 id에 접근하려면 : ht

2024년 2월 19일
·
0개의 댓글
·

09. 팬레터함 심화(JWT) - 개인프로젝트 KPT 회고

모든 경로를 로그인 페이지로 리디렉션하기 로그인 상태일때만 다른 페이지들 접근할 수 있게하고, 로그인 안된경우는 로그인페이지만 뜨게 만들기! "/"가 기본 홈페이지인데, "/login"으로 정해져있는 로그인 페이지를 메인페이지로 만들려면 어떻게 해야하지? `` 컴

2024년 2월 19일
·
0개의 댓글
·
post-thumbnail

2024.02.16 TIL - 리액트 심화(redux toolkit, slice, json server, axios, interceptor, thunk, 리액트쿼리, throttling, debouncing, 인증/인가, JWT토큰)

Redux Toolkit toolkit : tool(편하게 쓰기 위한 도구), kit(도구를 간편하게 쓰기위한것) = 도구모음 패키지 yarn add @reduxjs/toolkit npm install @reduxjs/toolkit store 구성, action

2024년 2월 16일
·
0개의 댓글
·
post-thumbnail

2024.02.15 TIL - 리액트 비동기 호출(fetch)

fetch : 가져오다 (take와 유사)\-> api 주소를 '가져오다' 정도 따라서, fetch('https://api.example.com/items') \-> url을 가져오겠다!fetch('url') : response를 가져옴\-> respon

2024년 2월 15일
·
0개의 댓글
·
post-thumbnail

2024.02.15 TIL - firebase authentication 정리, 팝업/모달 차이

(이미지 출처)firebase에서 제공하는 로그인, 회원가입 등의 인증 UI로그인, 회원가입 로직을 아주 간편하게 구현할 수 있다는 장 점 !!🔗 firebase authentication 공식 문서firebase 프로젝트 > 빌드 > authentication에서

2024년 2월 15일
·
0개의 댓글
·
post-thumbnail

08. Travel Vibe 뉴스피드(React) -팀프로젝트 KPT 회고

github : https://github.com/picoloman6/nbc_travel_vibe.git배포 주소 : https://nbc-travel-vibe.vercel.app/프로젝트명 : Travel Vibe개발 기간 : 2024.02.07 ~

2024년 2월 14일
·
0개의 댓글
·
post-thumbnail

07. 팬레터함(React) - 개인프로젝트 KPT 회고

React\_그룹 아티스트 팬레터 사이트context API, Redux 전역 상태 관리Router 페이지 이동그룹 아티스트 중 멤버를 선택하여 팬레터를 보내는 사이트입니다.24.01.29 - 24.02.04 (7일간)React, HTML5, CSS3context AP

2024년 2월 14일
·
0개의 댓글
·
post-thumbnail

2024.02.14 TIL - 트러블슈팅(firebase collection()오류, authentication 로그인 로직

firebase collection()오류에러 메시지 : FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFir

2024년 2월 14일
·
0개의 댓글
·