일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- useState
- js
- 개발일지
- React
- 부트캠프 #개발일지 #TIL #그리드 #CSS
- useEffect
- ㅜㄹㄹ
- 부트캠프 #CSS #개발일지 #TIL #박스모델
- 리액트
- 부트캠프 #스파르타코딩클럽 #개발일지# #html
- 템플릿스트링
- 깃허브오류
- 개발일지 #TIL #프론트엔드 #HTML
- 부트캠프 #개발일지 #TIL #CSS속성 #float #clear
- 알고리즘
- 부트캠프 #개발일지 #TIL #Position #위치
- 부트캠프 #개발일지 #TIL #FlexboxFroggy #displayflex #flexbox
- CSS
- 특성선택자
- 결합선택자
- 의사클래스
- textContent
- 부트캠프
- 부트캠프 #CSS #개발일지 #TIL
- 부트캠프 #스파르타코딩클럽 #개발일지# #TIL #Javascript #confirm #location.href
- appendChild
- JS예제
- querySelector
- 부트캠프 #코딩 #개발일지 #프론트엔드 #CSS #TIL
- Til
- Today
- Total
목록전체 글 (156)
나의 개발일지
✔️ 문제 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 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..