배경이 잘못나와서 다시 올립니다. 죄송합니다.


국비지원만 6개월 짜리 1번 + 3개월짜리 1번 받았었습니다.

그리고 남는시간은 개발서적이나 끄적이며 자료구조만 이해하는데 시간을 썼습니다.

저의 수준은 언어는 딱 하나… 자바스크립트만 사용할 줄 알고 다른 언어는 맥락만 이해할 수 있을 뿐 완전히 이해하고있진 않습니다.

그리고 지금으로부터 3개월전. 2021년 6월에 처음으로 첫 직장 인턴을 갖게 되었습니다.

회사는 스타트업에 통신계쪽 이었구요. 개발문화나 방향성이 재대로 잡혀져있지 않아 낙동강 오리알처럼 오늘은 무엇을 해야할지 고민부터 하게 만드는 회사였습니다.

사수또한 존재하지도 않구요.

가만히 있을순 없어서. 먼저 회사의 공식홈페이지와 서비스를 소개하는 패이지 2개를 만들어보자고 생각하고 바로 시작을 했죠.


첫번째 페이지는 이 회사에서 서비스하고있는 앱을 소개하느 페이지였는데. 디자인 초안만 재플린(xd)으로 갖추어져 있었고 이미지 파일이나 폰트파일은 갖추어져있지 않은 상태로

일을 하게 되었죠. 좋은 화질의 이미지가 없다는 것 자체만으로도 스트레스가 쌓이더군요. 규격도 다르고... 그래서 포토샾과 어도비, xd를 통한 디자인을 먼저 공부하기 시작했습니다.

이 몸에 맞지않는 옷을 입은듯한 느낌은 정말... 힘들더군요.

디자이너라는 직업이 있을만한 이유가 있구나 하고 공감하게되는 무거운 프로그램이더라구요.

여차저차 만들게 되고. 팀원께 재플린으로 공유를했지만 돌아오는 피드백은 없었네요...


그래서 그냥 기다리지 말고 일단 먼저 만들고 나중에 혹시나 돌아올 피드백은 나중에 수정하자 생각해 바로 작업에 시작해게 되었습니다.

처음 생각한건 흔한 구조(하나의 페이지의 섹션을 아래로 늘려서 최대한 클릭은 줄이는 기장 기초적인 디자인)을 채택하게 되었습니다.

그리고 구글에서 권장하는 검색엔진에 최적화 시키기 위해 반응형으로 만들기를 추천한다고 하기에 초심으로 돌아가 순수 HTML,CSS,JS만 가지고 만들자 생각했습니다.

만들기전 규칙은 다음과 같았습니다.

1. 라이브러리 절대 사용하지 말기. 모든 집적 구현하자.

2. HTML은 시멘틱하게 의미의 맞는 태그를 사용하자.

3. css의 셀렉터의 규칙인 BEM을 따르기.

4. 반복하지말기.

5. 모듈화 잘 해놓기.

6. 변수 이름 잘짓기.


이 여섯가지를 기본으로 가지고 시작하게 되었습니다.

어느정도 CSS가 입혀진 상태는 다 만들어지고 이전에 잘 알고있었던 DOM의 대한 지식을 토대로

자동스크롤링이라던지, 무한 스크롤 이미지 애니메이션?, CSS인젝션을 통한 액션들을 직접 알고리즘 문제 풀듯 만들어 제법 봐줄만한 페이지가 나오더군요.

하지만, 문제는 반응형에서 나타났습니다.

예전에 대충 만들어본 경험은 있지만 실제로 모든 사이즈에 대응하는 반응형(데스크톱,태블릿,모바일 등 수많은 기종들)을

만드는 시간과 노력이 완전 노가다이더군요. 결국 어찌저찌 만들었습니다. 그후 배포하는 과정을 들어가서 작업의 브레이킹이 걸려버렸었습니다.

회사가 호스팅업체를 가비아로 사용했었는데. 예전에는 구글링해서 그냥 따라하면 배포를 했지만 정작 이게 어떻게 돌아가는지에 대해서 제대로 알고자. 

도메인 원리와 반복적 질의를 통해 내가 맞닥들이는 부분은 어디인가를 중점으로 공부를 했습니다. 

결국 DNS 와 관련된 지식이 보충이 되어서 이날은 보람있는 하루가 됬었던 기억이 있네요.

이 정적 페이지를 만드는 과정에서 배운건 크게,

1. 반응형에 적합했던 size와 관련된 값은 rem,vh,% 이라는걸 알게 되었습니다. 의외로 rem은 너무 독립적이라 반응형에 어울리지 않더군요.

2. 이미지 사이즈는 항상 정확하게 기입하자.(width와 height을 정확하게 기재하지 않으면 CSSOM을 만들때 더 많은 연산을 하더라구요.)

3. 반응형은 생각만큼 쉽지 않다. 끝맛이 구린 노가다이다.(성취감이 크게 느껴지지가 않았음)

4. 크로스브라우징은 상당히 빡이 친다. (크롬,파이어폭스,사파리 3개만 타겟으로 잡고 대응할려고 했는데도 상당히 귀찮았음.) 디텍션과 폴리필을 통해 극복.

5. 디자이너를 존경하자.

첫번째 홈페이지는 이렇게 끝이 났구요.


두번째 홈페이지 제작에 들어가기전 홈페이지의 디자인을 선정하기 위해 나름 디자인 트랜드가 다른 페이지를 링크로 종합해

회사팀 메신저에 공유를 했습니다. 이번엔 피드백이 1개 오더라구요. 그것도 아주 구체적으로. 고마움을 느끼느 순간이었습니다.

좋은 피드백을 받기위해선 구체적이고 정성스러운 질문으로 갖추어져야 한다고 느꼈습니다.

그 피드백을 바탕으로 바로 개발에 착수하기 시작했습니다.

이번엔 하나에 페이지에 전부다 보여주는게 아닌 약간 SPA처럼 보여주기 위해 리엑트를 써보자고 했습니다. 사실 이건 굳이 리엑트가 아니어도

구현이 가능하지만, 리엑트를 너무 안쓴지 오래되서 다시 익숙해지기 위해 어거지로 사용한 감이 있습니다.

 클론코딩으로 리엑트를 간간히 써봤긴 했지만 리엑트의 컨셉에 대해서 정확하게 인지하지는 못한 상태에서 작업을 시작헀습니다.

전체적으로 스켈레톤을 만드는데 시간이 오래 걸리진 않았지만 인터렉션을 하는부분에서 객체지향적인 프로그래밍을 해보자고 생각했습니다.

하지만 뭘까요. 리엑트의 컨셉이 객체지향으로만 개발하기에는 뭔가 톱니바퀴가 안맞는 느낌이 들더군요. 그래서 기본적인 기능과 이벤트 트리거는 절차지향적을 가되 

애니메이션효과의 알고리즘을 담고있는 기능들은 class문법으로 나누어서 관리를 하기 시작했습니다.(이때도 구현에 있어서 라이브러리를 참고하진 말고 집적 구현하자를 실천하고

있었습니다.)

뭔가 구조도 깔끔하고 반복되는 코드를 피하기 시작했었네요. 처음을 생각하면 약간은 성장했다고 느끼는 부분이기도 했습니다.

하지만 이것도 얼마안되서 리엑트의 펀더멘털이 부족했던 부분이 여실히 들어나기 시작했습니다.

왜 렌더링이 안되지... 그리고 수많은 경고문들. 리엑트가 랜더링하는 과정에서 의존성 배열과 state간의 원리를 이해하지 못했기 때문이었습니다.

리엑트를 클론코딩으로 공부할때 컨셉이 중요하다고 말은 항상 들었지만 왜 중요한지에 대해서는 전혀 몰랐습니다.

단순히 영상에서 멘토님들이 설명하시기를. "리엑트는 이전과 비교하여 변경된 부분만 캐치해서 랜더링한다." 이 문구가 사실 리엑트의 컨셉이자 동작 방식었다는걸

나중에 깨닫게 되었습니다. 비교한다는건 메모리상에서 이전과 이후의 데이터를 비교해야하는데. 저는 state의 불변성을 지켜주지 않아서 변하지않았다라고 인식을 하더라구요.

그렇게 자바스크립트 코어개념을 이해한다고... 실행컨텍스트,컴파일러,원시,참조,클로저 등등을 공부했으면서 몰랐다니... 자신의 멍청함과 JS 기본기의 중요함을 깨닫는 순간이었습니다.

문제점을 알고 리엑트의 컨셉과 JS 엔진의 상관관계를 이해하기 시작하자 술술 코드가 풀리더군요.

그렇게 페이지가 완성되고 성능개선을 하기 시작했습니다.

이미지의 크기, 리플로우를 일으키는 부분은 없는지, 쓸때없는 연산을 하고있는 부븐은 없는지 체크를 했습니다.

이 모든걸 개선하고 홈페이지 성능을 측정해보니 퍼포먼스는 99점이 나오더군요.

다행이 배포도 손쉽게 끝나고 이 페이지도 마무리 하게 되었습니다.


두번째 홈페이지 제작을 통해 느끼고 배운건,

1. 각 페이지의 배너 이미지를 처음에 띄어주는데 img태그와 CSS의 background-image 옵션의 차이점과, 유저가 이질감을 느낄 수있는부분을 lazy를 주어서 적용했던 점.(ux 상승)

2. 불필요한 연산을 하지 않도록 memo와 useCallback을 이용해 구현했던 점.

3. DOM을 직접 조작하지 않고 state를 변경해 리엑트로 하여금 DOM을 조작하도록 유도했던 점. (스택오버플로우나 경고문들 보면 직접 조작하지 말라고 했던 이유를 이해하는

순간이었습니다. 리엑트의 컨셉을 제대로 이해하지 않았기 때문에 생기는 해프닝이었죠.)

4. 로컬에서 작업하던 성능보다 실제로 배포를 했을때의 성능이 더 뛰어나단걸 알게 되었습니다.

5. 무료로 사용하는 정적페이지 호스팅해주는 업체. 네틀리파이, 히로쿠, 깃헙-페이지스중에선 깃헙페이지스가 가장 빠르다.


그리고 짬이 나는동안에는 OSI 7계층과 네트워크를 주로 공부했습니다. 비전공으로 시작해 그동안 궁금했던 부분을 중점적으로 봐왔었네요.


그리고 오늘 드디어 인턴이 끝나고 회사를 마지막 날입니다.

인수인계서와 회사의 레포지토리 정리, 트렐로갱신등 회사가 전혀 신경쓰지 않는부분을 만들고 이렇게 나가게 되었네요.

지금은 뭔가 후련하면서도 불안한 느낌이 많이 듭니다.


이번 3달을 의미있게 보내었는가는 솔직히 잘 모르겠습니다. 정리되지않은 가독성 나쁜 긴글 읽어주시느라 고생하셨구요.

이글을 쓴 가장 큰 이유는 저의 수준을 제 3자에게 평가받은적이 단 한번도 없었습니다. 프로그래밍 기질이 잘맞는지도 솔직히 모르겠구요.

그냥 계속 공부한다는 점이 좋아서 저를 계속 개발로 남게하는 부분같습니다.


프갤님들께서 보기엔 아직 개발 족밥인 저를 평가하시기에 적성에 잘 맞는다고 판단하시는지... 

혹은 지금 하고있는 방식들이 틀리진 않았는지. 확인받고 싶기도 하고 궁금하기도해서 질문드리네요.

하... 고독합니다~