기술 블로그

과정 1. css폴더 안에 style.css 파일 생성하고 코드 작성하기 .index { color: red; } 2. index.js 수정하기 - 3번째 줄의 import css를 추가했다. - 일반적으로는 html파일에서 6. npm run build 입력 후 index.html에서 live server로 확인 결론 생각보다 간단하게 설정을 완료했다. 이어서 바벨 로더도 설정해봐야겠다!.!

서론 로딩 속도는 사용자 경험에서 중요한 역할을 한다! 그래서 웹팩의 장점 중 하나인 빠른 로딩 속도를 알아보고 싶어서 진행했다. 웹팩을 사용하지 않았을 때의 로딩 속도와 웹팩을 사용했을 때의 로딩 속도를 비교했다. 이 때 더 확실한 차이를 위해 개발자 도구에서 네트워크 속도를 느리게 낮춰서 진행했다. 본론 1. 웹팩을 사용하지 않을 때 1-1. 파일 생성 및 코드 작성하기 - index.html - src/index.js const Index = () => { const element = document.createElement("div"); element.innerHTML = "Index 컴포넌트"; return element; }; document.body.appendChild(Index()); -..

서론 useRef는 기본적으로 요소에 접근할 때 사용한다고 알고 있었다. 하지만 렌더링 부분과 상관없는 값을 다룰 때도 사용할 수 있다! useState의 상태는 변화할 때마다 리렌더링이 이루어지지만, useRef의 값은 변화할 때마다 리렌더링이 이루어지지 않는다. 현재까지 useState로 모든 값을 관리했다. 그래서 렌더링 부분과 상관없는 값이 변화할 때도 리렌더링이 이루어졌다. 본론 아래는 현재 프로젝트의 수정 전 코드이다. (다른 부분은 코드를 생략했다) 디바운싱을 구현한 코드인데, 이 때 timer의 값을 useState로 관리했다. 아래 코드의 과정은 검색창(input)에서 타자를 칠 때마다 onChange이벤트에 의해 onDebounce함수가 실행되고 -> setTimeout에 의해 0.6초..

과정 Github actions를 이용하여 PR에서 자동 테스팅하는 과정은 이전 포스트에서 다뤘다. 1. 테스트 성공 시 자동 merge하기 1-1. 해당 저장소 -> Settings -> General -> Pull Requests -> Allow auto-merge 체크 - PR을 남기고, github actions의 테스팅이 통과되면, 자동 merge가 되는 것이다!! - 만약 테스팅이 실패되면, 자동 merge가 되지 않는다. 2. 만약 테스팅이 실패했다면, 자동 merge는 되지 않지만 수동적으로 merge를 시킬 수 있다. 문제가 될 수 있으니 테스팅이 실패했다면 수동적으로도 아에 merge할 수 없도록 설정하였다. 2-1. 해당 저장소 -> Settings -> Branches -> Bran..

문제 Input 검색창에서 검색을 한 후 검색어 저장하는 기능이 있었다. 정확히 말하면 최대 5개까지만 검색어 저장을 하고, 저장되어 있는 검색어를 또 검색했다면 마지막으로 오게 하는 기능이다. 그런데 문제없이 잘 작동한 줄 알았는데, 나중에 확인해보니 검색어 저장이 6개까지 되고, 7개째 오류가 발생했다. 아래는 오류가 났을 때 코드이다. // input은 검색어 // const [records, setRecord] = useState([]); const onSubmitForm = () => { //... setRecord(records.filter((item) => item !== input).concat(input)); if (records.length > 5) setRecord(records.sh..

문제 문제 바로가기: [백준] 마법사 상어와 파이어볼 풀이 #구현, 시뮬레이션, 큐 #풀이 1. 흔히 평범한 N*N 2차원 그래프는 각 칸에 수를 넣어 표시합니다. 1 0 0 2 4 0 3 2 3 2. 그러나, 이번 문제에서는 위의 2차원 그래프에서 숫자가 아닌 리스트(큐)를 넣어줘서 풀이했습니다. 2-1. 리스트를 큐로 구현했습니다. 2-2. 리스트 안에는 질량이 0보다 크면 해당 위치에 [질량,속력,방향] 을 넣어줬습니다. [[5,2,2]] [ ] [ ] [ ] [ ] [[1,9,4]] [[3,1,2]] [ ] [ ] graph = [[deque([]) for _ in range(N)] for _ in range(N)] 3. 모든 파이볼의 이동을 끝냅니다 3-1.(큐로 구현한 이유) 출발할 큐의 처음..

문제 문제 바로가기: [프로그래머스] 순위 검색 - 2021 KAKAO BLIND RECRUITMENT 풀이 #단순하게 하나하나 비교하여 풀이한다면, 50,000 * 100,000으로 매우 많은 연산 때문에 효율성에서 시간초과가 발생할 것이다 #LV2치고는 난이도가 조금 높지 않았나 생각한다.. #조합, 딕셔너리(해쉬), 이진 탐색(lower bound) 1. 먼저 info의 값을 모든 조합으로 나누어 { 조합: 점수 } 형태로 딕셔너리에 저장합니다. 예를 들어 info가 ["java backend junior pizza 150" ]라면, 아래와 같이 16가지 조합이 나오며, 모두 딕셔너리에 저장해줍니다 150 java 150 backend 150 junior 150 pizza 150 java backe..

문제 문제 바로가기: [프로그래머스] 메뉴 리뉴얼 - 2021 KAKAO BLIND RECRUITMENT 풀이 #내가 이해를 못한건지, 문제의 애매한 설명 때문인지 문제를 이해하느라 시간이 걸렸었다 #조합 #주의 (여기서 너무 헷갈렸다) 1. course가 [2,3,4]일 때, 아래와 같이 모두 구해주면 된다 - 2개의 조합일 때 가장 많은 조합, - 3개의 조합일 때 가장 많은 조합, - 4개의 조합일 때 가장 많은 조합, - 이 때, 가장 많은 조합은 2개 이상은 있어야 되며, 가장 많은 조합이 여러개 일 때 모두 구한다 #풀이 1. orders에서 딕셔너리를 사용해서, course에 있는 수에 맞게 모든 조합에 대해 갯수를 구해줬다 - course가 [2,3,4]일 때, 2개의 조합, 3개의 조합,..