나의 개발일지

✔️ 문제 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요. ✔️ 제한사항놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수처음 가지고 있던 금액 money : 1 ≤ money ≤ 1,000,000,000, money는 자연수놀이기구의 이용 횟수 c..

🔥 React / TypeScript 팀프로젝트🔥 요구 사항 : 아래 3가지 중에 한 가지를 반드시 활용해서 만들기 💡상 좋아요 또는 북마크 기능에 리액트쿼리 Optimistic Update 적용 무한스크롤 기능에 리액트쿼리 useInfiniteQuery 적용 form 유효성검사에 react-hook-form 라이브러리 적용 Yarn Berry 적용하여 깃헙관리 Supabase 적용 위 기능 중 2가지를 적용하여 프로젝트 만들기 💡 중 redux 외의 다른 전역상태관리 라이브러리 적용 debounce 또는 throttle(Lodash) 함수를 사용하여 API 요청이나 이벤트 핸들링 성능 개선하기 json-server-auth 적용 위 기능 중 1가지를 적용하여 프로젝트 만들기 💡하 redux-toolki..

https://sweetalert2.github.io/#examples SweetAlert2 SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 매번 흔히 사용하는 못생긴 alert 창 말고 sweetalert을 이용하여 모달창을 띄워볼 것이다! 설치부터! npm install sweetalert2 import 불러오기 import Swal from 'sweetalert2' examples 카테고리에 많은 샘플들이 있는데 난 굳이 커스텀 필요가 없어 코드를 그대로 가져왔다 근데 문제점이 생겼다 이렇게 떠야지..

supabase는 이메일 뿐만 아니라 여러 소셜 로그인이 가능하다 구글 로그인을 위한 공식문서가 있다 사용법은 아주 간단! https://supabase.com/docs/learn/auth-deep-dive/auth-google-oauth Part Five: Google OAuth | Supabase Docs _10 const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'google' }) supabase.com 구글 로그인 로직 또한 공식 문서를 참조하면 된다 https://supabase.com/docs/guides/auth/social-login/auth-google Login with Google | Supabase Doc..

✔️ 문제 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. ✔️ 제한사항 1 ≤ left ≤ right ≤ 1,000 ✔️ 입출력 예 absolutes signs result 13 17 43 24 27 52 ✔️ 입출력 예 설명 수 약수 약수의 개수 13 1, 13 2 14 1, 2, 7, 14 4 15 1, 3, 5, 15 4 16 1, 2, 4, 8, 16 5 17 1, 17 2 따라서, 13 + 14 + 15 - 16 + 17 = 43을 return 해야 합니다. 💡나의 풀이 function solution(left,..

supabase는 오픈 소스 백엔드 서비스로 데이터베이스 및 인증, 스토리지 등 다양한 기능을 제공하는 플랫폼이다 팀프로젝트를 하면서 supabase를 처음 접해보았다 같은 팀원분이 사용해봤었는데 firebase의 공식문서보다 친절하다고 했다 써보니 무슨 말인지 잘 알 것 같다^^ supabase 설치 npm install @supabase/supabase-js yarn add @supabase/supabase-js supabaseClient.ts 파일 import { createClient } from '@supabase/supabase-js'; type SupabaseConfig = { supabaseUrl: string; supabaseKey: string; }; const supabaseConfi..

✔️ 문제 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. ✔️ 제한사항 absolutes의 길이는 1 이상 1,000 이하입니다. absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. signs의 길이는 absolutes의 길이와 같습니다. signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다. ✔️ 입출력 예 absolutes signs result [ 4, 7, 12 ] [ true, false, true ] 9 [ 1, ..

✔️ 문제 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. ✔️ 제한사항 str은 길이 1 이상인 문자열입니다. ✔️ 입출력 예 s return "Zbcdefg" "gfedcbZ" 💡나의 풀이 function solution(s) { return [...s].sort().reverse().join(""); } s라는 문자열을 배열로 만들어주고, sort로 오름차순, reverse로 역순(뒤집기), join으로 다시 문자열 만들기

function App() { // call Signatures type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; return ; } export default App; 여기서 { a + b } 를 써주었을 때 왜 오류가 발생하는지에 대해 아리송했는데 밑에 댓글에서 친절하게 설명해주었다 type Add = (a: number, b: number) => number; 1. const add: Add = ( a, b ) => a + b; function add = ( a, b ) { return ( a + b ) } 2. const add: Add = ( a, b ) => { a + b }; function add =..

Redux-toolkit(RTK)이란 기존의 리덕스를 개량한 것이다 코드는 더 적게, 그리고 더 편하게 개발했다 기존의 리덕스와 다른 점은 Action Value와 Action Creator, Reducer가 하나로 합쳐졌다는 점이다 리덕스 툴킷 설치 // NPM npm install @reduxjs/toolkit // Yarn yarn add @reduxjs/toolkit RTK에선 Slice라는 API를 사용한다 //createSlice API 뼈대 const counterSlice = createSlice({ name: '', // 이 모듈의 이름 initialState : {}, // 이 모듈의 초기상태 값 reducers : {}, // 이 모듈의 Reducer 로직 }) RTK로 counter..

react-memo memo(React.memo) : 컴포넌트를 캐싱 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트는 모두 리렌더링 되는데 자식 컴포넌트는 바뀐 것이 없는데 리렌더링이 된다면 너무 비효율적임 이러한 문제점을 돕는 게 바로 memo다 src > App.jsx import { useState } from "react"; import Box1 from "./components/Box1"; import Box2 from "./components/Box2"; import Box3 from "./components/Box3"; function App() { console.log("App 컴포넌트가 렌더링되었습니다"); const [count, setCount] = useState(0); const o..

useContext의 필요성 props-drilling의 문제점을 개선 하기 위해 필요하다 useContext는 전역 데이터 관리를 할 수 있게 되었다 주의할 점 useContext를 사용할 때, provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링이 되기 때문에 value부분을 항상 신경써줘야 한다! 할아버지가 손자에게 어떠한 정보를 주기 위해서 거쳐야 하는 과정은 App → GrandFather → Father → Child 이다 단순한 정보이면 모를까 전달해야 할 데이터가 100가지가 넘는다면 너무나도 복잡하고 비효율적일 것이다 Props-drilling 적용 코드 src > App.jsx import GrandFather from "./co..

✔️ 문제 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. ✔️ 제한사항 n은 길이 10,000이하인 자연수입니다. ✔️ 입출력 예 n return 3 "수박수" 4 "수박수박" 💡나의 풀이 function solution(n) { let answer = ""; for (let i = 1; i

staleTime > 0인 경우, 가져온 데이터는 그 시간 만큼 fresh한 것으로 간주 staleTime = 0인 경우, 가져온 데이터는 즉시 stale한 것으로 간주 inActive - 특정 쿼리에 대한 모든 옵저버(observer)가 제거되었을 때 발생 - 해당 데이터를 사용하는 컴포넌트가 더 이상 마운트되지 않거나 해당 쿼리를 구독하는 컴포넌트가 없을 때 이 상태에서는 데이터가 캐시에서 자동으로 삭제되기 전까지 일정 기간 동안 유지 - inActive 에서 다시 fresh 상태가 될 수 있다! : 이전에 사용되었던 쿼리 키를 가진 컴포넌트가 재마운트 되면 해당 쿼리는 다시 활성화가 된다 이때 staleTime이 아직 지나지 않았다면 데이터는 여전히 fresh 상태로 간주된다 staleTime 기본..

✔️ 문제 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. ✔️ 제한사항 s는 길이가 1 이상, 100이하인 스트링입니다. ✔️ 입출력 예 s return "abcde" "c" "qwer" "we" 💡나의 풀이 function solution(s) { var answer = ""; //홀수인 경우 if (s.length % 2 === 1) { // s[인덱스] answer = s[(s.length - 1) / 2]; } else { answer = s[s.length / 2 - 1] + s[s.length / 2]; } return answer; } 감이 잘 안 잡혔는데 인덱스를 구하면 되는 거였다..

🔥 TypeScript 개인과제 🔥 TypeScript버전으로 react-query를 이용하여 TodoList 만들기 (모든 구현 사항은 Typescript로 작성돼야 한다) Todo 항목 추가 하기 - 사용자가 새로운 Todo 항목을 입력하고 추가 할 수 있는 기능. Todo 항목 목록 표시 기능 - 각 Todo 하목은 고유 식별자를 가짐 Todo 삭제 하기 - 삭제 시 사용자에게 삭제 확인 요청 Todo 완료 상태 표시 기능 - 사용자가 Todo 항목을 완료했음을 표시한다 src > api > todos.ts import axios from "axios"; // 조회 const getTodos = async (): Promise => { try { const response = await axios...

✔️ 문제 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. ✔️ 제한사항 arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. ✔️ 입출력 예 arr result [4,3,2,1] [4,3,2] [10] [-1] 💡나의 풀이 function solution(arr) { // 배열 길이가 1이면 [-1] 반환 if (arr.length === 1) { return [-1]; } // 최소값 구하기( 최소값..

✔️ 문제 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. ✔️ 제한사항 1 ≤ numbers의 길이 ≤ 9 0 ≤ numbers의 모든 원소 ≤ 9 numbers의 모든 원소는 서로 다릅니다. ✔️ 입출력 예 numbers result [1,2,3,4,6,7,8,0] 14 [5,8,4,0,6,7,9] 6 💡나의 풀이 function solution(numbers) { var answer = 0; for (let i = 0; i cur + acc, 0); } 생각도 못한 풀이! 0 - 9 까지의 숫자를 다 더한 값은 45인데 담겨..

// 명시적으로 타입을 지정해주지 않으면 오류 발생 function Todos(props : {items : string[]}) { return ( Learn React Learn TypeScript ) } 리액트에서 props는 언제나 객체 형태이다 정리하자면 props는 객체고, items를 키로 가지며, 문자열 배열을 값으로 갖는다는 것 이런 식으로 매번 지정하는 것은 번거롭다 그래서 제네릭 타입을 이용한다! import React from "react"; // React.FC ==> 이 함수가 함수형 컴포넌트로 동작한다는 걸 명확히 하는 것 // FC 자체가 제네릭 타입이다 안에는 우리가 만든 객체를 집어넣는다 const Todos: React.FC = (props) => { return ( {p..

let age: number age= 12; age = 'a' // 오류 발생(위에서 명시한 건 number, 하지만 문자로 썼음) let userName : string; userName='heewon' let isInstructor : boolean; isInstructor=true; number 과 같은 타입은 소문자로 작성한다. more complex types let hobbies : string[] // let hobbies : number[] // let hobbies : boolean[] hobbies = ['sports', 'cooking', 122] // 오류 발생 (뜬금없이 숫자열이 껴있다) hobbies = ['sports', 'cooking'] ** any : 기본값으로 아무 타입..

✔️ 문제 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요 ✔️ 제한사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. ✔️ 입출력 예 arr divisor return [5, 9, 7, 10] 5 [5, 10] [2, 36, 1, 3] 1 [1, 2, 3, 36] [3,2,6] 10 [-1] 💡나의 풀이 function solution(arr, divisor) { var answe..

✔️ 문제 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. ✔️ 제한사항 seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다. ✔️ 입출력 예 seoul return ["Jane", "Kim"] "김서방은 1에 있다" 💡나의 풀이 function solution(seoul) { for (let i = 0; i < seoul.length; i++) { if (seoul[i] === "K..

2023.12.07 - [React/과제] - [React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기) [React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기) 🔥 React 심화주차 아웃소싱 프로젝트 🔥 지도상의 Marker를 표시하고 활용하기 네이버 / 카카오 / 구글 지도 등을 선택하여 웹사이트 만들기 프로젝트명 : 'my아포' 병원 검색 사이트 소개 : 내 주 heenee.tistory.com 로그인 페이지 회원가입 페이지 실시간 유효성 검사 가능! 로그인 만료 기능 메인 페이지 리뷰 창 모달창을 이용한 예약 가능 예약한 곳은 마커가 로고로 바뀌면서 지도상에서 한 눈에 파악이 가능하다 마이페이지 (수정 및 삭제 가능) Keep - 현재 만족하고 있는 ..

⛔ 에러 발생 용용따리를 삭제하고 싶은데 삭제가 되지 않는다 화면엔 남아있고 json-server에는 삭제가 되었다 네트워크도 확인해보니 삭제가 잘 되었다 뭐가 문제였을까? 💡에러 해결 새로고침을 하면 그제서야 삭제가 된다 처음에는 비동기 처리 문제라고 생각했었는데 data값을 useState에 넣어놔서 안됐던 것이다 그래서 useSelector로 값을 불러오니 해결되었다 쿼리 썼으면 수월했을듯 싶다 ⛔ 에러 발생 리액트는 렌더링이 화면에 커멋 된 후에야 모든 함수를 실행하는데 return에서 데이터가 들어오지 않아서 undefined로 정의되어 오류가 나는 것이었다 💡에러 해결 && bookingData를 넣어줘서 해결 true && expression은 expression으로 실행되고 false &&..

yarn add axois yarn add json-server json-server --watch db.json --port 번호 yarn add react-query src > App.jsx import React from "react"; import Router from "./shared/Router"; import { QueryClientProvider, QueryClient } from "react-query"; const queryClient = new QueryClient(); const App = () => { return ( ; ); }; export default App; QueryClientProvider : 데이터를 읽어오는 기능(QueryClient)을 ..

2023.12.07 - [React/과제] - [React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기) [React] 리액트 아웃소싱 프로젝트 (지도 api 이용해서 웹사이트 만들기) 🔥 React 심화주차 아웃소싱 프로젝트 🔥 지도상의 Marker를 표시하고 활용하기 네이버 / 카카오 / 구글 지도 등을 선택하여 웹사이트 만들기 프로젝트명 : 'my아포' 병원 검색 사이트 소개 : 내 주 heenee.tistory.com Thunk로 리뷰 CRUD를 구현하는데 갑자기 이상한 에러가 떴다 `createSlice.extraReducers`에 대한 객체 표기법은 더 이상 사용되지 않습니다. 찾아보니 RTK 2.0 이후로는 createSlice에서 extraReducers를 사용할 때 ..

🔥 React 심화주차 아웃소싱 프로젝트 🔥 지도상의 Marker를 표시하고 활용하기 네이버 / 카카오 / 구글 지도 등을 선택하여 웹사이트 만들기 프로젝트명 : 'my아포' 병원 검색 사이트 소개 : 내 주변 병원 정보를 제공하고, 병원에 대한 리뷰를 볼 수 있으며, 작성 또한 가능하다 marker를 표시하고 모달 창으로 병원 스케쥴 관리를 할 수 있다 구현 기능 기획 홈페이지 병원 검색 병원 리뷰 확인 및 작성 스케줄 메모 우리 동네 병원 찾기 로그인 페이지 회원가입 및 로그인 마이페이지 병원 스케쥴 확인하기 나의 리뷰 확인, 수정, 삭제 와이어프레임 내가 맡게 된 기능은 리뷰 댓글 CRUD이다 React-Thunk로 구현 후, Query로 다시 리팩토링을 해볼 예정이다

✔️ 문제 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. ✔️ 제한사항 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. ✔️ 입출력 예 예를 들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. 💡나의 풀이 function solution(s) { var answer = Math.floor(s); return answer; }

2023.12.04 - [React/과제] - [React] 리액트 심화주차 개인과제 (인증서비스가 들어간 FanLetter 만들기) [React] 리액트 심화주차 개인과제 (인증서비스가 들어간 FanLetter 만들기) 🔥 React 심화주차 개인과제 🔥 숙련주차 개인과제에서 각자 본인이 작성한 홈화면과 상세화면에 이어서 인증시스템을 적용시켜 리팩토링하기 홈 화면 UI 구현 (Create, Read) 상세화면 구현 (Read, Up heenee.tistory.com [Error/React] Redux TypeError: (...WEBPACK_IMPORTED_MODULE_5__.fanLetters) is not a function ⛔ 에러 발생 redux reducer 정의 시 reducers에서 s 를..

🔥 React 심화주차 개인과제 🔥 숙련주차 개인과제에서 각자 본인이 작성한 홈화면과 상세화면에 이어서 인증시스템을 적용시켜 리팩토링하기 홈 화면 UI 구현 (Create, Read) 상세화면 구현 (Read, Update, Delete) ( 본인이 작성한 팬레터에서만 수정, 삭제 가능 ) 로그인/회원가입 UI 구현 ( 로그인 해야만 팬레터 화면으로 진입 가능 ) 프로필관리 UI 구현 ( 프로필 이미지, 닉네임 변경 기능 구현 ) 팬레터 CRUD 를 위한 API 통신은 json-server 를 이용 인증과 프로필관리를 위한 API 통신은 제공된 jwt인증서버를 이용 fetch API 대신 axios 를 이용해 주세요 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가..