[TIL] 한번만 쓰고 버린다구요?

🔨투 두 리스트 제작하기

🖼Find CSS reference

버튼이나 인풋같은 컴포넌트를 styled-components를 이용해서 재사용가능하도록 공을 많이 들여서 설계했다.

그러기 위해서 일단 레퍼런스를 참고해서 최대한 깔끔하게 만들려고 했다.

Input field explanation

 

Input Focus & Placeholder Effects with CSS3

 

Top bar that hides and shows with scroll like android

 

My Long List of Simple Hover Effects

🔮styled-components

input 컴포넌트 focus

 

button 컴포넌트

 

button 컴포넌트 hover

color props red

styled-components를 이번에 처음으로 적용해보았다.

확실히 css로만 사용하는 것보다 훨씬 가독성도 좋고

파일 관리도 더 좋은 느낌이다.

 

게다가 부수적으로 theme을 적용하고

스타일에 props를 전달할 수 있는 부분도 전부 마음에 들었다.

 

버튼은 상황에 따라서 색이 다르게 들어가니까

고정된 색을 이용한다면 재사용은 거의 불가능하다.

 

하지만, styled-copmponents를 이용하니 컴포넌트의 재사용성을 높이는 게 쉬웠다.

아래는 버튼 컴포넌트의 코드인데 props로 쉽게 넘겨줄 수 있으니 참 좋다.

const StyledBtn = styled.button`
 	...

  color: #fff;
  background-color: ${(props) => props.color || '#2196f3'};
  border-color: ${(props) => props.color || '#2196f3'};
  
  	...
 `;
 
 const Button = ({ color, children }) => {
  return (
    <StyledBtn color={color}>
      <span>{children}</span>
    </StyledBtn>
  );
};

MUI

컴포넌트 디자인이나 테마나 컬러, 변수이름을 설계할 때 MUI를 상당부분 참고해서 제작했다.

내가 가장 좋아하는 디자인 컴포넌트이다.

 

딱 깔끔하고 필요한 것만 들어있는 디자인적으로도 상당히 우수한 컴포넌트.

공식문서를 읽고 사용해본 것 만으로도 컴포넌트를 설계해보는데 상당히 도움을 많이 받았다.

MUI: The React component library you always wanted

Flex layout

CSS flexible 레이아웃: flex item의 방향과 순서.

flex 관련 문서를 찾다가 잘 정리되어 있는 글을 발견해서 공유해본다.

이번에야말로 CSS Flex를 익혀보자

그래서 css 관련 국내에서 가장 좋은 글은 1분 코딩님 글이 아닌가 싶다.

flex-wrap center align

flex-wrap을 설정해주면 다음 줄로 item이 넘어가기는 하지만 중앙정렬이 되지 않는다.

그렇다고 justify-contents로 중앙정렬을 설정해주면 다음 줄에서 시작하는 부분이 아니라 중간에서 item이 배치된다.

 

이도저도 아닌 아이러니한 상황

레이아웃을 잘 설계하면 된다고 하는데 외 않됌?

flex-wrap 문제, 컨테이너는 가운데 정렬 && 아이템은 왼쪽 정렬

map in react

Prettier adding semicolon when semi: false

 // one line return
 {posts?.map((post) => (
    <Post key={post.id} post={post} />
  ))}
  
  // 명시적 반환
  {posts?.map((post) => {
  	return <Post key={post.id} post={post} />;
  })}

콜백으로 {}을 사용하고 return을 안쓰니까 뭐가 오류도 안나고 뭐가 틀린지도 모르고 한참을 헤맸다.

둘 중에 하나만 사용해야 하는데 충분히 헷갈릴 수 있는 부분인 것 같다.

📁React Folder Structure

기본적으로 많이 사용하는 구조가 아닐까 싶다.

 

[react] 리액트 프로젝트의 폴더구조

먼저 폴더 이름에 어떤 파일들을 나누는지 알아보면 좋을 것 같다.

 

리액트 폴더 구조에 대해서는 디자인 설계 방법도 모두 다르고 장단점도 모두 다르다.

atomic하게 나누는 방법도 있고 기능별로 나누는 방법도 있고 사용처별로 나누는 방법도 있지만,

보통은 각각의 방법을 섞어 쓰는 것 같다.

 

정답은 없고 프로젝트마다 케바케도 있으며 장단점도 모두 다르기 때문에

각자의 best practice를 쌓아나가는 게 좋아보인다.

 

To do list - Layout

이번에는 작은 프로젝트더라도 common 폴더에 공을 들여서 

버튼 하나 텍스트 인풋 하나에 재사용성을 높여보려고 애썼다.

 

스타일은 사실 신경쓰지 않아도 좋았지만,

컴포넌트 설계를 제대로 해보려는 욕심이 나다보니 시간이 많이 걸렸다.

 

다른 프로젝트에서도 조금 더 손봐서 사용해도 될 것 같다.

앞으로 나만의 컴포넌트를 하나씩 쌓아나가는 것도 좋아보인다.

 

👻아무말

어느 한 곳에 적합하게 맞추는 것 조차 사실 어렵지만

어디에나 적용 가능하게 만드는 건 더 더 어렵다.

 

일단 필수적으로 유용해야하며,

어느 상황이든 빠르게 변화하고 적용할 수 있어야 한다.

 

재사용 가능한 멋진 컴포넌트처럼

 

한번 쓰고 버려지는 게 아니라

어디서나 유용한 사람이 되고 싶다.

 

오늘도 유능하고 빠르게 적응하는 개발자가 되기위해 고군분투했다...!!