WebMaster

https://www.hackerrank.com/challenges/repeated-string/problem?isFullScreen=true&h_l=interview&playlist_slugs%5B%5D=interview-preparation-kit&playlist_slugs%5B%5D=warmup Repeated String | HackerRank Find and print the number of letter a's in the first n letters of an infinitely large periodic string. www.hackerrank.com 문제 n길이까지 반복되는 s 중 a가 몇 번 나오는 지를 출력 풀이 문자열을 돌면서 a가 몇번 나오는지 count (n-1)을 문자열 길이로..

https://www.hackerrank.com/challenges/jumping-on-the-clouds/problem?isFullScreen=true&h_l=interview&playlist_slugs%5B%5D=interview-preparation-kit&playlist_slugs%5B%5D=warmup Jumping on the Clouds | HackerRank Jumping on the clouds www.hackerrank.com 문제 0부터 n까지 index를 1,2 개씩 점프할 수가 있는데 1이 존재하는 곳으로는 점프를 할 수가 없다. 이때, 최소한의 점프를 해서 마지막 까지 도착하는 경우중 가장 빨리 도착하는 시간을 계산해라 풀이 while문의 돌면서 index가 배열의 SIZE보다 ..

https://www.hackerrank.com/challenges/counting-valleys/problem?isFullScreen=true&h_l=interview&playlist_slugs%5B%5D=interview-preparation-kit&playlist_slugs%5B%5D=warmup Counting Valleys | HackerRank Count the valleys encountered during vacation. www.hackerrank.com 문제 수면 안으로 들어간 횟수를 계산해서 리턴해 주는 문제이다. 풀이 초기 기준 수면선의 위치를 0 으로 세팅후 for문을 돌면서 0에서 -1로 갔을때에 결과값에 1을 더해준다. 결과를 리턴한다. public static int coun..

https://www.hackerrank.com/challenges/sock-merchant/problem?isFullScreen=true&h_l=interview&playlist_slugs%5B%5D=interview-preparation-kit&playlist_slugs%5B%5D=warmup Sales by Match | HackerRank How many pairs of socks can Alex sell? www.hackerrank.com 문제 같은 숫자 개수가 짝으로(2개) 몇 개의 묶음이 있는지 계산해 주는 문제이다. 풀이 Map의 선언하여 해당 숫자의 개수가 몇 개 인지를 저장한다. Map의 돌면서 숫자의 개수(value)를 2로 나눈 값을 결괏값에 더해준다. private static i..

CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여줄 뿐만 아니라 코드의 가독성을 높여서 유지보수를 더욱 쉽게 해 준다. . scss 와 .sass를 지원한다. .sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color .scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body{ font: 100% $font-stack; color: $primary-color; } 차이점 :. sass 확장자는 중괄호와 세미콜론을 사용하지 않는다. 사용하기 yarn add no..

리액트에서 컴포넌트를 스타일링할 때는 딱히 정해진 방식이 아닌 원하는 방식을 선택해서 하면 된다. 이 중, 자주 사용하는 1) 일반 CSS,2) Sass,3) CSS Module,4) styled-components가 있다 기존 프로젝트는 일반 CSS 방식으로 이루어져 있다. 소규모 프로젝트를 개발할 때에는 새로운 스타일링 시스템을 적용하는 것이 불필요할 수도 있기 때문에 이미 적용되어 있는 기본 CSS 시스템을 이용한다. App .css .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animatio..

여러 컴포넌트에서 비슷한 기능을 공유할 경우 커스텀 Hook으로 로직을 재사용할 수 있다. import { useReducer } from "react"; function reducer(state, action) { return { ...state, [action.name]: action.value, }; } export default function useInputs(initialForm) { const [state, dispatch] = useReducer(reducer, initialForm); const onChange = (e) => { dispatch(e.target); }; return [state, onChange]; } import React, { useEffect, useState, u..

함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다. 등록 버튼을 눌렀을 때 포커스가 인풋 쪽으로 넘어가도록 코드 작성 import React, { useState, useMemo, useCallback, useRef } from "react"; const getAverage = (numbers) => { console.log("평균값 계산 중 .."); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = useState([]); const [number, setN..

useMemo와 비슷하다. 렌더링 성능을 최적화할 때 사용한다. 이 Hook을 사용하면 만들어 놨던 함수 재사용이 가능하다. import React, { useState, useMemo, useCallback } from "react"; const getAverage = (numbers) => { console.log("평균값 계산 중 .."); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = useState([]); const [number, setNumber] = ..

함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. import React, { useState } from "react"; const getAverage = (numbers) => { console.log("평균값 계산 중 .."); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = useState([]); const [number, setNumber] = useState(""); const onChange = (e) => { setNumber(e.target..