전체 글

백준 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를 왜 쓰는지도 시간이 된다면 정리해 보고 싶다. 이하에서 진행하는 프로젝트는 이미 프로젝트를 위한 가상 환경 설..

Django 초기 설정 - 가상 환경부터 프로젝트 생성까지

개인 웹 프로젝트를 진행함에 있어 백엔드로 Django를 선택했고, 기본적인 설정을 하는 방법을 글로 작성해서 나중에 헷갈리지 않으려고 한다. 모든 터미널 코드는 macOS 환경을 기준으로 작성되었음을 미리 알린다. 가상 환경 설정하기 먼저, 프로젝트 관리의 편의성을 위해 가상 환경을 설정해 주도록 하자. 설정하기에 앞서 가상 환경이란, 개별의 파이썬 프로젝트들이 서로 다른 버전의 라이브러리를 사용할 수 있도록 하는 환경을 쉽게 구축할 수 있게 해 주는 것이다. 둘 이상의 파이썬 프로젝트가 같은 라이브러리를 사용하지만 버전은 서로 다를 수 있는데, 이러한 환경에서의 개발을 도와주는 것이다. 만약 이 글을 보고 있는 당신이 하나의 컴퓨터로 하나의 프로젝트만 평생 개발할 것이라면 가상 환경은 필요하지 않겠지..

AES 암호화 알고리즘

학부 수업에서 다룬 AES 암호화 알고리즘에 대해 정리하고자 합니다. 과제를 위해서 정리한 내용이다보니 틀린 내용이 있을 수 있으니 주의해 주세요. AES 알고리즘이 등장하기 이전에는 DES 알고리즘이 표준으로 사용되고 있었지만, 알고리즘의 취약점이 발견되고 나서 대책이 필요해지기 시작했다. 단순하게 DES를 3번 돌리는 Triple-DES도 사용했지만, 여전히 취약점은 존재했고 특히 S/W상에서 구현할 때 속도가 빠르지 않았다고 한다. 이후 NIST에서 새로운 알고리즘을 모집하였고 이로 인해 선택된 Rijndael의 알고리즘을 AES 알고리즘으로 채택하였다. AES 알고리즘은 128/192/256 비트의 키, 128 비트의 데이터 블럭을 가지고 실행된다. AES의 구조 AES는 4가지의 서로 다른 스테..

PS에 편한 C++ 문법

나는 C++로 PS를 하는데, 참고했던 책도 그렇게 최신 책은 아니고 컴파일 환경도 C++14였어서 이런저런 화려한 문법들을 쓰지 않고 PS를 진행했다. 그런데, 다른 사람들의 코드를 읽어 보니 각종 편리한 문법들을 많이 사용하고 있는 것 같아서 나름 사람들 어깨 너머로 배운 내용들이나 편법(?)등을 정리해 놓고자 한다. 다른 사람들의 PS 코드야 예전부터 가끔 읽었지만, 그때는 딱히 내가 저 사람들이 쓰는 문법을 따라 할 필요가 없었다고 느꼈다. 그런데 언젠가부터 이런 마인드를 바꾸기로 결심했는데, 바로 취업을 위한 코딩 테스트를 준비할 때였다. 평소에 PS를 할 때에는 한 문제에 수십 분부터 몇 시간, 며칠을 매달리든 내 자유였지만 코딩 테스트는 그 시간이 정해져 있기 때문에 효율적인 알고리즘을 빠르..

React에서 map() 사용 시 key 값에 대하여

개발 중에 갑자기 생각난 이슈. 요즘 새로운 프로젝트를 시작하고 있는데, React에서 자주 찾게 되는 Array.prototype.map() 함수에 대하여 고민해 보게 되었다. map()이 어떤 역할을 하는 함수인지, 어떻게 사용하는지에 대한 설명은 생략하고자 한다. 그 내용을 정리하기 위해서 쓴 게시글이라기보다는, 그 내용을 알면서도 활용할 때마다 항상 고민되는 주제에 대해 다루고자 한다. React에서는 map() 사용 시 key props를 사용하는 것을 권장하고 있다. 사실, ESLint 등을 통하여 작업을 하다 보면 설정에 따라서는 map() 사용 시 key를 부여하지 않는 경우 컴파일 타임에서 에러가 나는 경우도 있다. 지금 진행 중인 프로젝트에서도 ESLint를 초기화만 하고 별다른 rul..

최단 거리 알고리즘의 이해

최단 거리 알고리즘에 대해 정리해 본다. 책을 참고했음을 밝힌다. 최단 거리 알고리즘은 말 그대로 시작 지점에서 도착 지점까지 이동하는 경로 중 가장 짧은 경로의 거리를 구하는 알고리즘이다. 장소와 길은 그래프로 나타내기 때문에, 그래프 이론과 밀접한 관련이 있다. 1. 다익스트라 알고리즘 (Dijkstra's algorithm) 가장 스탠다드한 최단 거리 알고리즘이다. 시작 정점을 지정하면 해당 정점에서 출발해서 다른 정점으로 도착할 때의 최단 거리를 알 수 있다. 길찾기 알고리즘을 적용하는 가장 흔한 예는 가중치(weight)가 있는 weighted graph이므로, 나중에 발견된 정점이 최단 거리일 수 있다. 즉, 단순한 BFS로는 최단 거리를 찾지 못하는 경우가 수없이 많다는 것이다. 다르게 말하..