[MIL] 데브코스 프론트엔드 한달 회고 2

 

벌써 2번째 MIL이 다가오다니... 😱 난 아직도 거북이처럼 공부를 하고 있는데 벌써...?

저번에 다짐 했던 WIL이라도 작성하자는 나의 다짐은 결국 지켜지지 않았다 😔

핑계를 대자면, 일단 공차 일정 조율이 나의 깊은 고심 끝에... 저번주 쯤 부터 토요일 하루 근무로 변경되었고, 그 사이에 유독 약속이 많았다.

왜 막상 내가 이렇게 바빠지면 약속도 자연스럽게 많아질까.... 이상한 현상이다.... 

특히 1년 만에 만나는 사람도 많았고, 무조건 참여해야할 일(기념일.. 여행..)들이 많아 약속을 취소하거나 미룰 수가 없었다 ㅜ.ㅜ

 

그래도 이제는 약속도 한동안 없고(근데 연말이라 또 생기긴할듯...😱), 공차도 하루로 줄였으니까 좀 괜찮을 것 같다!!

다음에는 WIL이든 뭐든, 블로그에 일주일에 한번은 무슨 얘기든 적어봐야겠다(진짜로!!!😅)

 

 

 🤍 한달 동안 학습 했던 내용 중 인상 깊었던 것? (23.10.21 - 23.11.20) 

 

한달 동안 했던 것들을 떠올려보니... 노션 클로닝, Vercel 배포, CSS, Typescript 정도를 꼽을 수 있는 것 같다!

 

아무래도 나는 이 중에서 가장 힘들었던 노션 클로닝 프로젝트가 계속 생각이 난다.

 

팀원들과 아침 6시까지 디코에 머무르며 겨우 완성했던 기억이 ㅋㅋㅋㅋ 

 

 

다른 사람에 비해서는 확실히 허접했던 결과물... 이지만... (특히 이때는 CSS를 잘 몰라서 더더욱 💦💦)

그래도 만들어보면서 몇 가지 배운 점들이 많다.

 

1. 함수명과 관심사의 일치

 

    const fetchDocuments = async() => {
        const documents = await request('/documents')
        this.setState(documents)
        sideBar.setState(documents)
    }

 

fetchDocuments 라는 함수명은 '문서를 가져오다' 라는 의미를 갖고 있다.

그렇지만 해당 함수가 실제로 수행하는 일을 살펴보면, 문서를 가져온 뒤 상태를 업데이트해주는 일까지 하고 있다.

이는 함수명과 관심사의 불일치로 이어지므로 지금처럼 혼자 프로젝트를 진행하는 경우 크게 문제가 발생하지 않을 수 있지만, 여러 팀원들과 같이 개발을 하는 경우에는 해당 함수가 어떤 일을 하는지 정확히 알 수 없어 불편함을 일으킬 수 있다.

 

그렇기 때문에 해당 함수는 다음과 같이 수정했다.

 

    const fetchDocuments = () => request('/documents')

    const updateStateWithFetchedDocuments = async() => { 
        const documents = await fetchDocuments()
        this.setState(documents)
        sideBar.setState(documents)
    }

 

 

기존의 fetchDocuments 라는 함수명은 '문서를 가져온다'는 의미를 가지므로, 실제로 API 호출을 통해 문서를 가져오는 동작을 하는 request()를 따로 빼 해당 기능을 하는 함수에게 fetchDocuments 이름을 붙여주었다.

그리고 '가져온 문서로 상태를 업데이트'하는 기존의 함수에게 updateStateWithFetchedDocuments 이름을 붙여주었다. (근데 이 이름이 괜찮은지는 잘 모르겠...^^;;)

 

이렇게 함수명과 관심사가 일치하도록 만들면 코드의 가독성이 향상되고, 해당 함수가 정확히 무슨 일을 하는지 명확하게 알 수 있으므로 이후 유지보수가 용이해진다.

또한 관심사가 일치하는 함수는 이후 재사용을 하기 쉽다. 실제로 해당 프로젝트에서는 문서를 가져오는 작업을 여러 곳에서 하고 있었는데, 기존의 fetchDocuments 를 위 내용으로 변경하니 함수를 재사용할 수 있어서 굉장히 편리했다! 

 

 

2. 추상화 레벨과 휴먼 에러

 

다음으로는 API 호출을 하는 request 함수를 만들며 고민했던 부분이다.

 

export const request = async (url='', options={}) => {
  try {
    const res = await fetch(`${API_END_POINT}${url}`, {
      ...options,
      headers: { ... },
    });
    ...
};

 

기존의 request 함수는 url을 전부 받아와서 API호출을 하게 되었는데, 여기서 휴먼에러가 자주 발생하게 되었다.

 

💡 휴먼 에러란?

말 그대로 인간에 의해 의도하지 않은 에러가 발생했음을 의미한다. 나는 프로젝트 중 request함수를 사용하면서 /documents 인지, 그냥 documents 를 사용해도 되는지 매번 헷갈렸고 실제로 저 슬래시(/) 때문에 url을 잘못 작성하며 잘못된 API호출을 몇 번 하게 되었다...😢

 

추상화 레벨이 높을수록 자유도는 높아진다! 그렇기 때문에 해당 url에 다양한 값을 넣을 수는 있다는 장점이 있지만, 그만큼 휴먼 에러가 발생할 확률도 높아졌다. 그렇게 때문에 나는 해당 함수를 이렇게 바꾸었다.

 

export const request = async (url='', options={}) => {
  try {
    const res = await fetch(`${API_END_POINT}/documents${url}`, options)
    ...
};

 

🧸 바꾸게 된 이유

1. 현재 API의 호출들은 전부 API_END_POINT/documents, 혹은 API_END_POINT/documents/게시물id 로 이어진다.

2. 그렇기 때문에 해당 함수의 추상화 레벨을 낮춰, 슬래시(/) 때문에 일어날 수 있는 휴먼에러를 방지해도 괜찮다고 판단했다.

 

🧸 이후 발생할 수 있는 문제점

1. 여전히 API_END_POINT/documents/게시물id url로 호출해야하는 경우, 슬래시(/)로 인한 휴먼 에러가 발생할 수 있다.

 

해당 문제점은 멘토님이 지적해주신 부분이고, 이를 해결할 수 있는 방법까지 제안해주셨다! (멘토님 짱)

바로 정규식을 이용하여 해당 url의 맨 앞에 슬래시가 존재한다면 제거한 뒤 직접 붙여줌으로서 휴먼 에러를 방지하는 것이다.

 

const res = await fetch(`${API_END_POINT}/documents/${`${url}`.replace(/^\/(.*)/, '$1')}`, options)

 

최종적으로 request 함수는 이렇게 완성이 되었다!

 

해당 문제를 겪으며 추상화의 레벨을 언제 높이고, 언제 낮추면 좋은지에 대해 고민할 수 있어서 좋았다.

무엇이든 정답은 없으며, 중요한 건 내가 왜 이 코드를 이렇게 작성했는지를 설명할 수 있도록, 근거있는 코드를 작성해야겠다고 생각했다.

 

사실 위 내용은 멘토님과의 커피챗에서 매번 자주 얘기 나오던 부분이고, 그만큼 강조도 많이 하셨다.

단 한 줄이라도 이유 없이 작성해서는 안된다!

실제로 프로젝트를 진행하며 정말 많이 고민해볼 수 있는 문제들이었기 때문에 좋은 경험이었다 🥺👍

 

 

CSS (+ Vercel)

 

이 외에도 노션 클로닝 프로젝트를 하면서 여러가지 배운 점이 많은데... 아직 고칠 부분도 많고 또 CSS도 다시 제대로 적용해보고 싶다는 생각이 든다. 

노션 할 때만 해도 난 정말 CSS에 대해 거의 아무것도 모르는 사람이었기 때문에.... 😱

 

이번 CSS 강의 기간에 박영웅 강사님이 Flex, Grid에 대해서 정말 친절하게 알려주셔서 너무 좋았다.

나는 확실히 그림을 그려주시며 자세히 설명해주시는 분이 가장 나와 잘 맞는다고 생각한다 ㅋㅋㅋㅋ

나도 직접 그리고 필기해야만 제대로 이해를 하는 편이고... 그래서 가장 공부할 때 선호하는 방법이라ㅎㅎㅎ

근데 그러다보니 강의가 정말 많이 밀려서 (친절한 설명만큼 매우 긴 분량ㅋㅋ ㅠㅠㅠ) 나중에라도 다시 제대로 정리해보는 시간을 가져야겠다.... 특히 Grid에 대해서 강의를 꼼꼼하게 들어야겠다!

 

CSS 강의 과제로는 유튜브 클론 코딩을 진행해보았는데,

 

https://youtube-css-clone-one.vercel.app/

Youtube

(아니 섬네일이 왜 하필 ㅋ;;)

 

배포는 Vercel을 이용했다!

부끄럽지만.. 그동안 여러 프로젝트를 경험해봤지만, 이런 데모사이트 배포 과정에 대해서는 잘 몰랐다.

그런데 데브코스에서 vercel을 비롯한 여러 배포 방법들에 대한 강의를 제공해줘서 이번에 한번 적용하게 되었는데, 덕분에 코드 리뷰 때 데모 사이트를 통해 만든 결과물을 자세히 보여줄 수 있어서 좋았다! ㅎㅎ

 

 

요런 느낌의 결과물이 나왔다~!

사실 다른 분들에 비하면 여전히 허접..하지만.. 

노션 때 정말로 더 처참했던ㅋ CSS를 생각하면 나름 발전했다고 느껴져서 혼자 뿌듯했다 ㅋㅋㅋ 🧡

 

🧸 느낀점?

이번에 Flex에 대해 배우면서 처음으로 Flex Container, Flex Items의 개념이 있다는 걸 알았고, 또 각 역할에 따라 사용할 수 있는 속성이 다르다는 점을 알게 되었다.

몰랐던 정보들이 한꺼번에 들어와 좀 정리가 잘 안 된 상태였는데, 유튜브 클론 코딩을 하면서 실제로 Flex를 사용해보니 그제서야 좀 정리가 되고 더 이해하게 되었다. (물론 여전히 쫌 어렵긴 하다... 차차 더 배워가는 것으로... )

왜 CSS는 클론코딩으로 많이 연습해봐야 실력이 늘 수 있다고 하는지 알게 되었다ㅎㅎ

 

 

 🤍 코테 스터디 

 

지금도 매일 평일마다 코테 스터디를 진행하고 있다! 

원래는 평일 4시마다 스터디를 진행했고, 이번 주에 팀이 바뀐 뒤로는 코어타임이 끝난 뒤 7시 10분에 모여서 진행 중이다.

 

저번 기간과 달라진 점으로는

1. Lv.3문제 도전하기

2. 백준 문제 풀어보기

정도가 있다.

 

내가 처음 데브코스를 시작하며 목표했던 것 중 하나가 바로 코테 Lv.3문제를 풀 수 있는 사람이 되기! 였다.

 

그래서 데브코스를 시작하며 코테 스터디에 참여해 매일 문제를 풀었지만, 아무래도 초반에는 자바스크립트로 코테를 푸는 것도 미숙했고, 또 코딩과 굉장히 멀어진 상태에서 다시 공부를 시작했기 때문에 Lv.2부터 천천히 풀어보게 되었다.

 

그리고 이번 한달 사이에 처음으로 Lv.3 문제를 몇 개 풀어보게 되었다.

 

 

물론 아직 푼 개수도 적고, 저 문제들을 100% 온전히 나의 머리로만 풀지는 못했다...

그렇지만 1년 전에 Lv.2 문제도 덜덜 떨면서 접근조차 못했던 내가 무한 박치기 끝에 지금은 무난하게 풀고 있는 것 처럼, Lv.3문제도 계속해서 도전한다면 언젠간 내 실력만으로 풀 수 있게 되는 날이 오지 않을까... 하는 희망을 보게 되었다ㅎㅎ🥹

 

확실히 속도는 더디지만, 분명히 나아지고 있음을 느끼고 있다.

 

다음 한달 동안에는 Lv.3 문제를 나의 힘으로만 풀 수 있는 순간이 오도록 앞으로도 꾸준히! 스터디에 적극 참여해야겠다 🔥 

데브코스 초반부터 지금까지도 코테스터디에 진심인 우리 1차 팀원분들께 정말 감사한 마음 뿐입니닷... 💌

정말 우리 팀원들이 진심이라고 느꼈던 점 : 노션 클로닝과 각종 과제 때문에 날밤 새면서도 단 하루도 거르지 않고 코테 스터디 진행함...

감동받은 나의 모습

 

 

🧸 어려웠던 점?

그리고 구현, BFS문제를 더 집중적으로 풀기 위해 프로그래머스 뿐만 아니라 백준에서도 문제를 고르게 되었다.

그런데 백준 처음 풀 때 당황한 점...

node.js 환경에서 개발을 해야하는데, 입출력을 어떻게 하는지 모르겠다....😱

생각해보니 자바스크립트로 개발하면서 한번도 입출력을 받는 코드를 작성해본 적이 없다는 걸 깨달았다.

 

const fs = require("fs");
const filePath = "./input.txt";
const input = fs.readFileSync(filePath).toString().trim().split('\n');

/*
const input = require('fs').readFileSync('dev/stdin').toString().trim().split('\n');
*/

const [N, M] = input[0].split(" ").map(Number);
const map = input.slice(1).map(_ => _.trim().split(' ').map(Number));

 

구글링을 통해서 겨우 방법을 알아냈다. ㅋㅋㅋㅋㅋ

아마 c에서 fopen() 이런 함수들 쓰는 것과 비슷한 느낌... 정도로 보이는데

나중에 이것도 제대로 원리에 대해서 공부해 볼 필요가 있는 것 같다.

난 이상하게 이런 것들이 궁금하더라🤧 그래서 운영체제도 좋아하는듯...

 

블로그에 글 쓸만한 주제로 v8엔진, 자바스크립트 컴파일 과정, 파일 오픈 과정 이런 것들 주로 써보고 싶다.

특히 내가 그동안 써왔던 언어와 차이점 비교해보면서.

미래의 제가 해낼 수 있겠죠? 하하하 (제발)

 

🧸 신기했던 점

한 2년 전부터 코테 문제들 풀이 코드 백업해둔 레포지토리 옆에 language 분석이 있길래 봤더니...

 

데브코스 시작 전만해도 c++이 거의 90%? 가 넘어갔는데 ㅋㅋㅋㅋ 지금 거의 반반된거 완전 신기!!!!!

나도 이제 자바스크립트 문법에 꽤 적응했다는 게 스스로 느껴져서 뿌듯했다 ㅎㅎ 이제 좀 어엿한 프론트엔드 개발자가 되어가는 걸까 ㅋ

지금 다시 코테 c++로 풀라고 하면 조금 힘들지도... 

근데 그렇게 배운 것들 까먹는게 싫어서 한동안 c++, javascript 2개 언어로 푸는 연습을 했었는데... 한 번 시간 없다고 안하게 되니 쭉 자바스크립트로만 풀게 된다... 쩝

 

당분간은 프론트엔드 개발자로서 역량 쌓기에 더 집중하는 것으로....😅

 

 

 🤍 커피챗, 그리고 오프라인 만남, 1차 팀원들과의 인사...  

MIL을 생각나는 대로 다 작성하다보니 마감 1시간 전이라... 이건 간단히만 적어보려고 한다.

 

 

 

(종욱님 수현님 매번 커피챗 내용 잘 정리해주셔서 감사합니다!! 🥹👍👍)

 

이번 한 달 사이에도 일주일마다 문동욱 멘토님과의 커피챗이 진행 되었는데, 주제들이 다 너무 좋았어서 이 내용들에 대한 나의 생각도 다시 한 번 정리해보고, 기회가 된다면 블로그 글을 따로 작성해보려고 한다.

 

🧸 극히 개인적인 감상

에러 처리, 네이밍 컨벤션, 함수명과 관심사의 일치와 불일치... 등 여러 주제에 대해서 이야기 나누며 개인적으로 느꼈던 감상이 있다.

 

바로 커뮤니케이션의 중요성이다.

 

네이밍 컨벤션을 지키는 이유라던가, 함수의 추상화 레벨을 일정한 수준으로 통일시켜야하는 이유라던가, ....

이건 공차에서도 음료 만드는 방식, 펄 끓이는 시간 등 업무 프로세스들이 각 매장의 특성에 따라 조금씩 다른데, 모든 직원들이 해당 매장의 문화를 따르도록 교육하는 이유와 같은 맥락이라고 생각한다.

 

조직에는 규칙이 필요하고, 그 규칙을 따르면 불필요한 소통을 줄일 수 있다. 그리고 의도하지 않은 사고를 방지할 수 있다.

 

결국 어떤 일이든 전부 사람과의 소통이 필요한 부분이고 조직에서의 커뮤니케이션 방식에 따라 업무의 효율이 결정된다.

그렇기 때문에 이 또한 개발자로서 길러야하는 중요한 역량이라고 생각한다.

내가 왜 시간이 쪼달리면서도 공차 일 그만두기 싫어하냐면, 뭐 음료 만들고 돈 버는 것도 좋지만 ㅋㅋ 바로 이런 커뮤니케이션의 중요성을 깨닫게 해준 첫 환경이자 지금도 역량을 키울 수 있는 현장을 제공해주기 때문이다.... 개인적으로 정말 도움이 되었다고 생각한다. 지금도!

 

이거 더 쓰면 너무 길어질듯... 아무튼 자세한 감상과 내용은 나중에 새 글로 제대로 적는걸로...

아니 글 쓸 주제는 이렇게 많은데ㅋㅋㅋ 매번 강의 들으랴 과제하랴 스터디하랴 글 쓸 타이밍 잡기가 힘들다..

다들 어떻게 매일 TIL 작성하시는 건지... 존경스럽습니다...

 

***

 

그리고.... 저번주를 마지막으로 1차 팀원들과 작별을 하게 되었다..... 🤧🤧🤧

 

 

유난히 코드 리뷰에 진심이었던 우리 팀원분들.... ㅋㅋㅋㅋㅋ

그냥 감상평 딱 한 줄 적고 마는 게 아니라, 정말 진심으로 코드를 한 줄씩 정독하며 정성이 담긴 리뷰를 해주셔서 나도 덩달아 코드 리뷰에 진심이 되어 세심하게 작성하게 되었다. 

그러면서 서로의 코드를 보며 새롭게 배워가는 점도 많았고, 또 리뷰가 다들 워낙 친절하고 상세하게 달아주셔서, 덕분에 그에 맞춰 코드를 리팩토링하는 과정이 수월했다!

 

 

너무 길어서 캡처에 다 안담기는거 감동 실화..... 흑흑

 

비록 1차 팀 기간은 끝났지만, 코테 스터디와 앞으로 새로 시작할 딥다이브 스터디가 남아있으니, 앞으로도 쭉 소통하며 끝까지 과정 함께했으면 좋겠습니다!! 💞

 

 🤍 마무리 (+앞으로의 계획)  

 

시간에 쫓기다보니 뭔가 급 마무리가 되었는데... 

이번 한달 동안 아쉬웠던 건 아무래도 블로그 글 아무것도 못 쓴 거랑, 강의 자꾸 밀리는 거?

필기를 상세하게 하는걸 좋아하다보니 매번 강의를 들으면 시간이 너무 오래걸리고, 결국 계획 했던 일을 다 못하게 되었다.

 

그래서 공부 방식을 한번 바꾸어 보려고한다.

다음 한달 동안에는 강의의 세세함에 집착하지 않고, 특별히 궁금했던 점 위주로 공부해보려고 한다.

블로그 글도 일주일에 1개 아무 주제로라도 적어보기. 단순 내 생각 나열이라도 한번 적어보기.

그리고 시간만 된다면 개인 블로그 만들어보기... 마크다운 문법 쓰고 싶다.

 

다음 회고에는 좀 더 발전한 모습으로 글을 작성하고 싶다. 위에서 다짐했던 내용을 지킨 사람이 될 수 있길.... 

다들 한 달 동안 넘 고생많으셨습니다! 그리고 새롭게 만나게 된 2차 팀원분들 반가워요 😎