[6주차] Momu 미션 제출합니다. - #9
Conversation
Siwonbluedd
[test] 새로운커밋
new commit
[feat] test
feat : 상세페이지 구현, DetailContent 컴포넌트 추가
feat : handlePostDelete 오류 수정, EditContent 컴포넌트 생성
refactor : link에서 post 객체도 같이 넘기도록 수정
feat : EditContent 시도 중 . . . (도와줘)
[feat] 글쓰기 기능, json 데이터 구조 살짝 변경
[feat] 에딧 수정
[feat] 기능개발 끝 스타일링 필요
[style] 디자인 추가
스타일링 끝이요 ~.~
[chore] resizing none & 공백 방지
style : white-space: pre-line으로 변경
chore : 타입에러 수정
add favicon
itsnowkim
left a comment
itsnowkim
left a comment
There was a problem hiding this comment.
수고 많으셨습니다~ 코드를 읽을 때 두 분의 스타일이 살짝 다른 점이 읽는 입장에서 더 재미있었어요~
이번주도 고생 많으셨습니다~
| const posts = useRecoilValue(postList); | ||
| return ( | ||
| <> | ||
| {posts?.map((post) => { |
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| const AppLayout: FC<Props> = ({ children }) => { |
There was a problem hiding this comment.
fc는 꼭 써야 할까?
[Typescript] FunctionComponent (FC) 사용 줄이기
시간 날 때 읽어보면 재밌을 것 같아요~
| if (typeof currentPost === 'string') { | ||
| post = JSON.parse(currentPost); | ||
| } |
There was a problem hiding this comment.
근데 굳이 변수로 따로 빼지 않고 handler 함수 안에서 바로 처리할 수도 있을 것 같아요!
There was a problem hiding this comment.
네네 배포할 때 생긴 오류라 급하게 잡다보니 저렇게 해결했습니다
조언 감사합니다!
| date, | ||
| }; | ||
| setPosts(posts.map((post) => (post.id === Number(id) ? obj : post))); | ||
| setContents(''); |
There was a problem hiding this comment.
여기서 setContents('') 없애면 다시 돌아왔을 때 이전에 작성중이던 글이 남아있나요?
| { | ||
| "id": 0, | ||
| "title" : "여러분의 글을 남겨보세요!", | ||
| "contents" : "하하하하", | ||
| "date": "05-20" | ||
| } |
There was a problem hiding this comment.
There was a problem hiding this comment.
Array vs Set vs Map vs Object
여기 그 결론이 있군요...!
poodlepoodle
left a comment
poodlepoodle
left a comment
There was a problem hiding this comment.
안녕하세요, 시원 & 채림 님. 15기 프론트 최어진입니다.
Next.js와 Recoil을 함께 이용해서
미니멀한 감성의 블로그를 구현하신 것 너무 멋집니다....!
저도 오늘 세션이 지나고서부터 기말고사 기간 동안 놓친 부분들을 처음부터 다시 보려고 하는데요,,,
Recoil을 통한 상태 관리 파트를 참고할 때 시원 님의 Pull Request를 복습 하러 오겠습니다..!
현재 님 코멘트도 참고하구요...
행복한 하루 되시길!!
😄
| const [title, setTitle] = useState(prevPost?.title); | ||
| const [contents, setContents] = useState(prevPost?.contents); |
There was a problem hiding this comment.
prevPost?로 사용한 거는 어떤 의미인가요....?
순수하게 궁금해서 여쭤봅니다...!
| setPostNumber((prev) => prev + 1); | ||
| setPosts([...posts, obj]); | ||
| setContents(''); | ||
| router.push('/'); |
There was a problem hiding this comment.
글 입력 시 router.push('/');로 페이지를 이동하도록 구현하셨군요...!
| export const postList = atom({ | ||
| key: 'postList', | ||
| default: initPost.posts, | ||
| }); | ||
|
|
||
| export const postNum = atom({ | ||
| key: 'postNum', | ||
| default: 0, | ||
| }); |
[fix] css ssr 버그 수정
4 participants
안녕하세요! Momu입니다.
처음 팀으로 과제를 하면서 협업의 힘을 느낄 수 있었습니다😇 아마 이번 과제를 혼자 했으면 기간 내에 못했을 것 같다는 생각이 드네요 ㅠ
이번 주차 과제를 하면서 추후에 하게 될 협업 진행에 큰 도움이 될 것이라 생각이 들었어요 . . (특히 협업 세팅을 하는 과정에서요 🧐)
✔️ 배포링크
Momu blog
Key Question⁉️
SEO란?
SEO란 Search Engine Optimization을 뜻합니다. SEO는 검색엔진 디지털 마케팅의 종류 중 하나이며 타겟 웹사이트를 검색엔진의 상단에 노출하게 하여 트래픽을 높이는 전략 중 하나입니다. 웹 사이트를 이용하여 수익을 올리기 위해서는 사용자들이 사이트에 접근해야만 하기 때문에 브라우저에 웹사이트가 노출되는 것의 중요성이 증대되고 있습니다. 따라서 어떤 서비스를 개발할 때에는 SEO를 고려하여 개발을 진행해야 합니다.
SEO같은 경우는 웹사이트의 최적화 작업을 통해 구글 크롤러에 읽히고 구글에 검색하는 사용자들에게 웹사이트를 노출합니다.
검색엔진 최적화 기본 가이드
Next.js를 사용하는 이유
Next.js는 SSR을 쉽게 할 수 있도록 돕는 React 프레임워크입니다. 검색 엔진 최적화(SEO)를 하기 위해서는 SSR이 중요합니다. SSR같은 경우에는 서버에서 View를 렌더링 하기 때문에 초기 로딩 속도가 빠르고 SEO에 유리합니다. 반면 CSR은 클라이언트에서 필요한 Resource를 다운로드 받은 이후에 브라우저에 렌더링 하는 방식입니다.
CSR 방식같은 경우에는 클라이언트에서 페이지를 구성하기 전까지 HTML에 아무것도 존재하지 않기 때문에 데이터를 수집하는 것이 불가능하여 검색엔진에 노출되는 것이 어렵습니다. 반면 SSR은 서버에서 화면을 그려 보내주는 방식이기 때문에 HTML 내부에 이미 컨텐츠가 포함되어 있는 상태입니다. 따라서 크롤러 봇들이 데이터를 수집하는 것이 CSR보다 수월하여 SEO에 유리하다고 할 수 있습니다.
성능 최적화를 위해 사용한 방법
이번 과제에서 성능 최적화를 위해 useCallback밖에 사용하지 못한 것이 아쉽습니다. (변명을 해보자면 깃 초기 설정에 시간이 많이 걸렸어요 …ㅎ…..ㅠ) delete, change, input 함수에 useCallback을 적용하여 함수를 재사용하고자 했습니다. 기말고사 기간 동안 이번 과제 성능 최적화를 위한 방법을 공부하고 적용해보겠습니다.
전반적인 협업 과정
Organization 생성 후 각자 브랜치 생성하여 개발했습니다.
각자 브랜치에서 작업한 이후 pull request -> merge ->pull 과정으로 개발 진행해봤어요. (근데 이게 좋은 방법인지는 잘 모르겠어서 고민이 필요할 듯 합니다.. )
➕이번에 깃 오류로 스트레스 받으신 분들을 위한 . . 깃 브랜칭 을 배워봅시다 . .