프로젝트
15 posts
230927(수) 베스트라빈스 1차 회고

🍨 베스트라빈스 프로젝트 약 10일동안 기획부터 디자인, 개발까지 진행한 베스트라빈스 프로젝트. 동료에게 추천받아 알게된 포텐데이를 통해 지원했고 좋은 기획자분과 디자이너분을 만나서 열심히 달려볼 수 있었다. 사실 매일매일 회고를 작성하려했는데, 10일이라는 짧은 시간동안 하나의 서비스를 MVP까지 완성하는 게 쉬운 일이 아니었다. 해서 우리 팀이 10일 동안 어떤 과정을 거쳐서 프로젝트를 진행했는지, 그리고 나는 어떤 역할을 맡아서 어떤 공부를 했는지에 대해 회고해보려고 한다.(1차 회고인 이유는 이후에도 몇몇 기능을 더하고 리팩토링을 진행할 예정이기 때문이다!) 베스트 라빈스: 배포 링크 1. 아이디어 회의 및 팀 목표 설정 각자 어떤 서비스를 하고 싶은지 생각해오기로 했다. 여러가지 아이디어들 중 우선 10일 안에 MVP 기획 및 디자인, 개발이 가능하고 추후 확장이 가능한 아이템을 고르기로 했고 그 결과 를 개발하기로 했다. 구체적인 기획과 디자인, 추천 방법은 정해지지 않…

September 27, 2023
프로젝트
Jayden-Design-System(3)

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Jayden-Design-System(feat. Challengers) 프론트엔드 취준생의 뭣도 모르고 시작해보는 디자인 시스템 프로젝트. 시작하게 된 이유? 본론부터 말하자면 앱을 웹으로 리브랜딩해보는 프로젝트를 진행 중 멘토님께서 디자인 시스템에 대한 이야기를 해주신 것에서 시작되었다. 백엔드 없이 api를 어떻게라도 짜는 게 쉽지 않았고, 이에 좀더 프론트엔드 개발에 포커싱을 둘 수 있는 디자인 시스템을 시작으로 챌린져스 모킹 웹까지 진행하는 프로젝트를 시작하게 되었다. 이 프로젝트의 1차적인 최종 목표는 나만의 디자인 시스템을 구현하고 npm 라이버르러로 배포까지 하는 것!!! 목표 설정 primary : 나만의 디자인 시스템 구축 및 배포 secondary : 디자인 시스템 및 mock data를 사용하여 challengers 웹 서비스 구현 무작정 컴포넌트 개발해보기 🔨 프로젝…

November 13, 2022
프로젝트
Jayden-Design-System(2)

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Jayden-Design-System(feat. Challengers) 프론트엔드 취준생의 뭣도 모르고 시작해보는 디자인 시스템 프로젝트. 시작하게 된 이유? 본론부터 말하자면 앱을 웹으로 리브랜딩해보는 프로젝트를 진행 중 멘토님께서 디자인 시스템에 대한 이야기를 해주신 것에서 시작되었다. 백엔드 없이 api를 어떻게라도 짜는 게 쉽지 않았고, 이에 좀더 프론트엔드 개발에 포커싱을 둘 수 있는 디자인 시스템을 시작으로 챌린져스 모킹 웹까지 진행하는 프로젝트를 시작하게 되었다. 이 프로젝트의 1차적인 최종 목표는 나만의 디자인 시스템을 구현하고 npm 라이버르러로 배포까지 하는 것!!! 목표 설정 primary : 나만의 디자인 시스템 구축 및 배포 secondary : 디자인 시스템 및 mock data를 사용하여 challengers 웹 서비스 구현 그래서 무엇부터 해야할까? 이제 디자…

November 11, 2022
프로젝트
Jayden-Design-System(1)

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Jayden-Design-System(feat. Challengers) 프론트엔드 취준생의 뭣도 모르고 시작해보는 디자인 시스템 프로젝트. 시작하게 된 이유? 본론부터 말하자면 앱을 웹으로 리브랜딩해보는 프로젝트를 진행 중 멘토님께서 디자인 시스템에 대한 이야기를 해주신 것에서 시작되었다. 백엔드 없이 api를 어떻게라도 짜는 게 쉽지 않았고, 이에 좀더 프론트엔드 개발에 포커싱을 둘 수 있는 디자인 시스템을 시작으로 챌린져스 모킹 웹까지 진행하는 프로젝트를 시작하게 되었다. 이 프로젝트의 1차적인 최종 목표는 나만의 디자인 시스템을 구현하고 npm 라이버르러로 배포까지 하는 것!!! 목표 설정 primary : 나만의 디자인 시스템 구축 및 배포 secondary : 디자인 시스템 및 mock data를 사용하여 challengers 웹 서비스 구현 디자인 시스템이란? 재사용 가능한 U…

November 09, 2022
프로젝트
teo-sprint12-Day 4~final

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : 테오의 스프린트 12기 프론트엔드 개발자로 구글링하다보면 누구나 한번쯤은 들어가보았을 테오의 블로그 이번 프로젝트는 테오가 운영하는 에 참여한 기록이다. 짧다면 짧은 5일의 기간 동안 처음 보는 사람들과 팀을 이뤄, 을 배울 수 있는 좋은 기회라고 생각한다! 😆 개발에 앞서 테오가 4일차에 보내주신 메일에 너무 좋은 내용들이 많아서 기록해둔다. 웹 서비스에 완성은 없다. 언제나 미완성인 상태로 업데이트를 할 수 있는 형태를 취하게 된다. 티저와 데모 사이트를 먼저 오픈하고 그럴듯하게 돌아가는 Tour(Demo)를 만들어, 실제 서비스를 릴리즈하고 고도화하는 과정을 겪게 된다. 자동차를 만든다고 할 때, 부품 하나하나를 추가하면서 아직 굴러가지 못하는 상태가 아니라 먼저 굴러가는 보드를 만들고 자전거가 되고 자동차가 되듯!!!!! 시작은 허술하고 미비할 수 있지만, 일단 그 기능이 돌아가게…

October 18, 2022
프로젝트
teo-sprint12-Day 3

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : 테오의 스프린트 12기 프론트엔드 개발자로 구글링하다보면 누구나 한번쯤은 들어가보았을 테오의 블로그 이번 프로젝트는 테오가 운영하는 에 참여한 기록이다. 짧다면 짧은 5일의 기간 동안 처음 보는 사람들과 팀을 이뤄, 을 배울 수 있는 좋은 기회라고 생각한다! 😆 아이스 브레이킹 시작에 앞서서, 테오가 준비해주신 질문으로 간단한 아이스 브레이킹을 진행했다.(정말 사소해보이지만, 이런 작은 장치들이 팀원 간의 화합을 도와주는 것 같다.) 이라는 주제로 각자 발표를 진행했다.ㅋㅋㅋㅋㅋ 팀원들이 생각하는 다양한 개발자의 모습도 재미있었고 서로의 그림을 꾸며주고 더해주는 게 웃겼다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 나의 그림은 돌에서 금을 채취하듯이, 개발자는 코드를 통해 금(좋은 서비스)을 만든다는 컨셉이다. 팀원들의 낙서로 금덩이가 꿀벌처럼 되어버렸지만ㅋㅋㅋㅋㅋ 너무 유쾌하고 재미있는 시간이었다. 😉 실…

October 14, 2022
프로젝트
teo-sprint12-Day 2

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : 테오의 스프린트 12기 프론트엔드 개발자로 구글링하다보면 누구나 한번쯤은 들어가보았을 테오의 블로그 이번 프로젝트는 테오가 운영하는 에 참여한 기록이다. 짧다면 짧은 5일의 기간 동안 처음 보는 사람들과 팀을 이뤄, 을 배울 수 있는 좋은 기회라고 생각한다! 😆 지도 그리기 좋은 협업이란 무엇일까? 협업을 위해 서로의 생각을 맞추고 합의하기 위한 방법으로 함께 지도 그리기를 진행했다. 각자 생각 써보기(타이머 사용) 중요한 점들 마구마구 하이라이트 적은 내용을 바탕으로 돌아가면서 발표한다. 모두의 생각을 듣고 나서 생각들을 시각화한다. 서로의 생각에 반박 혹은 너무 빠르게 결정/정리하지 않고 더 살을 붙여나가는 작업을 한다. 위의 방법을 토대로 크게 , 에 대해 이야기를 나누었다. 이 내용들을 토대로 공통된 키워드만 쏙쏙 뽑아보았다! 😶‍🌫️ 화면 별로 구성해보기 이제 정말 대략적으로 UI,…

October 13, 2022
프로젝트
teo-sprint12-Day 1

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : 테오의 스프린트 12기 프론트엔드 개발자로 구글링하다보면 누구나 한번쯤은 들어가보았을 테오의 블로그 이번 프로젝트는 테오가 운영하는 에 참여한 기록이다. 짧다면 짧은 5일의 기간 동안 처음 보는 사람들과 팀을 이뤄, 을 배울 수 있는 좋은 기회라고 생각한다! 😆 모임 전 안내 메일 위와 같이 협업을 위한 그라운드 룰과 간단한 일정을 안내받고 시작한다! 😆 첫 모임 약 40~50명의 인원이 모여, 각자 작성한 아이디어를 바탕으로 투표를 진행한다! 개인 프로젝트를 할 때 피그마는 종종 사용했지만, 피그젬을 통해 함께 아이디어를 기획하고 협업하는 과정이 너무 재미있었다. 최종적으로 아이디어를 6개 선별하고 각자 투표를 통해 어떤 아이디어를 구현하고 서비스해보고 싶은지 결정하여 최종팀을 결성하게 된다. 아이스 브레이킹 타임!!! 서로를 소개하고 인사하며 알아가는 시간을 가질 수 있…

October 12, 2022
프로젝트
Yestoday-3

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Yestoday(account book) 기획부터 시작해보는 프로젝트!!! 이번 프로젝트는 가계부 웹앱을 만들기로 결정했다. 다만, 이미 은행 어플을 통해 어느정도 가계부 역할을 하는 상세한 기능들이 제공되기에 새로운 기획을 생각해보았다. 간략한 컨셉은 다음과 같다. 유저는 오늘 을 설정한다. 소비 시 해당 금액과 내용을 입력한다. 메인 화면에는 와 에 대한 정보가 나온다. 를 클릭하면 최근 1년 간의 데이터를 캘린더 뷰로 볼 수 있다. 처음 피그마로 간단하게 디자인을 만들어보았다. 🦾 프로젝트 목표 MVC 패턴 및 옵저버 패턴 라우터 구현 꼭꼭꼭 왜 이렇게 코드를 작성해야하고 어떻게 프로젝트를 구성할지 미리 생각하고 작성하도록 하자 가능하면 다양한 개발 환경을 시도해보자 욕심 더 부려서 Jest를 이용하여 테스트 코드까지 작성해보기 욕심 부릴 수 있는 프로젝트를 만들어보자 🤑 메인 페이…

October 10, 2022
프로젝트
Yestoday-2

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Yestoday(account book) 기획부터 시작해보는 프로젝트!!! 이번 프로젝트는 가계부 웹앱을 만들기로 결정했다. 다만, 이미 은행 어플을 통해 어느정도 가계부 역할을 하는 상세한 기능들이 제공되기에 새로운 기획을 생각해보았다. 간략한 컨셉은 다음과 같다. 유저는 오늘 을 설정한다. 소비 시 해당 금액과 내용을 입력한다. 메인 화면에는 와 에 대한 정보가 나온다. 를 클릭하면 최근 1년 간의 데이터를 캘린더 뷰로 볼 수 있다. 처음 피그마로 간단하게 디자인을 만들어보았다. 🦾 프로젝트 목표 MVC 패턴 및 옵저버 패턴 라우터 구현 꼭꼭꼭 왜 이렇게 코드를 작성해야하고 어떻게 프로젝트를 구성할지 미리 생각하고 작성하도록 하자 가능하면 다양한 개발 환경을 시도해보자 욕심 더 부려서 Jest를 이용하여 테스트 코드까지 작성해보기 욕심 부릴 수 있는 프로젝트를 만들어보자 😂 MV*패턴…

October 08, 2022
프로젝트
Yestoday-1

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Yestoday(account book) 기획부터 시작해보는 프로젝트!!! 이번 프로젝트는 가계부 웹앱을 만들기로 결정했다. 다만, 이미 은행 어플을 통해 어느정도 가계부 역할을 하는 상세한 기능들이 제공되기에 새로운 기획을 생각해보았다. 간략한 컨셉은 다음과 같다. 유저는 오늘 을 설정한다. 소비 시 해당 금액과 내용을 입력한다. 메인 화면에는 와 에 대한 정보가 나온다. 를 클릭하면 최근 1년 간의 데이터를 캘린더 뷰로 볼 수 있다. 처음 피그마로 간단하게 디자인을 만들어보았다. 🦾 프로젝트 목표 MVC 패턴 및 옵저버 패턴 라우터 구현 꼭꼭꼭 왜 이렇게 코드를 작성해야하고 어떻게 프로젝트를 구성할지 미리 생각하고 작성하도록 하자 가능하면 다양한 개발 환경을 시도해보자 욕심 더 부려서 Jest를 이용하여 테스트 코드까지 작성해보기 욕심 부릴 수 있는 프로젝트를 만들어보자 🤩 개발 환경…

October 01, 2022
프로젝트
GetShitDone-4(final)

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Get Shit Done 나만의 ToDo리스트를 만들기 위해 시작한 프로젝트 은 라는 의미로 평상시 스스로 다짐하는 문장인데, 투두리스트와 어울린다 생각하여 프로젝트명으로 정하게 되었다. 이번 프로젝트의 가장 큰 목적과 의의는 웹팩 및 바벨을 통해 각 모듈을 로 구성하여 동작하게 하는 것이다!!! 🤮 drag & drop 드디어 드래그 앤 드랍이다. 솔직히 프로젝트 처음 시작 때, 웹 컴포넌트에 대해 이해하려고 노력할 때만 해도 ‘드래그 앤 드랍은 구현하기 힘들겠다’ 생각했다. 처음엔 아예 API없이 구현을 해보려했을나, 뭔가 그 느낌은 좀 알겠는데… 계속 시도해보다가 깔끔하게 API를 이용하여 구현해보자 마음 먹었다. 근데 웬걸, API를 통해 구현하는 것도 쉬운 일이 아니었나…! 이 모든 어려움의 원흉은 Shadow DOM 자식이었ㄷ…(물론 컴포넌트를 얼마나 잘 나누고 역할을 부여하는 …

September 29, 2022
프로젝트
GetShitDone-3

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Get Shit Done 나만의 ToDo리스트를 만들기 위해 시작한 프로젝트 은 라는 의미로 평상시 스스로 다짐하는 문장인데, 투두리스트와 어울린다 생각하여 프로젝트명으로 정하게 되었다. 이번 프로젝트의 가장 큰 목적과 의의는 웹팩 및 바벨을 통해 각 모듈을 로 구성하여 동작하게 하는 것이다!!! 🤪 컴포넌트 로직 먼저 들어가기에 앞서 컴포넌트를 나눈 부분을 다시 보자면, 크게 아래와 같이 나누었다. todoApp.js: 전체 앱을 나타낸다. todoContainer.js: 앱 내에 메모장을 나타낸다.(여러개의 메모장을 생성하게 할 예정) todoToolbar.js: 메모에 대한 조작을 하는 툴바 부분 todoNote.js: 툴바 조작에 따라 메모를 입력할 수 있는 input 부분 todoList.js: 메모 전체를 감싸고 있는 부분 todoItem.js: 메모 컴포넌트 🧭 todoNote…

September 26, 2022
프로젝트
GetShitDone-2

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Get Shit Done 나만의 ToDo리스트를 만들기 위해 시작한 프로젝트 은 라는 의미로 평상시 스스로 다짐하는 문장인데, 투두리스트와 어울린다 생각하여 프로젝트명으로 정하게 되었다. 이번 프로젝트의 가장 큰 목적과 의의는 웹팩 및 바벨을 통해 각 모듈을 로 구성하여 동작하게 하는 것이다!!! 🤪 컴포넌트 로직 먼저 들어가기에 앞서 컴포넌트를 나눈 부분을 다시 보자면, 크게 아래와 같이 나누었다. todoApp.js: 전체 앱을 나타낸다. todoContainer.js: 앱 내에 메모장을 나타낸다.(여러개의 메모장을 생성하게 할 예정) todoToolbar.js: 메모에 대한 조작을 하는 툴바 부분 todoNote.js: 툴바 조작에 따라 메모를 입력할 수 있는 input 부분 todoList.js: 메모 전체를 감싸고 있는 부분 todoItem.js: 메모 컴포넌트 지금 다시 생각해보…

September 24, 2022
프로젝트
GetShitDone-1

🔨 프로젝트 일지 정보 전달보단 프로젝트를 진행하며 겪은 점들, 느낀 점들을 기록한 일지 : Get Shit Done 나만의 ToDo리스트를 만들기 위해 시작한 프로젝트 은 라는 의미로 평상시 스스로 다짐하는 문장인데, 투두리스트와 어울린다 생각하여 프로젝트명으로 정하게 되었다. 이번 프로젝트의 가장 큰 목적과 의의는 웹팩 및 바벨을 통해 각 모듈을 로 구성하여 동작하게 하는 것이다!!! 😇 컴포넌트 설계 하… 개인적으로 이 단계가 진짜 막막하고 어려웠다. 컴포넌트를 설계하는 방법은 정말 다양한데, 일단 기본적으로 눈에 보이는 UI를 기준으로 나눠보자 마음먹었다. 위와 같이 UI를 생각하고 header, main 그 내부 항목들을 쪼갤 수 있는대로 컴포넌트를 나눠보았다. 결과적으로 아래와 같이 컴포넌트를 나눌 수 있었다. todoApp.js: 전체 앱을 나타낸다. todoContainer.js: 앱 내에 메모장을 나타낸다.(여러개의 메모장을 생성하게 할 예정) todoToolb…

September 23, 2022
프로젝트