🐣 새로운 시작

위코드 3주차가 시작되면 프론트엔드의 경우에는 리액트라는 라이브러리를 접하게 된다. 결국에는 JavaScript 라고는 하지만 UI를 위해 만들어진 리액트는 기존의 방식과 매우 달랐고 새로운 시작을 하는 것 같은 기분이 들었다. 게다가 node- Sass 를 배우기도 하고 기존에 바닐라 자바스크립트를 통해서 만들었던 위스타그램 을 리액트로 변환하면서 미션을 수행하다 보니 많은 인풋에 정신 없이 흘러간 것 같다.

⛈ 시작부터 어두운 기운이...

리액트 기초 세션을 듣고 기존에 제작했던 위스타그램 을 2개의 큰 컴포넌트로 나눠 리액트에서 실행해보라는 미션이 주어졌다. 단순히 기존의 로그인 페이지와 메인 페이지의 html와 css 코드를 가져와서 실행하면 되는 것이었다. 쉬운 미션이구나 생각했다.

하지만, 역시나 멘토님들 의미 없는 행동을 시킬리 없었고 import를 하자 망가진 레이아웃을 보는 우리의 표정은... 👀 What...?

내가 css를 엉망으로 만들었나 자책하면서 겹치는 부분들을 수정하여 원래대로 돌려놓고 안내 받았던 대로 Router & sass 세션을 듣는데... 성훈 멘토님이 우리가 겪은 일에 대해서 정확히 설명해 주셨다.

리액트의 경우에 각 컴포넌트에서 css 파일을 import 해서 사용할 수 있는데 이를 SPA로 만들게 되면서 중복되는 태그 선택자나 클래스 선택자의 경우에 충돌하게 되는 것이었다. 그렇다 보니 원하는 대로 css가 적용되지 않고 레이아웃이 바사삭 깨졌다.

다행스럽게도 이를 해결할 수 있는 것이 sass 였다. sass 의 경우 nesting이 가능하기 때문에 각 컴포넌트를 감싸고 있는 큰 요소에 다 nesting하여 작성한다면 태그 선택자의 경우에도 겹치는 일이 없었다.

하지만... 기쁜 마음으로 세션을 듣고 node-sass 를 설치하던 나에게는 슬픈 일이 발생했다. 안내대로 4.14.1 버전을 설치하려고 함에도 불구하고 설치가 되지 않았다. 혹시나 최신 버전을 설치해보았지만 CRA와의 호환문제로 적용할 수 없었고 다시 지워야했다.

저녁 시간 내내 node-sass 설치가 안되는 이유에 대해서 찾았었는데 npm 을 써봐도... yarn 을 써봐도 똑같았다. 결국 해결하지 못한 채로 집으로 돌아가 새벽까지 여러 시도를 더 했다. Xcode 를 지웠다가 다시 설치해보기도 하고 실수로 글로벌에 설치를 해서 지워지지 않아 고통을 겪기도 하고... 여러 고민 끝에 내린 결론은 node 를 지웠다가 다시 설치해보는 것이긴 했지만 당시에는 큰 문제라는 고민이 들어 멘토님께 질문 후에 진행해보기로 했다. 다음 날 같은 M1 맥북을 사용하는 동기님들 중에서 node-sass 가 문제 없이 설치된 분들의 node 버전과 현재 설치 이슈가 있는 분들의 node 버전을 보니 다르다는 것을 알 수 있었고 최신 버전을 사용할 때 문제가 생긴다는 생각이 들었다. 멘토님의 답변도 동일했고 node 의 재설치로 문제를 해결할 수 있었다.

🧑🏻‍💻 오히려 좋아

험난했던 첫 시작을 뒤로 하고 기존 위스타그램 파일을 옮겨 scss 로 전환까지 완료하고 나자 이를 리액트로 변환하고 미션을 수행하는 팀 미션을 받게 되었다.

첫 미션은 한 명이 초기 세팅을 진행하는 것이었는데, 혹시 모를 문제에 대비해서 M1이 아닌 컴퓨터를 찾았고 도영님의 맥북으로 진행하게 됐다. 비교적 큰 무리 없이 피드백을 받으며 세팅을 완료 했고 추가로 주어진 공통 컴포넌트 Nav 를 제작 해야했다.

각자 홀로 작성했던 westagram 으로 코드가 서로 달랐기에 모여서 의논 후에 내가 작성했던 부분을 잘라서 만들기로 했다. 이후에도 미션들이 계속 있을 예정이었기 때문에 빠르게 컴포넌트를 분리하고 받을 수 있도록 해드리고 싶어서 급하게 진행을 했다. 그렇지, 문제는 항상... 급할 때 생긴다

같은 Repositories를 공유하며 작업하는게 처음이기도 했고 git과도 아직 친하지 못하다보니 무작정 내 branch에서 Nav를 만들고 push를 진행했다. 게다가 다른 작업 사항들을 보낼 때도 add . 을 통해서 전체 파일을 보냈었는데... 다른 분들과 이야기를 나누며 경로를 설정해서 보냈어야 하는 것 같아서 걱정이 많았다.
(반성의 PR 도 남기며 잠들었다... 🥲)

단순히 개인 프로젝트이고 나만의 문제였다면 더 편하게 넘길 수 있었을 것 같지만 내 허술함이 다른 분들에게 피해를 주는 것 같아서 마음이 많이 불편했다. 결국, 멘토님의 조언을 통해서 feature/nav, feature/navbar, feature/navimage 등의 branch를 3개나 만들면서 해결이 됐다.

1. master 브랜치가 아닌 개인 브랜치에서 새 브랜치를 만들면 개인 브랜치의 하위 브랜치가 생길 뿐이다. (add, commit 하지 않은 작업물이 있다면 하위 브랜치로 넘어가게 될 수 있으므로 주의해야 한다. 이걸로 2개 미션 결과물이 사라졌다.)
2. branch 는 평행세계! 변동사항이 있는 파일의 경우 add, commit 을 진행하고 넘어갈 수 있으며 넘어가는 경우 파일들도 바뀐다. 로컬 master 로 갔다가 파일들이 다 사라지는 경험을 하고 신기했다.
3. conflict 로 인해 merge 가 되지 않은 경우에는 깃허브에서 수정하려하지 말고 다시 로컬 master 에서 remote의 master 를 pull 받은 후에 충돌을 일으킨 branch 로 가서 merge & conflict 해결 을 하고 다시 push 하자.

어쩌다 나를 만난... 도영님, 은정님, 파란별님이 불편함을 많이 겪으셨을 것 같은데 그래도 한 분도 짜증내시지 않고 침착하게 격려와 고민을 함께 해주셔서 정말 감사했다.

또, enter 누르기 고민하고 있을 때 조언과 함께 도움을 주셨던 현재님이나 영현님 비슷한 어려움을 함께 나누고 해결했던 동희님 등... 감사할 사람이 정말 많은 3주차였다.

결론은, 정말 오히려 좋았다. node-sass 에러를 겪으며 한숨 쉬는 나를 보며 아름님께서 하셨던 말씀인데... 3주차는 정말로 이 말을 버릇처럼 하고 다녔다.
"오히려 좋아... 오히려 좋아"

미리 많은 문제들을 겪었기 때문에 1주차, 2주차 팀 프로젝트를 하면서 더 큰 문제를 만나게 되더라도 조금은 침착한 마음으로 하나씩 해결할 힘을 얻었다고 생각한다. 에러 메세지?? 오히려 좋아.

💪 7번의 힘

초면으로 만나게 된 리액트... 진짜 처음에는 어려움이 많았다. 미리 예습을 조금이나마 하고 싶어 기본적인 부분을 강의로 들었다. 처음에는 정말로 이해를 할 수 없었고 DOM을 조작할 때는 간단했던 더하기 1도 어려워 하는 나를 보며 황당했다.

"내가 이렇게 바보였나?" 라는 생각을 정말 많이 했다. 1주일의 시간을 보냈지만 여전히 크게 달라지진 않았다. state 와 props 을 통해서 직접 DOM 을 조작하지 않고 리액트가 렌더링만 진행하도록 한다는 점이 매력적이기도 했지만 사고의 방향이 다르게 느껴졌다. 특히, 잘되던 동작이 다른 로직을 추가했을 때 전혀 생각하지 못한 방향으로 이상해지는 것을 보면서 당황했던 기억도 난다.

여전히 리액트는 어렵고, 주변 쑥쑥 리액트와 친해져가는 동기분들을 보면서 존경과 부러움, 동기부여를 함께 느낄 때도 정말 많다. 그래도, DOM 이 무엇인지도 모르고 float : left 밖에 모르던 내가. 작은 미션이라도 원하는 만큼 만들어보고 더 좋은 방법은 없는지 고민하게 되는 과정이 소중하다.

프론트엔드 개발자라가 되고 싶다면 처음에 TO DO LIST를 7번 만들어보라는 말을 들은 적이 있다. 마찬가지로 7번은 못했으나 같은 실습 자료를 4번 정도 만들어보면서 리액트와 아주 조금은... 눈웃음 🤭 정도는 나눌 수 있는 사이가 되었다는 생각이 든다.

정말 여러 이슈들로 인해서 순식간에 지나가버린 3주차이지만 이제 만나게 될 4주차를 더욱 알차게 보내면서 한 숨 먼지인 내가... 1차 프로젝트는 적어도 손가락 하나가 되어서 보탤 수 있기를 응원해본다.

궁금한 것들이 생기면 공유해서 함께 공부할 수 있도록 해주시는 동기님들.
질문을 들고가면 친절하게 다 알려주시는 동기님들.
모두 정말 감사합니다. 4주차에는 리액트 제대로 뿌시고! 프로젝트까지 힘내봐요. 👏