[BlogDev] 사이드바 카테고리 세부분류 3

도입

이전 작업 이야기

• [Blog] 사이드바 카테고리 세부분류

• [Blog] 사이드바 카테고리 세부분류 2

뭐 사실 작업 과정에 대해서는 위의 세부분류 2에서 몇 시간을 들여서 너무너무 자세하게 적어놨기 때문에 작업하는 절차에 대해서는 더 설명할 필요는 없을 것 같다. 이 글을 보고 있는 누군가 과정이 궁금하시다면 세부분류 2 링크를 참고하시길.

작업 동기

SSAFY에서도 본격적으로 스터디 모집을 하길래 프론트엔드 스터디를 모집했다. 생각보다 동기들이 관심을 많이 가져줘서 순식간에 6명을 채울 수 있었다. 아무튼 스터디장으로서 책임감도 생기고, 이제 스터디도 모았으니 본격적으로 SSAFY 과정과 함께 FE 공부를 병행하게 될 것이다.

그런데 조금이나마 바쁘지 않은 시기에 환경을 다 만들어두어야 나중에 어떻게 추가하더라도 편할 것 같아 오늘 날을 잡고 사이드바 카테고리를 완전히 확장하게 됐다.

사실 완전히는 아니다. 비중을 많이 둘 것 같은 Vue.js나 React.js는 세부 카테고리 없이 그냥 바로 링크를 통하게 해두었다. 뭐가 어떻게 갈래를 뻗쳐나갈지 감이 안 잡혀서 말이다. 그건 나중에 포스트가 많아지면 그때 가서 서브카테고리를 나눠볼까 싶다. 뭐 아무튼 작업에 대해 적어보자.

0. Before

작업 전의 사진이다. 첫 번째 대분류 카테고리인 FRONTEND 부분이 상당히 비루한 것을 볼 수 있다. 사실이다. 자바스크립트 공부도 하지 않았었고, 프론트엔드라면 HTML과 CSS만 했던 것이고, 그마저도 포스트 하나하나 무게를 많이 둔 탓에 포스트가 많지 않아 방치되었다.

이제 JS, TS, SPA, SSR, Bundler, 상태관리, 프로젝트 등을 아주아주 세분화하여 환경을 마련해둘 필요가 있겠다고 생각이 들었다.

1. FE Language

이것이 FRONTEND에서 가장 비중을 많이 둔 Language 중분류 카테고리이다. 기존의 HTML, CSS는 카테고리명 변경 없이 그대로 소분류로 이동시켰고, JS, TS, CSS 전처리 항목을 추가했다. 이들 모두 비중을 크게 둘 것이기 때문에 극소분류로 다시 세분화하여 테스트파일로 카테고리를 활성화 시켜두었다.

JS

JS는 현재 네이버 부스트코스로 기초부터 다져나가려고 스터디에서 계획을 잡아두었기 때문에 가장 첫 번째로 배치해두었고, 유튜브를 보면서 얻게 되는 정보들도 짤막짤막하게 youtube 카테고리에 포스트할 것이다.

자바스크립트와 관련해서 유튜브나 블로그를 보다보면 CS에 대한 것들이 참 많다. 그래서 그런 것들을 종합해서 보려고 CS 카테고리를 따로 만들었고, 모든 것에 포함되지 않는 JS 포스트를 모아두려고 미분류 카테고리인 etc를 만들었다.

TS

TS는 아직 어떻게 배우고 익힐지 감이 안 와서 그냥 샘플 카테고리를 만들어놓았다. 유튜브로 가볍게 공부할 수도 있고, 인프런이나 부스트코스 같은 학습 사이트를 이용할 수도 있다. 뭐든 그때 가서 새로 넣거나 바꾸면 된다.

CSS 전처리

LESS보다는 SCSS를 더 깊게 파게 될 것 같지만, 카테고리를 내린만큼 하나는 아쉬워서 LESS도 만들었다. SCSS는 minima theme에서도 주력으로 쓰고 있기 때문에 BlogDev를 하며 유용할 SCSS 기술들이나 속성들이 있다면 SCSS에 포스트할 것이다. 블로그 커스텀을 하면서 알게 된 SCSS 관련된 것들이 너무 많아서 얼른 쓰고 싶다!

2. FRONTEND

나머지는 항목만 만들어놨을 뿐 조금씩 밖에 없어서 한 번에 기록하려고 한다.

SPA와 SSR

SSAFY에서 다루는 Vue.js, 그리고 스터디나 개인적으로 공부하고 익혀볼 React.js, 그리고 React.js의 확장과 고급인 NEXT.js를 항목으로 넣었다.

처음엔 사실 모두 비슷한 개념이기 때문에 Framework로 묶어보려 했으나, React.js가 라이브러리인 것이 영 찜찜했다. 이 모든 걸 아우를 용어가 생각이 나지 않았고, 그냥 CSR인 SPA 소분류로 React.js와 Vue.js를 묶었다. 그리고 SSR 요소를 추가해주는 NEXT.js를 SSR 소분류로 넣었다.

조금 찝찝하지만 지금으로서는 최선인 것 같다.

Bundler

번들러도 공부해보려 한다. 파일들을 제각각 묶어 다시 나름의 규격으로 분리하여 네트워크나 파일 로직 충돌 같은 상황을 방지하는 기능을 한다. 사실 공부 안 해봐서 나도 잘 모른다.

SCSS와 마찬가지로 Webpack을 더 깊게 다뤄볼 것 같다. Parcel은 애초에 잘 들어보지도 못 했고 Webpack이 조금 더 대중적으로 다루는 느낌이라서? 무엇보다 SSAFY를 하면서 당장은 여러 가지 할 시간도 부족할 것 같다. SSAFY 이후나 취업 이후에도 계속 공부를 하면서 기록을 할 수 있다면 좋겠다.

Project

FE를 공부하면서 공부한 것들을 써먹는 프로젝트들을 여러 가지 해볼 것 같아 만들어본 카테고리이다. 지금까지는 Dev etc에 있던 BlogDev를 프로젝트로 끌고 왔다. 사실상 지금까지 내 개발 인생에서 제일 오래 시간과 노력을 들인 프로젝트는 단연 블로그 커스텀이기 때문이다.

다른 프로젝트로는 클론코딩도 생각중이어서 샘플 카테고리를 만들어놓았고, 앞으로 스터디를 하며 협업을 하게 될 수도 있고, 개인적으로 토이 프로젝트를 만들거나 사이트를 만들어볼 일도 있을 것 같아서 이 프로젝트 카테고리에 어떤 포스트들이 들어차게 될지 기대가 된다.

3. BACKEND

아까 처음에 봤던 오늘 작업 이전의 사진이다. 파이썬이 냅다 92개의 포스트를 자랑하고 있다. 이 위압감 때문에 쉽게 들어가지지 않는 것도 사실이다.

그리고 지금이다.

Language

지금까지 다뤄본 백엔드 언어라고 해봐야 파이썬 밖에 없다. SSAFY 이전에 유튜브를 파보며 정리했던 것들, 그리고 SSAFY 사전학습으로 SWEA에서 공부하며 정리했던 것들이 전부이다.

그런데 다 파이썬이라 분류하기가 애매해서 그냥 유튜브랑 SWEA로 나누었다. SWEA2는 SSAFY에서 공부했던 내용 중에 그동안 다뤄보지 않았거나 중요하다고 생각되는 내용들을 추가로 보충할 것이다.

또한 JS를 공부하면서 Node.js도 다뤄볼 기회가 있다면 다뤄보고 싶어서 카테고리에 넣어두었다. 이외에는 백엔드 언어에 크게 욕심은 아직까지 없다. 너무 확고한 프론트엔드 맵이 마음 속에 있어서 그마저도 하려면 여유가 부족할 것 같다.

Framework

Django를 카테고리로 만들어두었다. SSAFY에서 3월달부터 Django를 들어가는데, 그때 공부하는 내용들은 저 카테고리에 포스트로 잘 정리돼서 들어가지 않을까 싶다.

DB

이 역시 SSAFY의 교육 커리큘럼을 생각하며 만들었다. DB와 SQL을 배우는 시간들이 있는데, 정확하게 뭐할지 몰라서 그냥 만들어만 두었다. 개인적으로는 mongoDB나 Express 같은 걸 배워서 사이트를 연결해보고 싶은데 아직은 불투명하다.

이후 계획

FE와 BE의 분류가 부족해서 오늘은 이를 완성하는 것이 목표였고, 잘 완성했기 때문에 정리해보려 한다. 이후에 내용이 추가될 여러 가지 요소들이 있기는 하다.

PS

이미 PS는 BOJ와 SWEA 모두 완벽하게 짜져있지만 프로그래머스나 코드포스 등의 다른 플랫폼을 다뤄볼 수도 있고, 무엇보다 지금까지는 파이썬으로만 문제를 풀었는데, FE 개발자답게 JS로 문제를 풀어보고 싶다. 그래서 PS_Python, PS_JS(PS_Node) 등으로 대분류 카테고리 자체를 분류하게 될 수도 있겠다. 고민을 조금 해봐야겠다.

Algorithm

SSAFY에서는 앞으로 2달 정도는 알고리즘을 파게 될 것이다. 이 과정에서 배우는 것들을 포스트로 정리할 예정인데 어떤 기준으로 나눠야할지 모르겠어서 일단은 패스하기로 했다. 나중에 포스트가 많아지면 그때 고려해보는 것으로 하자.

PSR

앞으로 봉사활동이나 헌혈, 기부 등 다양한 사회공헌을 생각중인데 지금은 별로 없어서 상관이 없지만 포스트가 쌓일수록 지저분 해질 것 같다. 그래서 이를 나눠볼까도 생각해보는데 아직은 역시 포스트가 너무 없어서 나누는 게 더 민망할 것 같아 포기했다.

마무리

다행인 점

사이드바 카테고리를 작업하면서 url이나 파일의 경로에 대한 이해, 그리고 무엇보다 카테고리와 포스트 파일의 연결을 찾아가면서 디렉토리 구조에 대한 깊은 이해가 가능해졌다. 그래서 이전에 오래 걸리던 것을 생각해보면 오늘은 훨씬 수월하게 카테고리를 구성할 수 있었다.

물론 디자인이나 클래스 부여, 컴포넌트화가 다 완성이 되어서 값만 바꿔주는 구조가 됐기 때문이기도 하다. 역시 0에서 1이 힘들지 1에서 10이 힘들지는 않은 것 같다. 덕분에 수월하게 했다.

Push Error

중간에 실제 파일은 javascript.html 처럼 저장했는데 include하는 파일 경로에는 js.html 파일처럼 적어두어서 push 오류가 생겼다. 다행히 Language 파트를 하던 때인데 푸시 없이 너무 많이 진행해서 쎄해서 푸시해서 알게 되었다.

그런데 Language만 하더라도 꽤나 파일이 많아서 어디에서 어떻게 틀렸는지 정말 못 찾겠더라. url/tag/category 등등 실수했을 법한 곳들을 찔러보며 고쳐봤지만 선명하게 가위표 쳐진 github을 보며 나는 우울하기만 했다.

그래서 파일만 따로 저장한 뒤에 다 밀어버리고 조금씩 추가하며 푸시해보면서 잘못된 부분을 찾아 해결할 수 있던 것이다.

앞으로 꼭 규모가 큰 개발을 할 때에는 조금씩 코드를 푸시해보도록 하자!!