시작하기 앞서..

jung moon chai·2022년 6월 22일

블로그 형식의 포트폴리오 제작기

목록 보기

1/6

Nextjs를 활용한 블로그 형식의 포트폴리오 제작을 진행하며 개인적인 관점에서 느낀점, 기술 기록용으로 작성될 예정입니다:). 흥미 위주로 서술한 만큼 오류가 있을 수 있습니다. 가벼운 마음으로 읽고 지적 해 주실 부분이 있으시다면 언제나 환영입니다! :)

프로젝트를 진행하기 앞서...

나는 지금 개발자라고 할 수 있는건가?

솔직히 모르겠다.
4년 전으로 올라가 2018년 초에 학원을 막 졸업한 나는 퍼블리셔로 첫 회사에 취업하였다.
학원에 다니며 프로젝트 개발에 있어서 크게 나누어 백엔드 / 프론트엔드 로 작업이 진행 된다는 이야기들 들었으며, 프론트엔드 영역 안에 퍼블리셔라는 직군이 있다. 라고 들었다.

"그럼 나는 제이쿼리를 배웠으니 프론트엔드 개발도 가능 한건가?"

하지만 지금 생각해보면 이제 막 학원나온 사람이 실무경력도 없고 실무에 쓰이는 수많은 기술들을 접해본 적도 없었기에 참 오만했구나 라는 생각이 든다.

그 후 4년간 에이전시를 중심으로 많은 프로젝트를 진행해봤다. 다만 아쉬운 점이라면 항상 혼자 진행했다는 점. 중,소형 에이전시들의 특징이자 단점이라 할 수도 있겠다. 기술력이 아직 제대로 갖춰지지 않은 인력과 환경 속에서 오픈소스들이나 특정 cms를을 활용해서 어떻게든 구현 해내야 일단 수익이 날테니...

그런 경력이 많아서 인지 어디가서 내 스스로를 "개발자 입니다." 라고 해본 적이 없다.
근데 회사입장에서는 일단 시켰는데 코드가 어찌됐건 어떻게 만들었건 구현은 되어있다.
그냥 그대로 끝이었다. 회사동료들에게도 물어봤다. 이대로 해도 되는건지..

나 : 이거 코드를 이렇게 저렇게 이렇게 해서 돌아는 가는데 이게 맞을까요?
?? : 잘 돌아가요?
나 : 겉보기엔 크게 문제는 없어보여요.
?? : 그럼 끝이죠. 뭐

이런 경험이 많아서 일까 항상 내 스스로의 코드에 의문을 표하고 있다. 그래서 나는 아직 개발자라고 소개 할 수 없는가보다.

뭐라도 만들어보기로 했다.

일단 죽이 되든 밥이 되든 해보기로 했다.
솔직히 시도를 아예 안해본건 아니다. php를 주로 사용할때도 php로 만들어진 포트폴리오를 만들었고 react를 막 배웠을때는 react로 ~~프론트엔드~~(라고 읽고 퍼블리싱) 포트폴리오를 만들었다. 하지만 모든걸 완벽하게 끝을 내본적이 없다. 아마 짧게 빨리 끝내려 했던 생각이 커서 그랬나보다.

그래서 이번엔 널널히 규모를 좀 크게 잡아서 가보기로 했다. 나중에 대규모서비스가 됐든 소규모서비스가 됐든 만든 경험과 얻은 피드백이 도움은 되겠지..(도와주세요🙏)

?? : 일단 제대로 되든 안되든 만들어봐요. 그래야 내가 뭐가 모자란지 더 잘 알지 않겠어요?

~~퇴사하려던 나에게 한마디 던져준 누군가가...~~

그래서 뭘 만들건데?

주로 애용하던 cms 그누보드의 php코드들을 express로 백엔드를 구현하고 프론트엔드로 화면을 만들 생각을 했었다. 영카트까지 가능하면 더 좋고..
하지만 그누보드마저도 쉬운일이 아니었다.~~(당연하지;;)~~ 솔직히 전에 시도만 하다 끝난 경험이 있었다. 내가 그누보드에서 활용하던 라이브러리코드들이나 함수 코드들은 극히 일부에 지나지 않았다. 실제로 뜯어보니 아직도 이해하지 못할 코드들도 있었고 javascript로 어떻게 옴겨야할지 힌트조차 얻지 못 할거같은 부분들도 있었다.

아직도 많이 활용되고 있는 한국형cms 그누보드

일단 훅스 부분이나 일부 라이브러리와 함수는 제외하고 최대한 게시판에 포커스를 맞춰서 작업해보기로 했다. 거기에 살짝 추가해 styled-components themeprovider를 활용해 다크모드 까지 생각중인데 얼마나 살릴 수 있을지 모르겠다.

기술스택

React & Nextjs

프론트엔드는 React의 ssr를 도와줄 next로 작업 하기로했다.
next는 꾸준히 보고는 있었지만 내가 알지못한 여러 것들이 추가되었다.
전에 작업한 포트폴리오도 Nextjs로 되어 있지만 백엔드를 next custom server를 돌렸었다.
근데 next에서 api router가 생긴것을 이제야 알게 되었다. 심지어 DB접근도 가능하다고 들었다(~~실제로 작업해본적이 없어 활용 될지 미지수..~~) 그래서 api는 api router안에서 만들어볼 생각이다.

redux & redux-toolkit

상태관리는 리덕스를 활용할 계획이다. 미들웨어는 redux-saga만 써봤다.(zerocho님의 nodebird)
하지만 리덕스 툴킷의 장점이 마음에 들어 한번 이번에 활용해보고 redux-thunk도 같이 공부해보기로 했다.

redux-toolkit의 장점으로는 두가지정도를 꼽는다.

react에 붙이는 상태관리 라이브러리는 대표적으로 redux와 mobx가 있는데 mobx는 redux보다 연결하기 쉽다는것이 장점이라 할 정도로 redux를 연결시키는데에는 그 만큼 코드량이 많다는것이다. 하지만 redux-toolkit을 활용하면 상당수 코드를 줄일 수 있다.

 import { createWrapper } from 'next-redux-wrapper';
 import { applyMiddleware, createStore, compose } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
 import createSagaMiddleware from 'redux-saga';

 import rootReducers from '../reducers';
 import rootSaga from '../sagas';

 const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => {
   return next(action);
 };

 const configureStore = () => {
   const sagaMiddleware = createSagaMiddleware();
   const middlewares = [sagaMiddleware, loggerMiddleware];
   const enhancer = process.env.NODE_ENV === 'production'
     ? compose(applyMiddleware(...middlewares))
     : composeWithDevTools(applyMiddleware(...middlewares));
   const store = createStore(rootReducers, enhancer);
   store.sagaTask = sagaMiddleware.run(rootSaga);
   return store;
 };

 const wrapper = createWrapper(configureStore, {
   debug: process.env.NODE_ENV === 'development',
 });
 export default wrapper;

configStore.js 코드

의존성이 적어진다. redux를 활용할때 redux-devtools, immer 등과 같은 주변 라이브러리를 필요로 하지만 redux-toolkit은 이미 내장 되어있다.

express

솔직히 express는 잘 모르겠다. api router에 작성된 문법들을 보니 express랑 크게 많이 다른점은 없다 생각되서 작성하였다. 실제로 db연결헤 문제가 있으면 다시 custom server도 활용해야 하기때문에 일단 기술스택으로 선정하였다.

그외..

여러 써드파티 라이브러리들이 사용될것이다. 생각나는대로 나열하자면
lodash, moment, dotenv, jsonwebtoken, mysql2, multer 등이 있겠다.

jung moon chai

고급개발자되기

다음 포스트