JS
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는 요청하는 ..
Throttling & Debouncing
쓰로틀링과 디바운싱은 일종의 프로그램 기법이다. 둘의 차이는 이벤트를 언제 처리하느냐에 있다. Throttle : 조르다, 압력 조절. 요청, 이벤트가 너무 많이 발생할 때, 처음 이벤트만 처리하고 일정시간 동안 그 뒤의 요청과 이벤트는 무시하는 방식 Debouncing : 전자공학쪽에서 bouncing개념과 함께 쓰이는 것 같다. 코딩에서 디바운싱은 요청, 이벤트에 대한 작업이 너무 자주 실행되지 않도록 함수가 호출되는 것을 제한하는 프로그래밍 기법이다. 딜레이를 주고 그 딜레이가 임계값에 도달하면 그때 함수 처리를 한다. 즉, 사용자가 입력을 중지한 후 x초 후 에만 검색을 수행하게 한다 -> debouncing 사용자가 입력하는 동안 x초 마다만 검색을 수행한다 -> throttling 자동 완성 ..
Shallow Routing
Shallow routing은 Next.js의 기능 중 하나로 데이터를 다시 가져오지 않으면서(fetching 메서드를 다시 실행하지 않음) URL을 변경할 수 있는 기능이다. 이를 통해 URL을 업데이트하면 'pathname'과 'query' 상태를 잃지 않고 라우터 객체를 통해 받을 수 있게 된다. import { useEffect } from 'react' import { useRouter } from 'next/router' // Current URL is '/' function Page() { const router = useRouter() useEffect(() => { // Always do navigations after the first render router.push('/?counte..
알고리즘 : reduce, filter, Math.min, splice
0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. // 처음 푼 풀이 function solution(numbers) { var answer = 0; console.log(numbers); for(let i = 0; i console.log(cur,acc)) // 1 2 undefined 3 undefined 4 undefined 6 undefined 7 undefined 8 undefined 0 reduce가 아직 어려워서, 무조건 괄호 하나 더 쓰고 그 안에 cur, acc 를 담고 콘솔에 출력해보는 식으로 하고 있다. answ..
알고리즘 - reduce
a와 b 내적하기 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이) 내적이란 말 오랜만이당 ..ㅎ ㅎㅈㅅ에서 했었는데 ... // 푼 과정 function solution(a, b) { var answer = 0; for(let i = 0; i < a.length; ++i){ console.log(a[i]*b[i]) // 누적해 answer += a[i]*b[i]; } return answer; } 누적한다는 걸 보니까 reduce로 풀고 싶어졌다. function soluti..
220530 프론트엔드 부트캠프 20일차 : 클래스 컴포넌트, 생명주기(Lifecycle)
4주차에 배울 내용 - 클래스 컴포넌트 - 프론트 엔드와 백엔드 같이 보기 (Architecture) - 백엔드 API 만들기 체험 (Apollo-Server / Graphql) - 이미지 업로드 (Cloud-Storage) freeboard 리뷰 freeboard - 구조 짤 때 어떤 것이 유지/보수 하기 좋은 가에 초점을 맞추면 됩니다. 에어비앤비에서는 이중부정 연산자를 쓴대용 ☘️ 중간고사 보면서 이해한 부분! 변경된 내용이 있으면 추가해준다. if (contents) updateBoardCommentInput.contents = contents; // event.target.value로 받은 contents가 있으면(입력받아서 변동이 생겼으면) // 수정할 목록의 contents에 위의 conte..
알고리즘
자바스크립트의 제곱 ** // 내가 푼 것 function solution(x) { let answer = true; let array = []; console.log(10**2); console.log(333%1000); console.log(Math.floor(333%100/10)) for ( let i = 1; i