신입사원 현재의 개발일기

github.io로 배포를 하고 난 뒤에 사이트를 최초로 접속했을 때, 최초 화면이 로딩되기까지 생각보다 많은 시간이 걸렸다. 체감상 3초정도..? 가 걸린 것 같았다. 올라가는 이미지도 없는데 너무 느려서 혹시 서버로부터 응답받는 속도가 느린가? 하고 개발자 도구의 네트워크 탭을 확인해 본 결과, 범인은 폰트를 불러오는 시간이 오래걸려서 생긴 문제였다. 그래서! 이번 포스팅은 폰트 호출 최적화하기 위해 했던 일들에 대한 포스팅을 해보려고 한다. 1. 기존 문제 아래의 사진은 최초로 Lighthouse를 실행시켰을 때 나온 점수와, 기존에 사용했던 폰트의 크기다. 1.8MB로 상당히 큰 용량을 차지하고 있다. 비슷한 크기의 폰트를 총 9개 호출하고 있어 렌더링이 오래 걸릴 만했다.. Largest Co..

별도의 서버가 없는 환경에서 포트폴리오를 만들다 보니, 서버 없이 동작할 수 있는 목데이터 구축이 필요했습니다. 이 포스팅에서는 각 동작을 하나하나 설명한다기보다는, 목데이터를 구축하면서 여러 가지의 삽질(?)했던 기록 위주로 작성해보고자 합니다. MSW 적용하기 MSW란? MSW에 대해 간단히 설명하자면 MSW(Mock Service Worker)는 API Mocking 라이브러리로, 서버의 네트워크 요청을 가로채서 모의 응답을 보내주는 역할을 합니다. 한마디로 얘기하면, 별도의 서버를 구축하지 않아도 API가 구현이 됐다고 가정하고 개발을 진행할 수 있습니다. MSW 사용하기 아래는 msw를 적용했을 때의 폴더 구조입니다. vite + react 환경에서 동작합니다. ├── public │ ├── m..

이번에는 일반적인 사이트에서 다수 쓰이는 최근검색 기록 기능과, 즐겨찾기 기능에 대해 써보려고 한다. 아래 사진은 실제 프로젝트에 적용된 사진이다. 위와 같이 최근검색과, 즐겨찾기 기능을 구현했고, 백엔드 서버가 별도로 존재하지 않는 관계로 로컬 스토리지에 데이터를 저장해서 사용했다. 1. 최근 검색 최근 검색의 요구사항은 다음과 같다. 1. 가장 최근에 검색한 순서대로 최근 검색 탭에 보여질 것 2. X 표시 아이콘을 눌렀을 때 최근 검색 탭에서 삭제될 것 위의 요구사항에 맞게 구현된 코드는 아래와 같다. 순서대로 최근 검색의 상태를 담고 있는 keyword, 최근 기록을 추가, 삭제하는 기능이다. const [keywords, setKeywords] = useState( JSON.parse(local..

프론트엔드 개발자로의 취업을 위해 개인 프로젝트로 op.gg 사이트(https://www.op.gg/)를 클론 코딩을 해보면 좋겠다 라는 생각이 들어 클론 코딩을 시작하게 되었다. 사실 지금은 어느정도 개발이 된 상황이다. 하나하나 최대한 비슷한 형태로 만들다 보니 오랜 시간이 걸렸다. 그래도 만들어진 걸 보니 뿌듯한 마음이 든다. 오늘 포스팅 할 성능 개선에 대한 내용은 lighthouse 점수에 대한 부분이다. 최초에 사용자가 검색한 소환사에 대한 정보를 가져오기까지 network 탭으로 확인해본 결과, 4.5초라는 시간이 걸렸다. 그래서 그런지 light house 점수가 31점이 나왔다. 큰 충격을 먹어서 그 때의 사진은 가져오지 못했다. 지금은 67점이 나온다. 사실 67점도 그렇게 높은 점수가..

- 문제 링크 https://www.acmicpc.net/problem/6986 - 풀이 실버 3 난이도의 구현, 정렬 태그가 달려있는 문제였다. 정답률이 25% 밖에 안되서 이 문제가 어렵나 ? 하고 풀어보았다. 직접 풀어보니 절사 평균과 보정 평균을 구할 때 코드상에는 크게 문제가 없었는데 틀려서.. 어 뭐가 문제지 하고 조금 찾아보니 부동소수점에 대한 문제였다. type을 float로 받으면 생기는 문제인데, 해당 문제를 해결하기 위해서는 코드의 맨 밑에 줄을 보면 + 0,00...1 을 더해줌으로서 해결할 수 있다. 절사 평균을 구하기 위해 res 배열에 arr의 K번째 부터 len(arr)-K 곧 전체 배열의 길이-K 의 범위만큼 arr의 값을 append 해줌으로 절사 평균을 구했다. 보정 평..

- 문제 링크 https://www.acmicpc.net/problem/1743 - 풀이 가로 M, 세로 N 길이의 그래프를 만들어주고, 그래프에 음식물 쓰레기의 좌표를 넣어준다. 주의해야 할 점은, 문제에서는 배열의 시작이 (1,1)이라 자칫하면 배열의 범위를 벗어난다. 그래서 각각의 (r,c) 값을 -1씩 빼준 좌표에 음식물 쓰레기 위치 표시를 해준다. 그 뒤에 bfs를 돌리면 된다. bfs는 방문하지 않았으면서 음식물 쓰레기가 있는 위치를 잡고 돌면 된다. 결과값을 담을 res 변수를 하나 선언해주고, bfs를 돌 때 마다 더 많은 음식물 쓰레기를 탐색한 값으로 갱신해준다. - 코드 import sys from collections import deque input = sys.stdin.readli..

- 문제 링크 https://www.acmicpc.net/problem/10026 - 풀이 설명을 보면, 적록색약인 경우에는 빨강-초록을 하나로 본다. 그래서 적록색약이 아닌 경우를 첫번째로 탐색하며 현재 좌표의 색상과 상하좌우 좌표에 있는 색상이 같으면 bfs로 넣어준다. 최초 bfs 탐색이 끝나면 전체 graph를 돌면서 색이 G인 것을 R로 변경해주면 된다. 그 뒤에 visited 배열을 새로 만들고 두번째로 적록색약인 경우를 탐색하면 된다. - 코드 import sys from collections import deque input = sys.stdin.readline dx = [0,0,-1,1] dy = [-1,1,0,0] one, two = 0, 0 def bfs(x, y): visited[x..

- 문제 링크 https://www.acmicpc.net/problem/2108 - 풀이 실버 3 난이도의 수학, 구현, 정렬 태그가 달려있는 문제였다. 정답률이 25% 밖에 안되서 이 문제가 어렵나 ? 하고 풀어보았다. 파이썬 기준으로 얘기해보면 아마 저 3번의 최빈값을 구하는 거 때문에 사람들이 많이 틀리지 않았나 싶은 생각이 든다. 파이썬에서 제공하는 Counter라는 기능을 사용하면 쉽게 해결할 수 있는 문제지만, 자주 사용하지 않으면 Counter의 존재 자체를 계속 까먹으니 자주 써버릇 하는 것이 중요하겠다. - 코드 from collections import Counter N = int(input()) arr = [] for _ in range(N): arr.append(int(input()..

- 문제 링크 https://www.acmicpc.net/problem/2589 - 풀이 bfs로 풀었다. 문제를 보면 알겠지만 범위 내에서 모든 육지를 다 체크해야 하는 완전 탐색 문제이다. 코드를 보면 알겠지만 그냥 bfs에서 사알짝 응용 버전이다. 별로 어렵지 않았다. 근데 정답률이 37% 밖에 되지 않아서 조금 이상하긴 했다. - 코드 import sys from collections import deque input = sys.stdin.readline dx = [0,0,-1,1] dy = [-1,1,0,0] def bfs(x, y): visited = [[0] * M for _ in range(N)] queue = deque() queue.append((x, y, 0)) visited[x][y..

- 문제 링크 https://www.acmicpc.net/problem/11724 - 풀이 dfs로 풀었다. 방향이 없는 그래프라고 해서 단방향 그래프로 구현했다가 한 번 틀리고 아 ! 내가 바보같은 생각을 했구나를 깨닫고 양방향 그래프로 다시 바꿔서 구현했다. 노드 번호를 1번씩 차례대로 for문을 돌면서 연결된 요소가 몇개 있나를 찾으면 된다. 어렵지 않은 실버 2 문제였다. - 코드 import sys input = sys.stdin.readline sys.setrecursionlimit(10**8) def dfs(start): visited[start] = 1 for edge in graph[start]: if visited[edge] == 0: dfs(edge) N, M = map(int, in..