[항해99] Week 7 [8.1 - 8.6]
0. ✅WEIBO 다신 보지 말자.
뺄건 빼고, 연습은 최대로.
구분해서 저장하고, 컴포넌트는 재사용하고.
SOLID의 S의 한 획이라도 따라해보자 노력했던 한 주.
클론코딩 프로젝트 보러가기 서버가 꺼져있다
깃허브 보러가기
🐱💻Note
Just a little push
Want Mach 10? Let's give 'em Mach 10.
Just a little! Come On!Mach 10! ...
0-0. ✅Weibo 클론 코딩 Weidao
서비스 중인 페이지를 하나하나 구현해보자.
그렇게 나왔던 아이디어 Weibo.
- 배울 CSS가 있는가? No.
- 배울 기능이 있는가? No.
- 배울 반응형이 있는가? No.
- 내 코드에 부족함 있는가? Yes.
- 이번 기회에 성장할 수 있는가? Yes.
- 그럼 하자.
🐱💻Note
도전에 거창한 이유는 없다.
그저 성장만 있으면 된다. 시도에는 그 성장 조차도 필요없다. 경험만 있으면 된다.
0-1. ✅그렇게 시작된 소소한 도전
0.
CSS Flex 마스터하기.
정렬을 물 흐르듯 생각나는 대로 할 수 있을 때까지 갈고닦자.
1.
반응형을 최대한 구현하자.
Galaxy Fold가 소외받지 않는 날이 올 때까지.
// device.js
const sizes = {
mobileS: '320px',
mobileM: '375px',
mobileL: '500px',
tablet: '768px',
laptop: '1024px',
laptopL: '1440px',
desktop: '2560px',
};
export const devices = {
mobileS: `(max-width: ${sizes.mobileS})`,
mobileM: `(max-width: ${sizes.mobileM})`,
mobileL: `(max-width: ${sizes.mobileL})`,
tablet: `(max-width: ${sizes.tablet})`,
laptop: `(max-width: ${sizes.laptop})`,
laptopL: `(max-width: ${sizes.laptopL})`,
desktop: `(max-width: ${sizes.desktop})`,
};2.
각 컴포넌트 별로 작성하였던
styled-components
styled.js혹은 다른 파일에 담아 재사용하자.
// styled.js
import styled from "styled-components";
export const ColumnFlexDiv = styled.div`
display: flex;
flex-direction: column;
`;
export const RowFlexDiv = styled.div`
display: flex;
flex-direction: row;
`;
...Just a little push
다음에는 보다 세세하게, 보다 사용하기 쉽게, 하지만 테마에 맞게.
3.
SOLID의 O.
"확장을 위해 열려야 하지만 수정을 위해 닫혀 있어야 한다"
개방-폐쇄 원칙에 따라 컴포넌트 간의 결합을 줄이고 확장성과 재사용성을 높여보자.
// NumberButton.js 두번째 컴포넌트
const NumberButton = ({ number, string, to }) => {
return (
<>
<NumberButtonAbsoluteBox>
<div className="numdiv">
<p>{number}</p>
</div>
<div className="stringdiv">
<Link to={to ? to : "/"}
style={{ textDecoration: "none", color: "#0a8cd2" }}>
{string}
</Link>
</div>
</NumberButtonAbsoluteBox>
</>
);
};// ToSignInBox.js 중
<NumberButton number={3} string={"进行短信验证时没有收到验证码，该怎么办？"}/>그냥 map 돌리는 것과도 차이가 없었고 다시는 쓸 일이 없었다.
무지성 수용 보다는 사용빈도에 따라 복잡도 개선에 도움이 될 때를 알아보고 따로 작성여부를 정해야겠다.
children을 이용해 조금 더 깔끔하게 모듈화 하자.
const Header = ({ children }) => (
<header>
<Logo />
<Actions>{children}</Actions>
</header>
);
const HomePage = () => (
<>
<Header>
<Link to="/dashboard">Go to dashboard</Link>
</Header>
<OtherHomeStuff />
</>
);🐱💻Note
누구나 처음은 낯설고 누구나 나중엔 익숙하다
낯설어하는 사람을 이해하지 못하면 그건 멍청한 저주에 걸린 것.
0-2. ✅Weibo 클론 코딩 회고
물론 백엔드를 기다리며 쉼의 시간을 가진 것도 맞다.
인간관계를 다시 튼튼히 다지고 틈틈히 다음 최종 프로젝트의 기획도 했다.
성장이 기대보다 많았기에 아쉽지 않은 한 주였다.
세상에 나오지 못한 최종 프로젝트 초안 일부
- 사다리타기 내기에 질려버린 현대인들, 그렇다고 회사에서 몰폰은 좀 그래.
벌칙의 주인공! 진사람이 아샷추 쏘기!
🐱💻Note
사라지지 않아
이번에 못하면 다음에. 여행 중에. 일 끝나고. 쉬는 날.
그렇게 사이드 프로젝트로 진행하면 그것으로 족하다.
1. ✅이젠 최종 프로젝트
최종 프로젝트는 어느정도 완성이 될 때까지 비공개로 가져가고자 한다.
서비스에 자신도 없고, 기능의 다양함도 부족하다.
하지만 그렇게 큰 상관은 없다.
우리는 기획자가 아니니까.
그 안에서 최선을 다해 프론트엔드 적인 요소들을 넣고자 한다.
철저한 규칙 안에서 정교하게 짜여진 코드를 만듦을 목표로 하고자 한다.
1-0. 앞으로 지속될 도전
0. git 커밋 메세지 정형화
(Create) => 새로운 컴포넌트를 완성
ex) git commit -m 'Create Login component'
(Implement) => 새로운 기능 구현
ex) git commit -m 'Implement infinity scroll in A component'
(Update) => 개정이나 버전 업데이트 (수정, 추가, 보완) (코드, 문서, 리소스,
라이브러리등에 사용)
ex) git commit -m 'Update README.md'
ex) git commit -m 'Update ?????'
(Remove) => 삭제
(Improve) => 원래 있던 코드에서 기능적으로 향상
(호환성, 테스트 커버리지, 성능, 검증, 기능, 접근성 등)
(Correct) => 문법적 오류, 타입변경, 네이밍 변경
(Fix) => 오타 수정일 경우에만 사용. Fix typo로 Commit하면 무조건 오타 수정.
(Refactor) => 전면 수정이 있을 때 사용합니다
(Resolve) merge conflict
...1. import 순서 정형화
import ... from "react";
import ... from "react-router-dom";
import ... from "prop-types";
import styled from "styled-components";
// 그 외의 Package/Libraries
import ... from "recoil";
import ... from "../recoil/..."
// 그 외 ABCD 순으로 Import
import ... from "../api";
import ... from "../assets";
import ... from "../components";
import ... from "../constants";
import ... from "../hooks";
import ... from "../pages";
import ... from "../styles";
...2. 컴포넌트 구조 정형화
컴포넌트 안에 컴포넌트 안에 컴포넌트가 들어갈 경우,
조심해야하지만 styled 컴포넌트가 계속 늘어날 경우.
가독성을 유지하기 위해 구조를 정형화 했다.
- Page → Section → Card → Box → View
<LoginPage>
<LoginNavBarSection>
</LoginNavBarSection>
<LoginMainSection>
<LoginInputCard>
<LoginNameInputBox>
<LoginNameInputBox>
<LoginPasswordInputBox>
<LoginPasswordInputBox>
</LoginInputCard>
</LoginMainSection>
</LoginPage>3. 그 외의 SOLID
Applying SOLID principles in React
특히 SOLID 원칙의 S.
"모든 클래스는 단 하나의 책임만 가져야 한다"
코드 모듈화를 통해 가독성을 높이고 중복 작성을 줄이자.
const useUsers = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const loadUsers = async () => {
const response = await fetch("/some-api");
const data = await response.json();
setUsers(data);
};
loadUsers();
}, []);
return { users };
};const ActiveUsersList = () => {
const { users } = useUsers();
...
}