Computer Science
Web
Git
최신 글
-
AWS, EC2, SSH, Jenkins, Express, Github, CI/CD, BTS, Let's go
시작하기 앞서 이 글은 개념이나 방법을 설명하기 위한 것이 아닌, 삽질했던 것을 조각조각 기록해 비슷한 상황에 놓인 사람들에게 팁이 되고자 하는 용도임을 알린다. 배경 흔히 캡스톤(Capstone)이라고 부르는 졸업 프로젝트를 할 때가 되었다. 이번 팀에서의 목표는 실제로 서비스를 하는 것이며, 본인은 풀스택으로 참여한다. 기획은 올해 초부터 시작했던 터라 순조롭게 진행하고 있고, 디자인은 나오려면 아직 좀 걸리기에 그동안 할 수 있는 프로젝트 기본 세팅부터 CI/CD까지는 끝마치려고 한다. FE는 Vercel과 같은 CDN 서비스가 워낙 잘 되어있기 때문에 크게 신경 쓰지 않고, 오랜만에 BE를 EC2에 배포하다가 특수한 상황이 겹쳐 이런저런 일을 겪었다. (참고) BE의 주요 스택은 다음과 같다. -..
2023.03.19 00:58 -
SHOW ME THE CODE 2022 3rd 후기
원티드에서 주관하는 알고리즘 코딩테스트가 있어서 가볍게 참여해 보았다. 계절학기 기말고사 이틀 전이라 따로 준비는 하지 않고, 앞으로 있을 코딩 테스트의 워밍업이라는 생각으로 지원했다. 플랫폼이 BOJ 기반이라는 것을 하루 전 접속 테스트 링크를 받고서야 알게 돼서 기분이 좋지는 않았다. BOJ가 안 좋다는 게 아니라, BOJ에서 JS를 사용하기 쉽지 않기 때문이다. 2년 전 이맘때에는 C++로 알고리즘 문제를 풀었었는데, 참여하고 있는 알고리즘 스터디에서 작년부터 플랫폼을 프로그래머스와 릿코드로 옮기면서 알고리즘도 JS로 풀기 시작했다. 요새는 릿코드에서 TS로 풀고 있다. 사실 알고리즘을 JS로 푼다는 것에 대해 좋지 않은 시선이 있을 수 있다는 생각이 든다. 실제로 JS로 알고리즘을 푸는 것은 매우..
2023.01.16 21:40 -
SVG의 불편한 진실
SVG란? SVG는 Scalable Vector Graphics의 약자로, 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어라고 MDN에서 정의하고 있다. 우리는 수학 시간에 원점을 지나는 우상향의 대각선에 대해서 좌표평면 위에 그래프를 그릴 수도 있고, y = x 라는 식으로 정의할 수도 있다. 간단히 비유해서 전자가 기존의 비트맵 이미지 표현 방식이고, 후자가 SVG 방식이라고 할 수 있다. (x, y)에 어떤 색깔이 들어가는 지를 정의하는 것이 아닌, 점들 사이의 관계를 정의하는 것이기 때문에 확대해도 깨지지 않고, 파일의 크기가 상대적으로 작다는 장점이 있다. 어떻게 쓰는 건데? 이는 MDN에 있는 타원을 만드는 SVG 예제로, XML 기반의 마크업 언어라고 했던 만큼 HTML과 상당히 유..
2023.01.10 17:28 -
2022년 내맘대로 회고
정말 오랜만에 블로그에 글을 쓴다. 마지막 글이 8월이었고, 그마저도 4월 이후로 하나였다. 원래는 상반기와 하반기 회고록을 따로 작성하려고 했으나, 미루고 미루다 보니 결국 실패했다. 학기와 병행하는 것은 정말 쉽지 않은 것 같다. 정신을 차려보니 2022년이 일주일도 채 남지 않아 더는 미룰 수 없어서 드디어 회고를 쓰기로 결심했다. 그러고 보면 다른 분들의 회고를 읽어보기만 했지 직접 하는 회고는 처음이라 어떻게 진행할지 감이 안 오긴 하는데, 아무튼 내 블로그니까 내 마음대로 회고를 하려고 한다. 올해 구매 목록 1. 로지텍 MX VERTICAL 버티컬 무선마우스 아무래도 학생이다 보니 디자이너를 구할 수 없는지라 프로젝트에서 디자인까지 해야 하는 경우가 많은데, 피그마나 포토샵으로 디자인을 할 ..
2022.12.31 18:39 -
당신이 JS 개발자라면 반드시 알아야할 ES2022 신규 기능 7가지
지난 6월 22일, ECMAScript 2022가 정식 스펙으로 채택되었다. FE 개발자로서 떼려야 뗄 수 없는 JS의 새 소식이기에, 언박싱하는 느낌으로 살펴보려고 한다. Javascript는 아는데, ECMAScript는 뭔가요? 수 년 전의 웹 시장은 춘추전국시대로 비유될 만큼 다양한 브라우저들이 각자 본인들만의 스크립트 언어가 존재하는 혼돈의 시기였다. 이 때의 웹 개발은 각 브라우저에서 동작할 수 있게끔 같은 기능을 다른 언어로 여러번 작성해야 하는 끔찍한 일이었다. 이를 해결하고자 Netscape는 ECMA 학회에 Javascript 표준안을 제시하였고, 그렇게 ECMAScript라는 Javascript 표준안이 세상에 등장하게 된다. 어쩌구 저쩌구 중간에 IE가 말을 안듣는 바람에 JQuer..
2022.08.02 02:10 -
[Issue] VSCode Code Highlighting이 어색해졌다
얼마 전 VSCode의 Source Control(Git) 관련 기능들이 너무너무 느려져서 이것저것 시도하다가 VSCode를 재설치를 해봐야겠다 싶어서 재설치를 했는데, Extension까지 모두 날리고 하나씩 다시 설치하는 도중 문제가 생겼다. 나는 최근에 구입한 맥북에도 그렇고 주변 친구들에게도 그렇고 VSCode 세팅을 하면 항상 Material Theme부터 설치하라고 한다. 개인적으로 Ocean High Contrast Theme을 가장 선호한다. 그래서 여느 때와 다름없이 이것저것 설치하면서 Fira Code까지 적용하고 코드를 열어보았는데, 너무나도 어색한 것이다. 몇 달 동안 본 코드에서 prop에 붉은색으로 표시된 걸 본 적도 없고, 커스텀 타입 말고도 string이나 void도 노란색으..
2022.04.24 16:19 -
1일 1커밋에 대한 고찰(feat. 커밋 날짜 바꾸는 방법)
1일 1커밋, 깃허브를 이용하는 개발자들 사이에서 도는 운동이자 성실도를 보여주는 지표이다. 소위 '잔디를 심는다'라고도 표현하는데, 이것에 대해서 다시 한번 생각해보고자 한다. 🌱 잔디 심는 방법 Issue, PR, Discussion 어떤 Repo.에 Issue를 등록하거나 PR을 넣거나 비교적 최근에 나온 기능인 Discussion을 열면 Contribute한 것으로 간주된다. 단, Fork해온 Repo.면 안된다. Code Review Review를 남겨도 잔디는 심어진다. 단, 단순히 PR에 달아놓은 Comment는 쳐주지 않는다. Commit Commit과 잔디의 상관관계는 꽤 복잡하다. Github 공식 홈페이지에 따르면, Commit 역시 Fork해온 Repo.에는 해당하지 않으며 Repo..
2022.04.01 22:43 -
CSS Grid를 반응형으로 사용할 수 있을까: auto-fit, auto-fill
개발중인 MODIMOA는 할인 정보 종합 서비스이기 때문에 상품 리스트를 제공해줘야 한다. 리스트에는 Infinite Scroll은 적용되어 있고, 최근 리스트의 레이아웃을 어떻게 해야할지 고민이 들었다. 내가 생각한 리스트 레이아웃의 조건은 다음과 같다. 1. 상품이 잘려서 보여서는 안된다. 2. 상품 간의 간격이 일정해야 한다. 3. 리스트를 하나로 봤을 때, 좌우 여백이 동일해야 한다. (가운데에 있어야 한다.) 4. 마지막 줄의 상품들은 개수가 꽉 안차더라도 윗줄과 배치 간격이 같아야 한다. 5. 창 너비에 따라 리스트의 열 개수가 변해야 한다. (반응형) 만약 flex, flex-wrap, justify-content, gap 속성을 적절히 조합해서 사용한다면 1, 2, 3, 5번은 해결할 수 ..
2022.03.25 18:07