min

https://school.programmers.co.kr/learn/courses/30/lessons/12914?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(n) { let arr = []; arr[0] = 1; arr[1] = 1; for(let i = 2; i

https://school.programmers.co.kr/learn/courses/30/lessons/12985 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr //A와 B가 같을 때까지 다음 과정을 수행한다. //A와 B를 2로 나눈다. //나눈 값을 반올림한다. //answer를 하나 올린다. //answer를 리턴한다. function solution(n,a,b) { var answer = 0; while(a !== b) { a = Math.ceil(a / 2); b = Math.ceil(b / 2); answer++; } return answer;..

1. 문제상황 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서. 사용하지 않는 자바스크립트라는 항목이 나옴. 실제로 자바스크립트 전송크기가 918.3KIB라는 수치가 나옴 2. 가설 (H1) : 네트워크 탭에서 자세한 정보를 확인해보니 메인 페이지로 들어왔을 때 해당 메인 페이지와 관련이 없는 Detail , Write페이지가 렌더링되고 있음을 확인 . 따라서 지연로딩을 시켜야 겠다는 생각을 함. 3. 해결(S1) : 라우터에서 지연 로딩을 구현함. 구현한 코드는 다음과 같음 import { BrowserRouter, Routes, Route } from "react-router-dom"; import { Suspense, lazy } from "..

1. 문제상황 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서 렌더링 차단 리소스 제거하기라는 항목이 나옴. 이 항목을 분석해보니 렌더링 이전에 CSS와 JS를 동기적으로 다운로드 받기 때문임. 2. 가설 1 (H1) : 내 프로젝트에서는 구글 폰트를 사용하는 데 이 구글 폰트 서비스가 CDN 서비스라서 외부로 부터 CSS , JS파일을 동기적으로 다운로드 받아야 함. 이 과정에서 렌더링 차단이 발생하는 것으로 보임 3. 해결 (S1) : 구글 폰트를 미리 prefetch 받기 위해서 다음과 같은 항목을 추가함 여기서 프리로드를 통해서 브라우저가 폰트를 로드하기 전에 폰트 리소스를 사전에 가져오도록 지시함. 이를 통해서 가능한 절감 효과인 370m..

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 1. 테블릿 사이즈 반응형 사이트 만들기 : 반응현 사이트를 만들면서 가장 어려웠던 점은 테블릿 사이즈일 때 어떤 디자인으로 해당 사이트를 보여줄 것인지가 가장 어려웠다. 그 다음으로 어려웠던 부분은 테블릿 사이즈일 때 마진 값과 패딩 값을 어떻게 맞출 것인지 였다. 그래서 나는 이문제를 해결하기 위해서 flex라는 속성을 통해서 해결했다. 정확히 말하자면 flex-grow , flex-shrink , 기본값을 통해서 화면이 줄어들 때 줄어드는 화면 비율에 맞춰서 자동적으로 사물의 크기도 배치되도록 만들었다. 그리고 요소들간의 간격은 gap이라는 속성을 통해서 해결했다. 이 gap을 통해 각 요소들의 간격을 맞추고 ..

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. 페이지네이션 테스트 코드 : 페이지네이션 테스트 코드를 작성하면서 어떻게 테스트를 해야 할지에 대한 궁금중이 많았다. 여기서 궁금중을 설명하기 위해서 한가지 예시를 들겠다. 만약 페이지가 1~100개까지 있다고 하자. 이때 1~100개를 다 클릭했을 때 확인하는 테스트 코드를 작성하는 것이 맞을 것인지 아님 다른 방법이 있는지에 대한 궁금중이 있었다. 나는 이 부분을 다음과 같이 해결했다. 만약 1~100까지가 있다면 3가지만 체크하면 모든 것을 체크할 수 있을 것이라고 생각한다. 첫번째 : 첫번째 페이지를 눌렀을 때 이전 페이지는 disabled , 다음 페이지는 abled처리가 이루어지는지 두번째 : 첫번..