일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 의사클래스
- 부트캠프 #스파르타코딩클럽 #개발일지# #html
- CSS
- 부트캠프 #개발일지 #TIL #Position #위치
- 부트캠프 #개발일지 #TIL #FlexboxFroggy #displayflex #flexbox
- ㅜㄹㄹ
- 알고리즘
- 부트캠프 #개발일지 #TIL #그리드 #CSS
- textContent
- 템플릿스트링
- 결합선택자
- useEffect
- 깃허브오류
- Til
- 부트캠프 #코딩 #개발일지 #프론트엔드 #CSS #TIL
- useState
- querySelector
- React
- js
- 부트캠프 #CSS #개발일지 #TIL #박스모델
- 개발일지
- JS예제
- 리액트
- 부트캠프 #개발일지 #TIL #CSS속성 #float #clear
- 특성선택자
- 부트캠프 #스파르타코딩클럽 #개발일지# #TIL #Javascript #confirm #location.href
- 부트캠프
- 개발일지 #TIL #프론트엔드 #HTML
- appendChild
- 부트캠프 #CSS #개발일지 #TIL
- Today
- Total
목록전체 글 (156)
나의 개발일지
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/4I2RC/btsDJnv9lQQ/WucEIeItqSx893KkWzvnkK/img.png)
setDoc을 통해서 Firebase에 user 정보를 저장하려고 했었다 하 근데 타입스크립트 오류가 발생하였다 타입스크립트 정의하는 건 참 어렵다.. ㅠㅠ 오류가 표시된 곳에 호버를 해봤더니 이런 메세지의 오류가 떴다 (이 호출과 일치하는 오버로드가 없습니다.) 라는 오류가 제일 싫다.. 오류가 났던 이유는 userId가 없을 수도 있어서 타입 정의가 안됐어서 그런 것이었다. undefined가 아니라는 것을 확실히 알려주어야 한다 그래서 userId를 선언해주고 if 문의 인자값으로 넣어주었더니 해결되었다
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/P0nAs/btsDJgRkm0E/Q1pMUcmtQDglqHya5HzaeK/img.png)
로그인을 하면 Authentication 뿐만 아니라 Firebase DB에 저장해야 했다. user의 uid를 통해 다른 페이지에서도 활용해야 했기 때문이다. 그래서 단순히 addDoc을 사용했는데 문제점이 발견되었다. 내가 원했던 것은 users 컬렉션의 문서 이름이 uid로 저장이 되어서 uid로 간편하게 정보를 불러오고 싶었던 건데 addDoc으로 여러 방법을 시도해봤지만 되지 않았다. 열심히 서칭해본 결과 setDoc을 사용하면 된다는 것을 알게 되었다. 그럼 addDoc과 setDoc의 차이점이 뭘까? 우선 공식 문서를 살펴보자. https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ko Cloud Firestore에 데이터 추..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/pMCYl/btsDJZIiE0p/x4MrJFbZRBP1oblwIX9IF0/img.png)
최종프로젝트에서 마이페이지 쪽을 맡게되면서 또 다시 auth 쪽을 구현하게 되었다 그 대신 이번에는 파이어베이스로! https://firebase.google.com/docs/auth/web/start?hl=ko 웹사이트에서 Firebase 인증 시작하기 | Firebase Authentication Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 웹사이트에서 Firebase 인증 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분 firebase.google.com 파이어베이스 공식문서이다. 공식문서를 보면 쉽게 따라할 수 있다 회원가입 const signUp: SubmitHandler = async ({ email, p..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nsVhY/btsEWzWVzTx/la8hrE28Kkt90yhhCKhBK1/img.png)
1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 리액트는 SPA로서, JS로 DOM을 직접 조작하는 대신 가상 DOM(Virtual DOM) 방식을 사용하여 화면 요소를 제어합니다. 이로 인해 직접 변수를 변경하는 것이 아니라 state를 통해 데이터를 관리해야만 변경 사항이 적용될 수 있습니다. 상태 관리는 주로 두 가지 방식으로 구분됩니다. 첫 번째, 지역적으로 상태 관리를 합니다. 해당 컴포넌트에서만 사용되는 state라면 컴포넌트 내에서 선언하여 관리합니다. 두 번째로는 전역적으로 상태관리를 합니다. 여러 컴포넌트에서 공유되는 상태는 전역 상태 관리 라이브러리인 redux를 사용하여 관리하고 서버로 데이터를 받았을 때는 tanstack-query의 queryKey를 통..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/yneRs/btsDsXjDc2q/ek4opL3srJbzplAw6B49A0/img.png)
프로젝트에 캘린더 기능을 추가하도록 했다 우선 결과물이다 (완벽하게 완성된 것은 아님!) 환경오염을 줄이는 습관을 공유하는 글을 쓰면 캘린더에 아이콘으로 표시가 되고 그 밑 숫자는 글 쓴 횟수를 나타냈다 react-calendar를 쓰기 위해서는 설치를 해주어야 한다 npm일 경우, npm install react-calendar yarn일 경우, yarn add react-calendar 기본 코드 작성 import React, { useState } from 'react'; import Calendar from 'react-calendar'; import 'react-calendar/dist/Calendar.css'; const HabitCalendar = ({ date }: any) => { // ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/RLwFd/btsC1H4lIsx/kqrttAECOHC1cR3nMBAv9k/img.png)
🔥 React / TypeScript 최종프로젝트🔥 개발 기간 2024.01.04 - 2024.02-07 프로젝트 명 망고(Mango) - 망해가는 지구를 고치자..! 프로젝트 소개 환경오염을 줄이는 다양한 팁과 정보를 제공하고 공유하는 '친환경 라이프' 사이트 환경보호 생활 습관 정보 제공 환경보호 제품 추천/무료나눔 나의 환경보호 습관(실천) 캘린더 관리 웹사이트를 소개하면서 환경오염에 관한 뉴스/영상 등 정보 제공 기술스택 React Firebase Typescript React-query / recoil 👤팀원 소개 및 WBS & Tasks (추후 각자 맡게될 기능을 더 추가할 예정) 리더 : 박혜민(Ashley) Write: 게시글 업로드 에디터 라이브러리를 활용하여 사람들이 게시글을 올릴 때 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/LJo3X/btsCZj9zgL7/R1kvqP93T1xnA2oLT30uOK/img.png)
✔️ 문제 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. ✔️ 제한사항 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. ✔️ 입출력 예 arr1 arr2 return [[3,4],[5,6]] [[3,4],[5,6]] [[4,6],[7,9]] [[1],[2]] [[3],[4]] [[4],[6]] 💡나의 풀이 const solution = (arr1, arr2) => { let answer = [[]]; // 큰 배열 for문 for (let i = 0; i < arr1.length; i++) { answer[i] = [..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/PPl0u/btsC0aRTnUO/UjVHT4zungDbTpeCLhghok/img.png)
2023.12.31 - [React/과제] - [React/TypeScript] 팀프로젝트 - 주특기 플러스 심화 / 주제는 자유 웹사이트 제작 [React/TypeScript] 팀프로젝트 - 주특기 플러스 심화 / 주제는 자유 웹사이트 제작 🔥 React / TypeScript 팀프로젝트🔥 요구 사항 : 아래 3가지 중에 한 가지를 반드시 활용해서 만들기 💡상 좋아요 또는 북마크 기능에 리액트쿼리 Optimistic Update 적용 무한스크롤 기능에 리액트쿼리 heenee.tistory.com 로그인 및 회원가입 페이지 * 토글 버튼을 통한 회원가입, 로그인 가능 메인페이지 * 읽고 있는 책의 progress bar를 통해 진행 상황을 알 수 있다 * 다 읽은 책이 완주 목록에 출력된다 도서검색 페이..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bJvTkn/btsC86O1sBV/30bTA0kPZ7KhZ62J6qBTX0/img.png)
프로젝트에서 supabase를 통해 로그인과 회원가입을 구현하는 기능을 맡았다 필수로 구현해야 하는 기능 중에 react-hook-form 을 통해 유효성 검사를 하는 항목이 있어서 시도해보기로 했다! 그렇다면, 왜 react-hook-form를 쓰는 걸까? 1. TS를 기본으로 지원한다 2. 로딩 속도가 빠르다 3. 리렌더링 수가 적다 4. 코드량이 적어진다 이러한 장점들로 form을 만들 시, 사용하기에 적합하다! 우선 react-hook-form을 이용하기 위해 설치를 해야 한다. yarn add react-hook-form npm install react-hook-form 타입스크립트를 사용하기 때문에 input의 타입을 정해준다. export type Inputs = { userEmail: st..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bsqTde/btsCTBIQgHf/XoGjQiwkcuBpum1yukGwAk/img.png)
✔️ 문제 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다. ✔️ 제한사항 s는 길이 1 이상, 길이 8 이하인 문자열입니다. s는 영문 알파벳 대소문자 또는 0부터 9까지 숫자로 이루어져 있습니다. ✔️ 입출력 예 s return "a234" false "1234" true 💡나의 풀이 function solution(s) { if(s.length !== 4 && s.length !== 6) return false; for(let i=0; i