프로젝트를 시작하면서 적으려고 했지만, 바쁜 일정으로 인해... 라는 핑계를 대면서 미뤄왔던 기획과 문서 단계부터 글을 작성합니다. 너무 프로젝트 내부 상황을 노출하는 것을 방지하기 위해 팀원들에게 허락도 받고 진행할 예정입니다!

✨본격적으로

✅기획안 작성하기

기획 서비스 | 지하철 커뮤니티

기획 배경 | 지하철 파업이 계속되면서 지하철 시간표를 벗어난 운행. 예측 시간을 알지 못하는 불편함을 고객이 감내해야 함. 

사용 언어 | React, React-query, Recoil, Styled-components, VITE, Firebase 

기획 목적 | 대중 교통 중 하나인 지하철에 대한 정보를 빠르게 접할 수 있어 지하철을 이용하는 고객들의 불편함을 해소하고, 오랜 시간 지하철을 타야 하는 고객들에게 즐길 수 있는 요소를 주는 것. 

기대 효과 | 자유로운 커뮤니티로 필요한 정보를 얻을 수 있음.

주요 기능 |
- 지도, 지하철 시간표 등의 정보 기능
- 게시글, 채팅 등의 커뮤니티 기능
- 팔로우 등의 sns 기능

주요 고객 | 지하철을 이용하는 승객 

서비스 채널 | PC/모바일 웹

사실 v1을 끝낸 이후에 작성한 것이고, 전문적인 양식이 아닌 개요라서 기획안이라고 부르기는 좀 그렇습니다. 그래도 방향성을 잡는 편에서는 좋은 자료가 될 것 같아서 이번에 추가했습니다.

✅사이트맵 작성하기

피그잼을 이용해 작업을 하였고, v1과 v2의 차이를 비교하기 위해 하나의 그림에 담았습니다. 프로젝트 리팩토링에 앞서 기획 부분을 좀 더 확고히 하고자 사이트 맵을 자세히 그려보면서 정리하였습니다. 기존에 있던 사이트 맵보다 더 좋은 참고 자료가 있어 가능했습니다.

사이트 맵 v1과 v2

참고: https://smileyj.tistory.com/32

위와 같이 규칙을 정하고 해당 규칙에 맞게 페이지들(depth1)을 나열했습니다. 그 후 페이지 별로 필요한 기능들을 아래에 리스트로 적어놓고, 해당 기능에 대한 세부 페이지(depth2)를 하나씩 만들어 가는 형식으로 작업을 했습니다. 어느 정도 페이지와 기능들이 나오면 event/modal을 붙이고, interaction 등을 표시하여 사용자 경험 측면에서도 놓치지 않으려고 했습니다. 위의 그림은 아직 작업 중이기 때문에 interaction이 적습니다. 이제 위의 사이트맵을 토대로 와이어프레임을 그리면 되지만, 아직 완전히 그려진 게 아니기 때문에 해당 과정은 패스했습니다.

✅회의를 위한 노션 만들기

문서화에 진심이다 보니 노션을 사용하여 회의록부터 시작해서 여러 가지를 노션에 남기는 편입니다. 개발과 직접적으로 관련된 것은 깃허브 위키를 사용합니다.

기존에는 멋사에서 제공해주는 곳에서 진행을 했지만, 게스트 자격으로는 일부 기능에 제한적이기 때문에 별도로 생성해서 기존 자료를 옮겼습니다.

노션에서 팀스페이스의 위키 기능을 주로 사용하는데, 이는 게스트 자격으로는 페이지 별로 초대를 해야 하는 불편한 점을 일부 해소할 수 있습니다.

위와 같이 Description에 프로젝트에 대한 설명과 GitHub 바로가기 링크를 남겼고, 아래의 데이터베이스에는 메인 페이지 바로가기, V1에 대한 정보를 남겼습니다. 홈의 경우 리드미처럼 생각하고 만들 것이기에 여기에서 더 추가될 듯 합니다.

갤러리 보기를 추가해서 사용하고 있는데, 태그가 있는 것에 한해서 보여주도록 필터링을 걸어놨습니다. 그래서 메인 페이지가 아닌 하위 페이지 전부가 나오는 것을 방지하였고, 나중에는 태그를 달면 바로가기처럼 사용할 수도 있어서 위와 같이 했습니다.

✅문서를 위한 노션 정리하기

노션은 데이터베이스가 정말 잘 되어 있는 편이라고 생각합니다. 그래서 이 기능을 이용해 api 명세 작업을 했습니다. 페이지 별로 그룹화하여 보기 좋게 만들었고, 지금은 전체 명세서만 있지만, 나중에는 여러 보기 기능을 이용해 페이지 별로 상세 페이지를 만들어 진행할 예정입니다.

또, 기존에는 데이터 베이스의 상세 페이지로 들어가서 페이지 로직 등을 적었습니다. 그렇지만 시간과 폼이 너무 많이 들어서 v2 부터는 너무 자세하게 적지 말고, description에 간단한 기능 정의만 해놓은 상태로 진행하기로 했습니다. 개발을 하면서 코드에 대한 부분은 또 깃허브 위키로 기록하기 때문에 상세 부분을 제외한 것도 있습니다.

✅v2를 위한 v1에 대한 회고

v1은 사실 미완성 상태이지만, 일정 기간을 거쳐 작업을 하고 피드백을 받았기 때문에, 앞으로 진행할 사항에서는 v2라고 하기로 했습니다. 회고의 주제는 피드백에 대한 것인데, 질문으로는 다음과 같이 제시하였습니다.

• 왜 그런 피드백을 받았는가?
• 앞으로 개선할 점은 무엇인가?

간단한 질문이지만, 빠르게 앞으로 나아가기 위해서 필수적이라고 생각했습니다. 노션에 각자 의견을 남기고, 그에 대해 정리하여 우선순위를 정할 수 있었습니다. 다음은 우선순위에 따라서 순서대로 작성을 한 내용을 가지고 왔습니다.

→ 시간 배분 문제에 대한 개선할 점
- 2차 마감 기한을 정하자!
- 주단위로 스프린트 형태로 진행하는 건 어떨까요?
- 백로그 시스템을 도입하자(우선순위)

→ 사용자 경험 완성도 개선할 점
- 마이크로 인터랙션
- 퍼포먼스 점수
- 접근성 개선
- 모바일 최적화 - 사용하는 기기
- 주기적인 QA 테스트 - 최소 한 달 이후에 1회, 최종 마감 때 1회

→ 공통 컴포넌트 개선
- 로직이랑 스타일이랑 분리되어 있지만, 같은 폴더 내에 존재하도록 수정
- 폴더 구조 정리 - 아키텍쳐? 디자인 패턴
- SOLID 원칙 적용?
- 추후에 좀 더 생각을 해보자

→ 디자인 시스템 개선
- 스토리북
- json 파일로 관리하기?

→ 리드미 간결하게 수정
- 프로젝트 시작하기에 npm run dev 추가
- contributor 기준으로도 볼 수 있어야 함
- 테스트하는 사람 기준으로 보기

가장 우선순위가 높은 개선할 점은 시간 배분 문제와 사용자 경험에 대한 완성도입니다. 깃허브 페이지에서도 새로고침을 하면 404 페이지로 간다든가, 1초 정도 오류 페이지로 왔다갔다 거리는 등 여러 가지 문제가 많고, 이는 어떻게 보면 사용자 측면에서 생각해보지 못한 결과라고 결론이 나왔습니다. 기술적인 부분도 중요하지만, 프론트엔드 개발자이기 때문에 사용자 경험에서 부족한 것은 매우 치명적이라고 생각하기도 했습니다. 그래서 위와 같이 여러 문제에 대한 개선할 점을 적었지만, 가장 우선할 점에 집중할 예정입니다.

✔️결론

멋사 수료 이후에 진행하기 때문에 각자 시간을 어느 정도 투자할 수 있을지도 얘기를 해보았고, 그에 대해서 모두 긍정적으로 빠른 진행을 원했기 때문에 앞으로도 재밌을 것 같습니다. 다양하게 시행착오를 겪고 그런 경험들을 기록하면서 하나 하나 알아가는 뿌듯함에 중독된 듯 합니다. 이 프로젝트를 통해 기술적인 발전은 물론이고, 사이드 프로젝트를 위한 노션 템플릿을 만드는 개인적인 목표도 있기 때문에, 앞으로도 문서화에 진심으로 프로젝트를 완성해야 겠습니다. 물론, 프로젝트에 집중하다 보면 중간에 블로그 연재를 또 쉴 수도 있을 것 같습니다! 아무튼 많관부~

7월 3일부터 11월 10일까지 4개월 정말 짧은 기간에 많은 것들을 할 수 있는 시간이었습니다. 그만큼 시간이 빠르게 지나가서 왜 벌써 수료인지 아직 실감이 나지 않습니다. 저번주 금요일에 수료하고 주말 내내 쉬려다가 도저히 불안해서 여러 계획을 세우고 스터디도 만들어서 바로 시작하고 있습니다. 수료 후에 더 늦어버리면 후기 작성을 못 하고 지나갈 듯 하였는데, 마침 매니저님께 수료 후기 설문 조사를 요청 받았고, 제출한 내용을 재구성해서 공유하려고 합니다!

테킷 스쿨에 제출한 내용을 토대로 재구성하였습니다.

✨본격적으로

개발 직무를 결심하게 된 계기

건축학과를 다니다가 재능적인 한계에 부딪혀서 방황을 많이 했었습니다. 많이 좋아했던 전공이라서 포기하는 것보단 다르게 접근할 수 있는 방법을 찾고 있었습니다. 그러다가 건설현장에서 아버지가 돌아가시면서 전반적인 시스템에 대해서 회의감을 느끼고 이에 대해 도움이 되고 싶다는 생각이 들었습니다. 이런 시스템을 개선하기 위해 여러 IT 기업들에서 이미 시도를 하고 있는 것을 보았고, 여기에 건축학과의 경험을 살려서 적용해보고 싶고, 개발 공부를 해봤을 때 논리적인 사고가 매우 매력적으로 다가와 개발 직무를 선택했습니다. 프론트엔드 분야를 고른 이유는 건축학과의 경험에서 시각적인 부분에서 좀 더 강점을 가지고 있다고 판단하여 선택했습니다.

✅학습 방법

피드백에 진심

일단 무엇을 하고 있는지 파악하고 있는 게 중요하다고 생각했습니다. 그래서 주간 목표를 세우고 그에 맞게 구체적으로 할 일들을 했습니다. 그리고 월마다 회고하려고 노력했습니다. 그래서 블로그에도 작성하여 객관적인 지표를 만들려고 했습니다. 이렇게 회고하면 다음 달에는 좀 더 열심히 효율적으로 할 수 있었고, 기록을 남기면서 전체적으로 돌아볼 때도 수월했습니다. 스터디도 만들어서 동료들에게도 피드백을 받았습니다.

구현으로 연습

단순히 알고리즘을 푸는 것이 아니라 구현을 위주로 연습했습니다. 특히 CSS를 많이 연습했던 것 같습니다. 화면 레이아웃 구성을 자주 들어가는 사이트를 클론해보거나, MDN을 먼저 읽고 다른 블로그 글을 찾아보면서 공식문서를 최대한 이해하려고 노력했습니다. 그러다 보니 특정한 패턴이 보였고, 그러한 패턴들을 하나씩 정리해나가면서 익숙해지려고 했습니다. 그래서 프로젝트를 할 때 CSS보다 기능 로직에 좀 더 집중할 수 있었습니다.

질문이 중요

최대한 알고 있는 사실에 대해서 의심하려고 했습니다. 그래서 동료들한테 질문 받는 것을 자처했고, 질문을 받으면서 같이 찾아보고, 또 공유하는 과정으로 학습했습니다. 모르는 것을 찾아볼 땐 GPT한테 물어보는 것이 아닌 구글 검색을 통해서 찾으려고 했습니다. 검색을 할 때 검색어가 조금만 달라져도 결과가 달라지는데, 이때 다른 부분도 같이 볼 수 있어서 시야를 넓힐 수 있었던 것 같습니다. 그리고 구글 검색을 이용하면서 모바일 구글 디스커버 부분에 알고리즘으로 개발과 관련된 내용이 떴고, 심심하거나 집중이 잘 안될 때 폰을 보게 된다면 구글 디스커버로 텍스트로 된 컨텐츠 위주로 보려고 노력했습니다.

모르면 인정

처음 보는 내용에 이해가 잘 안 된다면 스스로 인정했습니다. 이건 모르는 내용이고, 지금은 이해가 안 된다는 사실과 모르는 코드를 접했을 때, 아 이 코드는 이렇게 쓰는 형태구나 하면서 패턴 파악을 하여 먼저 사용해보고 이해하는 방식으로 접근했습니다. 그래서 새로운 기술을 적용하는 것에도 빠르게 할 수 있었고, 조금씩 변형해 나가면서 이렇게 해볼까 저렇게 해볼까 하면서 시행착오를 많이 겪으려고 했습니다. 또, 이런 시행착오들을 기록하려고 했습니다.

고민보다 고

백문이 불여일타다닥이라고 고민하는 것보다는 코드를 직접 써보고 에러 메세지를 확인하는 게 더 좋다고 하여 고민보다는 고를 했습니다. 정체되어 있을 때도 일단 코드를 쓰고 틀린 거라도 결과가 있으니 피드백이 되고, 그런 피드백들이 쌓이면서 성장할 수 있었습니다.

✅부트캠프를 선택할 때

처음에는 혼자 공부해보려고 했습니다. 그렇지만 속도도 너무 느렸고, 무엇보다 방대한 양에 학습 방향성이 많이 흔들렸습니다. 그래서 이 부분을 보완하고자 처음에는 국비지원 학원을 다녔는데, 정해진 커리큘럼을 따라가는 것보다, 다른 사람들과 같이 하는 학습이 좀 더 시야도 넓힐 수 있어 가장 효율적이라는 것을 깨달았습니다. 그래서 다음 학습도 같이 하면 좋을 것 같아 팀 프로젝트를 참여했는데, 팀 프로젝트는 단순히 학습이 아니라 직접 구현을 해야 했기에 이론적인 부분을 채우지 못하고 코드에 익숙해지는 것에만 급급했습니다. 그래서 이론적인 것도 보충하면서 프로젝트를 진행할 수 있는 부트캠프를 선택했습니다. 커리큘럼 상으론 특강으로 다양한 것을 접할 수 있지만, 한 달도 안돼서 하나를 배우는 곳은 피했습니다. 하나만 파는 것도 좋지 않지만, 하나도 제대로 못할 수도 있다고 생각했기 때문입니다. 그리고 온라인인 것도 중요했습니다. 불필요한 곳에 시간과 체력을 쏟는 것을 줄이려고 했기 때문입니다. 후기도 최대한 구석구석 찾아보고 결정했습니다. 특히 강사진에 대한 후기를 많이 찾아보려고 했습니다. 중간에 커리큘럼이 안 바뀌는지, 강사진이 명시한 것과 같은지 등을 위주로 찾아보았습니다.

장단점

장점으로는 무엇보다 같이 학습할 수 있는 환경이었습니다. 테킷 스쿨은 회고조를 배정해줘서 피드백도 많이 받을 수 있었고, 피드백을 통해서 앞으로의 목표를 좀 더 구체화할 수 있었습니다. 정체되어 있다가도 디스코드에서 열심히 공부하면서 남아있는 동료들을 봤을 때 동기부여도 많이 되었고, 그렇게 동기부여를 해준 동료들에게 고마워서 학습한 걸 공유하고 싶었는데, 동료 특강이라는 것을 통해 좋은 기회도 있었습니다. 그러나 단점으로도 일대일 코칭이 아닌 다같이 듣는 수업이다 보니 진도 부분에서 아쉬웠습니다. 물론 멘토님을 통해 해결해 나갈 수 있었지만, 간단한 내용을 오래 다뤄지다 보면 집중력도 좀 떨어졌습니다. 저는 그럴 때 수업 내용을 블로그에 글로 정리하는 시간을 가지면서 애매하게 알았던 부분을 확실한 것으로 바꾸려고 노력했던 것 같습니다.

에피소드

CSS 특강이 정말 도움이 많이 되었습니다. 어떻게 학습하면 좋을지도 깨달을 수 있었고, 다양한 방식으로 같은 레이아웃을 만드는 것을 통해 실무적으로 사용하는 데 도움을 받을 수 있었습니다. 또, 원범 강사님과 상담을 진행한 적이 있는데, 한참 외부 프로젝트에서 마음이 떠나 정체되어 있을 때 팩트를 짚어 주셔서 다시 정신차리고 집중할 수 있었습니다. 이력서 특강도 실무자에게 직접 피드백을 받을 수 있어서 너무 좋았고, 덕에 이력서가 많이 발전했습니다. 취업 준비를 한참하고 있는 지금도 이력서 특강에서 나온 내용을 토대로 기업이 어떤 요구를 하는지 분석하고 그에 맞는 경험들을 끌어낼 수 있고 또, 원하는 기업에서 요구하는 사항과 실제 경험을 비교하면서 부족한 부분을 찾을 수도 있었습니다.

추천하는 이유

단기간에 빠른 성장을 하고 싶고, 체력적으로 끝까지 할 수 있다면 추천합니다. 제가 많이 성장했으니까요! 그러나, 스스로 학습하는 방법, 목표가 불확실하다면 먼저 어느 정도 기반을 마련한 후에 듣는 것을 추천합니다. 시간이 정말 빠르게 지나가는데, 초반에 많이 방황하게 되면 그만큼 후반부에도 힘들어지기 때문입니다.

✅성장

무작정 코드만 찾아보고 따라서 썼었는데, 이론적인 부분을 알고 나서 왜 코드를 그렇게 작성했는지 깨닫게 되고, 또 그런 이해를 바탕으로 기능을 구현할 때 직접 로직을 생각해보고 코드를 작성할 수 있었습니다. 새로운 기술이 있다면 이 기술을 어떻게 활용하면 좋을까 계속 생각해보게 되고, 바로바로 써보려고 노력하고, 사소한 습관들이 잡히면서 앞으로 어떻게 성장하면 좋은가에 집중할 수 있게 되었습니다. 가장 크게 변화를 느낀 점은 공식 문서를 먼저 보고 어느 정도 이해할 수 있게 된 점입니다. 블로그 10개를 찾아도 이해되지 않을 것 같은 부분을 공식 문서만으로 이해할 수 있다니..! 그리고 강점을 찾을 수 있었던 것 같습니다. 초반에 이력서 특강 때는 강점이 없는 줄 알았는데, 잠재력이 있었고, 테킷 스쿨 과정에서 그런 잠재력이 강점으로 나올 수 있었습니다.

이제는 프론트엔드 중에서도 사용자 경험을 좀 더 높일 수 있는 개발자로 성장하고 싶습니다. 아무래도 다른 개발 직군과의 가장 큰 차이점이 사용자와 직접적인 상호작용이 이뤄지는 분야이기도 하고, 콘테크 분야에서 전문적으로 하고 싶은데, 힘든 현장에서 편하게 사용할 수 있는 화면을 그리고 싶기 때문입니다.

✔️결론

이렇게 해서 멋쟁이 사자처럼 프론트엔드 스쿨 7기가 끝났습니다...! 정말 많이 성장하고 배우고 살찌는(?) 과정이었습니다. 아직 앞으로 어떻게 살지에 대해서 걱정이 되지만, 고민보다는 고, 일단 고~!

11월 중순에 올리는 10월 회고글입니다. 10월 말부터 11월초까지 대략 3주간 파이널 프로젝트를 끝내고 멋쟁이 사자처럼 프론트엔드 스쿨 7기를 수료했습니다. 많이 성장한 것을 느꼈고, 이에 대해서는 멋사 회고글로 돌아오겠습니다!

✨본격적으로

새로운 소식

리디북스에 전자책을 하나 냈습니다! 14명이서 쓴 책으로 제가 리더를 맡아 진행을 했습니다. 주니어를 위한 기술 면접 정리집으로, 요약답변과 상세 답변, 추가적으로 필요한 개념을 짧게 정리했습니다. 리디북스 눈떠보니 기술면접 전날 with JS Python >

✅Keep

: 유지할 점

• 중꺾그마 | 중간에 무너질 뻔한 적이 종종 있었고 평소 같으면 바로 침대에 누워서 뒹굴거렸을 텐데 그러지 않고 계속 무언가를 하고 있었습니다. 그래서 결과물들이 나오기 시작한 것 같습니다.
• 기록하기 | 휘몰아치던 일정이 끝나면 정신을 놓고 잊어버리기 쉬운데, 이렇게 회고글을 작성할 수 있던 것은 그동안 기록해온 것들을 바탕으로 쓸 수 있었습니다.
• 목표의 재설정 | 주마다 목표를 재설정하는 시간을 가졌습니다. 책집필과 프로젝트에서 전체 회의를 통해 진행도를 파악하고 다음 일정을 잡는 방식입니다. 또한 개인적으로도 계속 주간 목표를 세워서 일정을 관리하다 보니 스프린트 형태로 몰입을 할 수 있었습니다.

✅Problem

: 반성할 점

• 무너진 생활패턴 | 책을 집필하는 동안에도 계속 수업도 하고 프로젝트도 시작해서 9시부터 6시는 프로젝트를 하고, 7시부터 12시에는 책집필을 하는 일정이 이어졌습니다. 그러다 보니 체력이 많이 힘들어지고 집안일에 소홀해져서 반성을 합니다.
• 중단된 스터디 | 프로젝트를 시작하면서 예상하긴 했지만, 스터디를 유지할 시간이 부족했습니다. 그러다 보니 자연스레 모든 스터디를 멈추고 프로젝트와 책집필에만 몰두하였는데, 블로그 스터디까지 멈춰버려서 쌓인 글들이 많아졌습니다.

✅Try

: 시도할 점

• 시간 관리 방법 | 앞으로도 프로젝트를 하게 되면 부족한 시간에 블로그까지 쓰는 게 일이 될 것 같아 여러 가지 방법을 찾고 있습니다. 그 중에서 일단 시간 관리 부분을 다음과 같이 적용해 보려고 합니다.
  • 열품타로 시간 기록하기
  • 기록한 시간을 매주 확인하는 고정된 시간 갖기
  • 기록한 시간을 통해 주간 목표와 우선순위 비교해서 분석하기
• 쉬는 시간과 집중 시간을 정확하게 구분하여 쉬는 시간에 집안일 하기 | 거인의 노트 저자인 김익한 교수님의 유튜브에서 쉬는 시간에는 집안일을 하면서 집중 시간에 하던 것과 완전히 다른 행동을 한다고 합니다. 뽀모도로 타이머를 사용하고 있지만, 잘 지켜지지 않은데, 결단력이 좀 필요한 것 같습니다.

✔️결론

책집필과 프로젝트, 멋사에 관한 회고글을 별도로 작성하려고 하다 보니 10월의 메인이 되었던 일들이 아닌 저에게 집중할 수 있는 회고 시간이었습니다. 그만큼 개인적인 것들로 작성을 하게 되었는데, 학습에 있어서 어떻게 성장하고 있는 지를 기록으로 남길 수 있어 블로그에 올려봅니다.

멋쟁이 사자처럼 부트캠프에서 마지막 프로젝트를 시작했습니다. 프로젝트를 시작하기 전에 아이디어를 정리하고 와이어프레임을 만들고 기능 명세서를 작성하는 등 여러 과정을 계획하고 진행하고 있습니다. 그 중 일부 과정을 블로그에 정리해 볼까 합니다!

✨본격적으로

프로젝트 세팅

개인 프로젝트를 해본 적이 없는 상태로 팀 프로젝트를 진행하다 보니 프로젝트 세팅을 해본 적이 없었습니다. 그리고 프로젝트를 기획하는 과정없이 바로 개발에 들어갔던 것이라 여러 문제들을 겪었고 이번에는 그런 문제들을 해결해보고자 여러 시도를 하고 있습니다. 그 중 하나가 프로젝트 세팅을 직접 해보는 것입니다!

✅빌드 도구를 고르자!

리액트로 진행하는 프로젝트이다 보니 CRA를 써서 간단히 할 수 있지만, 직접 필요한 것만 설치하고 설정하면서 구성을 파악하고 싶었습니다. 그래서 웹팩에 대해 찾아보니, 생각보다 여러 가지의 빌드 도구들이 있었습니다. 그 중에서 VITE를 선택했습니다.

VITE를 선택한 이유 - VITE를 사용해야 하는 이

Vite의 사전 번들링 기능은 Esbuild를 사용하고 있습니다. Go로 작성된 Esbuild는 Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠른 속도를 제공합니다.

vite는 Native ESM을 이용해 소스 코드를 제공합니다. 이것은 본질적으로 브라우저가 번들러의 작업의 일부를 차지할 수 있도록 합니다. vite는 브라우저가 요청하는 대로 소스 코드를 변환하고 제공하기만 하면 됩니다. 조건부 동적 import 이후의 코드는 현재 화면에서 실제로 사용되는 경우에만 처리됩니다.

✅노드 버전을 확인하자!

Vite는 버전 18+ 또는 20+ 의 Node.js를 요구합니다.

그래서 곧장 팀원들의 노드 버전을 확인했더니, 모두 다 다른 버전을 쓰고 있었습니다. 그래서 노드 버전을 통일해서 좀 더 안정적인 환경에서 진행할 수 있게 nvm을 사용하여 노드 버전을 맞추기로 하였습니다.

✅ESLint, Prettier

코드 컨벤션을 맞추면서 들여쓰기만 달라도 충돌이 나는 경우가 생길 수 있습니다. 알고 싶지 않았습니다. 그렇지만 각자 코드를 쓰는 스타일을 모두 확인하고 지정하기에는 비용이 너무 많이 드는 문제입니다. 그래서 이를 해결하기 위해 Lintter와 Code Formatter를 사용하기로 하였고, 가장 많이 써서 정보가 많은 ESLint와 Prettier를 선택했습니다.

참고 링크 이 부분은 아직 설정을 확인하면서 하나씩 바꾸어 나갈 것이라 기본적인 파일들과 확인하여 추가하였습니다.

✅커밋 메세지 템플릿

깃허브의 여러 기능을 좀 더 활용해 보기 위해 다른 협업 툴을 최소화하기로 하였습니다. 그래서 사용하는 협업 툴은 기초 문서 작업 및 회의록 정리를 위한 노션, 온라인 회의 및 소통을 위한 디스코드, 그리고 프로젝트를 관리하기 위한 깃허브로 정하였습니다. 깃허브를 사용하기 위해서 가장 먼저 한 일이 커밋 컨벤션을 정하는 것이었습니다. 온라인의 소통으로는 정확한 정보 전달에 한계가 있기 때문입니다. 그래서 커밋 메세지를 좀 더 구체적으로 쓸 필요가 있었고 템플릿을 찾아 적용하기로 하였습니다.

가져온 템플릿 출처

📁 .gitmessage.txt

################
# [키워드] 제목 의 형식으로 제목을 아래 공백줄에 작성
# 제목은 50자 이내 / 변경사항이 "무엇"인지 명확히 작성 / 끝에 마침표 금지
# 예) [ADD] 새로운 기능 추가

# 바로 아래 공백은 지우지 마세요 (제목과 본문의 분리를 위함)

################
# 본문(구체적인 내용)을 아랫줄에 작성
# 여러 줄의 메시지를 작성할 땐 "-"로 구분 (한 줄은 72자 이내)

################
# 꼬릿말(footer)을 아랫줄에 작성 (현재 커밋과 관련된 이슈 번호 추가 등)
# 예) Close #7

################
# [ADD] 기존에 없던 새로운 기능이 추가될 때
# [UPDATE] 기존에 있는 기능이 완전히 새롭게 바뀌었을 때
# [DELETE] 기능이 삭제될 때
# [MODIFY] 일부 코드만 수정할 때, 변수명 등 매우 작은 부분. 즉, 전체 로직에 영향을 주지 않는 부분에 변경사항이 생겼을 때
# [STYLE] ui, 스타일을 바꾸었을 때
# [FIX] 버그에 대한 이슈 해결 완료
# [BUG] 이슈를 생성할 버그가 있을 때
# [CORS] 설정과 관련한 파일 등을 수정할 때
# [DOCS] 문서 작성, 마크다운 파일에 변경사항이 생겼을 때
################

템플릿의 장점은 구체적인 커밋 메세지를 적을 수 있다는 것과 주석으로 키워드에 대한 힌트를 줄 수 있다는 점이 큽니다. 그래서 커밋 메세지 컨벤션에 맞춰 템플릿을 수정하여 적용했습니다.

해당 파일을 루트 경로에 추가하고, git config commit.template .gitmessage.txt을 통해 git commit을 하면 템플릿이 뜰 수 있도록 설정하였습니다.

✅추가 패키지 설치하기

프로젝트를 하면서 사용할 기본적인 패키지들을 다음과 같이 정하였습니다.

• axios
  • 요청을 좀 더 간편하게 하기 위해서
• react-router-dom
  • 페이지 단위로 쉽게 관리하기 위해서
• @tanstack/react-query
  • 서버 데이터를 관리가 필요해서 + react 환경에 최적화된 툴이기 때문에
• @reduxjs/toolkit
  • 클라이언트 데이터를 관리하기 위해서 + 하나의 저장소에서 상태 관리를 하며 상태 변화 추적때문에

아직 스타일과 관련하여 CSS Module로 할지 CSS in JS로 할지 결정하지 못 했습니다.

프로젝트 세팅 과정에서 겪은 일들

1. 프로젝트 세팅 방법만 3시간을 검색했습니다. 4명이서 진행하는 프로젝트인데 모두 프로젝트 세팅은 처음이다 보니 걱정이었습니다. 그래서 일단 제가 욕심을 내서 VITE를 하자고 했으니 세팅하는 방법을 찾아서 정리했습니다. 그 후에 어떤 걸 쓸지 결정하는 것도 회의 시간을 2시간이나 잡아먹고 결과적으로 세팅하는 것도 3시간 걸린 것 같습니다. 처음이니 그럴 수 있지!

2. 개발자를 하면서 한글로 폴더 이름을 만들어 놓은 사람~ 손! nvm으로 노드 버전을 관리한다고 하면서 열심히 설치했지만 한글로 된 사용자 이름때문에 열심히 충돌이 나고 경로를 찾지도 못해서 폴더 이름을 바꾸는 것만 1시간을 쏟은 것 같습니다... 폴더 이름을 영어로 변경해서 잘 뜨는데 적용되는 것은 시간이 좀 걸렸습니다.

3. 회의 때 VITE 노드 버전 호환성 확인 안하고 16 버전으로 결정해버렸습니다. 그래서 다음 회의 때 버전을 어떻게 할 지 논의해봐야 한답니다. 🤣🥲

✔️결론

웹팩이 오래되고 커뮤니티도 크고 안전성도 좋고 해서, 먼저 웹팩으로 해보고 다른 빌드 도구를 쓰는 게 좋다지만 일단 부딪혀보기로 했습니다. 그래서 앞으로 더 많은 문제들을 마주하면서 해결하는 과정이 기대됩니다. 프로젝트 세팅 가이드처럼 써놓은 블로그 글들을 보면서 정리하다 보니 각각에 대해서 좀 더 자세하게 알아가는 시간이 없었습니다. 그래서 이번 프로젝트가 끝나고 부트캠프 수료 이후엔 이런 도구들에 대해서 좀 더 알아가는 시간을 가질 예정입니다.

부트캠프에서 프로젝트를 들어가기 전에 api 사용방법에 대한 실습으로 로그인을 구현해보기로 하였습니다. 간단하게 로컬스토리지에 토큰을 저장하는 것까지 코드를 바꿔가면서 진행하였습니다.

✨본격적으로

fetch로 요청보내기

const login = async () => {
    const baseUrl = "";
    const reqPath = "/user/login";

    const loginData = {
        "user":{
            "email":email,
            "password":password
        }
    };

    fetch(`${baseUrl}${reqPath}`,{
        method: "POST",
        headers:{
            "Content-type": "application/json"
        },
        body:JSON.stringify(loginData);
    })
}

fetch의 기본 동작은 GET이기 때문에 다른 메서드를 지정하기 위해서는 두번째 인자로 객체를 넣어서 요청에 대한 정보를 전달해야 합니다. 이때, 주의할 점은 body의 값은 문자열로 주기에 문자열로 변환해줄 JSON.stringify(문자열로 변환할 객체)를 사용합니다.

[!Note] body에 입력하면 문자열로 변환하는데 객체를 문자열로 바로 변환하면 [object Object]가 나옵니다.

함수의 재사용성 높이기

위의 코드는 외부의 값인 email, password를 함수 내부에서 직접 불러오기 때문에 외부 환경에 의존적일 수 밖에 없습니다. (외부에 email,password가 없으면 함수 실행이 안됨) 따라서 이를 파라미터로 하여 인자로 입력받을 수 있도록 바꾸어 사용하면 함수의 재사용성을 높일 수 있습니니다.

const login = async (email, password) => {
    const baseUrl = "";
    const reqPath = "/user/login";

    const loginData = {
        "user":{
            "email":email,
            "password":password
        }
    };

    fetch(`${baseUrl}${reqPath}`,{
        method: "POST",
        headers:{
            "Content-type": "application/json"
        },
        body:JSON.stringify(loginData);
    })
}

reqPath와 body객체 자체를 받으면 json형태로 포스트 요청을 할 수 있는 기본적인 함수를 만들 수 있습니다.

POST 요청의 결과값을 받기 위해서 await과 json()을 활용합니다.

const login = async (email, password) => {
    const baseUrl = "";
    const reqPath = "/user/login";

    const loginData = {
        "user":{
            "email":email,
            "password":password
        }
    };

    const res = await fetch(`${baseUrl}${reqPath}`,{
        method: "POST",
        headers:{
            "Content-type": "application/json"
        },
        body:JSON.stringify(loginData);
    });
    const json = await res.json();
    const token = json.user.token;
}

프로미스를 사용할 때 동기적 실행을 위해 await를 사용하며, 이를 사용하면 프로미스 객체 안의 결과값을 가지고 올 수 있습니다.

로컬스토리지에 저장하기

로그인 결과가 성공하면 서버에서 토큰을 주는데, 이를 로컬스토리지에 저장하여 사용자 인증이 필요한 곳에 사용할 수 있도록 해줍니다.

const login = async (email, password) => {
    const baseUrl = "";
    const reqPath = "/user/login";

    const loginData = {
        "user":{
            "email":email,
            "password":password
        }
    };

    const res = await fetch(`${baseUrl}${reqPath}`,{
        method: "POST",
        headers:{
            "Content-type": "application/json"
        },
        body:JSON.stringify(loginData);
    });
    const json = await res.json();
    const token = json.user.token;
    localStorage.setItem("token", token);
}

로컬스토리지에 저장하는 방법은 간단한데, 이때 꼭 key와 value의 쌍으로 인자를 넣어야 한다는 점을 주의해야 합니다.

✔️결론

fetch를 이용해서 프로미스 객체를 어떻게 활용을 할 지가 궁금했는데, await의 기능 중에 프로미스 객체의 결과값을 반환해주는 것도 있다는 걸 알았습니다. then()과 catch()를 쓴 것과 어떻게 다른 지도 좀 더 찾아봐야겠습니다.

과도하게 잡은 일정으로 블로그도 간신히 명맥만 이어오는 정도가 된 것 같습니다. 실습 위주의 글도 좋지만 좀 더 이론적으로 근거를 들어 정리하고 싶은데, 하나의 이론을 정리하는 데도 시간이 오래걸려서 선뜻 시작하는 것도 못하겠습니다. 그래도 달마다 쓰던 회고는 꾸준히 쓰고 싶어서 남기러 왔습니다!

✨본격적으로

지금 내 상황

현재 진행 중인 일정들을 정리하자면, 부트캠프, 개인 프로젝트, 팀 프로젝트, 책 집필, 딥 다이브 스터디, 블로그 스터디가 있습니다. 이제 부트캠프도 막바지라서 또 다른 팀 프로젝트에 들어갑니다. 딥 다이브 스터디는 프로젝트를 시작하면서 일시 중지되지만, 다른 일정들은 조금씩이라도 진도를 나가야 합니다. 여전히 자바스크립트는 모르는 것 투성이고, 리액트는 이제야 좀 익숙하게 사용하는 정도여서 아직 프로그래밍에 자신은 없지만, 그래도 즐기고 있습니다.

✅Keep

: 유지할 점

• 다시 프로그래밍에 재미를 붙인 점 부트캠프 강사님과 상담을 하는데, 프로젝트도 그렇고 이것저것 하고 싶은 건 많은데 우선순위의 일들이 손이 가지 않는다고 하니, 스스로의 마음이 떠난 것에 대한 핑계라는 점을 짚어주었습니다. 스스로도 알고 있었지만 막상 다른 사람에게 듣고 나니 정말 무책임한 생각인 걸 깨달았습니다. 그리고 해야 할 일들에서 하고 싶은 일들이 생기기 시작했습니다. 어느 정도의 의무감을 가진 일들에서도 하고 싶은 일들을 스스로 찾아보는 시도를 앞으로도 유지하고 싶습니다.
• 개인 프로젝트를 다시 시작한 점 나름 간단하다고 생각했던 일정 관리 기능을 가진 웹 사이트를 제작하기로 했습니다. 그 중 할 일 정리하는 작은 부분부터 시작하자, 매일 1시간씩만 간단하게 투자하자 라는 목표를 가지고 있습니다.
• 마감 기한이 명확한 일들의 시작 책 집필을 시작했습니다. 혼자하는 건 아니고 부트캠프에서 기회를 얻어서 여러 사람들과 같이 시작했습니다. 면접 준비에 대한 고민이 있었던 차에 가볍게 시작하면 좋을 것 같아 관련 주제로 작성 중입니다. 10월 말까지 마감 기한이 있고 책 출판을 위니브 측에서 도와주다 보니 기한을 넘기면 안됩니다. 그리고 스프린트 개념을 좀 더 적극적으로 도입하려고 했습니다. 그래서 추석 연휴 기간에 스터디룸 하나를 잡고 모각코를 하는 등 단기적으로 조금이라도 더 아웃풋을 내기 위해 노력하고 있습니다.

✅Problem

: 반성할 점

• 개인 일정이 밀리는 점 하고 싶은 의욕이 앞서 여러 일들을 벌리게 되었습니다. 그래서 현재 진행 중인 일들이 너무 많아져서 개인 일정들이 조금씩 밀리기 시작했습니다. 그래서 꼭 필요한 경우나 개인적인 일들을 처리할 수 있는 일이 아니면 새로운 것을 알아가는 것에 조금 느슨해졌습니다.
• 잦은 지각 일주일에 한 번은 수업에 지각을 하거나 프로젝트 회의에 지각을 하는 등의 일들이 이어졌습니다. 생활 패턴이 불규칙해졌다고 하지만, 결국엔 스스로 선택한 것에 대한 결과물입니다. 침대에 눕는 시간을 일정하게 해야겠습니다.
• 일기를 쓰지 않는다는 것 사실 위의 문제들의 해결방안으로 가장 저에게 효과가 좋은 것은 일기를 쓰는 것입니다. 매일 일기를 쓰는 것까지는 무리이나, 어떤 일들이 있었고 어떤 생각과 감정을 가졌는지 정리를 하지 않다보니 스스로에 대한 객관적인 정리가 잘 되지 않았습니다.

✅Try

: 시도할 점

• 기록하는 도구 Notion, Obsidian 책 집필을 하면서 Notion을 활용해 협업을 하고 있습니다. 멤버를 초대하고 나니 개인적으로 작성하는 내용들이 있어도 Notion을 잘 쓰지 않게 되었습니다. 다이어리가 따로 있지만 매번 들고 다니기에도 힘들고, 정말 사적인 내용들을 담고 있어서 더더욱 들고 다니면 안 되어 고민하던 차에 Obsidian을 알게 되었습니다. 오프라인으로 관리하기도 쉽고 마크다운 문법에 흥미로운 플러그인들도 많아서 적응 중입니다. 그래서 협업은 Notion으로, 기록은 Obsidian으로 하려고 합니다.
• 기록하는 방법 PARA 앞으로 많은 프로젝트를 하게 될 텐데 지금은 기록하는 도구를 쓸 줄 알지만 기록하는 방법은 모른다는 것입니다. 그래서 이번에 Obsidian을 사용하면서 PARA라는 기록 방법을 써보려고 합니다. 다 현재 진행 중인 것 같은 일이지만 조금씩 분류를 해나가다 보면 저만의 방법을 찾을 수 있지 않을까 합니다.

✔️결론

쏟아지는 문제점들을 3개만 추리고, 유지할 점을 3개나 뽑아보고 하는데 시도할 점은 최대 2개, 그것도 주제는 기록으로 하였습니다. 많은 것들을 진행하고 있어 한 번에 하나씩만 새로운 것을 시도하기 위해서 입니다. 다음에는 좀 더 구체적으로 어떤 것들을 했는지 회고를 적을 수 있도록 확실하게 기록해보겠습니다.

이미지 데이터를 가져와서 무한 스크롤 만들기!

본격적으로

더미 이미지 리스트 활용하기

더미 이미지를 얻기 위해서 아래 사이트를 활용합니다. https://picsum.photos/ 이미지리스트를 json형태로 불러와줍니다.

https://picsum.photos/v2/list?page=2&limit=100

fetch를 사용하여 불러오기

async function fetchImages(){
  try{
    const response = await fetch(`https://picsum.photos/v2/list`)

    if(!response.ok) throw new Error('network do not work');

    const data = await response.json();
    console.log(data);

  }catch(error){
    console.log(error);
  }
}

fetchImages();

비동기로 진행하기 때문에 async, await를 통해 동기적으로 실행할 수 있게 도와줍니다.

불러온 데이터를 확인합니다. 배열로 잘 넘어온 것을 확인할 수 있습니다.

이번에는 fetch().then().catch()로 바꾸어 써보았습니다. 그리고 페이지의 개수를 직접 정해서 불러올 수 있도록 함수에 인자로 넣어줍니다. 해당 page에 맞게 이미지의 일부만 불러오는 작업입니다.

export function fetchImages(page){
  const imgList = [];
  fetch(`https://picsum.photos/v2/list?page=${page}&limit=6`)
      .then((result)=>{
          return result.json();
      })
      .then((list)=>{
          imgList.push(list);
      })
      .catch((error)=>{
        console.log('error: ', error);
      })
  return imgList;
}

데이터 통신을 하는 경우 react에서는 useEffect를 사용하여 비동기로 받아옵니다.

가져온 이미지 보여주는 컴포넌트

무한 스크롤 가능 여부를 직접 불리언값으로 받아서 상황에 따라서 다르게 사용할 수 있도록 해보았습니다. 간단하게 스크롤 이벤트를 사용하여 스크롤이 끝난다면, 상태를 바꾸게 하였습니다.

import {useState, useEffect} from 'react';
import fetchImages from './fetch/image';

const ImageList = ({infinity=false}) => {
  //이미지 데이터를 받을 상태
  const [data, setData] = useState([]);
  //가져온 데이터 페이지를 관리해줄 상태
  const [page, setPage] = useState(1);
  //스크롤이 끝난 경우 true 그렇지 않으면 false
  const [isBottom, setIsBottom] = useState(false);

  //가장 처음에 데이터를 가져와 줍니다.
  useEffect(()=>{
      setData(fetchImages(page));
  }. [])

  //처음 렌더링과 데이터가 바뀔 때, 즉, 데이터가 없는 순간은 true의 값을 가집니다. 데이터가 바뀌면 스크롤이 더 생기며 isBottom은 false가 됩니다.
  useEffect(()=>{
    const handleScoll = ()=>{
        setIsBottom(window.innerHeight + document.documentElement.scrollTop + 5) >= document.documentElement.offsetHeight)
    }
      window.addEventListener('scroll', handleScoll);

    return ()=>{
        window.removeEventListener('scroll', handleScoll);
    }
  }, [data])

  //페이지가 바뀔 때 데이터를 추가로 가져옵니다.
  useEffect(()=>{
    setData((prevData)=>(...prevData, ...fetchImages(page)));
  },[page]);

  //무한 스크롤 설정을 하였고, 스크롤이 끝난다면 페이지를 1씩 올려줍니다.
  useEffect(()=>{
    if(infinity && isBottom) setPage((prev) => prev + 1)
  },[isBottom])

  return(
    <div>
      {data.map((img, key)=>{
          return <li key={`img_${key}`}><img src={img.url} alt={img.author} /></li>
      })}
    </div>
  )
};

export default ImageList;

직접 사용하기

import ImageList from './components/ImageList'

function App(){
  return (
      <ImageList infinity={true} />
  )
}

결론

useEffect의 의존 배열을 사용하여 상태가 변할 때 어떤 게 실행이 될지 확실하게 생각을 정리하고 적용해야겠습니다. 직접 코드를 써보고 수업 내용을 보면서 또 덮어서 쓰고 하는데, 이번건 거의 수업 내용을 따라서 쳐본 걸로 되었습니다. 프로젝트에 무한 스크롤을 적용해보면서 몇 번 더 연습해야 할 듯 합니다.

리액트를 사용할 때 커스텀 훅이라고 들어봤는데 직접 만들어 본 적은 아직 없습니다. 오늘 수업에서 실습으로 커스텀 훅 만들기를 하여 구현한 내용을 정리하려고 합니다!

본격적으로

저는 실습이 주어지면 코드 에디터를 사용하지 않고 채팅창이나 메모장에 적어보는 습관을 가지고 있습니다. 노트북이 디코와 줌과 코드 에디터까지 허용해주지 않아서 그런건 아닙니다. 그래서 이번에는 블로그를 작성하면서 하려고 합니다ㅎㅎ

훅의 기능

• 현재 마우스 위치를 반환해줍니다.

필요한 이벤트

• 현재 마우스 위치를 알려주는 이벤트가 필요합니다.
• mousemove

참고한 사이트

https://codingbeautydev.com/blog/javascript-get-mouse-position/ https://codingbeautydev.com/blog/react-get-mouse-position/

실습하기

자바스크립트에서 마우스 위치를 알려주기 위해서 사용한 것은 clientX와 clientY이며, mousemove라는 이벤트를 사용하고 있습니다.

const mousePosText = document.getElementById('mouse-pos');
let mousePos = { x: undefined, y: undefined };

window.addEventListener('mousemove', (event) => {
  mousePos = { x: event.clientX, y: event.clientY };
  mousePosText.textContent = `(${mousePos.x}, ${mousePos.y})`;
});

마우스가 움직일 때마다 현재 위치를 알려주도록 한 코드로 보입니다. 이를 리액트 코드로 바꿔보도록 하겠습니다.

import {useState} from 'react';

function useMouseLocation({x, y}){
    const [mouseLocation, setMouseLocation] 
        = useState({x: x, y: y} || {x: null, y: null});
      const handleMouseMove = (event) => {
        setMouseLocation({
          x: event.clientX + mouseLocation.x,
          y: event.clientY + mouseLocation.y
        });
    }
      window.addEventListener('mousemove', handleMouseMove);
      return mouseLocation;
}

기준점을 입력하지 않으면 기본적으로 null값 즉, 0, 0좌표를 기준으로 값을 설정합니다.

이 훅을 사용하면 문제가 있습니다. mousemove라는 이벤트가 발생할 때마다 계속 상태를 변경해서 리렌더링을 시킨다는 것입니다. 따라서 useEffect를 사용하여 다음과 같이 바꾸어주었습니다.

import {useState, useEffect} from 'react';

function useMouseLocation({x, y}){
    const [mouseLocation, setMouseLocation] 
        = useState({x: x, y: y} || {x: null, y: null});
    useEffect(()=>{
        const handleMouseMove = (event) => {
          setMouseLocation({
            x: event.x + mouseLocation.x,
            y: event.y + mouseLocation.y
          });
        }

        window.addEventListener('mousemove', handleMouseMove);

      return () => {
          window.removeEventListener('mousemove', handleMouseMove);
      }
    }, []);

      return mouseLocation;
}

export default useMouseLocation;

상태가 바뀔 때마다 리렌더링이 되는 것이 아니라 처음 렌더링 이후에만 실행할 수 있도록 하고, return값인 클린업 함수로 mousemove이벤트를 없애주었습니다.

tip: clientX는 x로 써도 됩니다. clientX의 축약 표현이 x - mdn

보통 MouseEvent같은 경우는 useEffect 내부에 적어서 클린업 함수를 사용하는 편이라고 합니다!

직접 사용해보기

import useMouseLocation from './Hooks/useMouseLocation';

function App() {
      const mouseLocation = useMouseLocation();    

    return(
        <div>
            <div 
              style={{height: 100, width: 100,
                backgroundColor: mouseLocation.x > 100 ? 'royalblue' : 'yellow' }}>
             </div>
        </div>
    )
}

export default App;

마우스 위치에 따라 div의 색상이 바뀌는 코드입니다!

결론

커스텀 훅으로 마우스 이벤트의 mousemove를 사용하여 직접 만들어보는 실습을 하였습니다. window 자체에 이벤트를 붙이는 경우엔 useEffect의 클린업 함수를 사용하여 이벤트를 별도로 관리해줄 수 있는 방법도 다양한 곳에서 활용이 가능할 듯 합니다.

팀 프로젝트를 진행하면서 notion에 문서 작업을 남기기로 했습니다. 문제는 프로젝트가 많이 뒤집어지면서 문서화도 현저히 떨어졌고, 과정에 대한 문서화보다는 결과가 어느 정도 나온 후에 문서 작업을 남기기로 했습니다. 문서 작업에 앞서 여태까지 github을 이용해서 작업을 했던 걸 토대로 notion에 대시보드를 만들었습니다. 그래서 연동부터 대시보드 템플릿까지 글을 남기려고 합니다.

✨본격적으로

📜GitHub과 Notion 연동하기

Notion은 영어버전을 쓰고 있습니다! Notion에서 /GitHub을 치면 이렇게 나오는데, 여기에서 Synced Databases의 GitHub 메뉴를 선택해줍니다. 위와 같이 데이터 베이스 형태로 생성이 되는데, 저는 이미 연결이 되어 있는 상태입니다. 여기에서 연결이 안된 상태라면 바로 계정 연결이 뜰 것입니다.

새로 연결을 위해 옆에 계정 부분을 선택하고 +Connect anothor account를 눌러주시면 깃허브와 어떤 계정을 연결할 지 보여줍니다. 저는 브라우저에 자동 로그인을 해놓았기 때문에 아래와 같은 화면이 바로 떴습니다.

여기에서 원하는 계정, oranization들을 확인해주고 Authorize integration-notion 버튼을 클릭해줍니다. 비밀 번호를 입력하고 다시 노션으로 돌아가면 연결이 완료되어 있습니다.

📜대시보드 만들기

저는 팀 레포의 PR 내용을 불러왔습니다.

데이터 베이스의 보기를 편집하여 속성 몇 개를 숨기고. 10개 정도로 볼 수 있도록 하였습니다.

저는 캘린더 형태로 바꾸었습니다. 보통은 보드 형태로 하여 상태에 따라서 구분이 되도록 하는 것이 일반적이나, 결과적으로 봤을 때 전체 PR이 보일 수 있도록 하는 것이 좋을 듯 하여 이렇게 만들어놓았습니다.

1차적으로 완성된 대시보드입니다. 현재 작업 중인 상황을 바로 볼 수 있는 데이터베이스를 메인으로 잡았고, 오른쪽 측면에는 이슈를, 하단에는 PR을 볼 수 있도록 활용하였습니다!

좀 더 깔끔한 방향으로 앞으로 수정해나갈 예정이라서 더 좋은 대시보드가 나오면 바로 공유해야 겠습니다ㅎㅎ

✔️결론

깃허브와 노션을 연동하는 걸 예전부터 알고 있었는데, 활용도는 그렇게 높지 않았습니다. 이번에 만든 대시보드도 결과적으로 프로젝트가 끝났을 때 보기 좋게 하기 위해 임시로 만든 것에 불과하기 때문에 제대로 활용을 했다고 말하긴 어렵습니다. 첫 프로젝트로 문서화도 처음으로 진행하는 것이기 때문에 더 열심히 찾아보고 알맞는 방법에 대해서 고민해봐야겠습니다.

피그마를 열심히 만지작 거리다가 올해에 개발자 도구가 새로 생겼다는 것을 알게 되었습니다. 전 단순히 피그마 앱 내부에서 동작하는 것인줄 알았는데, VSCode로 가져갈 수 있는 확장팩을 발견하곤 기쁜 마음에 바로 도전해보았습니다!

본격적으로

설치부터 시작해서 사용하는 방법까지 나열해보겠습니다!

순서

1. 피그마에 로그인이 된 상태여야 합니다.
2. VSCode에서 Figma for VSCode 확장팩을 설치합니다. 확장팩 링크 >
3. VSCode를 다시 실행하면 왼쪽 메뉴에 피그마 아이콘이 나온 것을 확인할 수 있습니다.
4. 해당 아이콘을 누르면 피그마 계정과 연동하여 파일들을 불러옵니다.
5. 파일을 VSCode에서 켜주면 끝!

추가

설치 완료 후 VSCode에서 확인한 메뉴바입니다.

해당 아이콘을 클릭하면, 피그마 계정에 등록되어 있는 파일들을 일괄적으로 확인할 수 있고, 아래에 NOTIFICATIONS를 보면 피그마 알람을 보여줍니다!

피그마의 개발자 도구에서 바로 열 수도 있습니다!

VSCode에서 파일을 열면 피그마 앱의 개발자 모드가 지원되면서 바로바로 확인할 수 있습니다.

심지어 실시간으로 피그마 앱을 사용하는 디자이너와 VSCode에서 피그마 파일을 연 개발자와 소통할 수도 있습니다.

초록색 커서는 VSCode에 있는 커서이며, 회색 커서는 피그마 앱에 있는 커서입니다! 커서가 보이니 /를 눌러서 하는 커서챗도 가능합니다!

기본적으로 VSCode에서도 피그마처럼 ctrl+휠버튼을 이용하여 확대, 축소, 이동 등 모두 할 수 있습니다!

VSCode에서 보는 게 편한 이유는 바로 SVG 코드를 복사할 수 있다는 것입니다!

우클릭을 하면 위와 같은 메뉴들이 나오며, SVG로 복사하여 바로 파일에 붙여넣을 수 있다는 것이죠!

텍스트도 일일이 타이핑하거나, 붙여넣는 것이 아니라, 아래 사진처럼 Content에서 복사만 해주면 편하게 가져올 수 있습니다.

결론

피그마는 정말 협업하기 가장 좋은 웹 디자인 툴이 아닐까 생각합니다. 이런 차별점이 있어서 피그마를 사용하길 정말 잘했다고 생각합니다. 저번에 깃허브와 연동하는 방법까지 알아봤는데, 플러그인을 사용하는 것과 별도로 피그마 자체적으로 업데이트하고 있는 내용이 있어서 앞으로도 더 잘 쓸 것 같은 툴입니다. 감사합니다!

이력서 빨리 디자인 마치고 싶다...

건축학과를 다니다가 어쩌다보니 개발 공부를 하고 있는데, 이에 대해서 좀 회고하는 시간을 가지려고 합니다.

2023년 3월부터 본격적으로 개발 공부를 시작했습니다. 물론 그 전에 교양이나 강의로 다른 언어를 공부한 적은 있으나 구현보다는 그냥 언어 문법 정도를 봤던 것이라서 별다른 도움이 없이 끝났습니다. 심지어 처음엔 파이썬을 배울 땐 반복문에서 막혀서 이 길은 내 길이 아니구나 생각했습니다. 그때 그래도 코드를 짜면서 생각을 한다는 것이 재밌었습니다. 그래서 다시 도전할 생각을 했을 수도 있습니다. 무튼 이렇게 시작한 개발 공부를 위해서 앞으로 어디로 나아갈지, 현재 상태는 어떤지 속속히 좀 비교해보면서 스스로 피드백을 해보려고 합니다.

본격적으로

망망대해에서

사실 아직도 막막합니다. 망망대해에 튜브하나 타고 다니면서 이것저것 줍는 것 같습니다. 게임으로 따지자면 래프트라는 뗏목을 키우는 게임을 하는 것 같습니다. 스토리도 나름대로 있는게 딱 제 상태인 것 같습니다. 작은 섬에서 시작해서 점점 큰 섬을 찾아가 자원을 모으는 것처럼, 저도 한 번 나열을 해볼까 합니다.

나침반을 찾으러

1. HTML/CSS 퍼블리싱 교육

국비지원 학원을 통해서 퍼블리싱에 관한 내용을 배웠습니다. 한진칼 홈페이지를 클론 코딩하면서 화면을 그리는 것에 비중이 있었고, 이벤트같은 경우는 jQuery로 간단하게 만들었습니다. 4개월 정도 평일 오전에 5시간씩 수업을 듣고, 집에서는 또 혼자서 열심히 공부했습니다. 하루 순 공부량만 8시간을 찍었습니다. 더 욕심이 나긴 했지만, 더이상 늘어날 생각을 안하더군요..

2. 독학: 혼자서 공부하기

학슴에 대해서 효율적인 느낌이 전혀 들지 않았습니다. 수업을 듣는 것도 혼자서 공부를 미리 끝내버리는 경우가 일쑤였습니다. 간간히 수업시간에 실무에서 사용하는 팁들만 주어듣기 위해서 막바지엔 그렇게 다녔던 것 같습니다. 그리고 퍼블리싱 과정이었기 때문에 좀 더 개발을 공부하고자 프론트엔드 분야에 지원하고 싶었습니다. 그래서 부트캠프 지원을 하기 시작했습니다. 프로그래머스, 멋쟁이 사자처럼, 네이버 부스트캠프에 지원서를 넣었고, 멋쟁이 사자처럼, 네이버 부스트캠프 1차 합격, 멋쟁이 사자처럼을 최종합격했습니다.

3. 멋쟁이 사자처럼 FES7 부트캠프

프론트엔드 과정을 배우는 것도 중요하지만, 부트캠프를 시작할 때 가장 기대했던 것은 '같이' 공부할 수 있는 사람들을 만나는 것입니다. 주변에 아는 개발자가 하나도 없는 상태에서 혼자서 이것저것 검색해보면서 하는 게 정말 힘들었습니다. 혼자서 공부한다고 했을 때 의지도 확실히 더 떨어지고 있었습니다. 그래서 부트캠프를 통해 커뮤니티에 참여하는 것을 목표로 가지고 있었습니다. 비록 온라인일지라도 빨리 친해지고 가까이 살면 오프라인으로도 만날 수 있겠다는 기대감이 있었습니다. 그리고 제가 열심히 말하고 다닌 덕에 적어도 2주에 한 번은 모이고, 앞으로도 꾸준히 오프라인 모임을 할 수 있게 계획도 세웠습니다ㅎㅎ

무모하게 고!

1. 프로젝트 시작하기

개인 프로젝트를 진행하고 싶었지만, 어디에서부터 손을 대야할지 무엇을 모르는지도 몰랐습니다. 그래서 일단 무모하게 프로젝트에 지원했습니다. 마침 오프라인 프로젝트인데 거리가 별로 멀지 않은 곳에서 진행하는 곳을 찾았습니다! 그리고 바로 지원했고, 입문자인 제가 최대한 할 수 있는 것들을 어필했습니다. 디자인도 할 수 있고, 아이디어도 많고, 성장도 빠른데 프로젝트를 가장 우선할 수 있다고 했습니다. 실제로도 그랬으니까 깃허브며 노션이며 열심히 첨부까지 했습니다. 1년 정도 실무를 하신 분들이 포트폴리용으로 하시는 건데 메일을 정성스럽게 써주었다고, 프로젝트 참여에 깃허브까지 첨부하는 건 처음봤다면서 참여할 수 있었습니다.

2. 스터디 시작하기

최대한 주변 환경에 개발 공부하는 사람들을 많이 두기 위해서 스터디도 직접 만들고 모집하고, 사람이 없으면 다른 곳을 찾아서 적극적으로 참여했습니다. 계획과 실행력으로 밀어붙였고, 조금이라도 스터디 참여가 저조하면 바로 파토를 내는 결정도 하였습니다. 멋사 부트캠프에서도 깃허브, 블로그 스터디를 만들고 딥다이브 스터디에 참여하고 책 집필도 시작했습니다.

어디에 도착했을까?

사실 도착하지 않았습니다. 아직도 망망대해에 있는 느낌은 절대 지울 수 없을 정도로 공부하는 것에도 막연한 게 있습니다. 지금은 또 개발 공부에 침체기여서 무언가를 많이 하기보단 꾸준히 하는 것에 의미를 두고 있습니다. 아직 이렇다할 나침반은 찾지 못했지만, 현재 어떻게 공부하고 있는지 정리할 수 있습니다. 그리고 모르는 것에 대해서 정확하게 모른다고 할 수 있습니다.

성장 속도

처음 시작할 때는 스스로도 빠르게 느껴졌는데, 점점 침체가 오더니 요즘은 완만하게 곡선을 그리면서 오히려 내려가는 느낌도 듭니다. 가장 잘 보이는 건 역시 열품타로 시간을 기록해오던 데이터를 보면 5월 정점을 찍고 7월에 내려갔다가 8월에 겨우 회복을 시작했습니다. 다시 한 번 올라가기 위해서 지금 무엇을 해야할지 고민을 하는 시간을 좀 가져야겠습니다.

결론

회고아닌 회고 글을 쓰면서 든 생각은 정말 데이터로 판단하지 않고 있구나였습니다. 시간을 기록하는 것에서 더 나아가 어떤 일을 했는지 자세하게 기록하는 일과 그걸 데이터로 남길 수 있도록 기준을 명확하게 해야겠습니다. 목표 취업 성공 기간까지 남은 6개월동안 이에 대해서 좀 더 보완할 수 있도록 다음 글에서 추가해보도록 하겠습니다!

최근에 생성자, 클로저에 대한 개념을 배웠습니다.

생성자 함수의 형태를 가지며, new 키워드와 함께 사용합니다. 새로운 객체를 할당하기 때문에 생성자 함수 내부에서는 this를 써주어 해당 프로퍼티가 새로운 식별자를 가리킬 수 있도록 해줍니다.

클로저는 함수를 return하는 중첩함수를 사용할 때, 내부 함수(return하는 함수)가 외부 함수 내부의 변수를 참조할 때 생깁니다. 내부 함수를 return해줄 때 호출된 외부 함수는 메모리 상에서 사라지지만, 렉시컬 스코프 특징으로 인해 이미 사라져야 할 변수들을 계속 참조합니다. 이런 변수들은 내부 함수에 값을 바꿔주는 별도의 장치가 없다면 접근할 수 없습니다. 말그대로 폐쇄된 상태를 가집니다.

이해한 것을 토대로 개념을 써서 틀린 부분이 있을 수도 있습니다!

이 두 개념이 새로 배우는 것인데도 어디에 활용할 수 있을지 생각하면서 재미있게 코드를 짜다 보니 빠르게 익숙해졌습니다ㅎㅎ

✨본격적으로

실습 내용은 단순히 음식을 랜덤으로 출력하는 robot들을 만드는 것입니다. 이를 위해서 RobotFactory라는 생성자를 만들고, 인스턴스를 생성할 땐 배열을 값으로 받습니다.

저는 여기에서 더 어렵게 가보았습니다. 음식과 음식의 재고를 같이 입력받는다면 어떨까 했습니다. 재고에 맞게 음식을 출력을 하는데, 랜덤하게 출력까지 해주는 걸로ㅎㅎ

문제: 음식과 재고를 배열로 입력받아 재고에 맞춰 음식을 랜덤으로 출력하고, 남은 음식들을 확인할 수 있는 생성자 만들기

입력: 배열 형태, ex) ["피자", 1, "햄버거", 3, "라면", 2]

출력: serveFood()의 경우: 피자 (재고에 맞춰 랜덤하게 출력) remainFoods()의 경우: 햄버거/3 라면/2 (재고가 0인 것을 제외하고 보여줌)

1. 함수의 기본 형태

//생성자 함수는 아니지만, 새로운 인스턴스를 반환해주기 때문에 대문자로 시작했다.
function RobotFactoryStore(foodNames){
  //closure ~ 내부 로직을 보여주지 않기 위해 별도로 함수를 만들어준다.
  const getFood = () => {};
  const countFood = () => {};
  //generator function
  function Robot(){
    this.serveFood = getFood;
    this.remainFoods = countFood;
  }
  //새로운 인스턴스를 반환해준다.
  return new Robot();
}

2. 입력의 형태 = 배열

내부에서 편하게 사용하기 위해 다음과 같이 바꿔주었습니다.

//음식 종류 파악하기
const foodList = foodNames.filter((e) => typeof e === "string");
//음식 재고 파악하기
const foodStore = foodNames.filter((e) => typeof e === "number");

//모든 음식 재고 파악하기
let allFoodCount = foodStore.reduce((a, c) => (a += c), 0);

• 처음에 제대로 입력을 받았다면, 음식의 종류와 재고는 같은 인덱스값을 가집니다!

• 여기에서 추가를 한다면, 예외처리로 같은 음식이 여러번 입력된 경우와, 재고가 표시되지 않고 음식만 입력한 경우를 모두 처리하면 좋을 듯 합니다.

  • foodList의 중복을 제거하기 위해 set으로 할까 고민했지만, 재고까지 파악하기 위해서는 별도의 중복 처리를 해주는 로직이 필요할 듯 합니다.

• 처음에는 Map을 사용하기 위해 객체로 받으려고 했지만, 아직 객체가 익숙하지 않아 배열로 처리해주었습니다!

3. 조건

랜덤하게 음식을 출력합니다. 이전 음식과 겹치지도 않게 해주었습니다!

let randomNum = parseInt(Math.random() * foodList.length);
let prevNum = -1;

• 랜덤한 수를 위한 변수 선언 prevNum으로 현재 랜덤한 인덱스와 비교하기 때문에, 인덱스에 없는 음수값으로 초기화했습니다. 또한, foodList의 길이로 랜덤한 인덱스를 생성하도록 하였습니다. 음식의 종류의 개수에 맞추기 위해서 입니다.

4. 랜덤한 음식을 반환해주는 함수

• 랜덤한 수와 기존 출력한 음식 비교 조건에 따라 randomNum과 prevNum을 비교해야 합니다. 그리고 현재 재고가 있는지도 파악해야 합니다. 그래서 이전 음식과 같거나, 현재 재고가 없다면 다시 랜덤한 수를 할당합니다. 따라서 다음 조건을 가진 while문을 사용했습니다.

  //랜덤한 수와 기존 출력한 음식 비교
  //이전 인덱스와 랜덤한 수가 같거나, 재고가 남아있지 않은 경우
  while (prevNum === randomNum || foodStore[randomNum] === 0) {
  //다시 랜덤한 수를 생성
  randomNum = parseInt(Math.random() * foodList.length);
  }

  여기에서 prevNum과 randomNum의 경우 함수가 종료되도 기존 값을 가지고 있어야 하기 때문에, 함수 외부에 변수를 선언해줘야 합니다~!

• 랜덤한 수를 이용해서 음식을 반환합니다. 주의할 점은 재고 파악을 해야한다는 점입니다. 반환할 음식의 재고를 먼저 -1씩 처리해주어야 하며, prevNum은 현재의 랜덤한 인덱스를 할당받아야 다음 음식이 현재 음식과 겹치지 않게 할 수 있습니다.

  //현재 랜덤한 인덱스는 다음 함수가 호출될 때 이전 인덱스로 기록
  prevNum = randomNum;
  //음식의 재고를 하나 줄인다.
  foodStore[randomNum]--;
  //전체 음식의 재고도 하나 줄인다.
  allFoodCount--;
  //최종 반환
  return foodList[randomNum];

• 예외!! 문제가 생겼습니다. 재고가 다 다르고 랜덤하게 반환하기 때문에, 같은 음식의 재고만 남을 경우 undefined가 되어버립니다. 또한 재고가 다 떨어졌을 때도 그렇습니다. 그래서 다음과 같이 예외도 처리해주면... 랜덤한 음식을 출력해주는 getFood()를 만들었습니다!

  const getFood = () => {
   //재고가 없는 경우 + 모든 음식이 떨어진 경우
   if (allFoodCount === 0) return "재고없음";
   //하나의 음식만 남은 경우
   if (foodStore.filter((e) => e != 0).length === 1) prevNum = -1;
   while (prevNum === randomNum || foodStore[randomNum] === 0) {
     randomNum = parseInt(Math.random() * foodList.length);
   }
   prevNum = randomNum;
   foodStore[randomNum]--;
   allFoodCount--;
   return foodList[randomNum];
  };
  

### 5. 남은 음식을 알려주는 함수
재고가 남은 음식이란 건 `foodStore` 배열의 값이 0보다 크다는 의미입니다. 따라서 `filter()`를 사용해서 0보다 큰 값들만 뽑아줍니다. 그리고 해당 배열의 길이가 0이라면 즉, 남은 재고가 없다면 바로 재고없음을 반환해줍니다.
```js
const countFood = () => {
  const remainFoodList = foodStore.filter((e) => e > 0);
  if (remainFoodList.length === 0) return "재고없음";
  let list = "";
  foodStore.forEach((e, i) => {
    if(e != 0) list += `${foodList[i]}/${e} `;
  });
  return list;
};

이렇게 쓰고 나니 filter()를 사용한 게 좀 걸립니다. foodStore의 forEach()내부에서도 조건이 한 번 더 들어가야 하니, 이 걸 이용해 개선할 수 있을 것 같습니다.

const countFood = () => {
  let list = "";
  foodStore.forEach((e, i) => {
    if(e != 0) list += `${foodList[i]}/${e} `;
  });
  if(list === "") return "재고없음"
  return list;
};

이렇게 글을 쓰니 개선할 점도 찾고 좋네요ㅎㅎ list에 0이 아닌 경우에만 문자열을 연산하니, 모두가 0이라면, 즉 재고가 없다면 list는 처음과 같은 빈문자열로 남습니다. 이걸 이용하여 조건을 간단하게 바꾸었습니다. 혹은 별도로 선언한 allFoodCount를 이용해도 되겠네요!

const countFood = () => {
  if(allFoodCount === 0) return "재고없음"
  let list = "";
  foodStore.forEach((e, i) => {
    if(e != 0) list += `${foodList[i]}/${e} `;
  });
  return list;
};

이렇게 하면 필요없이 forEach()를 돌지 않습니다. 성능에도 좋은 듯 합니다.

📜전체 코드

이렇게 해서 전체 코드를 다음과 같습니다!

//음식과 재고를 같이 입력받는다면?
//"피자", 1, "햄버거", 3, "라면", 2

function RobotFactoryStore(foodNames) {
  //closure ~ 접근 불가
  const foodList = foodNames.filter((e) => typeof e === "string");
  const foodStore = foodNames.filter((e) => typeof e === "number");

  let allFoodCount = foodStore.reduce((a, c) => (a += c), 0);

  let randomNum = parseInt(Math.random() * foodList.length);
  let prevNum = -1;

  const getFood = () => {
    if (allFoodCount === 0) return "재고없음";
    if (foodStore.filter((e) => e != 0).length === 1) prevNum = -1;
    while (prevNum === randomNum || foodStore[randomNum] === 0) {
      randomNum = parseInt(Math.random() * foodList.length);
    }
    prevNum = randomNum;
    foodStore[randomNum]--;
    allFoodCount--;
    return foodList[randomNum];
  };

  const countFood = () => {
    if(allFoodCount === 0) return "재고없음"
    let list = "";
    foodStore.forEach((e, i) => {
      if(e != 0) list += `${foodList[i]}/${e} `;
    });
    return list;
  };

  function Robot() {
    this.serveFood = getFood;
    this.remainFoods = countFood;
  }

  return new Robot();
}

const newRobot = RobotFactoryStore(["피자", 1, "햄버거", 3, "라면", 2]);

📝콘솔에 찍어본 결과입니다. remainFoods()를 펼쳐서 스코프를 확인해보면 클로저 스코프에 위와 같이 있는 것을 발견할 수 있습니다.

클로저를 사용한 이유

새로 배운 개념을 위주로 활용하고자 한 것도 있지만, 클로저를 안 쓰고 생성자 함수를 만들게 된다면 다음의 코드가 됩니다.

function RobotFactoryStore(foodNames) {
  this.foodList = foodNames.filter((e) => typeof e === "string");
  this.foodStore = foodNames.filter((e) => typeof e === "number");

  this.allFoodCount = this.foodStore.reduce((a, c) => (a += c), 0);

  this.randomNum = parseInt(Math.random() * this.foodList.length);
  this.prevNum = -1;

  this.serveFood = function() {
    if (this.allFoodCount === 0) return "재고없음";
    if (this.foodStore.filter((e) => e != 0).length === 1) prevNum = -1;
    while (this.prevNum === this.randomNum || this.foodStore[this.randomNum] === 0) {
      this.randomNum = parseInt(Math.random() * this.foodList.length);
    }
    this.prevNum = this.randomNum;
    this.foodStore[this.randomNum]--;
    this.allFoodCount--;
    return this.foodList[this.randomNum];
  };
  this.remainFoods = function() {
    if(this.allFoodCount === 0) return "재고없음"
    let list = "";
    this.foodStore.forEach((e, i) => {
      if(e != 0) list += `${this.foodList[i]}/${e} `;
    });
    return list;
  };
}
const newRobots1 = new RobotFactoryStore(["피자", 3, "라면", 5, "햄버거", 0]);

📝this.가 매번 변수를 따라다니고, 매우 복잡해 보여서 코드 자체의 가독성이 많이 떨어진다고 판단하였습니다. 또한, newRobots을 콘솔에 출력해 보면, 📝다음과 같이 필요가 없는 변수들까지 바로 사용이 가능합니다. 물론 재고를 채울 수 있다는 조건이 있다면 위와 같이 써도 무방하나, 현재 로봇의 역할은 음식을 제공하고, 재고를 파악해주는 것입니다. 따라서 목적에 맞게 serveFood()와 remainFoods()만을 사용할 수 있도록 하였습니다!

✔️결론

클로저를 사용해서 중첩함수를 만들고, 내부의 메인 함수는 생성자 함수로 새로운 인스턴스를 반환해주는 코드를 작성해보았습니다. 2시간동안 머리 싸매고 2시간동안 글을 쓰니 코드를 다시 보게 되고 개선할 수도 있었습니다. 다음에는 해당 코드를 클래스를 이용해서 다시 작성해봐야겠습니다!

데이터 시각화에 관심을 가지면서 가장 먼저 어떻게 차트를 구현하는지 찾아보았습니다. JS기반으로 차트를 만드는 건 기본적으로 D3이며, ChartJS를 이용해 쉽게도 구현이 가능하다고 합니다. 그래서 간단하게 공부를 시작하면서 지금 하고 있는 정리 방법에 대해서도 같이 글을 써보려고 합니다!

본격적으로!

D3를 시작하기 전에

필요한 선행 지식

HTML/CSS JAVASCRIPT VSCode 에 대한 기본 지식이 있어야 합니다! canvas 와 svg에 대해 어느 정도 이해가 가능해야 합니다!

사실 저는 canvas와 svg에 대한 선행 지식이 거의 없습니다. svg는 그나마 프론트 공부를 하면서 사용해본 적은 있으나 직접적으로 svg를 이용해 그려본적은 없습니다. D3는 svg를 이용해서 차트를 그려주는 것인데, 그나마 인강에서 svg에 대해서 어느 정도 다뤄서 인강을 듣는데 문제는 없었습니다.

무엇으로 공부할 것인가?

• 인프런 : 웹 데이터 시각화 멋사 부트캠프의 이점은 인프런 강의 무료 쿠폰을 받을 수 있다는 것입니다. 그 중에서도 다행히 D3도 포함이 되어 있어서 해당 강의로 결정했습니다. 해당 강의 바로가기 >

• D3의 공식문서보다는 예제가 있는 사이트를 추천받았습니다. 공식문서 자체는 어떤 메서드들이 있는지 파악하기엔 좋지만, 직접 사용해서 적용하기엔 상당히 난이도가 있기 때문에 예제들을 보면서 메서드들을 어떻게 쓰는지 코드의 패턴을 파악해가면서 익히는 게 좋을 듯 싶습니다. D3.js 공식 문서 > D3.js 예시 사이트 >

어떻게 공부할 것인가?

항상 새로운 내용을 배운다면 이걸 어떻게 정리해서 내 것으로 만들지 고민이 됩니다. 기록을 잘하기 위해서는 더더욱 이런 고민하는 과정이 필요한데, 유튜브 망령으로 돌아다니면서 얻은 노션 정리 방법을 적용해볼까 합니다ㅎㅎ

1. 노션을 이용해서 정리를 합니다.
2. [키워드]를 적습니다. 이 키워드는 나중에 자료를 찾기 편하게 인덱스를 붙여놓는 것입니다.
3. 이제 그 하위 항목으로 여러 페이지를 만드는데, 페이지 하나의 정보엔 핵심적인 내용 하나만 넣는 것입니다.

예시로 [설정]이라는 인덱스는 프로젝트 초기 셋팅과 관련해서 정리해놓는 곳입니다. 이 하위에 vanilla JS로 할지, React로 할지 구분해서 페이지를 만듭니다.

vanilla HTML 페이지 내부입니다. JS로 이름을 바꿔야겠습니다ㅎㅎ

이렇게 해당 인덱스와 함께 페이지를 목차처럼 정리하는 것입니다. 나중에 검색을 할 때도 이걸 이용해서 편하게 하려고 하는 것입니다.

이 정리 방법의 핵심은 바로 프로젝트에 적용할 수 있게 만드는 것입니다! 단순히 기록용이 아니라 실제로 활용할 수 있다는 것에 초점을 둔 것입니다. 공식 문서보다 좀 더 프로젝트에 적합하게 스스로에게 맞게 정리하는 것이고, 어떤 것을 알고 있는지 확실하게 할 수 있는 좋은 방법이라고 생각하여 이번에 적용을 했습니다! 아직 배워가는 중이라 키워드도 계속 바뀌고 새로 생기고 그렇습니다.

D3 시작하기

인강을 시작한다고 D3를 시작했다! 라고 말하기엔 D3는 양이 방대하다고 생각합니다. 그리고 직접 사용하는 것이 시작한다고 말할 수 있다고 생각합니다! 그래서 D3 인강을 보면서 여러 가지 차트를 그려보고, 그걸 응용해서 사이드 프로젝트 하나를 진행해 볼까 합니다.

이미지를 분석해서 색상을 추출하고 그 색상 데이터를 토대로 차트로 그려보는 것입니다!

1. 노션 페이지 정리가 어느 정도 안정화될 때까지 코드를 익힙니다.
2. 사이드 프로젝트를 진행합니다. 목표는 D3를 프로젝트에 직접 사용해 보는 것입니다.
3. 진행한 사이드 프로젝트를 실제 배포하고 피드백을 받습니다!!

이에 대해서 저는 다음의 문제가 있습니다.

1. 배포를 직접 해본 적이 없다!
2. 이미지에서 색상을 추출해본 적도 없다!
3. 이미지를 업로드해서 화면에 그려주는 작업을 해본 적도 없다!

그렇습니다! 하나하나 해보면서 그 과정을 D3 시리즈에 기록해보도록 하겠습니다! 화이팅!!!

결론

시작하기!! 라는 제목을 가지고 있기엔 시작하기가 시작하기 전에 하는 것보다 짧습니다! 정말 이제 막 시작하여 막연한 느낌을 가지고 있습니다. 못해도 고! 일단 고! 몰라도 고! 무모하게 한 번 가봅시다! 무언가를 시작한다는 것에 두려움보다는 무모하게 부딪혀보는 것이 제 장점입니다. 이번에도 일단 부딪혀보려고 합니다. 화이팅~!

요즘 데이터 시각화에 대해서 알아보고 있습니다. 공간 정보에 관심이 많은데, 결국 이 분야도 데이터 시각화에 기초하고 있다고 생각했습니다. 어느 정도 데이터 시각화를 익히면 3D를 활용한 공간 정보도 잘 표현할 수 있지 않을까 하는 생각입니다. 그리고 D3를 배우면서 차트의 종류가 정말 많고, 각 차트들을 어떻게 활용할지 막막했습니다. 그래서 기본적으로 데이터 시각화란 무엇인지부터 정리하려고 합니다!

해당 내용은 다음의 AWS 링크를 참고하여 정리하였습니다! AWS 데이터 시각화 >

✨본격적으로!

1. 데이터 시각화란?

📝 차트, 그래프 또는 맵과 같은 시각적 요소를 사용해 데이터를 표시하는 프로세스

데이터를 이해하기 쉽게 전달하기 위해 데이터를 구조화하는 것

2. 데이터 시각화의 장점

• 데이터의 빠른 분석으로 시간을 절약합니다. : 빠르게 데이터를 분석할 수 있으며, 맥락을 표현할 수 있어 데이터 분석 시간을 단축할 수 있습니다.
• 정확한 전달로 목적을 명확하게 합니다. : 데이터 분석 결과를 대규모 팀에 전달하는데 유용합니다.

3. 데이터 시각화 구성 요소

스토리 ~ 데이터 시각화의 목적

데이터를 통해 전달하고자 하는 스토리, 목적을 정확하게 합니다.

데이터

적절한 데이터를 선별해야 합니다. 데이터 형식을 수정하고, 정리하고, 이상값을 제거하고, 추가 분석을 하는 등 데이터 시각화 이전에 데이터를 가공합니다.

시각적 객체

가장 적합한 시각화 방법을 선택합니다. 데이터를 체계적으로 제시하는 효율적인 방법을 생각합니다.

4. 데이터 시각화 프로세스

1. 목표 정의
2. 데이터 수집
3. 데이터 정리
4. 데이터 시각 자료 선택
5. 데이터 시각 자료 생성
   • 크기, 색상, 글꼴 및 그래픽을 사용하여 중요한 세부 정보로 관심을 유도
   • 시각적 단서를 사용하여 데이터에 컨텍스트 제공
   • 적절한 색상 조합 선택
   • 설명적인 제목을 사용하여 주요 인사이트를 제공하고 올바른 질문에 집중할 수 있도록 지원
   • 명확한 레이블과 숫자 추가

5. 데이터 시각화 기술 유형

차트와 그래프가 가장 일반적이지만 다양한 방법을 사용할 수 있습니다. 5가지 주요 유형에 대해 설명하겠습니다!

📈 시간 데이터 시각화

데이터: 선 그래프, 선 차트 또는 타임라인과 같은 선형 1차원 객체

여러 선을 사용하여 다양한 요인의 변화를 나타내는 꺽은선형 차트

📈 네트워크 데이터 시각화

데이터: 서로 다른 유형의 관련 데이터 간의 복잡한 관계

데이터를 그래프의 점으로 나타내는 산점도 산점도에 세 번째 데이터 요소를 추가하는 거품형 차트 다양한 크기의 단어를 사용하여 단어 빈도를 나타내는 워드 클라우드

📈 계층적 데이터 시각화

데이터: 상위 항목에 대한 공통 연결점이 있는 항목 그룹 또는 항목 집합

정보 클러스터를 표시할 수 있는 데이터 트리

📈 다차원 데이터 시각화

데이터: 둘 이상의 데이터 변수를 단일 2D 또는 3D 이미지로 나타낼 수 있는 데이터

둘 이상의 데이터 요소를 비교하고 일정 기간 동안 변화를 보여주는 막대 차트, 파이 차트 및 누적 막대 그래프

📈 지리 공간 데이터 시각화

데이터: 실제 위치와 관련된 데이터

열 지도, 밀도 지도, 지도 도표 등

6. 데이터 시각화의 문제점

• 데이터의 지나친 단순화 : 데이터를 지나치게 단순화하면 주요 정보가 손실될 수 있습니다. 해당 데이터에 영향을 미치는 다양한 여러 요인을 고려하지 않고 결론을 지으면 안됩니다!
• 편견 : 데이터를 입맛에 맞게 선별하여 편향된 결과를 만들 수 있습니다. 따라서 다양한 팀과 의견을 포함하는 것이 중요합니다!
• 과장 : 상관없는 데이터를 시각화하여 존재하지 않는 상관 관계를 생성할 수 있습니다. 악의적으로 부정확한 데이터 시각화를 사용하여 잘못된 의사 결정을 정당화할 수 있습니다.

✔️ 결론

데이터 시각화의 장단점을 정리해본 것이 좋았습니다. 데이터 시각화를 할 때 어떤 기준을 가지고 해야할지도 생각해볼 수 있었습니다. 정확한 목적을 가지고 어떤 대상에게 보여줄 것인지 먼저 생각을 해보고 접근을 하되, 데이터를 의도적으로 편집하지 않고 여러 케이스들을 추가하여 편향된 결정이 아닌 보다 정확한 결정이 될 수 있도록 데이터 시각화를 해야한다는 것을 알았습니다. 이제 데이터를 효과적으로 시각화하는 방법에 대해서도 조사를 해보고 싶어졌습니다.ㅎㅎ

여러 자바스크립트 파일을 연결하다 보면 식별자 이름이 겹쳐서 중복선언때문에 오류가 나는 경우가 생깁니다. 이에 대한 해결 방법으로 즉시 실행 함수나 네임스페이스를 만들어서 코드의 스코프를 조절하는 방법이 있는데, ES2015부터 모듈을 적용할 수 있게 되었습니다. 이런 모듈에 대해서 알아보는 시간을 가지겠습니다!!

요약

• 자바스크립트 파일이 많아지고 식별자가 겹치는 일들이 생길 때 모듈화하여 스코프를 조절합니다.
• 모듈 시스템에는 여러가지 종류가 있으며, 모듈을 지원하는 브라우저 버전을 잘 확인해야합니다.
• import와 export를 사용하여 모듈 스코프의 외부에서도 기능을 쉽게 사용할 수 있습니다.
• 항상 HTML 문서가 다 파싱된 이후에 실행되기 때문에 사용자에게 로딩중을 알려줘야 합니다.
• 모듈의 실행 환경에 따라서 구체적인 로딩 순서나 동작방식이 달라질 수 있습니다.

본격적으로

모듈 시스템

공식문서 등에서 다음과 같이 같은 코드인데도 여러가지 방법을 탭으로 제공하는 곳을 볼 수 있습니다. ESM, UMD 등이 모듈 시스템 입니다.

모듈 시스템이란?

모듈 스코프를 가지며, 여러 파일과 폴더에 나누어 작성하더라도 효율적으로 서로가 서로를 불러올 수 있도록 해주는 시스템입니다.

모듈 시스템의 종류

• ES Module : ES6(ES2015)에서 도입된 javascript module system
• CommonJS : NodeJS 환경을 위해 만들어진 module system
• AMD : 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해서 처음 개발되었습니다.
• UMD : AMD와 CommonJS 와 같은 다양한 모듈 시스템을 함께 사용하기 위해서 만들어졌습니다.

모듈 시스템마다 사용방법이 다르지만, 이러한 모듈 시스템을 구성하는 각각의 파일들을 모듈이라고 부르며, 대부분 mjs 확장자로 사용합니다. js 확장자도 가능하나 명시적으로 모듈을 사용했다는 것을 보여주기 위해서 mjs를 써줍니다. 브라우저에서 사용하기 위해서는 다음과 같이 type="module"을 써주며 해당 파일의 확장자는 mjs로 써주면 됩니다!

<script type="module" src="index.mjs"></script>

모듈 사용하기

ES6 모듈 포맷이며, 브라우저에서 코드를 실행하기 전에 Babel 과 같은 변환기를 사용해 ES5 모듈 포맷(AMD 또는 CommonJS)으로 코드 변환이 필요합니다!

가장 바깥쪽 스코프에서 export, import로 모듈을 내보내고 가져올 수 있습니다.

• export로 선언문을 내보낼 수 있습니다. 외부에서 접근 가능하도록 만드는 것입니다.

login.mjs

//const 키워드로 선언한 경우
const login = () => {};
export default login;

signup.mjs

//function 키워드로 선언한 경우
export function signup(){}

• import로 해당 모듈을 가져올 수 있습니다.

index.mjs

//export default로 내보낸 경우
import login from 'login.js'

//export default로 내보낸 경우가 아니라면 {} 안에 써주어야 합니다.
import { signup as sign } from 'signup.js'
//모듈 내에 같은 식별자 이름을 사용한 경우 as로 import한 모듈 내부에서는 이름을 바꿀 수 있습니다.

모듈의 특징

• import 또는 export 구문을 사용합니다.
• 엄격 모드(strict mode)로 동작합니다.
• 모듈의 가장 바깥쪽에서 선언된 이름은 모듈 스코프에서 선언됩니다.
• 동일한 모듈을 여러 곳에서 사용하라도 모듈은 처음 호출시 한번만 실행됩니다.
• 항상 지연 실행됩니다. html이 다 만들어진 후에 실행됩니다.

모듈의 장점

• 기능을 분리할 수 있습니다.
• 모듈의 재사용으로 개발과 유지보수가 좋습니다.
• 프로그램의 효율적인 관리 및 성능을 향상시킬 수 있습니다.
• 디버깅, 테스트, 통합, 수정 시 모듈 별로 작업을 할 수 있기 때문에 용이합니다.

모듈 사용시 주의할 점

• import, export는 모듈 간 관계를 나타내는 것일 뿐, 코드를 실행시키라는 명령이 아닙니다.
• 같은 모듈을 여러 다른 모듈에서 불러와도, 모듈 내부의 코드는 단 한 번만 실행됩니다.
• import, export는 모듈의 가장 바깥쪽 스코프에서만 사용할 수 있습니다.
• 모듈을 어떤 환경에서 실행하느냐에 따라서 구체적인 로딩 순서나 동작방식이 조금씩 달라질 수 있습니다.

결론

자바스크립트의 파일이 많아질수록 식별자 이름을 짓기가 힘들었는데, 모듈이라는 기능을 알고 난 이후로는 정말 좋았습니다. 사용하기에 편하기도 했습니다. 다만 제가 최신 버전의 크롬 브라우저 환경에서만 작업을 하고 있었는데 모듈이라는 것을 지원하지 않는 브라우저가 생각보다 있어서 놀랐습니다. 실무에서는 웹팩이나 바벨 등의 모듈 빌더로 한다는데 이 부분도 추가적으로 공부하면 좋을 것 같습니다.

점점 공부할 게 쌓이고 있습니다! 삼천포로 빠지지 않도록 조심해야겠습니다. 매일매일 채용공고를 보면서 목표를 되새기는 요즘 조급하기도 하지만 블로그를 쓰면서 이런 기본적인 부분을 알아갈 수 있기에 블로그를 포기하지 않고 이어나갈 수 있는 것 같습니다. 두번째 코로나도 이겨내고 다시 열심히 달리겠습니다! 화이팅!!

참고

엄격모드 파일의 가장 위쪽에"use strict"을 사용하여 설정합니다.

1. 기존에는 조용히 무시되던 에러들을 throwing합니다.
2. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다.
3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지합니다. &nbsp === 엄격 모드일 경우 예시

• 키워드 없이 변수를 선언할 경우 전역 변수로 등록하는 것이 아닌 에러로 알려줍니다.
• NaN 에 할당하는 것은 예외를 발생시킵니다.
• 삭제할 수 없는 프로퍼티를 삭제할 때 예외를 발생시킵니다.
• 프로퍼티 이름을 중복하는 것은 구문 에러입니다. 일반 코드에서는 중복된 프로퍼티 이름 중 나중에 정해진 프로퍼티 이름의 값으로 덮어씌웁니다.
• 원시 값에 프로퍼티를 설정하는 것을 금지합니다.

모듈 스코프 자신만의 스코프를 가집니다. 파일마다 별도의 스코프로 존재하고 있어 전역 객체에 등록되는 것이 아닌 모듈 스코프에 등록됩니다. 따라서 모듈 내에서 가장 상위 객체를 가리키는 this는 window가 아닌 undefined입니다. 그러나 모듈 스코프도 결국 전역 스코프의 하위 스코프여서 window.a로 선언한 전역 변수를 a라는 이름으로 참조할 수 있습니다!

index.mjs

import login from './login.js';
window.a = 1;
login();

login.mjs

export default function login(){
  console.log(a); //1
}

자료를 조사하면서 쉽게 쓰여진 블로그 글들을 많이 참고하였습니다!

hello world javascript > mdn strict mode > youngDev > colin's blog > 참고:노션 블로그 > mingule >

브라우저 호환성 : CAN I USE >

피그잼을 활용하여 다이어그램으로 그려보았습니다! 한번에 길게 그린 걸 토대로 이미지로 내보내서 텍스트는 벨로그에 한 번 더 썼습니다.

본격적으로

1. 목표: 작성한 게시글을 보여주세요!

어느 사이트의 게시판이 있습니다. 이미 작성한 게시글들이 있지만, 목록에는 보이지 않습니다. 게시판 글 목록 데이터는 오른쪽처럼 나열되어 있습니다. 해당 데이터를 화면에 보여주려고 합니다.

2. page 클래스를 가진 div 태그를 선택하기!

게시글이 들어가야 하는 곳은 page 클래스를 가진 div 태그로 만들어두었습니다. 자식 요소로 게시글들이 들어가야 합니다! JS에서 HTML요소를 선택할 수 있는 방법입니다. >>

const page = document.querySelector('div.page');
const items = document.querySelectorAll('div');

3. 선택한 태그의 자식 요소를 만들어 주세요!

이제 page라는 변수를 통해 HTML요소인 div.page에 접근할 수 있습니다.

const lists = document.createElement('div');
page.append(lists);

div라는 새로운 요소를 만들었습니다! append()를 통해서 div.page의 자식으로 추가했습니다. 하지만 아직 어떤 내용도 없기 때문에 화면에 보이지 않습니다!

4. JS로 만든 div에 내용을 넣어주세요!

바로 게시글 데이터를 넣어보았습니다. 어떻게 생겼는지 확인하러 가볼까요?

게시글 데이터를 다시 살펴보니, 여러 게시글의 내용을 객체로 만들어 하나의 배열에 각각 넣었놨습니다. 먼저 반복적으로 해야할 작업들이 무엇인지 생각해봅시다.

1. div 생성하기
2. div를 div.page의 자식요소로 넣기
3. div에 내용을 배열의 인덱스를 이용해 하나의 객체만 넣기

   //게시글 데이터
   const pageList = [{}, {}, ... {}]; 
   const page = document.querySelector("div.page");    
   //게시글의 총 개수   
   const totalPageList = pageList.length; 
   

for(let i = 0; i < totalPageList; i++){ const lists = document.createElement("div"); page.append(lists); lists.innerText = pageList[i]; }

아직 데이터가 가공되지 않고 객체 형태로 들어가 있습니다!
그렇다면, 새로 만든 div의 자식으로 span과 p 등을 새로 만들고 점/브라켓 접근 방법을 활용해 객체 내부의 프로퍼티 값을 뽑아옵시다!

### 5. 객체에서 알맞은 값들을 꺼내 내용을 넣어주세요!
![](https://velog.velcdn.com/images/just_jh30/post/e4429d90-8e1c-45cb-b22c-58a91cd9279c/image.png)

### 결과적으로 나온 코드입니다!
```js
//게시글 데이터
const pageList = [{}, {}, ... {}]; 
const page = document.querySelector("div.page");    
//게시글의 총 개수   
const totalPageList = pageList.length; 

for(let i = 0; i < totalPageList; i++){
  const lists = document.createElement("div");
  const name = document.createElement("span");
  const content = document.createElement("p");
  const date = document.createElement("span");
  page.append(lists);
  lists.append(name);
  lists.append(date);
  lists.append(content);
  lists.innerText = pageList[i];
  name.innerText = pageList[i].name;
  date.inneerText = pageList[i].date;
  content.innerText = pageList[i].content;
}

이를 메서드를 사용해서 해본다면,

//게시글 데이터
const pageList = [{}, {}, ... {}]; 
const page = document.querySelector("div.page");    
//게시글의 총 개수   
const totalPageList = pageList.length; 

//slice()를 이용해 데이터의 전체 범위를 선택
pageList.slice(0, totlaPageList)
//map을 이용해 선택한 범위의 데이터를 조회
    .map((e, i) => {
          const lists = document.createElement("div");
        const name = document.createElement("span");
        const content = document.createElement("p");
        const date = document.createElement("span");
        page.append(lists);
        lists.append(name);
        lists.append(date);
        lists.append(content);
        name.innerText = e.name;
        date.inneerText = e.date;
        content.innerText = e.content;
    });

결론

dom과 변수를 잘 활용한다면 충분히 할 수 있는 내용이었습니다. 여태까지 못 하겠다고 막막하다고 하면서 미뤄왔던 걸 이렇게 쉽게 하다니?! 처음 자바스크립트를 공부할 때는 구현에 대해서 스스로 생각하지 못하고 강의에 나오는 것만 따라하다보니 직접 생각을 하고 구현을 하는 과정을 연습할 필요성을 느꼈습니다. 그리고 이번에 페이지네이션을 공부하면서 기본적으로 데이터를 화면에 그려주는 게시판에 대해서도 많이 해보게 되었습니다. 그래서 이를 다이어그램으로 정리해보면서 사고의 순서를 정리해보았습니다. 이미 구현이 완료된 상태에서 만든 것이기에 생각보다 빠르게 할 수 있었지만, 다음에는 구현을 하기 전에 다이어그램으로 그려보는 연습을 해보려고 합니다!

*사진이 잘 보이지 않다면 댓글로 알려주세요!

< 이전 글: JSON 개념 정리

3. JSON의 구조

요약

• JSON은 문자열 형태로 존재하기 때문에 실제 사용을 위해선 객체로 변환해주어야 합니다.

  문자열에서 네이티브 객체로 변환하는 것은 파싱(Parsing)이라고 합니다. 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라고 합니다.

• JSON은 Javascript 객체 리터럴 문법을 따르는 문자열로 데이터 계층을 구축할 수 있습니다. 식별자 규칙, 할당할 수 있는 값의 타입 등이 제한되며 메서드를 넣을 수 없습니다!

• 점/브라켓 표현법을 통해 객체 내 데이터에 접근할 수 있습니다. 프로퍼티 이름과 배열 인덱스의 체인을 통해 하위 계층의 데이터에 접근할 수 있습니다.

코드로 알아보기

이해를 돕기 위해 JS에서 사용하는 객체 표현과 JSON의 표현 방식을 비교하였습니다.

1.먼저 JavaScript의 객체 표현을 알아봅시다.

//JS에서 객체를 값으로 가지고 있는 배열 표현
const array = [{}, {}, {}];

//JS에서 객체의 표현
const object = {

  /*프로퍼티 키를 변수명처럼 입력 가능(문자열로 변환)*/
  key1: `value1`, //문자열
  key2: { name: 'man',  genter: "female" }, //객체
  key_2: [1, 3, 4, 5], //배열

  /*프로퍼티 키는 기본적으로 문자열*/
  "key2": 2, //숫자
  "key-2": true, //변수명 규칙에 어긋난다면 무조건 문자열로!!

  /*프로퍼티 키에 숫자 가능(문자열로 변환)*/
  3: true, //불린

  /*프로퍼티 키로 함수 호출 가능*/
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
    //this로 해당 객체의 프로퍼티 사용 가능
  } //함수 ~ 메서드
};

프로퍼티 키는 문자열이므로 따옴표(‘’ 또는 ““)를 사용한다. 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다. 반대로 말하면 자바스크립트에서 사용 가능한 유효한 이름이 아닌 경우, 반드시 따옴표를 사용하여야 한다.

프로퍼티 키는 암묵적으로 문자열로 변환되기 때문에 key2와 "key2"는 같은 프로퍼티 키가 됩니다. 따라서 마지막에 쓰여진 "key2"로 불러와집니다.

2.이제 JSON의 형태를 알아봅시다.

JSON내부에서는 주석을 사용할 수 없습니다! 직접적인 설명을 위해 주석형태를 빌렸습니다. 다음 내용은 MDN에서 가져왔습니다.

[ //배열 내부에 객체를 담는다. ~ 올바른 JSON 형식

  //배열의 0번째 인덱스처럼 사용 가능
  {
    //프로퍼티는 항상 문자열로 표현
    "name": "Molecule Man", //문자열 ~ 항상 큰따옴표를 사용
    "age": 29, //숫자
    "secretIdentity": "Dan Jukes",
    "powers": [
      "Radiation resistance", 
      "Turning tiny", 
      "Radiation blast"
    ] //배열

  },//콤마로 구분!!!!!!!!

  //배열의 1번째 인덱스처럼 사용 가능
  {
    "name": "Madame Uppercut",
    "age": 39,
    "secretIdentity": "Jane Wilson",
    "powers": {
      "Million tonne punch": 1,
      "Damage resistance": 2,
      "Superhuman reflexes": 3
    } //객체
  }
]

3.JSON 사용하기

문자열로 된 JSON파일을 파싱하여 객체로 변환 후 사용 가능합니다.

//json 파일
const myJson = [
  {name: "Chris", age: "38"},
  {name: "Egg", age: "17"}
];

//json 파일로 내보낼 때 문자열로 변환하기 ~ 문자열화
const mySTRING = JSON.stringify(myJson);

//json 파일을 사용할 때 객체로 변환하기 ~ 파싱
const parsedJson = JSON.parse(mySTRING);

변수에 저장된 값을 출력해본다면

myJson
/*(2) [{…}, {…}]
0: {name: 'Chris', age: '38'}
1: {name: 'Egg', age: '17'}
length: 2
[[Prototype]]: Array(0)*/


myString
//'{"name":"Chris","age":"38"}'

프로퍼티 키에 접근하여 사용해본다면

//JSON객체변수명[배열인덱스].프로퍼티키 => 프로퍼키 값

//프로퍼티 키로 바로 접근하기 ~ 점 사용
parsedJson[0].name //'Chris'

//문자열로 접근하기 ~ 브라켓 사용
parsedJson[1]["name"] //'Egg'

결론

처음 JSON을 접할 때 사용방법 등에 대해서 많이 두려웠습니다. 피그마 디자인 토큰을 다루다보니 어쩔 수 없이 JSON을 사용해야 했고, 그 결과 JSON이 가장 쉽다는 걸 깨달았습니다. 몇가지 규칙만 숙지하고 VScode에는 JSON을 쉽게 볼 수 있도록 도와주는 확장팩도 활용하니 JSON을 읽고 사용하는데 큰 지장이 없었습니다. 그래서 요즘은 JSON에서 가장 어려운 점이 JSON으로 데이터의 계층 구조를 짤 때입니다. 쓸데없이 깊이가 깊어져 접근하려면 키만 4개를 거쳐야 될 때도 있었고, 확실하게 나누지 않아서 쓸모없는 데이터도 같이 불러와지는 경우도 생겨서 생각을 많이 해서 파일을 작성하게 되었습니다. 확실한 건, 지지고 볶고 해야 익숙해지고 다루기도 편해진다는 것이네요! 다음에 피그마 디자인 토큰 사용한 것을 토대로 JSON을 어떻게 활용했는지 적어보도록 하겠습니다!

1. JSON 파일이란?

JSON(JavaScript Object Notation)은 사람이 읽을 수 있는 텍스트를 사용하여 데이터를 저장하고 전송하는 데이터 공유를 위한 개방형 표준 파일 형식입니다.

JSON은 JS에서 파생되었지만 언어 독립적인 데이터 형식으로 .json 확장자를 가지고 있습니다.

• 언어 독립적인 데이터 형식이란? 다른 언어에서도 데이터를 쓸 수 있도록 만들어진 형식입니다. JS에서 파생되었지만, 백엔드의 경우 JAVA 등 다양한 언어를 사용하므로, 언어 독립적인 데이터 형식을 가진 이유 중 하나입니다.

2. JSON 간략한 역사

• 2001년 3월 Douglas Crockford에 의해 지정

  • JSON은 JavaScript의 하위 집합인 Standard ECMA-262 3rd Edition(1999년 12월)을 기반으로 합니다.

• 2013년 10월 Ecma International에서 JSON 표준 ECMA-404의 초판 발행

• RFC 7159는 2014년 JSON의 인터넷 사용에 대한 주요 참조가 되었습니다.

  RFC 란 RFC(Request for Comments) 문서는 "의견을 요청하는 문서"라는 의미로, 국제 인터넷 표준화 기구(IETF; Internet Engineering Task Force)에서 관리하는 기술 표준입니다. 콘텐츠에 대해 특별한 제한은 없지만 주로 프로토콜(protocol) 및 파일 형식등이 주요 주제이며 승인된 문서는 유일한 일련 번호를 갖게 되며 "RFC-일련번호" 형식으로 불리웁니다.

• 2017년 11월 ISO/IEC 21778:2017이 국제 표준으로 발행되었습니다.

• RFC 8259는 2017년 12월 13일 인터넷 표준 STD 90의 최신 버전인 Internet Engineering Task Force에서 게시했습니다.

외부 참조 글 내용 참고 >

내 게시글 JSON을 이용한 피그마 디자인 토큰 > 다음 글: JSON의 구조 >

GOAL

지난 글에 이어서 이번에 8월의 목표와 액션에 대해서 생각을 해봅니다! 먼저 KPT로 나온 action item을 가지고 왔습니다.

action items

• 기록을 잘한다의 기준을 최소 5가지를 잡고, 그 기준에 맞춰서 스스로를 평가해본다. 평가 결과를 토대로 앞으로 개선해 나가면 될 일!!
• 해빗 트래커를 작성한다. 커피 요가 투두리스트 등 기본적인 습관들에 대해서 해빗 트래커를 작성 해보자!
• 일주일에 기능 하나씩 구현해보자. 이어지지 않더라도 좋고, 프로젝트에 들어갈 거라도 좋다. 개인적으로 공부하는 내용을 코드로 남기자!

여기에서 역으로 8월 목표에 대해서 생각을 해봅니다.

GOAL

1. 무언가를 잘한다는 기준과 기준을 토대로 본 내 현재 상태 파악, 개선하기
2. 목적을 분명히 하고 해빗 트래커 작성하기. 작성한 내용을 토대로 내 패턴에 대해서 분석하고 회고하기
3. 코드로 기록을 남기며, 그 내용은 여태까지 안해보았던 기능들을 직접 만들어 보는 것!

위의 내용을 좀 더 자세하게 풀면서, 세부 action item들을 만들어보았습니다.

1. 무언가를 잘한다는 기준

이력서 특강에서 다뤘던 내용입니다. JD를 분석할 때 어떤 것을 잘한다라고만 써져있는데, 그 기준이 대체 무엇일까? 하는 것이죠.

잘한다의 기준에 대해서 생각을 해보고, 스스로를 평가를 해보고 부족한 부분에 대해서 리팩토링의 단계를 거치면서 코드로 완성을 해본다.

핵심적인 내용은 위와 같습니다. 저는 이것을 좀 더 넓은 범위에 적용해보면서 8월의 action item은 다음과 같습니다.

1-1. 기록을 잘한다. 1-2. HTML,CSS를 잘한다. 1-3. JAVASCRIPT를 잘한다.

각 내용들에 대해서 현재 스스로 어디까지 가능한지 파악하고 리팩토링의 과정을 겪어보려고 합니다!

2. 해빗 트래커 작성하기

개인적으로 습관을 유지하고 기록하는 데엔 해빗 트래커는 정말 좋다고 생각합니다. 다만, 이것도 부가적인 것이고 실제로 행동을 하지 않으면 의미가 없어지니 목적을 확실히 하고 하는 것이 좋을 것 같습니다. 그리고 이런 기록들은 패턴을 분석할 때 좋은 자료가 될 것입니다. 그래서 작성한 내용을 토대로 스스로의 패턴에 대해서 분석하고 회고하는 시간을 가질 때 가장 유용하지 않을까 합니다!

2-1. 오후 4시까지만 커피 마시기 2-2. 주 2회 요가하기 2-3. 아침마다 투두리스트 작성하기

위와 같지만, 실제로는 한 페이지에서 이뤄지며, 저는 시간대도 같이 기록을 하여 정확하게 하려고 합니다.

3. 일주일에 기능 하나씩 구현해기

코드로 기록을 남기며, 그 내용은 여태까지 안해보았던 기능들을 직접 만들어 보는 것! 사실 프로젝트를 진행하면서 정말 처음부터 끝까지 다 처음해보는 것입니다. 그래서 어떤 기능을 구현하는지 알고 필요한 알고리즘들을 JS로 먼저 공부해보고 REACT로 적용해보는 방법을 써보려고 합니다! 그러기 위해선 정말 몰입해서 속도를 높여야 됩니다. 중간에 속도가 떨어지지 않게 하려고 action item으로 이정표를 만들어 놓는 것입니다.

3-0. api 호출하기 3-1. 페이지네이션 3-2. 계정에 따라서 불러오는 UI 다르게 적용하기 3-3. 텍스트 에디터

일주일에 하나씩 하는 것은 좀 느릴 수도 있으나, 한 번 만들 때 공부를 좀 빡세게 해보려고 합니다. 단순히 복사하는 수준이 아닌 안 보고 구현할 수 있는 수준을 원하니까요!

ACTION

위의 내용을 바탕으로 최종 정리한 내용입니다.

1. 무언가를 잘한다는 기준과 기준을 토대로 본 내 현재 상태 파악, 개선하기
   1. 기록을 잘한다.
   2. HTML,CSS를 잘한다.
   3. JAVASCRIPT를 잘한다.

2. 목적을 분명히 하고 해빗 트래커 작성하기. 작성한 내용을 토대로 내 패턴에 대해서 분석하고 회고하기
   1. 오후 4시까지만 커피 마시기
   2. 주 2회 요가하기
   3. 아침마다 투두리스트 작성하기

3. 코드로 기록을 남기며, 그 내용은 여태까지 안해보았던 기능들을 직접 만들어 보는 것!
   0. api 호출하기
   1. 페이지네이션
   2. 계정에 따라서 불러오는 UI 다르게 적용하기
   3. 텍스트 에디터

다음주부터 힘내서 가봅시다!!

1. + 기록을 잘한다

첫번째 ACTION ITEM이 기록인 이유

저의 강점이라고 생각하는 점에서 멋사 동기분들이 말씀을 해주셨습니다😇 꼼꼼히 기록을 하고 누군가에게 설명을 할 수 있을 정도로 자세하게 알고 있다는 것입니다. 여기에서 추가로, 쉽게 이해를 하기 위해 비유를 해보는 것을 넣고 싶습니다. 개념이 이해가 안된다면 그림을 그려보는데, 단순히 프로세스를 다이어그램으로 그리는 것이 아닌, 낚시를 하고 있는 상황과 비유를 해본다든가, 특정 상황에서 활용하는 방법 등을 토대로 설명을 스스로를 이해시킬 때가 종종 있었습니다. 물론, 그런 비유를 한 것에 대해서 다른 사람들에게 설명을 해주고 납득을 해야 진정한 의미가 있지만 말입니다.

꼼꼼히 기록을 하고, 쉽게 이해 할 수 있게 비유적으로 설명을 할 수 있고 그러기 위해서 자세하고 정확하게 알고 있다

위의 내용은 모두 꼬리에 꼬리를 물고 있습니다. 비유를 할 수 있다. < 예시를 알고 있다. < 설명을 쉽게 한다. < 자세하고 정확하게 안다. < 기록을 한다. < 경험을 해보았다.

저는 기록을 할 때 제가 해본 경험만을 적습니다. 따라서 기록을 한다는 것은 경험을 해보았다는 것입니다. 그리고 이런 경험을 기반으로 한 기록은 자세하고 정확하다고 생각합니다. 에러를 만났을 때 어떤 상황에서 어떻게 처리했는지 해결해보면서 좀 더 자세하고 정확하게 알아가는 과정을 겪기 때문입니다. 이런 과정을 겪은 것을 설명을 하다 보면 저와 다른 상황에서 같은 에러를 만나는 또 다른 경험을 하게 됩니다. 이런 것들이 축적되어 여러 예시들을 알게 되고, 정확하게 상황을 인지할 수 있으며 이때 비유를 할 수 있다고 생각합니다. 따라서 저의 강점에서 가장 핵심적인 것은 경험과 더불어 기록이라고 볼 수 있습니다.

나에 대한 확신은 과거의 경험으로부터, 경험에 대한 확신은 기록으로부터 온다.

기록을 잘한다의 기준

기록의 기준 거인의 노트, 세컨드 브레인을 직접 읽고 생각한 기준입니다.

쌓인다, 핵심적이다, 회고할 수 있다, 공유할 수 있다, 새로운 결과를 얻는다.

기록을 잘한다의 기준

1. 구조적으로 한눈에 보기 쉽다. 목차를 제공한다. 문단이 잘 나뉘어져 있다.
2. 글을 기본으로 다양한 방법으로 기록을 한다.
3. 경험을 기록할 때는 자세하게, 지식을 기록할 때는 정확하게 적는다.
4. 시리즈로 다룬다. 즉, 지식간의 연결점을 만들어 간다는 것!
5. 요약, 느낀점이 결론에 포함되어 있다.

위와 같이 5가지의 기준을 생각을 해보았습니다. 이제 이 기준을 토대로 다른 글에서 7월의 글들을 돌아보면서 평가를 해보겠습니다.

멋쟁이 사자처럼 프론트엔드 스쿨 7기를 시작한지 이제 한 달이 지났습니다. 부트캠프와 더불어 한달 동안 해왔던 일들을 정리하고, KPT 회고방식에 맞게 분류하면서 8월에 할 일들을 정리해보는 시간을 가졌습니다! 또한 개발자를 선택한 동기와 목표를 다시 상기시키고, 세부 목표를 정하는 것에 대해서도 고민을 해보았습니다.

바쁘신 분들은 KPT 회고로 바로가기를 추천드립니다!

이모지로 내용 빠르게 찾기 👏 Good!! 🍳 Bad~ 👀 Posted ✅ to Post list

한 일 정리 및 분류

먼저, 프로젝트, 부트캠프, 개인적인 일로 나누어 분류를 해보았습니다.

🥚프로젝트

• 프로젝트 피그마 디자인 토큰으로 3주 쓰고 공지사항 ui 시작에 3일 걸렸습니다.

  • 7월에 들어서 프로젝트 디자인이 크게 변경되었습니다. 디자인 시스템부터 다시 구축을 하기 시작했습니다. 피그마와 관련된 일을 주로 제가 하였습니다. 그 중에서도 피그마와 깃허브를 연동하여 JSON을 이용해 디자인을 적용시키는 일이 가장 골치였습니다.

  • 현재는 버튼에만 적용을 한 단계이고, 프로젝트에 대해 전반적으로 작업을 한 이후 디테일한 마무리를 할 때 추가 작업으로 계획했습니다.✅

- 플러그인에서 별도로 제공해주는 타입이 있어서 npm 설치 후 해당 타입을 적용하였습니다. ✅


- 공지사항 게시판 부분을 시작했습니다. 디자인에서 벗어났습니다ㅠㅠ 그만큼 신나서 좀 빠르게 작업을 했던 것 같습니다. 이제 페이지네이션을 적용하기 위해 공부를 하고 있습니다. ✅

• 🍳프로젝트 시작 2개월차 리액트와 타입스크립트와 친해질 기미가 보이지 않습니다. 자바스크립트 자체의 기본기가 부족한 느낌을 많이 받고, 질문 횟수가 점점 줄어든게 스스로도 느껴졌습니다. 앞으로 열심히 질문을 이어 나가야 겠습니다!

  🥚부트캠프

수업

수업 중에 알고 있는 내용을 한다면, 제 공부를 찾아서 합니다. 수업 중에 직접 추천을 하시는데, 먼저 공부를 해본 사람들은 강의 중에 더 심화된 내용을 공부하라고 하십니다. 그래서 저는 보통 인강을 듣거나 프로젝트를 합니다. 🍳 실제로, HTML,CSS를 복습한다면서 나태해졌고, 7월 말쯤에야 정신을 좀 차리기 시작했습니다ㅎㅎ

스터디

스터디에 대해서 멋사 노션에 직접 참여할 수 있는 페이지를 열어주었습니다. 그래서 노션을 활용해서 스터디 진행 상황을 공유하고, 기록을 할 수 있어서 좋았습니다.

• 📜블로그 스터디 개설 ✅

  • 기존에 네이버 블로그를 이용해서 혼자 블로그를 작성해오고 있었습니다. 네이버 블로그는 관리하고 글 쓰고 하는 것이 편했지만, 이웃이라는 소통과 관련해서 sns와 좀 더 가까운 형태였습니다. 그래서 네이버보다는 좀 더 개발과 관련된 글쓰기 본연에 집중할 수 있도록 velog로 옮겼습니다.

  • 옮기고 난 후, 꾸준히 할 수 있도록 멋사 부캠에서 같이 수업을 듣는 사람들과 함께 블로그 스터디를 개설하였습니다. 스터디 내에서 월간 회고 시간을 갖기 위해서 지금 이렇게 회고 글도 작성하는 것입니다. 👀

• 딥다이브 스터디 참여 ✅

  • 이미 읽고 있던 상태에서 딥다이브 스터디에 참여하는 것을 고민했었습니다. 그러나 최근에 프로젝트다 뭐다 해서 미루고 있었기에 적극적으로 참여해보자 생각하여 들어갔습니다.

  • 처음 javascript를 접하는 분도 계셨기에 저는 이 책이 어렵다보니, 좀 더 가볍게 1회독을 빠르게 하자고 의견을 냈었습니다. 그러나 저처럼 먼저 이 책을 접했던 분들은 좀 더 깊게 읽는 것이 좋다고 생각하여 상반된 의견을 가지고 있었습니다. 그래서 첫 날에는 이 부분에 대해서 조율하는 시간을 가졌습니다. 무려 2시간에 걸쳐서 내린 결론은 일단 천천히 깊게 가자였습니다. 초반에 깊게 읽지 않는 한 계속 다시 앞부분으로 돌아온다는 것에 공감을 했기 때문입니다.

  • 주 1회 2장씩 읽고, 자신이 맡은 부분에 대해 발표를 진행합니다. 이제 막 2주차를 진행해서 다음주에는 8장, 9장을 진행합니다! 저는 아직까지는 이미 읽었던 부분이고, 노션에도 스스로 정리하고 있었기 때문에, 정리한 걸 한 번 더 요약하고, 중요하게 생각한 부분들을 체크하면서 발표 준비를 합니다. 시간에 여유가 생기면 좀 더 예습을 하고 싶어집니다.

• 🦝회고조 깃허브 생성 및 관리, 설정 시작

  • 멋사에 오면서 2주차 막바지 쯤에 회고조를 배정받았습니다. 전공자, 비전공자, 숨은 실력자들을 추려내서 조를 편성한다고 하는데 정확한 기준을 알 수 없었습니다. 그렇게 회고조가 짜여지고 저는 하고 싶은 게 많기 때문에ㅎㅎㅎㅎ 깃허브를 하나 만들자고 제안했고, 받아들여져서 조이름이 정해지는 날에 깃허브도 추진해버렸습니다! 조이름은 너구리로 블로그에 raccoon/github으로 연재를 진행하고 있습니다. 👀

• 🐾회고조 모각코 오프라인 모임

  • 직접 만나서 깃허브 설명하는 시간도 갖고, 각자 공부하는 시간도 갖기 위해서 모각코를 추진하였습니다! 처음에는 4명, 그 다음에는 전체 참여...! 건설적이어서 좋다는 칭찬도 많이 들었습니다. 과도한 친목이 아닌 어느 정도 긴장감을 갖고 목표를 위해서 활동하기 위해서 다같이 노력해주고 적극적으로 말씀해주고 너무 좋았습니다. 7월에만 거의 4번 이상 만나면서 그때마다 저녁으로 간주를 하더라도 카페에 가서 다시 공부를 하고, 목표에 대해서도 얘기를 나누고 피드백을 받으면서 좋은 시간을 가졌습니다!

  • 회고조 활동의 목적은 공부보다는 회고에 가깝지만, 저희조는 두마리 모두 목표를 세운 멋진 너구리들이 모였습니다. 정기적인 회고시간에도 피드백을 받고, 오프라인 모임에서도 피드백을 받으니, 정체되었던 저도 다시 움직일 수 있는 힘을 받았습니다.

• 동료 특강 : 피그마와 깃허브 연동하기

  • 프로젝트는 제가 따로 외부에서 구한 것이기 때문에 프로젝트에서 추가적으로 배운 것들을 정리해서 공유하고 싶었습니다. 그 중에서 피그마는 초반에 특강으로 어떻게 사용하는지, 개발자 모드를 어떻게 활용하는지 등에 대해서 다뤘기도 하고 프로젝트에서 적용을 하는 과정을 직접 하였기 때문에, 이 부분에 대해서 발표를 진행하였습니다. 발표 자료는 직접 보여주면서 하였고, 그 전에 블로그 글을 한 번 더 정리하여 미리 확인할 수 있도록 제공하였습니다. 해당 글은 제 velog에서 확인이 가능합니다! 👀

  • 제가 첫번째 동료 특강이었고, 그 다음 동료 특강을 기다리고 있습니다ㅎㅎ

📝이력서

기존에 노션으로 작성을 해왔던 이력서가 있습니다. 이력서를 마지막으로 수정한지 벌써 3개월의 시간이 흐른 상태에서 이력서 특가을 듣고 다음과 같은 숙제들이 주어졌습니다. 가장 중요한 것부터 순서대로 나열했습니다.

• 내 강점 찾기 > 강점 === 역량
• 채용공고보고 JD 분석하기
• 연대기적에서역량순으로 바꾸기

이력서를 바꿔나가면서 해당 내용도 velog에 쓸 수 있을진 모르겠지만, 최대한 공유하는 방향으로 해봐야겠습니다! ✅

🥚개인

운동

👏그동안 필라테스로 거의 생존을 위해 운동을 해왔습니다. 한 4개월정도 진행을 했던 것 같습니다. 그 동안 자세도 많이 좋아지고, 기초 체력이 붙어서 공부하는 게 훨씬 수월해진 것이 느껴졌습니다. 🍳 그러나 필테를 하니까 평소에 움직이는 것 자체를 줄이게 되었습니다..! 그래서 8월동안은 필라테스를 잠시 쉬고 평소에 스트레칭을 하는 등 좀 더 활동적으로 움직이는 것을 목표로 잡았습니다.

기록

🍳 7월 중순까지 뭔가 한게 없다고 느껴지기 시작해서 기록에 대해 되돌아봤더니 대충하거나 안 한 날이 많아졌습니다. 아침에 라도 계획에 대해 기록을 하기 시작하니, 다시 손에 잡히기 시작하면서 하루하루 기록을 이어나가고 있습니다. 👀 제 목표에 대해서도 글을 썼는데, 그 중에서 첫번째 목표인 기록하기입니다. 회고 시간에 이 목표를 다루지 않았다면, 이렇게 한 일이 많은데, 아직도 뭘 했는지 모르는 상태가 되었겠네요.. 그만큼 기록을 중요하게 생각하고 있습니다!

스터디

부트캠프 내부에서 진행하는 스터디가 아닌 외부에서 진행하는 스터디가 2가지 있습니다. 하나는 대학 동기들과 하는 사람 답게 살자이고, 다른 하나는 공부인증입니다. 둘 다 결이 비슷하여 아직까지 꾸준히 이어올 수 있었습니다.

• 🍳공부인증스터디의 경우 최근에 좀 소홀해져서 방장님께서 많이 상담을 진행했습니다. 스터디가 거의 3개월 이상이 되면 한 번 엎는게 필요한 듯한데, 이 스터디가 딱 그 고비에 있습니다. 그래서 초반부터 참여한 제 의견을 많이 드렸습니다. 또한, 저도 많이 소홀해있었던 터라 많이 반성했고 이 부분에 대해서도 직접 사과를 전달하면서 지금은 꾸준히 하려고 노력하고 있습니다.

• 👏 사람 답게 살자는 주에 최소 2시간은 자기계발 시간을 갖자는 취지에서 시작했습니다. 저를 제외하곤 대학을 졸업한 상태에서 여러 자격증을 따기 위해 공부를 열심히 하였습니다. 저도 이를 본받기 위해서 제가 직접 추진을 했고, 지금 딱 1년을 넘어가고 있습니다. 하반기, 상반기, 그리고 다시 하반기를 가면서 엑셀 파일을 만들어 기록도 하고, 시간이 가장 많이 누적된 사람에게는 그동안 쌓인 벌금을 주는 형태입니다. 작년 하반기에는 벌금을 가장 많이 내고 뒤에서 2등인가(총 7명) 했지만, 이번 상반기에는 벌금도 한 번도 안내고 477시간을 기록하여 당당히 1등을 하였습니다..!

중간 결론

이렇게 제가 한 일에 대해서 분류하고 정리를 해보았는데, 새삼 왜 사람들이 저보고 안 힘드냐고 한지 알았습니다. 저는 여태까지 해왔던 부분들에서 새로운 것 하나 정도만 추가된 활동들이어서 그렇게 힘들진 않은 것 같습니다!! 화이팅!! 이제 위의 일들을 좀 더 간략하게 하여 KPT 회고를 진행할 것입니다. 이 회고로 8월에 어떤 목표를 가지고 어떤 액션을 취할 것인지 정확하게 나오기에 그 전에 한 일들을 정리하고 자세히 느낀점을 쓰는 것이 더 중요하다고 생각했습니다. 그래서 이제부터! KPT 회고를 진행해봅시다~

KPT 회고

주의할 점 >

• 남 탓을 해서는 안됩니다: 내 문제가 아니고 남의 문제(Problem) 혹은 남의 잘한 점(Keep)을 내가 개선(Try)할 수는 없습니다.
• 구체적이고 실천적이어야 합니다: Try가 단순히 “공유를 잘하자”가 되어서는 안됩니다. 공유를 잘 할 수 있는 구체적인 방안이 Try로 도출되어야 합니다.

🐤K keeping

• 스터디: 블로그 딥다이브 공부인증 사람답게살자 / 제가 스터디를 하는 이유 중 가장 핵심적인 것은 스스로 바쁘게 만들기입니다. 그렇다고 너무 무리하지 않은 이 정도가 딱 좋은 듯 합니다. 익숙해지면 익숙해지는 대로 못 보고 넘어가던 일들이 보이게 되고, 여유 시간이 많아지면서 퀄리티는 더 증가할 거라고 믿기 때문입니다.

• 프로젝트를 통해서 엄두가 나지 않던 기능들에 대해서 스스로 많이 도전을 하게 되었습니다.

• 주 2회 꾸준히 운동을 하니 자세가 많이 좋아졌습니다. 코어 근육이 어디에 있는지 인생 살면서 처음으로 느꼈습니다.

🐥P problem

• 기록에 소홀해졌습니다. 시간이 되면 하던 걸 다 던져놓고 자기에 급급합니다.

• 평소 활동량이 줄었습니다. 너무 필라테스 하나에 의지할 순 없다고 판단하였습니다.

• 생활패턴이 망가지기 시작했습니다! 휴강일과 주말과 평일의 생활패턴이 정반대입니다.

• 스스로의 강점을 찾기가 어렵습니다.

• 커피를 너무 많이 마셔서 위가 아플 때가 종종 있습니다.

🐣T try

• 아침에 투두리스트를 작성하면서 기록할 것입니다. 밤에 기록을 하는 걸 자꾸 까먹는다면, 아침이나 그 외의 시간에 진행을 하면 되는 것입니다! 이렇게 진행을 며칠 해보니 밤에도 까먹지 않고 기록을 이어서 하게되었습니다.

• 필라테스를 잠시 쉬고 활동량을 늘리는 방향으로 진행합니다. 쉬는 시간마다 누워있지 말고 스트레칭을 하며, 주 2회에 요가 1시간씩 진행을 해볼 예정입니다.

• 생활패턴과 커피는 매우 밀접한 관계가 있다고 생각합니다. 오후 4시 이후로는 커피를 최대한 자제해 보겠습니다! 해빗트래커로 별도로 기록을 해야겠습니다.

• 제 강점은 스스로도 기록을 잘한다는 것을 들고 싶을 정도로 기록에 열정적이나, 막상 그 실태를 까보면 기록해놓은 것들이 엉망인 경우가 많다고 느꼈습니다. 기록 과도기이지만, 너무 중구난방이라서 어떻게 해야할까 싶습니다. 이력서 특강에서도 들었듯이 무언가를 잘한다라는 기준을 스스로 잡아볼까 합니다. 우선 저는 기록에 대해서 그것을 해야겠습니다!

Action

• 기록을 잘한다의 기준을 최소 5가지를 잡고, 그 기준에 맞춰서 스스로를 평가해본다. 평가 결과를 토대로 앞으로 개선해 나가면 될 일!!

• 해빗 트래커를 작성한다. 커피 요가 투두리스트 등 기본적인 습관들에 대해서 해빗 트래커를 작성 해보자!

• 일주일에 기능 하나씩 구현해보자. 이어지지 않더라도 좋고, 프로젝트에 들어갈 거라도 좋다. 개인적으로 공부하는 내용을 코드로 남기자!

결론

생각했던 것보다 action item이 3개밖에 안나와서 계속 고민을 했습니다. 각잡고 쓰자고 했지만 4시간이나 걸렸다는 거에 놀랐고, 그 4시간의 결과가 3개라니..! 그만큼 고민을 많이 했고 나름 결론이 나와서 다행이지만, 이렇게 나온 action item들을 꼭 8월 말에 다뤄야겠습니다! 아직 회고에 익숙하지 않다고 해야할까요? KPT를 작성하는데 구체적으로 다루기가 쉽지 않았습니다. 앞에서 한 일들을 정리하지 않았더라면 오히려 시간이 더 걸렸을 수도 있겠구나도 싶습니다. 이렇게 나온 action item들을 어떻게 적용하는지 과정에 대해서도 꼭 글을 쓰고 싶습니다. 미래의 나야 잘해라?~~