회고록16 [클론 코딩] 학원 수료 후 제작한 페이지를 개선 프로젝트 개요학원 수료 후 제작한 프로젝트를 마크업 구조, 스타일 선택자, 웹 표준, 웹 접근성 준수하며 학습한 경험을 녹여 개선한 프로젝트이다. 크게 성장한 내 모습이 보였다.개선 전 아래의 코드는 header 코드 일부분이다. section 태그 안에 section 태그가 있었고 문서의 제목 태그가 있었지만 명확하지 않았고 class 이름이 길어 가독성이 좋지 않았고 HTML 구조에서 불필요한 div가 있었다. 그리고 웹 표준, 웹 접근성 고려하지 않았다. 수정 전 내 코드를 보니 고쳐야 할 부분이 많았다. CSS 파일 분리하면서 수정 및 마크업 구조 변경스타일 속성이 정리가 되지 않아서 영역별 파일을 생성하여 수정하기로 선택했다. 물론 파일을 하나만 생성하여 수정해야 한다는 것을 알고 있었지만 몇.. 2025. 4. 23. Vercel 배포 전에 실제 배포 환경과 비슷한 환경에서 테스트 배포 전 테스트 과정지금까지 깃허브에서 브랜치를 오가면서 커밋하고 메인 브랜치로 풀 리퀘스트하며, 확인하였다.이러한 과정이 힘들고 시간 소요가 되었다. 테스트를 할 수 있는 환경이 있을까? 고민해 봤다. 이전에는 테스트를 할 수 있는 환경이 없는 줄 알았다. Chat GPT 질문을 통해 Vercel Preview 검색하여 찾을 수 있었다.아래의 Vercel 홈페이지 접속하면 Recent Previews 영역에서 확인할 수 있다. 아래의 그림처럼 접속되면 실제 배포 환경과 비슷한 환경에서 테스트를 할 수 있다. 2024. 10. 31. CORS, 500, 502 등 온갖 서버 오류로 힘든 역경 끝에 성장 목차1. Open API 이용해 제작2. localhost 환경에 이슈가 없어, Netlify or Vercel 이용해 배포3. CORS 문제를 해결하기 위해 프록시 서버로 시도4. 해결하는 과정에서 온갖 서버 오류 이슈5. Node.js 빠르게 학습하여 서버 오류 해결6. 무료 호스팅 없어서 고민 끝에 찾아서 배포1. Open API 이용해 제작https://stdict.korean.go.kr/openapi/openApiInfo.do, https://www.data.go.kr/data/3057780/openapi.do 이 사이트에 Open API 사용 신청하였고 Vite 이용해 React 설치하였다. 애자일 개발 프로세스 방식을 채택해 프로젝트를 시작하였다. 아이디어, 기능 구현, 레이아웃 등 레퍼런.. 2024. 9. 14. 사이드 프로젝트：1차 회고 애자일 프로세스로 작업하다.이전에는 기능 구현 후 커밋하는 프로세스로 작업하였다. 실무 멘토링을 진행 후 작은 단위의 목표를 정하여 빠르게 작업 후 배포하는 프로세스로 진행 하였다.Keep프로젝트에서 잘한 점애자일 프로세스를 이해하여 작업 진행실무와 유사하게 깃허브 협업 프로세스로 선정하여 진행Problem개요일상생활에서 단어가 궁금하면 검색 및 단어 저장하는 서비스상황테일윈드 CSS 숙련도가 낮았다.CORS 오류가 발생하였다.Vercel 배포 후 많은 난관이 발생하였다.문제 해결빠르게 반응형 웹을 구현하기 위한 테일윈드 CSS를 선정하였지만, 초기에는 숙련도가 낮았다. 공식 문서에서 CSS 속성명을 검색하여 사용하면서 숙련도를 높였고, 지속적으로 사용한 결과 익숙해졌다.HTTP GET 통신 과정에서 C.. 2024. 7. 11. [회고록] 리액트 토이프로젝트：생일 캘린더 (1차 작업) 📃 개요리액트 강의에서 useState( ) 끝마친 후 학습한 내용을 활용하여 생일 캘린더를 구현했습니다.⏳ 개발 기간하루 3~5시간 소요💻 프로젝트에서 활용한 기술 및 핵심 내용HTMLCSSCSS 파일 생성하여 스타일 적용JavaScriptReactuseState( ) 상태 관리 및 활용, 부모 컴포넌트로 끌어올리기children, ...props 이용하여 컴포넌트 생성Router 이용하여 페이지 이동캘린더 라이브러리 사용하지 않고 구현new Date( )🔥 구현한 기능생일 추가 (완료)생일 목록 (완료)캘린더 (완료)✍ 회고록일기장처럼 회고록을 작성했습니다.🙂 진행 전진행 전에 두려웠던 것은 "처음부터 내가 배웠던 대로 할 수 있을까?"였다. 리액트에서 useState( ) 훅만 배운 상태이며.. 2024. 3. 27. [회고록] 트러블 슈팅 (문제 해결) 정리 📃 개요 트러블 슈팅에 대해서 늦게 알아서 관련된 자료를 구글링하고, GPT Chat 활용하여 정리했습니다. ✅ 트러블 슈팅이란? 여러 자료를 보고 요약해보니까 트러블 슈팅은 문제의 원인을 알고 어떤 과정으로 해결하는 것입니다. 💻 트러블 슈팅 순서도 1. 어떤 문제가 발생했는 지 원인 찾기 2. 어떤 과정으로 해결 할지 찾기 3. 해결하고 회고록 작성하면서 장기 기억하기 (그림으로 그리면 좋을 듯) ✍ 회고록 일기장처럼 회고록을 작성하겠습니다. :) 🙂 트러블 슈팅 느낀 점 이전에 글을 작성했지만 내용을 더 보강하여 글을 추가해야 되겠다. 프로젝트 진행하면서 만났던 문제를 어떤 과정으로 해결했는지 회고하면서 알게 된 것들을 작성하지 않아서 다음에 글 쓸 때는 트러블 슈팅에 대해서 작성해야 되겠다. 또한.. 2024. 1. 5. 이전 1 2 3 다음
