min

오늘은 https 연결과 관련해서 작성해볼려고 한다. 먼저 확실하게 집고 가야할 점은 https에 대한 지식이 아니라 aws 서비스를 이용해서 내가 만든 node js 프로젝트를 instance 화 시키고 이 instance에 https를 부여하는 방법에 대해서 저술할 것이다. 1. s3에 대하여.... 먼저 s3에 대해서 집고 넘어가자. s3는 정적 파일을 배포하는 서비스이다. 여기서 말하는 정적 파일은 내가 만든 node js 프로젝트를 말한다. 이를 왜 구지 s3에 올리는 지 궁금하실 수 있다. 이를 이해하기 위해서는 aws라고 하는 서비스에 대한 관점에서 이야기를 해야한다. aws는 가상 클라우드 (컴퓨터)인 ec2라는 서비스를 가지고 있다. 여기서 ec2에 내가 만든 프로젝트를 넣으려면 aws에..

오늘은 HashMap과 Map에 대해서 알아볼려고 한다. 먼저 내가 이 두 단어를 들었을 때 처음 들었던 생각은 둘다 Map이라는 단어가 들어가는 어떤 부분에서 다른 거지? 어떤 부분이 다르게 작용하는 거지? 라는 궁금중이 들었다. 아마도 이 글을 읽고 이는 독자 분들도 그런 생각이 들었을 것이다. 그래서 나는 이 두가지 개념의 공통점과 차이점을 바탕으로 살펴보려고 한다. 1. HashMap과 Map의 공통점 먼저 HashMap과 Map의 공통점은 어떤 데이터를 키와 값 형태로 관리하는 자료구조라는 점이다. 즉 이 2가지 개념은 모두 자료구조라는 것이다. 그렇다면 이 2가지 개념은 어떻게 데이터를 관리할까? 2. HashMap과 Map의 차이점 그 방법에서 HashMap과 Map의 차이점이 발생한다. H..

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처리가 이루어지는지 두번째 : 첫번..