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

    Throttling & Debouncing

    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..

    Object.keys(), values, entries, assign

    Objct.keys() Object.keys() 메소드는 객체 안의 key를 배열에 묶어서 반환한다. // 사용법 const lovely = { dog : 'greenbean', cat : 'yellow', me : false }; Object.keys(lovely); // ["dog", "cat", "me"] // 순서 const myobj = { 17 : 'greenbean', 2 : 'yellow', 7 : false }; Object.keys(myobj); // ["2", "7", "17"] Object.values() Object.values() 메소드는 객체 안의 value를 배열에 묶어서 반환한다. // 사용법 const lovely = { dog : 'greenbean', cat : 'ye..

    220603 프론트엔드 부트캠프 중간고사

    220603 프론트엔드 부트캠프 중간고사

    Encountered two children with the same key, `62996fb003610b002998c58c`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. 에러 아직 해결 못 함 이건 알리왕왕 귀여워서... 그리고 아이콘으로 수입한 게 안 깨지고 이쁘당 이때 결국 안됨 한 번인가 더 함...

    프론트엔드 부트캠프 한 달,

    프론트엔드 부트캠프 한 달,

    엊그제 오랜만에 동물병원 앞을 지났다. 갈 일이 없어지면 좋을 줄 알았는데, 열심히 다니던 때가 그립다. 이젠 동물병원에 계신 수의사 선생님도 그립다. 어쨌든 오랜만이란건 내가 연속으로 액땜했던 게 그만큼 오래 지났다는 것... 그때 많은게 바뀌었고 그러다가 지금 다니는 부트캠프도 다니게 됐다. 벌써 한 달을 다녔다니! 엊그제 동물병원 지나고나서 쓰려했다가 이왕이면 시험 끝나고 소감을 말하고 싶어서 지금 쓴다. 총 세 달 과정 중 한 달이 지났다. 마지막 한 달은 팀 프로젝트를 진행하므로 수업 듣고 기초 배워나가는 과정은 두 달일테고, 그럼 그 중 반이 지난거다. 얼마전까지도 뭘 배울지도 잘 몰랐는데(커리큘럼을 봐도 뭔 소린지 모름) 벌써 반이나 했나 싶다. 컴포넌트부터 데이터 전송, 컨테이너/프레젠터,..

    220602 프론트엔드 부트캠프 23일차 : 이미지 프로세스, ref

    220602 프론트엔드 부트캠프 23일차 : 이미지 프로세스, ref

    어제 숙제 잘 못했어도 괜찮다고 하셔서... 증말 다행 이번주 중요한 것~~~~ 컴포넌트 생명주기, 백엔드.. 근데 코딩 그 자체보단 어떤 순서로 이루어지는 지 그림에 대한 이해 이미지 저장 과정 → Image-Process 이미지? 데이터 베이스에 저장하면 안돼? → Cloud-Storage 이미지 검증 → Validation (용량, 확장자 등) freeboard 리뷰 - 파이어베이스 시작하자마자 받아오기 위해 useEffect에서 엑시오스 통해 받아옴 firestore 정보 받아오고, 거기서 board라는 컬렉션을 가져옴 보드 컬렉션에 있는 document를 가져옴(getDocs) 그리고 그 document들 뽑아서 맵으로 각각에 있는 객체들에서 데이터를 뽑아야 데이터가 나온다. 원리가 그런건 아니..

    220601 프론트엔드 부트캠프 22일차 : CORS, API, firebase

    220601 프론트엔드 부트캠프 22일차 : CORS, API, firebase

    CORS? 이것 때문에 짜증나 죽겠네 → CORS : openapi인데 왜 막아 Graphql-API 가 이렇게 쉽게 만들어지다니! → Graphql / Apollo-Server 백엔드 개발자가 없을 땐 이걸 써봐! → Firebase / BAAS(Backend as a service) 바스, 사스(Software as a service), 파스(Platform as a service).. freeboard 리뷰 네비게이션에 메뉴 - 맵으로 뿌려줌 추가할 때 menus에만 추가하면 자동으로 메뉴 생김 const [age, setAge] = useState(13); state에 타입 지정해주기. number 또는 string 사용하지 않는 변수는 _로 쓰는 관례가 있다. 이름이 메시지라는 변수에 담겨서 오..

    알고리즘 : reduce, filter, Math.min, splice

    알고리즘 : 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..

    220531 프론트엔드 부트캠프 21일차 : [Backend]Open-API, DB / 태그

    220531 프론트엔드 부트캠프 21일차 : [Backend]Open-API, DB / 태그

    1. Open-API / Public-API 2. DB구경 - Database / ORM 3. Node.js 활용해서 백엔드 서버 만들기 Open-API https (자물쇠 걸린, 안전한) http (주의 요함!) Auth(오쓰) - 제공하는 사이트에서 회원 가입 해야하는지? 절차 거쳐야 하는지? cors - No인 경우 브라우저에서는 api 사용 불가능(모바일앱 가능) 나의 메뉴2, 나의 메뉴, 게시판, 중고마켓, 마이페이지 여기서 나의 메뉴2에 파이어베이스(백엔드 개발자 없이 프론트 개발자에서 바로 데이터 베이스에 데이터를 저장하는 도구) 이용해서 서비스 하나를 만들어볼 것임~ 📺 useEffect 사용하여 데이터 받아오기(옛날 사용 방법) 1. state를 만든다. 2. api 요청하고 그 결과를..

    알고리즘 - 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)

    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