안녕하세요.
밑에 게시글에서 토이 프로젝트 피드백 부탁드렸던 사람입니다.
https://gall.dcinside.com/mgallery/board/view/?id=github&no=48896&s_type=search_subject_memo&s_keyword=.EB.B6.80.ED.83.81.EB.93.9C.EB.A6.BD.EB.8B.88.EB.8B.A4&page=1
많은 분들이 조언해 주셨던 것들
1. 전역 상태 관리-> redux로 구현
2. 반응형으로 구현
3. 사파리에서 다운로드 안되는 것
4. 웹 폰트 최적화
5. 타입스크립트 적용
6. google anlytics 적용
총 여섯 가지를 수정했습니다.
짠 코드는 여기 있습니다 !
https://github.com/Jaesin22/jjalmaker
다시 한 번 피드백 부탁드립니다 !
이거 들어갔더니 로또전화랑 보험전화가 계속와요 - dc App
사실 농담이고 리드미를 한번 적어보시면 좋을것같아요. 대부분 면접때도 코드까지 읽는 경우가 많지않고 리드미수준에서 많이 보기때문에 리드미에 구조적인 부분이나 어필할 부분을 적어두면 적어도 읽는사람이 뭘 읽어봐야될지 알수있고 어떤 코드를 한번 읽어보세요라고 유도할수있죠 그리고 리액트 배우시고 nextjs13도 한번 배워보시면 좋을듯 그게 라우팅 하는 부분이 특이한데 배울점도 있고, 개인적으로 nextjs를 배우면서 코드의 목적을 어디에 둬야될지 고민을 많이 했었슴다 아무래도 페이지 단위를 나눠서 컴포넌트처럼 사용하는걸 권장하는 방식이라 그런것같네요 - dc App
아하 넵넵 리드미 한 번 적어보겠습니다 감사해요 !
ChangeLog로 간단하게 적용한것들 다 적어놓으셈 그래야 알어.
이제 배너만드는건 했으니까 Gif를 만들든 다른 기능으로 넘어가고 새로운 페이지를 추가하고 Router를 추가하자!
넵 ! 감사합니다
굿 괜찮네 3주 공부하고
감사합니다 !!
저는 초보라 간단하게 코드보고 의견 남겨봅니다.
1. 폴더를 기능중심(reducer, component)이 아닌, 목적 중심(banner-editor 등..) 으로 나눠보는것도 좋을 것 같습니다. 현재 폴더 명 하위에 있는 컴포넌트나 기능들이 어떤 일을 하는지 알기 쉽지 않았습니다.
2. package.json에 devDependencies와 dependencies에 들어갈 의존성을 잘 구분하셔야 할 것 같습니다. production에는 dev-tools를 안쓰는것 같은데 dependencies에 포함되어 있네요.
3. redux의 action에 정의해두신것을 보면, 명사와 동사가 같이 사용되는것 같습니다. 그래도 action이니까 명사보다는 동사 + 목적어가 더 괜찮을 것 같아요. bg_color => change_bg_color.
4. 여러 요소들을 가지고 drawing을 하는 케이스로는 recoil이나 jotai처럼 값에 잘 반응할 수 있는 솔루션도 나쁘지 않습니다. 예를들어 폰트요소에 따라 같이 bg도 바뀐다면 redux에서는 처리가 깔끔하지만은 안터군요. 현재는 단순한 기능들로 처리되니 redux로도 충분해 보입니다. 둘 중에 쓴다면 유틸 많은 jotai 추천!
5. useEffect의 deps array에 cavnasRef를 담은 부분이 있는데요. 꼭 수정이 필요한건 아니지만, 의도에 맞는다면 ref값을 deps에 담지 않으시는게 좋을 수 있습니다. ref는 랜더링을 일으키는 요소가 아닙니다. 실제 ref값이 변했는데도 랜더링이 안되니 useEffect 자체가 호출이 안될 수 있습니다. 지금의 구성에는 문제없을 것 같은데, 나중에 canvas자체를 조건적으로 노출했다가 감추거나 하는 케이스에서는 예측하신대로 동작하지 않을 수 있습니다. 여기 관련 내용을 잘 설명해놓은 블로그를 첨부해드리니, 필요하시다면 useRef대신 useState를 써볼 수 있습니다.
https://velog.io/@shmoon2917/useEffect-%EC%9D%98%EC%A1%B4%EC%
https://velog.io/@shmoon2917/useEffect-%EC%9D%98%EC%A1%B4%EC%84%B1%EC%97%90-ref%EB%A5%BC-%EB%8B%B4%EC%9D%84-%EB%95%8C%EB%A7%88%EB%8B%A4-%EC%B0%9C%EC%B0%9C%ED%95%98%EC%8B%A0-%EB%B6%84%EB%93%A4%EC%9D%84-%EC%9C%84%ED%95%B4
6. drawCanvas로직은 useMemo()를 이용해 구독해서 캔버스 상태를 바꾸고 있는 것 같네요. 어떤 의도이신진 모르겠지만 useCallback이나 useEffect로 바꾸시는것도 괜찮을 것 같습니다.
fontType은 사실상 상수의 의미인데, array로 동적으로 받을 수 있도록 되어있는 것 같네요. 타입추론이 쉽도록 구조를 바꿔주는것도 방법일 것 같습니다. const FONT = { "SANJUGotgam" : { fontFamily: 'xxx' } } as const
저도 3주 공부하고 이렇게 짜보고 싶네용. 수고하셨습니다~
답변 감사합니다 말씀해주신 대로 수정 해볼게요 !