JDevBlog

진행 사항 - Select Molecule Component 구현 - InputForm Molecule Component 구현 - FilterBar Molecule Component 구현 1. Select Molecule 2. InputForm Molecule 3. FilterBar Molecule 위 세가지 Molecule Component 들은 addon Knobs 를 사용하여 storybook UI 상에서 props 들을 다이나믹하게 조정할 수 있도록 구현했다. Knobs 가 개선된 것이 addon control 이라고 하는데 addon control 을 사용할 경우 아래와 같이 Atom Component 로부터 props 를 전달받아 사용할 때 객체 형태로 표현이 된다. value 값을 변경하면 ..

진행 사항 - Info Component 구현 - Controls 를 이용하여 배경이미지, 타이틀, 컨텐츠 등의 변경된 UI를 확인할 수 있다. 다만, 의문이 드는 점은 btnProps 의 경우 Btn Atom component 의 props 들인데 아래와 같이 Control 을 구현하는 게 맞는 것인지 명확하지가 않다. bgImgSource, contents, title 과 btnProps 의 컨트롤 부분이 다르다. 물론, btnProps 객체 안의 value 를 변경하여 UI 변화를 볼 수 있다. 예를 들어, 버튼 색과 텍스트의 변경.

진행 사항 MoleCule Design: Info Component Storybook 코드에 이것저것 시도중.

진행 사항 14 Typescript, Storybook, Styled components 조합의 Atomic Design 관련 자료 검색 및 개발 환경 추가 세팅 16, 17 Atom Design: Btn, divider, TextArea 19 Atom Design: Input, Label 20 Atoms Design: Icon MoleCule Design: Card 특이 사항 14-19일: 기업 테스트 테스크 및 추가 면접 일정으로 팀 멤버가 주도하여 진행(감사...)

금일 진행 사항 - 개발환경 세팅(Eslint) - 팀규칙 추가 전역 스타일 설정 *, *::after, *::before { padding: 0; margin: 0; /* box sizing속성은 상속이 되지 않음. 페이지 전체에 border box를 적용하기 위해 */ box-sizing: inherit; } /* root 글꼴 크기 정의 유저의 글꼴 정의 적용 & 개발 편의상 10px -> 62.5% */ html { font-size: 62.5%; } body { box-sizing: border-box; } 단위 rem, %, px(5px 이하), vw, vh 반응형 고려 사항 반응형 이미지 구현: 이미지 div 크기에 맞게 확대 및 축소 글자 크기: 반응형(viewport height)에 따라..

프로젝트 기획 프로세스 1. 프로젝트 아이디어 선정 [O] -> 화원 이커머스 웹사이트 2. 팀장, 팀 이름, 프로젝트 이름 정하기 [O] -> 프로젝트 이름 Flower Shop SeolimHwa 3. 팀원별 역할 설정 [O] -> 프론트엔드 2명 4. 프로젝트 기획 및 범위 설정 [O] -> 기능, 페이지 베이직/어드밴스드 로 구분 5. 시스템 아키텍처 설계[O] 6. 스키마 작성[O] -> 파이어스토어 JSON 트리 구조 7. API 문서 작성 8. 프로젝트 태스크 카드 작성 및 분배[O] 9. 마일스톤 작성 -> 완료 10. 팀 규칙 작성 [O] -> 스택, 개발환경 설정 금일 진행 사항 - 마일스톤 작성 - 개발환경 세팅 마일스톤 작성 개발환경 세팅 오늘의 생각 개발 환경 세팅에 많은 시간을 썼..

프로젝트 기획 프로세스 1. 프로젝트 아이디어 선정 [O] -> 화원 이커머스 웹사이트 2. 팀장, 팀 이름, 프로젝트 이름 정하기 [O] -> 프로젝트 이름 Flower Shop SeolimHwa 3. 팀원별 역할 설정 [O] -> 프론트엔드 2명 4. 프로젝트 기획 및 범위 설정 [O] -> 기능, 페이지 베이직/어드밴스드 로 구분 5. 시스템 아키텍처 설계[O] 6. 스키마 작성[O] -> 파이어스토어 JSON 트리 구조 7. API 문서 작성 8. 프로젝트 태스크 카드 작성 및 분배 - Components / Functions 9. 마일스톤 작성 10. 팀 규칙 작성 [O] -> 스택, 개발환경 설정 프로젝트 태스크 카드 작성 및 분배 Atom/Molecule/Organism/Page Compon..

프로젝트 기획 프로세스 1. 프로젝트 아이디어 선정 [O] -> 화원 이커머스 웹사이트 2. 팀장, 팀 이름, 프로젝트 이름 정하기 [O] -> 프로젝트 이름 Flower Shop SeolimHwa 3. 팀원별 역할 설정 [O] -> 프론트엔드 2명 4. 프로젝트 기획 및 범위 설정 [O] -> 기능, 페이지 베이직/어드밴스드 로 구분 5. 시스템 아키텍처 설계[O] 6. 스키마 작성[O] -> 파이어스토어 JSON 트리 구조 7. API 문서 작성 8. 프로젝트 태스크 카드 작성 및 분배 9. 마일스톤 작성 10. 팀 규칙 작성 [O] -> 스택, 개발환경 설정 진행사항 Atomic Design 진행, 1차 완료 오늘의 생각 Atomic Design 방법론의 경우, Atom/Molecure/Organi..