지난 3월에 구조만 만들어뒀던 웹 포트폴리오 제작을 7월에 끝냈었다.그런데 이게 아무래도 코딩 공부 초기에 구조를 만든거라 순수 JS만 사용해서 만든 사이트였고, HTML 파일에서 여러 태그를 중첩해가며 코딩하다보니 구조가 복잡하다는 단점이 있었다. HTML만 복잡한게 아니고 CSS도 모든 영역에 같은 margin이 들어가는데 똑같은걸 여러 번 입력해야하니까 귀찮았다. 수정사항 생길 때마다 vscode 켜서 포트폴리오 사이트에 반영하면서, 'React로 갈아엎을까?' 라는 생각이 매우 많이 들었다. SASS를 쓰면 root.scss에 mixin으로 margin 입력해놓고 각 컴포넌트마다 include만 하면 되는데!😆React와 SASS로 '리모델링'하면 수정사항 생길 때에도 반영하기 쉽고, 코드도 훨..

이력서랑 PPT 버전 포트폴리오를 정리하던 도중에, 웹사이트 버전 포트폴리오를 제작하면서 사용했던 기술들을 정리하지 않았다는게 생각나서 급하게 정리해본다.이것도 토이 프로젝트처럼 React로 만들고 싶었지만, 토이 프로젝트와 포트폴리오 사이트 모두 7월이 끝나기 전에 완성해야했어서 3월에 HTML + CSS + JS로 만들어둔 것을 수정/보완하는 형식으로 제작했다. 사실 새로운 프로젝트가 추가되거나 한다면 포트폴리오 사이트에도 반영을 해야하므로 현재 상태가 100% 완성이라고 볼 수 없지만..😅※ 3월의 기억 - https://hjinn0813.tistory.com/27 github.io 제작하기hjinn0813.tistory.com타이핑 애니메이션See the Pen text typing anima..

운세 보는걸 좋아하는 편인데 이번달 운세에 학업과 휴식을 적절히 병행해야 한다고 해서, 주말에는 항상 느긋하게 가벼운 작업만 하는 편이다. 지난 주말에는 컨디션도 좋지 않아서, 이력서만 수정하고 휴식했다.※ 이전 포스팅 - https://hjinn0813.tistory.com/857월 15일 월요일'회원가입' 페이지 제작 결정, 기본 구조와 디자인 작업→ 로그인 페이지에 아이디/비번 입력창이 있는데 회원가입 페이지가 없다는게 말이 안 되는거 같아서 만들었다.'로그인' 페이지에 '회원가입' 버튼 만들고 app.js에서 라우팅 설정, 디자인 완료→ '로그인' 페이지의 '확인' 버튼과 중요도를 다르게 설정해야해서 전체적인 버튼 디자인을 변경했다.→ 새로운 페이지가 만들어질 때마다 app.js에서도 라우팅 설정..

지난 주말동안 웹 버전 포트폴리오 페이지 보완하는데 집중하느라 이건 작업을 못했다.'라이브러리'와 '리뷰 상세보기' 라우팅 연결'리뷰 상세보기' 페이지에 들어갈 JSON 제작이렇게 간단하게 두 가지 작업만 완료했다. JSON 목데이터를 chatGPT 사용하지 않고, 실제로 내가 작성했던 리뷰를 긁어와서 수정하느라 시간이 약간 소요되었다.※ 이전 포스팅 - https://hjinn0813.tistory.com/847월 08일 월요일'리뷰 상세보기'에 들어갈 컴포넌트와 페이지 기본 구조 설정→ '라이브러리'에서 map() 메서드로 돌리고 있는 9개의 컴포넌트 중에 하나를 클릭하면, 해당 요소의 id값이 쿼리스트링으로 들어가서 화면에는 하나의 리뷰만 보여지도록 해야했고, 해당 기능은 useParams()를 사..

새싹 수업이 종강한지도 한 달이 훌쩍 지났다. 팀플이 3개가 있지만 직접 코딩을 했던 프로젝트는 2개 뿐이고, 이번달부터 새롭게 들어온 교육과정에서 개인 토이 프로젝트가 필수라고 하여 고민하다가 내 취미인 영화를 주제로 프로젝트를 시작했다. 글을 쓰는게 너무 좋아서 영화를 보고 썼던 리뷰가 500편은 넘는 것 같은데, "영화를 추천하면서 리뷰까지 같이 공유하는" 사이트는 많지만 "오직 리뷰만 기록하고 공유하는" 곳은 없다고 생각했고, 그래서 직접 만들어보기로 했다!😝수업에서는 요즘 HTML 같은 기초적인 부분 배우는 중이라, 강사님이 잘하는 분들은 수업 안 듣고 개인 프로젝트해도 된다고 해서 작업하다가 남겨보는 아주 간단한 기록!7월 3일 수요일사이트의 전체적인 디자인도 중요하지만, 개발자가 되려면 코..

3차 프로젝트와 관련한 마지막 주간기록.✍이번주에는 작업을 마무리하고, vercel로 배포하고 오류를 수정하고, 최종 발표와 시상까지 있었다.13일 월요일 - Day 54새벽부터 컨디션이 너무 안 좋아져서, 이런 상태로는 수업에 나가는게 힘들다는 판단을 내리고 얼른 리더님과 팀장님에게 연락했다. 집에서 노션 회의록에 실시간으로 업데이트 되는 회의 내용을 확인하고, 팀장님과 통화로 이번주 일정을 공유받았다. 프로젝트 마지막 주간이라 되도록이면 자리를 비우지 않았어야 했는데 아쉽다.💻 기본적인 작업은 끝난 상태여서, 이 날은 미세먼지 위젯의 세부 디자인과 날씨/미세먼지 위젯의 미디어쿼리를 수정했다. 디자인의 경우에는 결과가 '보통'인 경우에만 border가 출력되어야 하는데 3종 디자인 모두에 border..

현재 SeSAC 교육과정 3차 팀 프로젝트의 마무리 단계여서 해당 프로젝트에서 사용했던 기술들을 정리해보았다. 아직 실력이 부족해서 내가 맞게 설명하고 있는건지는 모르겠지만, 내가 아는 선에서 최대한 쉽게 설명해보려고 한다.※ 사용언어 - HTML, JS, React, SASS, Bootstrap 등※ 3차 프로젝트 github repo - https://github.com/treasure-2u/batDreamNot Found 페이지는 잘못된 URL에 대한 예외 처리를 의미한다. 문제가 생겼을 때, 직접 만든 페이지를 보여주는 것이 전체적으로 통일감이 있어서 좋다. 이번 팀플에서도 Not Found 페이지를 만들자고 했지만 다른 팀원들이 모두 바빠서, 위젯들의 기본 구조를 chatGPT로 해결하고 상대적..

현재 SeSAC 교육과정 3차 팀 프로젝트의 마무리 단계여서 해당 프로젝트에서 사용했던 기술들을 정리해보았다. 아직 실력이 부족해서 내가 맞게 설명하고 있는건지는 모르겠지만, 내가 아는 선에서 최대한 쉽게 설명해보려고 한다.※ 사용언어 - HTML, JS, React, SASS, Bootstrap 등※ 3차 프로젝트 github repo - https://github.com/treasure-2u/batDream미세먼지 위젯은 '서울 열린 데이터 광장'에서 제공하는 '서울시 권역별 실시간 대기환경 현황 API'를 통해 데이터를 받아서 제작했다. 해당 위젯 역시 날씨 위젯과 마찬가지로 컴포넌트 제작과정과 디자인 과정으로 나누어 작업을 진행했는데, 여기서는 받아온 데이터의 결과값에 따라 디자인이 다르게 보여지..

현재 SeSAC 교육과정 3차 팀 프로젝트의 마무리 단계여서 해당 프로젝트에서 사용했던 기술들을 정리해보았다. 아직 실력이 부족해서 내가 맞게 설명하고 있는건지는 모르겠지만, 내가 아는 선에서 최대한 쉽게 설명해보려고 한다.※ 사용언어 - HTML, JS, React, SASS, Bootstrap 등※ 3차 프로젝트 github repo - https://github.com/treasure-2u/batDream날씨 위젯은 Open Weather Map API에서 키를 발급받고 데이터를 불러와서 출력하는 '컴포넌트 제작' 과정과 SASS 스타일링 기법으로 디자인하는 과정으로 나누어서 진행했다. 디자인 관련 부분은 scss 확장자를 사용했기 때문에 특별하게 소개할 내용이 없어서, 컴포넌트 제작과정만 소개해보..

3차 프로젝트와 관련한 두번째 주간기록.✍쓰다보니 팀플 진행과정에 대한 회고와 정보처리기사 학습일지가 일대일 비율인거 같지만..😅5월 4~5일, 주말종강이 다가오며 바빠져서, 지난 금요일 수업 끝나고 팀장님의 제안으로 팀원 4인과 약속한게 있었다.→ 현재 팀원 모두 "팀플+a" 로 두 가지씩 진행 중이라 이도저도 안 되는 것 같으니, 평일에 팀플에만 전념할 수 있도록 주말에는 각자가 진행중인 '알파'를 실행 후 일요일 밤까지 인증하고, 만약 제 시간에 인증 못하면 벌칙 받기.모든 참가자가 동의해서, 나는 정보처리기사 공부기록을 인증하기로 했기 때문에 주말동안 마음 편하게 공부하고 인증했다.📚💻 프로젝트 작업도 소홀하면 안 될 것 같아서 틈틈이 날씨 API를 봤지만, 데이터를 불러와서 콘솔에 출력되는..