🍀 BootCamp/스나이퍼팩토리 프론트엔드 프로젝트 캠프

[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 프로젝트 코스 1주차

수구마 2024. 12. 8. 20:16

 

 


이번 주는 github 협업에 적응하고, 개발을 슬슬 시작해보는 시간이었다.


prettier 설정도 잘못돼있었고, tailwind css 설정 파일의 css 적용 범위가 잘못되어있는 바람에 헤더 만들때 간단한 작업임에도 시간이 많이 걸렸다.

 

https://stackoverflow.com/questions/74584091/how-to-get-the-current-pathname-in-the-app-directory-of-next-js

 

How to get the current pathname in the app directory of Next.js?

I'm using the experimental app folder in Next.js 13, where they have replaced next/router with next/navigation, so I imported the useRouter hook accordingly. I do not see the property pathname in ...

stackoverflow.com

 

 

https://uiverse.io/vinodjangid07/good-donkey-28

 

Input by vinodjangid07 made with CSS | Uiverse.io

This Input was posted by vinodjangid07. Tagged with: input, message, send, image, upload, file. You can create your own elements by signing up.

uiverse.io

 

 

React input태그에서 Enter키로 이벤트 활성화하기

 

[JavaScript] 값 입력 후 엔터(Enter)키 눌렀을 때 이벤트 실행

 

React input태그에서 Enter키로 이벤트 활성화하기

 

위 문서들을 참고하여

서치데이터 콘솔에 띄워보기까지 완료

useParams 쓰려고 시도해보다가 서치 다시 해보니 id 말고 문자열로 된 링크는 usePathName 쓰면 되는 것을 알게 되었다.

함수도 onKeyPress로 적었는데 onKeyDown으로 수정해야한다.

이건 다음에 새로운 브랜치에서 작업하기로 한다.

지금에서야 드는 생각인데 useEffect로 바꿔도 될거같다.


이후 props활용해 거래 페이지를 위한 카드 컴포넌트도 직접 작성해봤는데 css가 어려웠고, css적용을 위해 컴포넌트를 어떻게 나눌지, props로 어떻게 css 설정을 가져올지 찾아보고 하느라 어려웠지만 일단 레이아웃은 의도대로 나왔고, 나쁘지 않아 보였다.

css는 다음에 한번 갈아 엎긴 해야할 것 같다..


테이블 작업은 따로 문서 작성하였다.

https://developmiran.tistory.com/11

 

[Next.js] shadcn/ui 로 데이터테이블 만들기

시작하기에 앞서, shadcn/ui로 진행하게 된 이유shadcn/ui 가 mui보다 기능이 적어보여 고민하던 중 아래 글을 보게 되었다. 테이블을 편하게, Tanstack-table 사용하기 테이블을 편하게, Tanstack-table 사용

developmiran.tistory.com

 




강의 한번 더 보고 리팩토링 해봐야지.



풀리퀘스트 잘못보내고 그랬는데 경험자이신 팀장님께서 열심히 알려주셔서 감사했다.

우리 조는 제대로 된 협업 경험이 많이 없어서 시작이 좀 느리지만 열심히 해서 잘 마무리하고싶다.

나만 느린 것일수도 ...

 

 

 

 

——————————————————————————

본 후기는 [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 과정(B-log) 리뷰로 작성 되었습니다. #유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #Next.js #프론트엔드개발자양성과정 #개발자교육과정