공부

프론트엔드 웹 성능 최적화 Pt. 0

프론트엔드 개발자로 일하게 된지 반 년이 넘었다. 서비스를 만들고 개발하고는 있지만, 돌아가게 하는 정도로 개발하는 것과 거기서 그치지 않고 빠르게 돌아가도록 하는 것은 보이는 것 이상의 차이가 있다고 생각한다. 지금까지 배운 최적화 방식에 대해 기록하기 전에, 프론트엔드 개발자가 왜 성능 최적화를 할 수 있어야 하는지에 대해 고찰해 보자. 웹 성능 최적화, 왜 해야 할까? 우리 회사에서는 MAU가 천만 단위인 서비스를 운영하고 있다(내가 개발하는 서비스는 다른 서비스지만). 물론 웹에서만 서비스되는 기능은 아니고 앱을 통해서도 접속할 수 있지만, 웹으로 이용하는 사람도 적지 않을 것이라고 생각한다. 회사에서 일하기 이전부터 해당 시스템에 가입해서 이용해 왔던 나도 역시 웹 버전으로 많이 이용한다. 그러..

[Node.js] Discord.js를 이용해서 디스코드 봇 만들기 (feat. ChatGPT)

디스코드 채널을 만들어서 사용할 디스코드 봇을 만들기로 했다. 최근 떠오르는 ChatGPT를 이용해서 많은 도움을 받았다. 심지어 이 포스팅도 ChatGPT를 이용해서 일부 내용을 뽑았다. Discord.js에 대해서 Discord.js란 말 그대로 디스코드의 봇을 생성하는 JavaScript 패키지이다. 다른 언어로는 주로 Python이 사용되고, discord.py를 통해 만들 수 있지만, 단순히 내가 Python보다 JavaScript에 익숙하기 때문에 Discord.js를 사용하기로 했다. 참고로, ChatGPT를 통해 많은 것들을 참고했는데, ChatGPT가 학습한 버전은 Discord.js API가 크게 업데이트되기 전이라서 deprecated된 코드가 많이 들어있어서 도큐먼테이션을 많이 참고..

GitHub을 이용한 React 프로젝트 배포하기

들어가며 프론트엔드 개발을 막 시작했을 때, 연습 삼아서 몇번 HTML+CSS+Vanilla JS로 이루어진 페이지를 GitHub을 이용해 배포해 본 적이 있다. 이번에 모 회사에 지원하면서 포트폴리오를 꼭 제출해 달라고 해서, 미루고 미루던 포트폴리오를 급하게 제작해서 GitHub을 통해 배포해서 제출하고자 했다. 참고로 포트폴리오 제작을 미룬 이유는 처음에 했던 팀 프로젝트는 학교 상부에서 더이상 작업하지 말아달라 해서 프로젝트가 터져 버렸고, 개인 프로젝트는 진행 중이라서 포트폴리오에 올리기는 적합하지 않아 보였고, 회사에서 일하면서 진행했던 프로젝트들은 회사 내부 기밀이기 때문에 Git 링크를 첨부할 수 없기 때문에 포트폴리오에 들어갈 내용을 좀 더 채운 다음 포트폴리오를 만들고자 했었다. 어찌됐..

[BOJ 1949] 우수 마을 (Gold II)

1949번: 우수 마을 N개의 마을로 이루어진 나라가 있다. 편의상 마을에는 1부터 N까지 번호가 붙어 있다고 하자. 이 나라는 트리(Tree) 구조로 이루어져 있다. 즉 마을과 마을 사이를 직접 잇는 N-1개의 길이 있으며, www.acmicpc.net 위 문제를 풀고 나서 되돌아보며 부족했던 부분을 채우고자 합니다. 저의 풀이와 다른 사람들의 풀이를 보고 느낀 점을 서술합니다. 나의 풀이 처음에 문제를 대충 읽었다가 주어지는 게 그냥 그래프인 줄 알았는데, 간선 입력이 N-1개 주어진다는 걸 보고 문제를 다시 읽어 보니 트리인 걸 알아차렸다. 문제를 보면 일단 어디가 루트 노드인지 알 수 없기 때문에 기본적으로 1번 노드를 루트 노드로 하여금 트리를 형성하고, 트리를 순회하면서 값을 계산하도록 한다...

Django + React로 로그인 시스템 구현하기 / Pt. 3) 토큰 저장하기

Pt. 3) 토큰 저장하기 파트 2에서는 프론트엔드에서 로그인 성공 여부를 확인하고 토큰을 받아오는 데에 성공했다. 토큰은 서버가 저장하는 것이 아니라, 클라이언트가 저장했다가 서버에게 보내면 서버는 확인만 해 준다고 배웠다. 그러므로 이번에는 클라이언트가 토큰을 어떻게 저장하는지 알아보고, 그 중 하나를 선택해서 직접 실행해 보자. JWT는 어디에 저장해야 하는가? 토큰을 받으면 어디에 저장해야 할까? 먼저, JavaScript 내부 변수에 저장하면 어떻게 될지 생각해 보자. JavaScript가 저장하는 변수는 휘발성이기 때문에 웹 페이지를 새로고침하는 순간 사라지게 된다. 토큰을 가지고 있으면 액세스 정보를 저장할 수 있다는 것이 한 가지 장점인데, 새로고침할 때마다 또는 이동할 때마다 액세스 정보..

백준 64일 스트릭 회고

오늘을 기점으로 백준에서 제공하는 문제들을 64일 연속으로 풀게 된 날이다. 백준 문제들의 난이도를 알려 주는 solved.ac를 이용하면 매 2^N일 스트릭을 기록할 때마다 배지를 주는데, 64일 배지를 받은 기념으로 지금까지 풀어온 감상에 대해 얘기하려 한다. PS에 제대로 관심을 가직 시작한 것은 2021년으로, 개인 사정으로 휴학을 했을 때 뭔가 공부를 하는 게 낫지 않을까 싶어서 시작했던 것이 PS였다. 지금 돌이켜보면 그때 웹 개발이나 열심히 했으면 좋았을걸 싶긴 하지만 웹에 대해서는 좀 더 나중에 흥미를 붙이게 되었기 때문에... 책과 함께 시작하기 사실, PS를 시작했을 때부터 백준에서 문제를 푼 것은 아니다. 정확히 말하자면, 가장 처음에 남들도 하니까 따라서 백준 계정을 만들어서 고작 ..

[JavaScript] 클로저(Closure)에 대해

js에 대해 관심 있게 공부했던 사람이라면 한 번쯤은 들어 봤을 법한 클로저(Closure)는, 그 정의가 워낙 모호하고 어려워 이해하기 쉽지 않다고 생각한다. 나도 처음에 js를 공부할 때 책에서 클로저에 대해 얘기하는데 누구는 클로저를 어떻게 정의하고, 또 다른 누구는 클로저들 다르게 정의하고 하는 식으로 글이 적혀 있어서 혼란을 겪었던 기억이 있다. 이 글을 읽고도 완벽하게 클로저란 이런 것이다라고 알 수 있지는 않겠지만, 사람들마다 클로저에 대한 정의가 다른 이유 정도는 알게 된다면 좋을 것이라 생각한다. 클로저는 JavaScript만의 개념인가 js를 공부하면서 클로저라는 단어를 봤기 때문에 클로저가 js의 개념이라고 생각할 수도 있지만, 함수를 일급 객체(first-class citizen)로..

Django + React로 로그인 시스템 구현하기 / Pt. 2) React에 Django 연동하기

Pt. 2) React에 Django 연동하기 파트 1에서는 Django로 JWT 토큰을 이용한 로그인이 동작함을 확인했다. 이제 이것을 프론트엔드와 연결해 보도록 하자. 원래 진행하고 있는 프로젝트에서는 TypeScript로 진행하고 있지만, 튜토리얼 프로젝트에서 굳이 거창하게 TypeScript를 사용할 이유도 없다고 판단했고, TypeScript를 사용할 수 있는 사람은 JavaScript 코드만 봐도 응용할 수 있을 것이라 생각하기 때문에 여기에는 JavaScript 코드로 진행하기로 했다. React 프론트엔드 프로젝트 설정하기 우리의 친구 CRA를 이용하여 프론트엔드 프로젝트를 설정해 주자. 프로젝트의 최상위 폴더인 auth-tutorial 폴더로 나와서 아래와 같이 입력해 주자. $ npx ..

Django + React로 로그인 시스템 구현하기 / Pt. 1) Django JWT 설정하기

Pt. 1) Django JWT 설정하기 1인 프로젝트를 진행하는 데에 있어서 프론트엔드는 평소에 하고 있어서 문제가 없었지만 백엔드는 평소에 많이 만진 적이 없어서 로그인 기능을 구현하는 데부터 살짝 애를 먹었다. 일반적으로 개인이 진행하는 토이 프로젝트의 경우 그냥 DB에 username과 (암호화 된) password를 DB에 저장해서 lookup하는 정도로도 구현할 수 있지만, 로그인은 보안이 중시되는 작업인데 너무 허술해 보이기도 하고 회사에서 JWT로 인증 작업을 진행하던 걸 본 적이 있어서 JWT를 사용해서 본격적으로 해 보고자 했다. JWT가 무엇인지, 특히 인증 단계에서 JWT를 왜 쓰는지도 시간이 된다면 정리해 보고 싶다. 이하에서 진행하는 프로젝트는 이미 프로젝트를 위한 가상 환경 설..