javascript
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
React - Hooks : prev state
prev state setState()와 prevState()는 리액트에서 컴포넌트의 상태를 변경하는데 사용되는 Hooks다. setState는 이벤트나 서버 응답에 대하여 UI를 다시 업데이트 하기 위해서 사용되곤 한다. prevState는 컴포넌트의 이전 상태를 기반으로 한다. // Next.js는 react import를 생략한다. export default function CounterPage() { const [count, setCount] = useState(0); const onClickButton = () => { setCount(count + 1); }; return ( {count} ) } count라는 state를 만들고 카운터를 올릴 수 있는 함수를 만든다. 버튼을 누르면 화면의 {..
CSS 이름 짓는 규칙
CSS 이름 짓는 규칙 App.css 를 보면 '컴포넌트 이름 - 클래스 형태'로 지어진 것을 볼 수 있다. 이는 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 중복되는 것을 막기 위해서다. BEM 네이밍이란 것도 있는데, 이는 CSS 방법론 중 하나로 이름을 지을 때 해당 클래스가 어디에서 어떤 용도로 쓰이는지 명확하게 쓰는 방식을 말한다. (ex. card__title-primary) 김민준, ⌜리액트를 다루는 기술⌟, 길벗, 2019
220527 프론트엔드 부트캠프 19일차 : 깊은 복사, 얕은 복사, Infinite-scroll
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_imagesㄴ 배경 이미지 크기 조정하기 - CSS: Cascading Style Sheets | MDN CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. background-size 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다. developer.mozilla.org 눈이 괴로워지는 페이지, 재밌당 객체와 배열이 복사가 이상해 → Shallow-Copy / Deep-Copy 스크롤 형태의 페이지네이션 만들자 → Infinite-Scroll freeboard 리뷰 개발환경에선 처음..
알고리즘 - substr
임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. n은 1이상, 50000000000000 이하인 양의 정수입니다. // str에 있는 op의 개수 찾기 ~~ function finder(str, op) { console.log(str.split('')); console.log(str.split('').filter((el)=> el === op).length) return } finder('+-*%+', '+'); // 임의의 문자열 입력받아 각 글자로 만들 수 있는 길이 2의 문자열들을 모두 확인하여 새로운 배열에 담아 반환하는 함..
알고리즘 - Set
Set - 중복 제거하기 배열을 대체해서 사용할 수 있다. 타입은 객체 형태를 가진다. (typeof 해보면 'object')( Array.isArray() 하면 false ) 고유한 데이터만 저장할 수 있다. - 중복되는 데이터가 없다. let array = [ 1, 3, 1, 2, 4] Array.from(new Set(array)); // [1, 3, 2, 4] arr1 = new Set(); arr2 = []; // 데이터 추가 arr1.add(1) arr2.push(1) arr1.add(1) // 들어가지 않음(중복) // 데이터 조회 arr1.has(1) // 1이 있나? true/false 반환 arr2.includes(1) // 길이 arr1.size arr2.length // 데이터 삭제..
*-커비 프로젝트-* 움직인다!
KeyboardEvent - 키보드 입력받기 마우스 이벤트와 달리, 타입스크립트는 InputEvent에 대한 유형 선언을 제공하지 않는다. 대신 KeyboardEvent 를 사용한다. import {KeyboardEvent} from 'react'; Next.js 사용하기 때문에 React는 따로 import 하지 않았다. 매개변수 e로 KeyboardEvent를 받는데 뒤에 :void 를 안 썼더니 아래와 같은 오류가 나왔다. : void 붙여줌 import { useState, KeyboardEvent, useEffect } from "react"; useState, useEffect 추가 useEffect(() => { const handleKey = (event) => { if (event.key..
알고리즘 - 콜라츠 추측, while
콜라츠 추측 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 입력된 수가 6이라면 6→3→10→5→16→8→4→2→1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야하는지 반환하는 함수, solution을 완성해 주세요. 단, 작업을 500번을 반복해도 1이 되지 않는다면 –1을 반환해 주세요. //콜라츠 추측 function solution(num) { var answer =..