코코아두마리

올해 초반, 동아리 메이커스 팀의 프론트엔드 개발자로 동아리 공식 홈페이지를 제작했었다. 그때 당시 3기 모집까지 얼마 남지 않아 개발이 빠르게 진행되어야했고 이에 따라 MVP 기능만을 가진 상태의 홈페이지가 완성되었다. 이후 홈페이지 리뉴얼이 이루어지면서 개선해야하는 부분 중 한가지가 바로 디자인 시스템을 재설계, 재구축이다. 어드민 페이지도 만들 예정이기 때문에 이 부분을 포함한 설계가 필요하며 디자인 시스템을 언젠가 동아리원들도 사용할 수 있는 일종의 모듈로 제공하기 위해 홈페이지와 디자인 시스템 분리가 필요했다. 오늘은 디자인 시스템 재구축의 첫 단계는 디자인 토큰과 테마를 관리하는 방식을 구축하는 과정을 기록하며 기존의 방식과 어떤 차이가 있는지, 배운 점은 무엇인지 정리해보려고 한다. 기존의..

최근 동아리에서 팀원 평가 활동을 위한 디스코드 봇을 제작했다! node.js만으로 무언갈 개발하는 과정이 생각보다 재미있고 흥미로웠다.이번 포스팅에서는 어떻게 젝트봇을 구현했는지 간단히 기록해보고자한다. 개요1. 프로젝트 목표매주 팀별로 팀원을 칭찬할 수 있는 디스코드 봇 제작하기. 디스코드 봇을 만들게 된 계기 열심히 팀 프로젝트를 진행하고 계신 우리 3기 팀원분들의 협업심을 도모하고 추후 우수 수료자를 판별하기 위한 협업 평가가 필요하다. 동아리의 공식 커뮤니티로 디스코드를 활용하고 있어 매주 간단하게 팀원 평가를 할 수 있는 디스코드 봇을 제작하게 되었다. 지금은 칭찬 기능만을 가지고 있지만 다른 기능도 차차 개발해나가면 좋을 것 같다. 2. 사용한 주 기술 스택Node.js, discord.js..

데브코스 과제로 node.js 공식문서를 읽어보며 node.js는 뭐하는 녀석이며 어떤 특징이 있는지, 어떤 흐름으로 동작하는지 살펴보고 정리를 했었다. 강의와 더불어 Node.js를 심층있게 공부하기 위해 `Node.js 교과서`와 함께 팀원들과 스터디를 시작했는데 공부한 내용을 정리해보려 한다.  오늘은 Node.js의 핵심 개념, 구조, 동작 흐름, node.js를 왜 어디에 사용해야하는지에 대해 알아보자!  1. Node.js란? node.js는 Chrome V8 javascript 엔진으로 빌드된 자바스크립트 런타임이다.  원래 자바스크립트는 스크립트 언어로 브라우저 외에선 사용할 수 없었다. 자바스크립트를 브라우저 외부에서도 프로그래밍 언어로서 사용할 수 있도록 해준 장본인이 바로 Node.j..

11월을 시작으로 웹 풀스택 데브코스와 함께 하루 루틴을 정했었다. 그 전엔 새벽 5시에 잠이 들고 점심 때 일어나 밥 때도 항상 달랐다. 이런 엉망인 생활 습관을 고치고자 시도했었지만 작심삼일로 끝나는 경우가 태반이었다.이번엔 작정하고 고쳐보고자 플래너를 하나 구입했다. 쓸 내용도 그날마다 달라지지 않게 정해버렸다. 오늘 해야할 일 (우선순위와 실행하는데 걸릴 시간 함께 정하기, 회고는 반드시 포함하기)해야할 일을 바탕으로 오늘 시간표 작성하기 정한 시간표대로 움직이려 노력하기 ( 변동사항이 있다면 표기하기)회고 ( 오늘 데브코스에서 배운 것 요약, 새로 알게 된 것, 앞으로 해야할 것, 전체적인 회고)데브코스에서 배우는 내용은 반드시 놓치는 것 없이 따라가기 위해 요약 과정은 꼭! 거치고 싶었다.요약..

github PR을 보낼 때 항상 궁금한 부분이 있었다. 바로 요 마일스톤이라는 것이다.젝트 동아리FE 운영진을 담당하게 되면서 여러가지 새로운 팀원과 매끄러운 프로젝트 진행을 위해 가이드를 만들고 있다. 그 중 프로젝트 마일스톤 가이드를 작성해야했다. (과거 취지직 스터디가 젝트라는 동아리로서 규모를 키우고 있다) 근데 일단.. 프로젝트 마일스톤이 뭐지? 게임 할 때 종종 듣던게 마일스톤인데 어떤 단계를 클리어할 때 받았던 것이 마일스톤이었다. 이와 비슷한 개념일까? 알아보니 마일스톤은 프로젝트 계획에서 진척 상황을 나타내는 강력한 이정표라고 한다. 목표와 비슷하지만 약간은 다르다. 목표는 앞으로 달성하고자 하는 것이라면 마일스톤은 이미 달성한 것을 되돌아보기 위한 것이라고 한다. 그리고 프로젝트에..

PC의 개발자 도구를 사용하면 다양한 디바이스 크기의 브라우저를 확인할 수 있다.  잔디일기 모바일 UI 이 방법으로 구현했었다. 하지만 배포된 도메인으로 실제 모바일 기기를 이용해 확인해보면 PC로는 확인할 수 없는 버그들이 보인다. 이를 해결하기 위해 로컬에서도 모바일 기기로 개발자 모드 디버깅 환경을 구축하는 방법을 알아보았다. 참고로 안드로이드 기기이다.  1. USB 디버깅 활성화     모바일 기기의 설정이 필요하다. 안드로이드의 경우 설정의 '개발자 옵셥'에 들어가면 'USB 디버깅' 활성화 버튼을 찾을 수 있다. 만약 '개발자 옵션'이 없다면 '정보 > 소프트웨어 정보'에 들어가 '빌드 번호'를 7번 터치한다.  2. 기기 연결     그리고 폰과 컴퓨터를 연결해준다.  3. Chrome에..

내가 지금 속해 있는 취지직 스터디는 더 많은 팀이 있다.그 중 한 팀의 github 레포지토리를 구경하는데 우리 팀에 비해 PR 작성과 코드 작성이 매우 깔끔했다.  가장 먼저 눈에 띄는 것은 정해진 템플릿이 있다는 것이였다. 이모지가 있는 귀여운 PR 템플릿을 정해두니 꼭 전달되어야하는 내용이 명확히 전달되고 있는 것 같았다.또 알아보기 쉬웠다.  템플릿은 대충 이런 식으로 짜여져 있었다.어떤 작업을 했는지 리스트를 작성해 한눈에 알아볼 수 있게 한다.그 뒤에 자세한 설명은 쓰는데 필요하다면 가능한 사진, 코드와 함께 설명한다.참고한 자료가 있다면 공유한다.PR은 팀원의 리뷰가 있어야 머지할 수 있도록 한다.팀원의 의견이 필요하거나 꼭 봐줬으면 하는 부분은 요구사항으로 같이 적어준다.이 PR 후속 작..

로그아웃을 시키면 소개페이지로 이동하는데 곧바로 Header의 로그인 버튼을 누르니 모달의 상태가 제대로 업데이트되지 않은 모습으로 뜨면서 에러가 발생했다. 몇초있다가 누르거나 Header의 로그인 버튼이 아니라 페이지에 있는 로그인 버튼을 누르면 정상적인 로그인 모달이 뜬다.  에러를 보면 Header 컴포넌트가 렌더링하는 동안 Modal 컴포넌트를 업데이트 할 수 없으니 Header의 올바르지 않은setState() 수정하라는 것이였다.   const Header = () => { const memberId = useUser(); const { loginModal } = useModal(); const navigate = useNavigate(); return (....Header에는 se..

이번 달부터 변경된 잔디일기 디자인 페이지를 구현하면서 몇 가지 바뀐 것들이 있다.  그중에 추가된 것이 토스트 팝업이다. 기존 일기 상세 페이지에서는 사용자에게 메시지 형식으로 정보를 전달하는 방법으로 모달을 이용했었다.  여기서 일기가 삭제되었다는 모달(마지막 사진)은 토스트 알림으로 대체하여 구현하게 되었다. 일단 모달이나 토스트나 일기가 정상적으로 삭제되었을 때, 보이게 된다. 기존 모달의 경우에는 일기 delete 요청 성공 →  모달 띄우기  →  닫기 버튼 → 메인 페이지로 이동 순으로 진행되었다. 하지만 이번 토스트를 이용한 구현에서는  delete 성공 → 메인 페이지 이동 & 토스트 띄우기 순으로 로직이 단순해졌다. 어느 페이지가 떴든지 간에 토스트 알림이 하단에 나타났다 사라지고 사용..

프로그래밍을 초반에 배울 때 객체를 이해하는 것도 추상적이여서 어려웠었지만 this를 이해하는 것도 어려웠다. 이번 기회에 자바스크립트에서 this를 언제 어떤 식으로 사용하는지 알았다.  메서드는 무얼 참조하고, 변경할지 알기 위해 자신이 속한 객체를 알 필요가 있다. 이럴 때 this가 필요하다.즉,  this를 통해서 자신이 속한 객체나 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.  this 바인딩이란 개념을 알아야 잘 이해할 수 있다. this 바인딩은 this라는 식별자와 실제 this가 가리키는 값을 연결하는 과정이다. 자바나 C++ 과 같은 클래스 기반 언어에서는 this는 언제나 클래스가 생성하는 인스턴스를 가리키지만, 자바스크립트에서는 함수 호출 방식에 따라 언제나 인스..