프로젝트/클론코딩

클론코딩 내용(수코딩 - 타이핑효과 랜딩페이지) : https://youtu.be/e56H5n1SvEs!youtubee56H5n1SvEs

오늘 부터 5일간 솔로 프로젝트가 진행된다.다행히 코드스테이츠 측에서 디자인이 되어있는 피그마 파일을 제공해 줘서그나마 다행이다. 이번 시간에는 바로 작업 들어가지 않고프로젝트에 요구 분석 및 플래닝 하는 시간을 페어 분과 함께 진행했다.깃허브 레포지토리 생성, 프로젝

✏️ 마치며

음... 작업하긴 했는데...하긴 했는데 결과가 없다..해당 작업 영역 나에겐 아직은 난이도가 높은거 같다ㅠ

드디어 풀리지 않았던 localStorage와 관련된 북마크 영역을 해결했다..페어분이 아니셨다면 아마나는... ㅠ..✏️마치며

✔️ 시작 📍 작업 현황 ✏️ 마치며

Main-Project를 들어가기 앞서 Pre-Project를 진행한다.Pre-Project를 통해 프로젝트 경험을 미리 쌓는다.이번 시간에는 랜덤으로 배정된 팀원들과인사를 나누며 어떤식으로 진행할지 규칙을 정하고팀장, 부팀장 등 기초 방향을 정하는 시간을 가졌다.첫

프로젝트에 들어가기 앞서 git 전략에 대해 학습했다.또한 프론트 분들과 따로 회의를 가져 어떤 툴을 사용할지 정하는 시간을 가졌다.팀과 조직이 작업을 시각화 하고, 병목 현상과 리소스 낭비를 해결하는 업무 관리 방법이다.회의 시간 및 해당 회의에서 논의할 내용팀원 간

✏️ 마치며

오버플로우 클론 코딩이지만 화면 개선을 하면 좋다 생각해피그마를 이용해 화면 구성을 진행하기로 했다.와이어프레임 작업 중 나는 메인페이지를 맡았다.(물론 마지막엔 다 같이 협업하면서 화면을 구성했다.)헤더, 푸터, 검색창, 질문 카드 등이 들어 갔다.기존 스택 오버 플

OAuth를 받아오는 작업을 먼저 진행하기 위해로그인 페이지 먼저 진행하기로 했다.나는 헤더를 담당하게 되었다.로그인 전 컴포넌트만 구현했고만약 로그인 후, Router 까지 진행한다면 태그나 코드 구조가 변경 될 것 같다.로그인 후의 배치도 있어야하기에<Nav>

✏️ 마치며

API 명세서를 받아 CORS문제를 해결하기 위해 Proxy설정을 진행해 봤다.마크업도 어느 정도 해결했고API명세서도 나왔다 해서CORS문제를 해결하기 위해 Proxy 설정을 하기로 했다.vite로 진행을 했고 Ngrok로 API명세서를 받았다.이렇게 통신을 진행하는

서버와의 통신에 성공하고 기능 개발에 들어갔다.나는 질문 작성페이지에서 태그 선택 영역을 맡았다.요구 사항은3개 까지 선택이 가능하다.배열 형식으로 들어간다.이정도 였던 거 같다.우선 API 명세서에서 태그 리스트 관련해 작업이 되어있지 않아 더미데이터를 만들어 진행했

✏️ 마치며

✏️ 마치며

✏️ 마치며

멋진 팀원들이 있었기에 프리 프로젝트 잘 마무리 할 수 있었다.프리 프로젝트 github 바로가기배포 사이트 주소실력이 많이 부족하다 느낀 상태로 프리 프로젝트에 참여하게 되어 최대한 도움이 되고자 정보 수집, 문제 발생 시 도울 수 있는 자료 수집을 열심히(?) 하려

axios

마이페이지 리스트 조회하기

같이 없을 수도 있다일정 상세 페이지를 보여줘야 하는 과정에타입 에러로 거의 3시간은 보냈다.타입 가드도 시도해 봤고타입 지정도 했는데 계속 이루어지지 않았었다..undefined일 수도 있다는 오류는같이 없을 수도 있다는 뜻이다.courseData.courseTitl

부트캠프 때 진행한 메인 프로젝트에서내가 맡은 파트를 리팩토링 할 예정이다.우선 간단한 footer 컨포넌트 먼저 진행하려고 한다.footer는 특정 경로에서는 보이지 않는다.서버에서 가져오는 데이터가 없고 팀원들의 정보가 작성되어 있다.보는 것 처럼 리스트가 반복되는

멋진 팀원들이 있었기에 프리 프로젝트 잘 마무리 할 수 있었다.🔗 메인 프로젝트 github 바로가기🔗 배포 사이트 주소

최근 포켓몬 API를 활용해 공부할겸 포켓몬 도감을 작업하고 있다.포켓몬 데이터가 방대하기도 해서 성능 최적화에 신경쓰게 되었다.초반에는 하나의 파일에 여러 컴포넌트들이 묶여 있다.그러다 보니 하나의 컴포넌트의 상태가 변경 될 때 마다 리렌더링하는 문제가 발생하게 되었

예전 부터 다크 모드를 구현하고 싶다고 생각했습니다.포켓몬 API를 다루면서 공부할 수 있는 기회가 되었고 기록하고자블로그에 남겨 두려고 했습니다.하지만...벨로그 게시물 작성 시 특정 구문이나 내용을 작성하면자동으로 비공개 처리가 되는 것 같습니다.. (생각보다 글이

시작 포켓몬 API를 활용해 포켓몬 데이터를 불러오고 있었다. 문제점 발생 무한 스크롤 구현을 위해 뷰포트 바다에 닿을 경우 포켓몬 데이터를 추가로 Get요청을 보내도록 했다. 보는 것와 같이 콘솔창에 데이터 불러오기가 여러번 찍히는걸 볼 수 있다. 초기 화면 진

검색창에 특정 단어가 포함된 포켓몬만 검색 결과창에 보이도록 구현하려고 한다.가장 먼저 할 일을 검색페이지를 만드는 것이였다.원래는 검색페이지를 따로 만들지 않고 하나의 페이지에서 변경될까 했었지만사용자 경험에서 좋지 않다는 생각이 나서 분리하기로 했다.form태그에

시작 포켓몬 도감 검색 페이지기능 구현이 잘되고 vercel로 배포를 하려고하니 404에러를 표시했다. 문제 확인하기 404문제 해결을 위해 여러 방안을 제시해 줬다. 처음에는 컴포넌트 대/소문자 구분을 제대로 안해줘서 그런가 싶었는데 그건 아니였다. 구글링을

Loading 관련 코드 수정하기 위해 디버깅 작업 중무한 스크롤 시 이전 동일한 데이터의 카드 컴포넌트가 리렌더링되는걸 확인하게 되었다.이를 기반으로 학습했던 메모이제이션에 대해 적용해 보려고 한다.메모이제이션 하기 전에 React.memo가 무엇인지 간략하게 알고가

현재 진행 중인 사이드 프로젝트에서dog가 삭제 되면 dogId를 doglist 첫번째 dogId로 변경해 주려고 한다.다만 doglist는 상위 컴포넌트에서 호출되는 데이터고 이를 props로 내려 주거나 recoil로 관리하기에 불필요한 작업이 많아지게 되어 고민하

간혹 해당 데이터를 프론트에서 관리하는게 맞는지,백엔드에서 관리하는지 고민하는게 있다.

프로필 이미지 설정 페이지에서이미지를 선택 후 다시 터치 할 경우해당 이미지 처럼 표시 된다.그러고 다시 클릭 시 이미지 선택 화면이 표시 된다.여기서 문제가 발생하게 되었다.input에 ref 속성을 추가해 두었고해당 input을 활성화하는 button에도 ref 속

시작 개인 프로젝트로 진행한 포케폰 도감 중 modal 요소에 문제점을 발견하게 되었다. 문제점 해당 스크린샷 처럼 modal이 해당 요소 내부에 존재하고 있다. 문제가 없을 수도 있지만 이럴 경우 부모 요소에 따라 영향을 받게 된다. 내가 원하는 방향은 mod