프론트엔드✏️/코드캠프

220612 프론트엔드 부트캠프 33일차: 주말

https://personalitygrowth.com/how-much-of-an-open-book-you-are-based-on-your-personality-type/ How Much of an Open Book You Are, Based on Your Personality Type - Personality Growth How Much of an Open Book You Are, Based on Your Personality Type Some people are open books, they share themselves with others without fear of what it might cause. They aren’t capable of keeping things bottled up, and..

220611 firebase, react hook form

// 터미널에서 npm 또는 yarn 설치 npm install firebase yarn add firebase //_app.js or _app.tsx 에서 import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; export const firebaseApp = initializeApp(firebaseConfig); // export를 붙여준다. //애널리틱스 import { } from 'firebase/analytics'; // firebaseConfig에 measurementI..

220611 프론트엔드 부트캠프 32일차 : 주말,

어제 쓰던게 날아가서 허무하다... 그때그때 오류 잡은 거랑 그런 것도 다 메모해놨었는데 ㅠ ㅠ 대체 어디간거야?! 정말 예민함이 극에 달한 것 같다. 별거아닌 일에도 슬프고 서럽넹 헐 아니네 저장되어있네?! 갑자기 기분이 좋아졌다 ㅎ ㅎ ㅎ const mbti = newScore.reduce( (acc, cur) => acc + (cur.score >= 2 ? cur.id.substring(0, 1) : cur.id.substring(1, 2)), "" ); console.log(mbti); navigate({ pathname: "/result", search: `?${createSearchParams({ mbti: mbti, })}` }); const mbti = newScore.reduce( (ac..

220610 프론트엔드 부트캠프 31일차 : HOF, react-hook-form, yup

useQuery를 axios처럼 사용할 수 있대! → useApolloClient 폼을 자동으로 만들어준다? → React-Hook-Form Validation 라이브러리도 있어! → Yup ~ 정규 표현식 재사용 위한 공통 컴포넌트를 만들자 → Common-Component HOF id는 고유값이기 때문에, 데이터가 많아질 수록 중복의 위험이 있다. HOF가 권장된다. react-hook-form google 에 react hook form 검색 react-form, redux-for, formik(어려움) -> 함수형으로 바뀌고 나서 react-hook-form 나옴 yarn add react-hook-form 🌼 제어 컴포넌트 기존 폼 라이브러리는 제어 컴포넌트 방식 input창에 value={wr..

알고리즘 - 수열, 폰켓몬

function solution(a, b) { var answer = 0; arr=[]; if(a===b) return a; arr.push(a,b) console.log(a,b); console.log(a+1); for(let i = 1; i acc+cur); return answer; } solution(3,5); //12 이렇게 풀면 3,5 는 가능한데 5,3은 안됨 둘 중에 작은 수에 더해주면 될 것 같음 function solution(a, b) { var answer = 0; arr=[]; if(a===b) return a; arr.push(a,b) let min = Math.min(a,b); let abs = Math.abs(a-b); for(let i = 1; i acc+cur); retu..

220609 프론트엔드 부트캠프 30일차 : Diffing, Hydration, closure, HOC/HOF

일단... 커서를 커스텀하고 닿는 것에 따라서 효과를 주려고 했는데, 하진 못했다. 그냥 커서를 다른 이미지로 바꾸는 것만 성공..?~~! 근데 이것만으로도 기쁘다~ 별안간 테스트 페이지를 만들고 싶어져서(사실 오랜 꿈이었음) 무턱대고 강의를 결제했다. 그랬더니 의욕이 상승했다,,, 아니 이런 얘기말구 어제부터 한 댓글 분리-수정 작업까지 완료.. 디폴트 밸류 안 들어오던 문제도 고쳤다.(그냥 props 안 내려줘서였다 ㅎㅎ) 동아리 져지 디자인도 한 시간 정도 함... 근데 져지 안 사봤고 안 입어봤고 아이디어도 안 떠오르고 보내준 디자인들만 보고 비슷하게 해보려 하는데 따라하긴 싫고 환장ㅠㅠ 오늘은 노션에 바로 정리한 것도 있어서 그냥 수업시간에 쓴 것 + 추가한 것 그대로 복붙 localStorag..

알고리즘 - 피보나치 수열,

function solution(n) { var answer = 0; if(n === 0 ) return 0; if(n === 1) return 1; if(n >= 2) answer = solution(n-2) + solution(n-1) return answer } // 7번부터 출력 크기 초과, 시간 초과 function solution(n) { var answer = 0; arr = [0,1]; for(let i = 0; i < n-1; ++i) { arr.push(arr[i]+arr[i+1]) answer = arr[i]%1234567 + arr[i+1]%1234567; } return answer%1234567 } // 7번부터 그냥 실패! function solution(n) { var ans..

220608 프론트엔드 부트캠프 29일차: 로그인, 암호화, JWC 토큰

쿠키/세션 로그인 1. 브라우저에서 email과 password를 가지고 로그인을 하면 백엔드로 loginAPI요청이 날라간다. 그리고 백엔드에서는 해당 유저가 있는지 DB에서 확인 후, 있다면 session에 저장한다. 그리고 특정한 id를 부여해서 브라우저로 보낸다. 해당 유저가 무언가를 요청할 때 본인이 누군지 식별할 수 있도록 id를 함께 넣어서 보내준다. 휘발성 메모리세션에 저장한 정보를 바탕으로 로그인이 필요한 기능에 대해 요청이 있을 때 인가 과정을 거쳐 요청을 처리한다. 한 번에 여러명의 정보를 받는데에는 한계가 있었고, 이를 보완하기 위해 백엔드 컴퓨터를 scale-up 해주었다. (scale-up : 컴퓨터의 성능을 올려주는 것) 2. 그러나 더 많은 유저의 접속이 일어나면 서버가 부하..

알고리즘 - 최대공약수, 최소공배수 유클리드 호제법

두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3, 최소공배수는 12이므로 solution(3, 12)는 [3, 12]를 반환해야 합니다. https://programmers.co.kr/learn/courses/30/lessons/12940 function gong(n, m) { // 최대공약수 : 두 수의 공통되는 약수 중에서 제일 큰 수 // 최소공배수 : 두 수의 공통되는 배수 중에서 제일 작은 수 const biggest = n > m ? n : m; // = Math.max(n , m); // 더 큰 값을 가져올거니까 큰 거 저..

알고리즘 - 달력 문제, reduce, Date()

2016년 1월 1일 : 금요일 +0 : 1월 1일 (+0) +1 : 1월 2일 (+1) 토요일 +2 : 1월 3일 (+2) 일요일 ... +7 : 1월 8일 (+0) 금요일 몇 개의 요일이 지났는지 확인 month : 1월 31, 2월 29, 3월 31, ... 며칠있는지 다 적어놓기 days += month[i] 밸류값만 뽑아서 저장! const month = { 1: 31, 2: 29, 3: 31, 4: 30, 5: 31, 6: 30, 7: 31, 8: 31, 9: 30, 10: 31, 11: 30, 12: 31 } const day = ["FRI", "SAT", "SUN", "MON", "TUE", "WED", "THU"]; function solution(a, b) { let days = 0; ..

220607 프론트엔드 부트캠프 28일차 : 다 함수야!, graphql 궁금, globalstate

props, prev, graphql 의 진실 (?) 함수형 컴포넌트는 진짜 함수다. props는 함수의 매개변수, 부모에서 자식으로 인자를 넘기는 것. prev또한 이름 prev아니여도 상관없음 맨 위의 $asdf 재사용하기 위해서 쓰는 것 rest api는 묶음 배송 불가~ -> 문제점 발생 1. under fetching 세 개의 패치 api 요청해야하는데, rest는 세 개 한 번에 못하고 하나씩밖에 못 보내. 하나씩 밖에 못 보내니까 내가 원하는 것보다 조금밖에 패칭이 안된다. (??여기 잘 이해가 안됨 내가 생각하는 게 맞나?) -> 찾아보니 정확한 뜻은 하나의 endpoint로 필요한 모든 데이터 요청을 처리하지 못한다는 걸 의미한다고 함. 2. over fetching Rest는 요청하는 ..

220606 프론트엔드 부트캠프 27일차 : 이미지 여러개, 검색, 디바운싱, 쓰로틀링

프리보드 마지막날~~~ 난 아직인데... 도메인 하나 구입하기! aws 가입해놓기! 중고마켓은 로그인 기반으로 할 것임 이번주 1. 글로벌 스테이트? props가 필요없대! -> Recoil 2. 로그인에도 역사가 있다 -> AccessToken, RefreshToken 3. Next.js 렌더링 원리 -> Deffing, Hydration 4. 이거 먼저 실행해줘! -> Closure, HOC, HOF 5. 폼을 자동으로 만들어 준대 -> React-Hook-Form 오늘 1. 검색을 이해하려면 다양한 DB를 알아야한다. -> Database 2. 검색 결과를 페이지네이션과 연결 -> Search, pagination 3. 검색하기 버튼 없이 검색하기 -> Debouncing, Throttling 이미..