[원티드] 프리온보딩 FE 챌린지 3월 - 폴더 구조 및 프로젝트 진행 방식

이라껠·2024년 3월 30일
post-thumbnail

폴더구조

1번이 안 좋은 것, 2번이 현업에서 쓰는 것, 3번이 이상적인 것 기능별로

모노레포

하나의 저장소에 여러 개의 레포
백이랑 소통할 때 내부적으로 sdk를 만들어서 소통했어야 함.
상태값이나 프론트와 백이 공유하는 로직이나 api 들, 스키마 이거는 스트링 값으로 보내주고 이건 넘버로 보내주고 하는 타입 값들이 적혀있는 스키마. 사내 sdk 해서 공유해서 씀.
이러한 배포가 필요없이 프젝 사이의 코드 공유가 가능함.
단점은 설계나 리팩토링이 어려움. (레포가 서로 의존적이기 때문)

turborepo: 캐싱용 원격 저장소가 따로 있음. 레포끼리 의존성을 그래프로 시각화 해줌.
yarn, npm : 캐싱

서브 모듈

모노 레포가 어려우면 서브모듈로 하는 걸 추천

리액트 개발 개념

라이브러리 사용해서 {fallback}에 에러시 띄울 컴포넌트 넣으면 됨.
만약에 404면 404 에러 페이지, 500이면 서버 연결 오류 입니다. 이런식

contextAPI, Portal

context를 구독하는 모든 컴포넌트는 provider의 value prop이 바뀔 때 마다 리렌더링 된다.

ReactDOM.cratePortal
우리는 모달 만들 때 쓸거니까 createPortal(렌더링할 값, 렌더링될 장소);
모달, body 이렇게들 씀

모달 시연


리액트 모달 라이브러리


구조

컨텍스트 만든다. 프로바이더 만들어서 앱을 감싼다. 이렇게 보면 됨
어디서든 오픈 모달이라는 훅을 쓸 수 있도록 한다 .

import {createContext} from "react"

export const ModalsStateContent = createrContext([])
export const ModalDispatchContext = creatContext()

이력서 팁

진짜 개발을 좋아하는 지 적성에 맞는 지를 보는 거기 때문에 본인만의 경험. ex) 같은 에러를 가지고 2주동안 앓다가 해결을 햇을 때 그게 너무 재미있었다. 자신만의 모티베이션이 뭔지

문제를 푸는 스타일과 어떻게 공부하는지 알아보려는 문항.
분명히 문제를 겪었는데 이력서에 녹여내지 못하면 안됨

대외적으로 사람들이 인정하고 볼 수 있는 것에 대한 성과를 보여달라.

남의 이력서

~할지 고민합니다. 이런 표현보다. 어쩌구 저쩌구를 하다가 다른 기능이 필요해서 리덕스를 썼고 이런 것이 잇어서 좋았다. 클라이언트 데이터랑 서버 데이터의 분리가 필요했고 리엑트 쿼리도 했다. 자기가 이 스킬에 대해 얼마나 상세하게 고민하고 배웠는지를 알아야 함.

이거 잘 썼음.

인트로듀스 써야겠다 나두!

이런 문장은 오류율 감소, 반응성 이런거 수치로 알려줬음 좋겠음.


이런거 안 쓸거 같음

리액트 훅 폼 어캐 쓰게 된 건지 이런거 자세하게 쓰고, 라이브러리 선정 이유도 쓰기.

쏭쓰인트로듀스 바셀 하신 분

0개의 댓글