[ 제 2회 스파르톤 ] 개발 일지 ... 근데 이제 생존을 곁들인

도입

스파르타 코딩클럽에서 제 2회 스파르톤을 주최하여 신청했고 오늘 참가하게 됐다.

스파르톤이란 저녁 9시부터 다음날 오전 6시까지 프로그래밍 학습을 진행하는 프로그램으로 쉽게 이야기해서 개발 공부하면서 밤샌다!

 

감사하게도 아래와 같이 밤을 잘 샐 수 있게 여러 제품을 보내주셨다.

 

 

이번에 밤을 새면서 학습하게 될 강의는 리액트 심화반이다.

 

https://spartacodingclub.kr/online/react_plus

스파르타코딩클럽 [리액트 심화반]

 

원래는 백엔드 개발자로 프로젝트를 진행하고 학습 중인데 이번에 진행 중인 프로젝트에서 프론트엔드 개발자로 합류를 하게 되어서 급하게 리액트를 배울 필요성을 느꼈고 이왕 배우는 거 한 번 밤 새서 쭉 파악하면 좋을 것 같아 스파르톤에 신청하게 되었다.

 

이번 9시간 동안 강의의 1-2주차 내용인 JavaScript 기본 문법에 대한 복습 및 React.js 컴포넌트와 로그인 기능 구현에 관해 익히는 것이 목표다. 그리고 관련 내용을 아래 1시간 단위로 간단하게 정리하며 일종의 개발(이라기 보다는 생존) 일지를 남길 예정이다.

 

프로젝트를 진행하다 보면 밤을 새는 경우가 왕왕있어서 그렇게 거부감이 있지는 않지만 매번 떨리는 건 어쩔 수 없다.

 

 

21:00 > 시작

우선 간단하게 팀별 아이스 브레이킹을 진행했다. 그리고 함께 팀명을 정했는데 6조인 우리는 고추 바사삭으로 결정했다. 야식으로 내가 고추 바사삭 먹는다고 이렇게 결정된 것 같다 😭

 

다음으로 학습한 내용은 변수와 상수로 세부 내용은 아래와 같다.

 

• var , let , const
  
• 변수 생성의 3단계: 선언(Declaration) - 초기화(Initialization) - 할당(Assignment)
• 실행 컨텍스트(Execution Context)
• 호이스팅(Hoisting)
• TDZ(Temporal Dead Zone)

 

소감

학습

실행 컨텍스트, TDZ(Temporal Dead Zone)와 같이 조금은 심도 깊은 자바스크립트 개념과 문법을 다시 다뤄주셔서 좋았다. 리액트를 다루다 보면 필연적으로 자바스크립트의 본질적인 동작 원리에 관해 이해하는 과정이 필요할 것으로 판단되는데 본격적인 리액트 기능 구현 이전에 자바스크립트 개념을 다뤄서 좋았다.

 

생존

아직은 괜찮다. 야식도 맛있게 먹어서 배도 든든하고 기분이 좋다 ☺️

 

 

22:00 > 본격적인 공부 시작

밥을 먹어서 그런지 아직은 괜찮은 것 같다. 그런데 몇 시간 뒤면 졸 것 같다. 그런 감이 온다... 😭

 

이번 한 시간 동안 학습한 내용은 자료형으로 세부 내용은 아래와 같다.

 

• 원시형(Primitive Type)
• 참조형(Reference Type)

 

소감

학습

<모던 자바스크립트 핵심 가이드>와 <코어 자바스크립트> 책을 참고하며 하나씩 천천히 보면서 공부를 하고 있는데 조금 빠르게 진도를 나가야겠다. 처음에 비전공자로 개발 공부를 시작할 때 본질적인 개념보다는 무엇인가 하나 만들 때마다 뿌듯함과 즐거움을 느끼곤 했다. 이번에도 비슷하게 커리큘럼 자체도 여러 기능 구현을 직접 해보기 때문에 우선은 너무 자바스크립트에 몰두하지 말고 중간에 궁금할 때마다 따로 책을 참고로 정리 해두어야겠다.

 

생존

아직은 괜찮다! 우리 팀원 분들도 잘 공부하고 계신지 궁금한데 성격이 내향적이라 못 물어보겠다 😇

 

23:00 > 조금씩 졸리기 시작

이따가 샤워 한 번 하고 와야겠다 🥲

 

이번 한 시간 동안 학습한 내용은 객체로 세부 내용은 아래와 같다.

 

• 생성 방법: 생성자( new ), 리터럴( {} )
• 상수( const ) 재할당: 보호되지 않는 객체의 프로퍼티

 

소감

학습

리터럴로 객체를 생성하는 게 결국 자바스크립트 엔진 입장에서는 생성자( new )를 사용해서 생성하는 걸로 해석된다는 게 신기했다. 또한 const 로 선언한 객체는 그 값을 변경할 수 있다는 걸 알고만 있었는데, 그 이유가 정확히는 참조를 변경하지 못한다는 것이기 때문에 프로퍼티 자체는 변경 가능하다라는 것을 처음 알게 됐다. 이에 관해 조금 더 확장해서 이야기하자면 결국 프로퍼티는 변경 가능하지만 객체 자체를 변경할 수 없다는 사실을 알 수 있다.

 

생존

슬슬 졸립다! 이따가 30분에 진행하는 골든벨 끝나고 잠깐 샤워하고 와야 할 것 같다. 아니면 중간에 스트레칭 좀 해야겠다.

 

00:00 > 도전! 스파르타 골든벨 퀴즈쇼!

11시 30분부터 도전 스파르타 골든벨 퀴즈쇼를 시작했다. 그 전에 너무 졸려서 함수 공부하려다가 그냥 샤워하고 왔다 😂

 

소감

팀원 분들과 함께 퀴즈를 풀었는데 첫 문제로 넌센스 문제가 출제 됐다. 너무 어려워서 잠이 확깼다 😇

 

댓글로 맞춰 보세요!

 

01:00 > 다시 공부 시작

12시 30분 좀 지나서 퀴즈쇼가 끝났다. 팀원 분들과 함께 문제를 푸니까 잠이 좀 깬 기분이었다.

 

이후 다시 강의를 듣기 시작했는데, 이번 시간 동안 학습한 내용은 함수로 세부 내용은 아래와 같다.

 

• 함수 생성: 선언문, 표현식, 화살표 함수
• 함수 생성자와 렉시컬 환경(Lexical Environment)
• 함수의 스코프: 지역 변수와 외부 변수
• 콜백 함수, 그리고 매개변수(Parameter)와 인자(Argument)

 

소감

학습

렉시컬 환경(Lexical Environment)이라는 걸 처음 들어봤다. 자바스크립트 내부 동작 원리에 관해 알 수 있어서 재밌었다. 추가적으로 매개변수(Parameter)와 인자(Argument) 또한 어느 정도 구분은 하고 있었는데 함수가 값을 넘겨 받을 때 우선적으로 복사를 하는 게 매개변수를 의미한다는 사실은 처음 알았다. 다시 말해, 매개변수는 인수를 복사한 값으로 해당 매개변수에 어떠한 변화를 가해도 원본 값이 손상되지 않는 것이다. 기술 면접에도 자주 등장하는 질문이라고 하시니 추후에 다시 찾아보고 더 정확하게 정리를 해야겠다.

 

생존

자바스크립트 내부 동작 원리에 대한 내용들이 꽤 재밌었어 그런지 집중해서 강의를 들을 수 있었다. 그리고 무엇보다 중간에 퀴즈쇼를 한 게 무척 좋았다. 조금만 더 화이팅!

 

 

02:00 > 자바스크립트 문법 마지막!

이번 한 시간 동안 학습한 내용은 프로토타입(Prototype)으로 세부 내용은 아래와 같다.

 

• 프로토타입의 의미
• 프로토타입 링크(Prototype Link)

 

소감

학습

객체 지향 프로그래밍(OOP, Object Oriented Programming)에 관해 배울 때 이를 클래스와 동일시하면 안 된다고 배웠는데, 그 대표적인 예시로 자바스크립트에서 클래스는 존재하지 않고 프로토타입만 존재하기 때문이라 배웠던 기억이 났다. 그때 자바스크립트는 과연 어떻게 동작하길래 이상한 프로토타입이라는 개념을 통해 객체 지향 프로그래밍을 설계하나 궁금했는데 그 개념에 관해서 이해할 수 있었다. 

 

생존

중간에 매니저님께서 감사하게도 전화를 주셨다. 위에서 설명한 퀴즈쇼 첫 문제 일화에 관해 말씀해주셨다. 아직까지는 괜찮은데 매니저님 말씀처럼 4시 정도 되면 거의 비몽사몽 할 것 같은 예감이 들었다. 조금만 더 화이팅 🔥

 

03:00 > 프로젝트 세팅 및 리액트 본격 시작

이번 한 시간 동안에는 진행할 프로젝트 초기 세팅 및 본격적인 컴포넌트 분리와 작성에 들어갔다.

 

먼저 진행할 프로젝트를 세팅했다. 그리고 추가적으로 기획서를 보면서 컴포넌트를 분리하는 방법에 대해 조언을 얻을 수 있었다.

 

컴포넌트를 분리할 때 고려해야 할 사항으로 아래와 같이 두 가지를 제시해주셨다.

 

• 뷰(View)
• 데이터(Data)

 

뷰의 경우 말 그대로 보여지는 페이지만을 고려하는 의미고 데이터의 경우 서버로부터 전달 받는 데이터, 조금 더 자세히 말하면 props 로 전달 받는 데이터에 대한 의미다.

 

이번 프로젝트에서는 뷰와 데이터를 고려하여 컴포넌트를 분리할 때 큰 단위에서 작은 단위로 점점 쪼개나가는 형식으로 분리했다.

 

피그마를 참고하며 컴포넌트를 분리한 뒤에는 실제로 코드를 작성해갔다.

 

우선 게시글 목록에 관한 부분부터 코드를 만들기 시작했는데 defaultProps 를 사용하여 props 를 전달 받지 못하는 경우에 페이지 깨짐 현상을 예방하는 방법을 알게 되었다. 추가적으로 목업 데이터(Mockup Data), 다시 말해 가짜 데이터를 사용할 때도 defaultProps 를 사용하는지 궁금해졌는데 이와 관련해서는 우선 강의를 한 번 다 듣고 찾아봐야겠다.

 

신기했던 건 아래 이미지와 같이 구글 크롬 익스텐션을 사용해서 컴포넌트는 물론 props 도 쉽게 확인할 수 있었다.

 

진짜 너무 프로그래밍 재밌다. 역시 뭐를 만들어야 재미가 붙는 것 같다.

 

소감

학습

예전에 프로젝트 진행할 때 웹 소켓을 사용할 일이 있어서 이벤트와 에밋에 관한 부분을 직접 테스트해보고 싶어 리액트 코드를 한 번 서칭을 통해 직접 따라쳐보며 구현해 본 적이 있었다. 그때 제일 처음 들었던 의문 중 하나는 컴포넌트를 만들 때 최상위 div 태그를 사용해야 하는 이유였는데, 리액트의 경우 하나의 컴포넌트만 반환할 수 있기 때문에 그렇다는 걸 이번 강의를 들으며 추가적으로 공부하며 알게 되었고 이때 의미 없는 div 태그를 사용하지 않기 위해 React.Fragment 를 사용한다는 것도 알게 되었다.

 

강의에서 서버로 파이어베이스를 사용하는데 우선은 파이어베이스를 한 번도 사용해 본 적이 없어서 강의를 통해 익힐 생각이지만 혼자서 다시 복습할 때는 FastAPI 등의 다른 백엔드 서버로 구현해보는 것도 고민해봐야겠다. 

 

생존

프론트엔드를 처음 배워서 그런지, 그리고 자바스크립트 문법이 아니라 피그마를 참고해서 실제로 페이지로 만들기 시작하니 너무 설렜다. 오히려 졸리기 보다는 점점 잠이 깨는 기분이다. 빨리 강의를 다 듣고 부트스트랩 활용해서 나만의 방법으로 수정해보고 싶어졌다.

 

 

반응형

 

728x90

 

04:00 > 리액트 계속! 

달리기 출발 전 

 

3시에 잠깐 다같이 잠을 깨자는 의미에서 달리기를 했다. 달리기 전 모여서 하트를 올려놓고는 사진을 찍었는데 너무 귀여워서 캡처했다.

 

이번 한 시간 동안은 최소단위 컴포넌트를 만들고 이에 styled-components 를 적용하여 스타일도 잡았다.

 

스타일을 잡을 때 우선적으로 여백을 먼저 잡는 게 좋다는 사실을 알게 되었다. 개별적인 픽셀을 고려하지 않아도 되기 때문이다. 그리고 이때 그리드( Grid )를 만들어 이를 구현한다.

 

웰시코기 너무 귀엽다.

 

기존 div 를 통해 컴포넌트를 분리했기 때문에 하나씩 만들기만 하면 됐다.

 

중요한 건 스타일을 예쁘게 만드는 방법이었는데, 한 가지 강의를 통해 알 수 있었던 건 반응형으로 구현하고자 하는 섹션을 외부 div 로 감싼 다음 외부의 넓이( width )의 값을 100% 로 설정하고, 내부에 반응형으로 하고자 하는 부분의 넓이( width )의 값을 75% 와 같은 값으로 설정하여 3:1과 같은 비율을 유지할 수 있었다.

 

또한 CSS의 경우 --size 와 같이 -- 를 사용하여 변수를 만들고 이를 var() 를 사용하여 쉽게 사용할 수 있었다.

 

 

소감

학습

CSS 또한 styled-components를 사용하여 이를 컴포넌트로 만들고 props 를 사용하여 값들을 넘겨 받아 설정한다는 개념이 무척 신기하고 재밌었다. CSS 요소를 신경써야 하는 부분이 조금은 어려우면서도, 컴포넌트 단위로 분리하고 인자를 통해 값을 개별적으로 적용한다는 건 매우 효율적이라 생각됐다.

 

대략적인 적용 플로우는 이해했으나 실질적으로 혼자 컴포넌트를 분리하고 만들 때, 더군다나 디렉토리까지 분리하면서 효율적인 코드를 작성하는데 있어서는 어려움이 조금 있을 것 같다. 나중에 필히 따로 하나의 웹 페이지를 만들며 복습을 해야겠다.

 

생존

강의 내용이 재밌어서 그런지, 그리고 이제 슬슬 스타일을 적용하며 눈으로 그 구조가 보여서 그런지 졸립지는 않았다. 문제는 2주차까지 들어보고 싶은 욕심이 있었는데, 과제 수행과 일지 작성을 생각하면 1주차도 6시 내로 다 못 끝낼 수도 있을 것 같다. 그래도 끝까지 화이팅 🔥

 

05:00 > 1주차 마무리 및 과제

이번 한 시간 동안은 과제를 진행했다. 과제는 직접 피그마를 보고 로그인과 회원가입 페이지를 구현하는 것이었다.

 

헤더, 버튼, 인풋, 텍스트 이렇게 총 네 개의 컴포넌트를 분리하여 코드 작성을 진행했다.

 

처음에는 어떻게 접근해야 좋을지 조금 막막했는데, 우선 강의를 들으며 작성했던 코드들을 훑어본 뒤 컴포넌트를 구분할 때 뷰(View)와 데이터(Data)를 기준으로 한다는 것을 다시금 떠올려 props 로 넘겨줘야 할 인자들을 우선 정리하였다.

 

소감

학습

아쉬웠던 건 컴포넌트 구성에 관해 생각하는 게 너무 오래 걸린 점이었다. 그래도 정답은 딱히 없고 각자 분리하기 나름인데 경험을 통해서만 익숙해지고 능숙하게 할 수 있다는 강사님의 이야기를 잊지 않으려 한다. 이제 시작인데 즐겁게 도전해보는 걸 우선해야겠다.

 

생존

매니저님께서 다시 전화를 주셨다. 스파르톤에 참가하는 수강생들 또한 공부를 하며 밤을 새고 있으니 고생하겠지만 개별적으로 전화를 하며 관리를 해주고 있는 매니저님들도 무척이나 피곤하고 고생이 많으실 것 같았다.

 

온라인으로 서로 일면식도 없는 사람들끼리 진행하는 스터디임에도 불구하고 매니저님과 전화 통화하면서, 같은 조원들끼리 채팅으로 "화이팅"이라도 한 번 나누면서 뭔가 가까워진 기분이었다. 무엇보다 각자 열심히 한 번 해보고자 하는 의지를 가지고 모여서 그런지 결속력이 생기는 기분이었다. 조금만 더 화이팅해서 꼭 완주해야지 🔥

 

06:00 > 마무리

이번 한 시간 동안 로그인 페이지 구현만 작업했다.

 

어려웠던 건 HTML 태그 자체도 잊어버린 게 너무 많아서 input 같은 경우 label 을 사용하는 방법에 대해 MDN을 찾아보고는 했다.

 

그래도 하나씩 컴포넌트를 만들어보며 어떤 식으로 구현을 해야 할지 알아가는 것 같아서 좋았다.

 

소감

학습

결국에 과제를 다 하지는 못 했다. 로그인 페이지라도 마무리를 해보려고 했는데 끝내 컴포넌트 분리하는 것만 고민하다가 input 정도 건들여보니 시간이 훌쩍 가 있었다.

 

생존

리액트 자체가 재밌어서, 그리고 직접 구현해보며 웹 페이지로 실시간 반영되는 걸 보는 묘미가 있어서 그래도 안 졸고 마지막까지 마무리를 잘했다!

 

 

결론

본래 2주차 강의까지 들어볼 계획이었는데 단순한 자바스크립트 문법이 아닌 엔진 등과 같은 본질적인 개념에 접근하니 복습부터 시간이 꽤 많이 걸렸다. 그래서 결국 1주차 과제도 못 끝내고 9시간이라는 시간이 훌쩍 지났다.

 

우선 자바스크립트 관련해서는 이전에 백엔드 프레임워크로 Node.js를 사용한 적이 있었는데 언어 자체에 대해 개념을 잘 모르면서 사용하고 있었다는 걸 깨달았다. 

 

라이브러리인 리액트 관련해서는 단순히 강의를 들으며 따라하는 게 아닌 매주 직접 구현 해야하는 과제를 알려주고 더욱이 피그마를 통해서 기획 단계에서부터 직접 확인하며 조금 더 실무에 가깝게 연습을 해보는 기분이었다. 여러모로 양질의 강의라는 생각이 들었다.

 

스파르톤 자체도 매니저 분들께서 원활한 진행을 위해 정말 많이 노력해주시는 게 참 감사했고, 무엇보다 동일한 목표를 가진 사람들끼리 비록 각자가 다른 강의를 듣지만 서로 응원하고 의문이 가는 문제점에 대해서는 슬랙(Slack)을 통해 질의응답을 하는 과정을 통해 무사히 9시간이라는 시간을 온전히 프로그래밍에 집중할 수 있었다.

 

인생을 살면서 주어진 일을 열심히해야 하는 본질적인 이유를 묻는다면 망설임 없이 성취감 때문이라 답할 것이다.

 

이번 스파르톤 경험은 비록 계획했던 모든 학습량을 소화하지는 못 했지만 성취감을 달성하기에는 더할나위 없었다.

 

다음에도 또 참여하고 싶다 🥳

 

---

기타

아래는 스파르타코딩클럽 추천인 코드를 입력할 수 있는 URL이다.

 

입력할 경우 강의에 대하여 5만원을 할인 받을 수 있으니 이용할 사람들은 이용하면 좋을 것 같다.

 

 

https://spartacodingclub.kr/?f_name=%EC%9D%B4%ED%83%9C%ED%98%84&f_uid=6042396a67b73d020cce0c84 

스파르타코딩클럽

 

#스파르타코딩클럽 #스파르톤 #밤샘코딩 #코딩독학 #모각코