혼자 적어보는 노트

🔗 고양이 사진 검색 사이트 이번 문제는 처음부터 구현하는 것이 아니라 구현이 일부 되어있는 것을 수정하고 기능을 추가하는 문제였다. class 문법이 나와서 조금 당황했다..ㅎ 게다가 무려 4시간!! 수정하는 것이다 보니 따로 local vscode에서 하지 않고 온라인 vscode에서 진행하려고 했는데 이번엔 온라인 vscode에서 cors가 떴다... 보통 제공해 주는 테스트 환경에서는 cors가 안뜰 것이라고 예상했는데 이미 테스트 시작은 누른 상태라 포트를 잘못 타고 들어갔나.. 이것저것 시도해 보다가 안되길래 코드를 전부 vscode로 옮기고 어제 설치한 Allow CORS 확장 프로그램을 실행시키니 로컬에서나마 작동을 시킬 수 있었다... 초반에 시간을 좀 썼지만 부랴부랴 과제를 마치고 팀원..

🔗 쇼핑몰 SPA 로컬 VSCode에서 작성하고 붙여넣기를 하려고 했는데 로컬에서 테스트를 하니 CORS가 떠서 진행할 수가 없었다. 테스트환경인 온라인 vscode에서 API호출을 하니 정상적으로 작동이 되길래 시간을 더 지체할 수 없어서 테스트 환경에서 문제를 풀었다.ㅠ_ㅠ 초반부 세팅 때문에 시간을 좀 날리기도 했고 테스트 환경이 조금 불편하기도 했고,, 무엇보다 어제 했던 프로그래밍 언어 보다 난이도가 있었다. 쨌든 결국 다 못풀었다 3페이지를 구현해야하는데 마지막 페이지는 아예 손도 못댔고 2페이지의 3분의 2정도만 풀었다.... ㅠ_ㅠ 이후 팀원들과 이야기해보니 나와 비슷한 상황이었고 결과도 비슷했다... 💡 그래도 알게된 점! 1. 확장프로그램을 통해 Allow CORS 처리 팀원 중 한분이..

🔗 프로그래밍 언어 검색 요즘 계속 react만 하다가 vanilla js로 구현하는 데브매칭 연습문제를 처음 풀어봤다. 오랜만에 하다보니 이거 어떻게 했더라..? 했던 부분들이 조금 있었다,,ㅎ 3시간이 참 짧게 느껴졌다 ㅠ_ㅠ 기본 구현사항은 이해가 잘 안돼서 구현을 못했던 한 부분 빼고는 다 했고 보너스 구현사항 부분은 3개를 구현하지 못했다.😅 해보고 나니 이거 보너스 구현사항까지 전부 풀려면 고민없이 술술 풀어야 할 듯..? 💡 깨달은 점 ⦁ 요구사항에는 alert처리를 하라고 했지만 구현 예시 끝부분 gif에는 alert이 나타나지 않아서 마지막 쯤 alert부분을 주석처리 했는데 생각해보니 요구사항대로 alert를 하는게 맞는 듯 하다. ⦁ 주어진 html 파일을 아예 건들면 안되는 줄 알고..

상세 페이지의 Sidebar에 댓글 아이콘을 누를 경우 상세페이지 하단의 댓글 컴포넌트로 화면을 이동시키는 리모콘 기능을 구현하기로 했다. useMoveScroll hook 작성 function useMoveScroll(element: HTMLElement | null) { const onMoveToElement = () => { element?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; return { onMoveToElement }; } element.scrollIntoView 이번에 처음 알게된 API인데 해당 element로 스크롤을 이동시켜준다. behavior으로 애니메이션을 정의할 수 있고 block, inline 옵션으로 수직/..

next로 프로젝트를 진행하며 일부 페이지에 ssr을 적용했는데, 해당 페이지에 접근하려고 링크를 클릭하면 약간의 딜레이 후에 페이지가 이동되어 조금 이질감이 느껴졌다. router.event를 사용한 로딩 처리 next의 router에서 제공하는 이벤트를 사용하여 route가 변경될 때를 감지하여 loading 페이지를 보여주는 방식을 사용할 수 있다. _app.tsx function MyApp({ Component, pageProps }: AppPropsWidthLayout) { const [loading, setLoading] = useState(false); useEffect(() => { const start = (url: string) => { setLoading(true); }; const ..

22~23일차 세부 스타일 지정 & 페이지 마무리 꼭 해야하는 (우선순위) 작업들이 끝나가서 다른 팀원들이 기능 마무리에 집중할 수 있도록 페이지의 CSS styling을 도와주기로 했다. 그리고 전체적인 style 누락된 부분들을 수정했는데 CSS만 해도 시간이 꽤 걸렸다,, CSS라고 만만하게 생각하면 안된다고 다시 한번 깨닫게 되었다.😅 promise.allSettled 메인페이지가 getServerSideProps로 데이터를 받고 있는데 이 페이지에 접근할 때마다 로딩이 꽤 길다고 느껴졌다. export const getServerSideProps = async () => { try { const courses = await CourseApi.getCourses({ size: COURSE_COUN..

20~21일차 무한스크롤 구현 아주 예전에 한번 구현해보고 기억이 가물가물 하던 차에 이번 프로젝트에 다시 한번 구현을 해봤는데 조금 까다로웠던 부분들이 있었다. 1. 단순 페이지 진입 시 나열되는 것이 아니라 검색 필터를 변경하면 검색 필터에 맞게 리스트가 초기화 되고 초기화 될 때마다 page도 0으로 처리해주어야 하는 점. 2. 검색 필터 부분을 다른 팀원이이 작업을 해둔 상태였고 그 코드에 무한스크롤을 적절히 합쳐야 하는데 이 과정에서 남의 코드 읽고 완전히 이해 해야 가능하다는 것을 알게 되었다.. 애초에 한사람이 작업했다면 좀 더 빨랐을 것 같기도 한데 그래도 좋은 경험이었다. ✅ 해결 과정 나는 코스 리스트의 가장 마지막 item을 관찰 대상으로 두었다. 그리고 스크롤을 내려 "관찰 대상"을..

이전에 React에서 카카오톡 공유하기 기능을 추가해본 적이 있긴 했지만 그때는 template을 사용하지 않고 코드를 조금 길게 작성했었어서 이번 기회에 template을 사용해보기로 했다. 1. _document.tsx에 script 추가 : 컴포넌트 내부에서도 script를 추가할 수도 있겠지만 전역으로 사용할 script기 때문에 _document에 추가했다. render() { return ( ); } 2. 상위 컴포넌트에서 kakao init 하기 const Layout = ({ children }: LayoutProps) => { useEffect(() => { const kakao = window.Kakao; if (!kakao.isInitialized()) { kakao.init(proc..