[인프런 워밍업 클럽 FE] 인프런 워밍업 클럽 후기

처음에 들어갔을 때는, 굉장히 넓은 회사 규모에 놀랐고, 이 시간까지 남아계신 인프런 관계자 분들을 보고 놀랐다. 저번에도 버그가 저녁 11시쯤에 고쳐지는 걸 보고, 언제 퇴근하시나.. 싶었는데,, 이게 직장인이구나..! 싶었다. 🥲 1. 🧊 아이스 브레이킹아이스 브레이킹 시간에는 프론트 강사님 + 프론트 러너 4분과 사부작사부작 대화를 나눌 수 있었다. 저녁 메뉴였던 핏짜 🍕도 굉장히 맛있었고, 소수 인원이라서 더욱 편했었다. 특히 현업에 계신 강사님과 대화할 수 있는 기회는 너무나도 좋은 기회였기 때문에, 그동안 혼자서 끙끙 앓았던 질문을 와다다 했던 것 같다. 그러다가 어쩌다보니 강사님께 포트폴리오도 보여드리고, 피드백도 받을 수 있었다.🙇‍♂ 보여드릴 때 너무 긴장되어서 손이 벌벌 떨렸지만, 진짜 오길 너무 잘했다!! 라는 생각이 계속 들었다. 2. 🧐 코치 Q&AQ&A시간에서는 코치님들이 정말 많이 고민하셔서 답변을 준비하셨구나! 라는 걸 느낄 수 있었다.가장 기억에 남는 건, 어떻게든 버텨라! 라는 거다. 여전히 나에게는 부족한 게 많고, 할 게 무진장 많이 남았지만, 어떻게든 계속 해봐야겠다 🔥 3. 🎉 우수러너 시상감사하게도 프론트 우수러너로 선정되었다. 상품으로는 멘토링권 + 인프콘 초대권 + 말랑 큐티 인프런 굿즈이다. + 완주러너 상품인 50000잎까지! 무엇보다 제일 원했던 멘토링권을 얻게 되서 너무 행복했던 것 같다. 빨리 코치님께 질문할 것들을 정리해야겠다. 사진은 인프런 굿즈이다. 에코백 + 물컵 + 우산 + 뱃지가 있는데, 정말 너무........ 귀엽다! 입꼬리가 특히 귀엽다.4. 💬 자유 네트워킹관심주제별로 조를 구성했는데, 우리 테이블에는 인프런에 근무중이신 프론트 개발자분께서 와주셨다..!사실 처음에 프론트 개발자분이 오셨으면 좋겠다.... 정말 좋겠다..... 하고 마음속으로 빌고 있었는데, 정말로 오셔서 너무 감격스러웠다! 🙇‍♂ 긴장돼서 뚝딱뚝딱하면서도 궁금했던 질문을 다 물어봤었다. 쉽게 오지 않는 기회라는 걸 알기 때문에 너무 행복했던 시간이었다. 5. 끝같은 취업준비생분들과 애기할 수 있고, 무엇보다 현업에 계신 분들과 직접 얘기할 수 있다는 게 너무 뜻깊은 시간이었던 것 같다. 여전히 부족한 게 많구나 라는 생각도 들었지만, 집에 돌아가는 길이 너무 개운하고 행복했었다. 다들 너무 고생하셨습니다! 🙇‍♂

[인프런 워밍업 클럽 0기] 3주차 발자국 👣

이번 발자국은 마지막 과제인 노트 앱 구현 과정을 작성해 볼 예정이다. 목차는 다음과 같다.1. 기능 목록 작성2. 폴더 구조3. 구현4. 결과물5. 고민했던 부분6. 후기 ✅️ 1. 기능 목록 작성🧩 특정 조건에 대한 내용을 표시한다. 1. 노트를 추가/수정할 수 있다.제목 + 내용 + 태그 + 우선순위 + 색상 을 입력받는다.내용의 경우, WYSIWYG 에디터 사용한다.이미지 사이즈를 조절할 수 있다.태그의 경우, 존재하는 태그 중에서 선택 가능하다.태그 편집 버튼을 통해 태그를 추가/삭제할 수 있다.우선순위의 경우, low/high 를 선택할 수 있다.색상의 경우, white/sky를 선택할 수 있다. 2. 노트 리스트를 볼 수 있다. (그리드 뷰)각 노트마다 설정한 색상으로 보여준다. (white/sky) 🧩 메인페이지우선순위를 high/low 순으로 정렬가능하다.날짜를 최신순/오랜된 순으로 정렬가능하다.pin 여부에 따라 리스트 상단, 하단에 나누어 보여준다. 🧩 archive 페이지archive 상태의 노트들만 필터링하여 보여준다. 🧩 trash 페이지trash 상태의 노트들만 필터링하여 보여준다. 3. 노트 상태를 변경할 수 있다.pin 기능을 통해 리스트 상단에 위치시킬 수 있다.🧩 메인페이지 노트를 수정할 수 있다. (수정 아이콘 버튼)🧩 메인페이지 / 태그 관련 페이지 에서 가능하다.🧩 archive 페이지, trash 페이지 에서 불가능하다. 노트를 archive 상태로 변경할 수 있다. (archive 아이콘 버튼)🧩 메인페이지 / 태그 관련 페이지 에서 가능하다.🧩 archive 페이지 에서 변경할 경우엔, archive 상태가 제거된다.🧩 trash 페이지 에서 불가능하다. 노트를 trash 상태로 변경할 수 있다. (trash 아이콘 버튼)🧩 메인페이지 / 태그 관련 페이지 / archive 페이지 에서 가능하다.🧩 trash 페이지 에서 변경할 경우엔, trash 상태가 제거된다. 노트를 제거할 수 있다.🧩 trash 페이지 에서 가능하다. 4. 태그를 추가/삭제할 수 있다.이미 존재하는 태그의 경우 추가할 수 없다. 🎨 기능을 실제 이미지로 살펴보겠다.1. 노트를 추가/수정할 수 있다. 2~3. 노트 리스트를 볼 수 있다. (그리드 뷰) + 노트 상태를 변경할 수 있다. 4. 태그를 추가/삭제할 수 있다.✅ 2. 폴더 구조📁 src |--📄 types.ts |--📄 index.css # 공통 css 설정 (폰트, 색상 변수) | |--📁 components # 공통 컴포넌트 | |--📁 Button | | |--📁 IconButton | | | |--📄 IconButton.tsx # 이후부터 내부 파일은 생략한다. | | | |--📄 IconButton.module.css | | | | | ㄴ--📁 TagButton | | ㄴ--📁 TextButton | | | ㄴ--📁 Card | | |--📁 NoteCard | | | ㄴ--📁 Header | | | ㄴ--📁 Modal | |--📁 NoteEditModal | |--📁 TagEditModal | |--📄 Modal.css # 모달의 경우, 같은 디자인을 적용시켰다. | |--📁 constants | ㄴ--📄 color.ts ## 색상 헥사값 | |--📁 hooks | |--📁 pages # 페이지. | ㄴ--📁 Note ## 노트 페이지 | |--📄 index.tsx | |--📁 redux ## 리덕스 | ㄴ--📁 slice | | |--📄 NoteSlice.ts # 노트 관련 | | |--📄 TagSlice.ts # 태그 관련 | | | ㄴ--📁 stoe | |--📄 store.ts |이번에는 색상 헥사값을 constants에 따로 빼서, 코드상에서 직접 헥사값을 가져오는 경우를 최소화했다.또한, 노트 추가/삭제의 경우 모달창을 각각 만들지 않고, 하나의 NoteEditModal상에서 조건문으로 처리해, 하나의 컴포넌트만 사용하도록 했다. 또한 모달창의 디자인은 통일성을 위해 하나의 css를 같이 적용시켜줬다. 사실 모달 컴포넌트는 디자인이 적용된 1개만 만들고, 내부 내용을 props로 넣는 방식으로 하고 싶었는데, 시간상 2개 컴포넌트를 따로 만들어버려 아쉽다. ✅ 3. 구현제일 먼저 막혔던 부분은 어디까지 redux를 사용해야하는가 였다. 해당부분은 4. 고민했던 부분에 상세히 적어놓았다. 까다로웠던 부분은 조건처리다. 각 페이지마다 노트 수정/archive/trash + pin 기능 존재 여부가 다르고, trash 페이지에서는 완전히 삭제하는 것도 구현해줘야 했다. 이는 과제 영상을 보면서 1. 기능 목록을 작성 했고, 이를 보고 조건문 처리를 해줬다. 노트의 타입은 다음과 같이 설정했다.export interface Note { // 내용 id: number; title: string; content: string; createdDate: Date; // 우선순위, pin 여부 isHighPriority: boolean; isPinned: boolean; // 태그 selectedTags: string[]; // 색상 color: 'WHITE' | 'SKY'; // 상태 (활성, 보관, 삭제) state: 'ACTIVE' | 'ARCHIVED' | 'DELETED'; } ✅ 4. 결과물 ✅ 5. 고민했던 부분 어디까지 redux를 사용해야하는가? 이전까지는 유저 정보 저장이나, 화이트/다크모트같은 테마를 저장하기 위해 redux를 사용했다. 그런데 이번 과제에서 note앱에서는 redux로 무엇을 관리해야 하는지 잘 모르겠었다.실제 어플리케이션을 생각했을때, 노트 생성/삭제, archive/trash로 옮기는 것 모두 api를 사용해야 한다고 생각했기 때문이다.그래서 처음에는 강사님이 알려주는 pocket base로 api를 다 구현하는 것으로 생각했다. 그리고 redux로 관리하는 건우선순위/날짜 필터링 조건(최신순/오래된 순 중에 무엇을 선택하였는지) 밖에 생각나지 않았다.나중에서야 아예 모든 걸 redux로 관리해야 하는 과제구나! 를 깨달았다. 폴더 구조를 어떻게 하는가? 사실 강사님이 제공해주신 폴더에서는 feature 로 기능별로 폴더가 분리되어있었다. 사용해보고 싶었으나, 시간 안에 제대로 이해하고 적용하지 못할 것 같아, 평소 사용하던 방식으로 했다. 다음에는 꼭 해당 방식을 사용해보고 싶다! 6. 후기이번 과제는 api 없이 redux 만으로 모든 걸 구현해야 했기에, 가장 재밌었던 것 같다. 사실 맨 처음에 react를 공부할때, 어렵고 복잡한 redux는 조금 무서운 존재였다. 그래서 그 후에는 사용법이 간단한 recoil이나 jotai를 보면서, redux는 쳐다보지도 말아야지..! 라고 생각했었는데, 이번 기회에 다시 공부해보니, 사용법만 익힌다면 크게 어렵지 않구나를 느낄 수 있었다. 어렸을때 무서웠던 귀신이 크고 나서는 조금 덜 무서워진 느낌이다.그런데 현업에서는 어떤 걸 쓸지 궁금해졌다. 새로운 걸 적용하기엔 품이 많이 들 것 같은데, redux를 계속 사용할까? 현업에 계신 분들은 라이브러리의 장단점을 모두 비교한 뒤에 결정할 텐데, 프로젝트마다 사용하는게 다를까? 정답이 없는 건지 궁금하다. 또한 리팩토링할게 많이 남은 것 같아 아쉽다. import 순서도 뒤죽박죽이고, 함수/변수 이름또한 만족스럽지 않았다. 코드 작성도 통일성 없이 작성한 것 같다. 시간에 쫓겨 동작을 하는가? 에만 초점을 둔 것 같아, 조금 아쉽다. 시간과 코드리뷰가 얼마나 중요한지 다시 한번 깨달았다.

[인프런 워밍업 클럽 0기] FE 과제 제출

1번 과제 (Day2) (음식 메뉴 앱)깃허브 저장소 주소: https://github.com/pipisebastian/inflearn_project_FE/tree/main/Day2.food-menu-app2번 과제 (Day3) (가위바위보 앱)깃허브 저장소 주소: https://github.com/pipisebastian/inflearn_project_FE/tree/main/Day3.game-app3번 과제 (Day4) (퀴즈 앱)깃허브 저장소 주소: https://github.com/pipisebastian/inflearn_project_FE/tree/main/Day4.quiz-app 4번 과제 (Day9) (예산 계산기 앱)깃허브 저장소 주소: https://github.com/pipisebastian/inflearn_project_FE/tree/main/Day9.calculator-app5번 과제 (Day11) (디즈니 플러스 앱)깃허브 저장소 주소: https://github.com/pipisebastian/inflearn_project_FE/tree/main/Day11.disney-plus-app6번 과제 (Day12) (next js를 이용한 퀴즈 앱)깃허브 저장소 주소: https://github.com/pipisebastian/inflearn_project_FE/tree/main/Day12.quiz-app7번 과제 (Day13) (노트 앱)깃허브 저장소 주소: https://github.com/pipisebastian/inflearn_project_FE/tree/main/Day13.note-app

[인프런 워밍업 클럽 0기] 2주차 발자국 👣

이번 발자국은 과제 진행 과정을 작성해 볼 예정이다. 목차는 다음과 같다.1. 기능 목록 작성2. 공통 컴포넌트 구현3. 결과물4. 고민했던 부분 ✅️ 1. 기능 목록 작성1. 항목 추가/수정할 수 있다.지출 항목 + 비용을 입력받는다 (조건을 만족할 때까지)지출 항목은 문자열이여야 한다.비용은 숫자여야 한다.지출 항목 + 비용 모두 입력되어야 한다. (공백 제외) 조건을 만족할 경우, 버튼이 enable 된다. 추가/수정을 완료했을 경우, toast 메시지를 띄워준다. 2. 항목 리스트를 보여준다. (테이블 형식)각 항목(row) 마다 수정/삭제 버튼이 존재한다.수정 버튼을 누른 경우[ 기능목록 1. 항목 추가/수정할 수 있다 ] 로 이동한다.삭제 버튼을 누른 경우항목이 삭제되며, toast 메시지를 띄워준다. 총 지출 금액을 보여준다.항목 리스트가 없을 경우, '존재하지 않습니다' 를 보여준다. 3. 모든 항목을 삭제할 수 있다.목록 지우기 버튼을 누른 경우모든 항목이 삭제되며, toast 메시지를 띄워준다. ✅ 2. 공통 컴포넌트 구현MUI와 같은 UI 라이브러리를 쓰지 않고, tailwind css로만 구현할 것이기에, 필요한 컴포넌트는 직접 만들어야한다. 먼저 공통된 디자인을 위해 rounded만을 사용하고자 했다. ( 컴포넌트마다 rounded를 다 다르게 사용하지 않는다)색상은 emerald + slate 만을 최대한 사용했다. 그렇게 해서 필요한 컴포넌트는 다음과 같다. Outlined Input시간을 투자한 부분이다. 기본 html의 input은 굉장히 단순하기에 커스텀이 필요했다.focus 했을 때, label 을 input 박스 위로 가게 하고, 부드러운 애니메이션을 넣고자 했다.Contained Button + Text Button배경을 채운 Contained Button오직 text 만 존재하는 Text ButtonTable기본 table에 css만 추가했다.Toast 메시지 success : 초록색 체크 아이콘추가, 수정, 삭제가 성공적으로 완료되었음을 표시한다. warn : 노란색 경고 아이콘입력값의 유효성검사가 일치하지 않을때 표시한다. ✅ 3. 결과물 ✅ 4. 고민했던 부분 지출 항목이 문자여야하는데, 이를 어떻게 판별하는가? 이다.애매한 부분이 지출 항목이 "맥북 pro 16" 처럼 오직 문자 type으로 이뤄지지 않고, 여러 type이 같이 존재할 수 있다. 그래서 이걸 어떻게 예외처리 해줄지 고민했었는데, 일단은 지출 항목을 절대 숫자로만 이뤄지지는 않을 것 같아서, isNaN()만을 판별했다. 이 부분은 고민이 더 필요할 것 같다.. toast 메시지의 색상을 어떻게 할 것인가? 이다.상품을 "삭제" 했을 경우, toast 메시지의 아이콘 색상을 고민했었다.빨간색 -> 부정적 의미 -> 삭제와 연관된다! -> 그러나 error 와도 연관됨 -> 사용자 입장에서 "에러가 났다..!" 로 혼동할 수 있음.초록색 -> 삭제가 완료되었다! 에 의미를 둠-> 그러나, 추가, 수정, 삭제도 어쨌든 완료이기에, 다른 기능임에도 아이콘 색상이 같아서 구별이 어렵다는 문제가 존재함.고민 끝에 error와 연관되는 빨간색보다는 초록색으로 가되, "추가", "수정", "삭제" text 를 크고 두껍게 처리해주는 것으로 합의를 보았다!후기UI 라이브러리만 사용하다가, tailwind css로 직접 컴포넌트를 만드니까, 생각보다 시간이 오래 걸렸다. 중간에 계속 애니메이션도 적용된 라이브러리를 사용하고 싶었지만, 이를 css로(비록 tailwind css지만) 직접 완성시켰을때 상당히 뿌듯했다!또한, 기능목록을 제대로 작성한건지 모르겠다. 조금 더 깔끔하게 작성하고 싶은데, 어디까지 자세하게 적어야하는지, ui 부분도 자세하게 적어야하는지(버튼 색깔이 바뀐다거나)를 잘 모르겠다. 더 공부해봐야겠다!

[인프런 워밍업 클럽 0기] 1주차 발자국 👣

✅ 학습 내용1일차자바스크립트 기초Window 객체 및 DOMEvent2,3 일차자바스크립트 중급 4일차객체지향 프로그래밍(OOP), 비동기5일차Iterator + Generator디자인 패턴 ✅ 미션 과정1⃣ 미션 메뉴mock data 생성하면서 💡고민사항이 생겼다.[ { "name": "비빔밥", "country": "Korea", "imageUrl" : "./images/food/korea/bibimbap.png", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, ... 중략 " }, ] 💡 description 에는 무슨 내용을 넣을 것인가?해당 음식과 관련된 내용을 찾아서 넣는다로렘 입숨을 넣는다. => html, js로 기능 구현이 목표이기 때문에 아무 의미 없는 텍스트, 로렘 입숨을 넣어줬다.💡 image 폴더구조는 적절한가?폴더 구조는 항상 고민인 것 같다. 사실상 해당 프로젝트에는 food관련 image만 들어가기 때문에, images/korea/~ 등으로 food라는 폴더가 중첩해도 있지 않아도 될 것이다. 그런데 만약 다른 유형의 image가 들어간다면,,?(background image 등) 폴더 구조를 엎어야할 것이다.=> 이 부분은 개발해보면서 다른 이미지가 넣을지 말지가 결정될 때 정할 것이다!✅ 회고사실 아직 강의와 미션을 전부 완료하진 못했다... 커리큘럼 그대로 진행해야지!를 목표로 삼았으나, 계획대로 지켜지지 못해 아쉬울 따름이다. 다음 발자국은 조금 더 의미있는 내용을 기록하고 싶다.