Portfolio

능력자들 4분이서 하면 역할분담이나 협업이 어려운 부분도 많았을 텐데, 짧은 시간내에 정말 완성도 있는 프로젝트 잘 만들어주셨어요 🙌.

최근도 계속 발전시키고 있는 것 같은데 좋네요 ~~ 부족했다고 느낀 부분을 액션 아이템을 정해서 하나씩 적용해보면 더 좋을 것 같네요.

앱 처럼 잘 만드셨네요

발표영상

깔끔한 발표 잘 봤습니다 😀 이런 기술을 사용했습니다 → 너무 빠르게 지나간 감이 있네요

코드 레벨단에 코드(신경써서 구현한) or 폴더 구조, 협업, 환경, 실제 프로젝트 이슈나 협업과정이 들어나는 문서나 이슈등을 보여주며 작업을 어떻게 진행했는지, 머지 전략등 요런 부분도 간단하게 소개해주는 것도 좋았을 것 같습니다.

한 번 더 스크립트 설명을 따로 보고 해주시는데, 이 부분도 화면단을 같이 보여주거나, 화면을 보여주면서 하면 더 좋았을 것 같아요.

단순 기능 구현이랑 이런 부분이 적용되었다 보다 → 몇 가지를 줄이더라도 각 사람들 별로 중점적으로

디테일한 부분이나 신경써서, 구현한 부분을 더 강조해보면 좋을 것 같아요

프로젝트

지금 다시 살펴보니 동작들 제대로 나오는 부분이 별로 없어서 어렵네요 ㅜ 꾀 Native, 로티, 중간 스플래시 등등 여러가지 신경 쓴 모습이 엿보여서 좋았습니다.

PageComponents들 규모가 큰데 추상화 레벨 높여서 UI 단위로 컴포넌트를 좀 더 구역화해서 가져가면 좋을 거 같습니다. 반복되는 컴포넌트를 재사용할 수 있게 만들어 보면 더 좋을 것 같아요.


ex) 

기존 
<TopPostSection /> ...
<CommnetList />
<CommnetModal />
<CommentForm />



border: 1px solid ${({ theme, border }) => (border ? theme.colors.grey200 : theme.colors.grey800)};
  color: ${({ theme, border }) => (border ? theme.colors.grey600 : theme.colors.white)};
  background: ${({ theme, border }) => (border ? theme.colors.white : theme.colors.grey800)};


참고
${({ active }) => active && css`
    color: ${colors.primary500]};
    background-color: ${colors.default.primary500};
`

props에 따라 여러 프로퍼티가 달라지게 되는 경우 css를 활용해서 한 번에 적어주시면 좋습니다.
import { css } from '@emotion/react';


border: 1px solid ${({ theme, border }) => (border ? theme.colors.grey200 : theme.colors.grey800)};
  color: ${({ theme, border }) => (border ? theme.colors.grey600 : theme.colors.white)};
  background: ${({ theme, border }) => (border ? theme.colors.white : theme.colors.grey800)};


요렇게 반복되는 부분은 
data 상수로 상위에서 만들어서 list rendering으로 적용해도 좋을 것 같아요 

<Tab.Item
          title="위치"
          index="item1"
          style={{ width: '20%', height: 32, borderBottom: 'none', backgroundColor: '#fafafa' }}
        >
          <EditorSlider
            min={0}
            max={100}
            defaultValue={defaultValue.position}
            onChange={handleEditValue}
            name="position"
          />
        </Tab.Item>
        <Tab.Item
          title="밝기"
          index="item2"
          style={{ width: '20%', height: 32, borderBottom: 'none', backgroundColor: '#fafafa' }}
        >
          <EditorSlider
            min={0}
            max={200}
            defaultValue={defaultValue.brightness}
            onChange={handleEditValue}
            name="brightness"
          />
        </Tab.Item>


<DetailsContainer className="details"> 
스타일드 컴포넌트와 className 사용을 지양합시다.


if (response.status === 200) {
        Toast.show('프로필 사진이 변경되었습니다.', 3000);
        onGetCurrentUser();
        history.replace(`/user/${username}`);
      } else if (response.error.code >= 300) {
        Toast.show(response.error.message, 3000);
      }


반복되는 구문을 유틸 함수로 만들면 어떨까요?

ex) hanldeChangeResponse({
  response, 
  sucessMessage, 
  errorMessage,
  ...data,
})

고생많으셨습니다

이제 서비스 안정성, 협업 , 이 프로젝트를 통해서 단순히 기능 구현한게 아니라

어떤 문제를 잘 해결했는지

어떤 고민이 있었는데, 이런 개념을 잘 공부해서 적용했는지 어필할 수 있는 부분도 같이 고민해보시면 좋을 것 같습니다.

일하는 방식으로 습득한 부분 프로젝트 관리, 협업 방식, 시나리오 위주 테크 스펙위주 및 이슈 우선 일감 진행 등

수치나 개선 구체적인 부분 들어가 있으면 더 좋아요 → ex) 렌더링 성능 개선 → 2.6초 → 1.5초

Lighthouse 접근성 및 performance 56 → 100

추천하고 싶은 것은 서로 달리1 ↔ 달리2 서로 사용자가 되어서 많이 사용하면서 피드백 받고 더 발전시켜보면 좋을 것 같습니다. ex) 이런 기능 있으면 좋겠어요 이슈로 남기고

이 UI 이렇게 개선되면 더 좋을 것 같아요

달리1팀 최종점검