Dev_Ryomi

🔗배포링크 / 🔗gif test 배포링크작업기간: 2023.07.26 - 2023.08.04(2주) # 회고 좋은 기회로 GGNZ 이벤트 페이지를 제작하게 되었다. 개발에 앞서 Canvas를 학습하였지만, 역시나 쉽지 않은 작업이었다. gif 파일을 다루기가 쉽지 않아서 더욱 그랬다. 처음 계획대로 gif로 만들고 animated gif 형태로 저장하는 형태가 아닌 png로 레이어를 쌓아 customized Olchaeneez를 만들고 png 저장하는 형태가 되어 아쉬움이 많이 남는다. 현재는 sub domain을 따로 받아, gif로 작업할 수 있는 형태를 시도해보고 있는 중이다.  ## 기술적인 문제점 1 - canvas animated gif renderinngcanvas는 animated gi..

Github / 배포사이트 # 회고 - 2023.07.06 부트캠프 팀 프로젝트로 5인(back: 2, front: 3)이 작업했고 6주의 시간이 걸렸다. 처음 해보는 팀 프로젝트라 우여곡절도 많았고, 협업에 대해 무지했기에 발생한 이슈들도 많았지만, 값진 경험이었다.(덕분에 다음 프로젝트를 더 탄탄하게 시작할 수 있었다고 생각한다.) 처음 해보는 팀 프로젝트라 주변 지인 개발자분들에게 자주 조언을 구했고, 팀 프로젝트를 통해 사용해 보고 싶었던 협업 툴(Github issue카드로 작업 관리, Projects 생성, Dev log)을 사용해보고 평소 관심있었던 기능(DnD, Chart)을 구현할 수 있었던 좋은 기회였다. 비록 과정은 힘들었지만, 좋은 경험이었고 값진 시간이었다. ## 작업 내용- 초기..

🔗배포링크 🔗Github # 회고기획을 마친 후 4월 25일부터 개인프로젝트를 시작했다. 지난주 목요일(5/18)에 1차로 과제를 제출한 후, 이번주 월요일(5/22)일 부터 리팩토링하여 개인 프로젝트를 마무리했다. 주말은 개인적인 일이 있어, 주로 평일에 작업했다. 이번 프로젝트를 통해 배운건, '상태 관리'와 'data flow'의 중요성이다. 5/22 ~ 5/24 동안 로컬 스트로지를 사용해 데이터를 다루며 페이지가 정상적으로 동작하게 리팩토링 하였다. 하지만, 리팩토링을 마치고 나서 로컬스토리지를 사용해 데이터를 다뤄야 하는 이유에 대해 고민하게 되었다. 결국, 내가 로컬스토리지에 데이터를 저장하여 사용할 필요는 없었다. 해당 문제가 새로고침 문제라면, App.tsx에서 refresh 될 때 마다..

// 최종수정 23.04.22 페이지 바로가기 : https://zb-react-shop-ne5x.vercel.app # 회고 처음 프로젝트를 마주했을 때, '이틀이면 되겠네'라는 말도 안 되는 생각을 했다. 신입은 자신이 예상한 시간의 딱 3배가 걸린다던데 거의 그 정도 걸렸다. (여유롭게 주말에 미술관에 다녀왔는데... ^^) 어제(마감일) 과제를 제출하고 오늘 다시 동영상 녹화를 위해 페이지를 열어 보니 몇몇 에러가 있어 추가로 수정했다. 역시, 마음이 급하면 에러가 잘 안 보인다. 이번 과제는 React 와 Typescript를 사용한 첫 프로젝트였다. 강의를 들으며 typescript을 사용해 클론코딩을 하며 열심히 익혀 보려 했지만, 쉽지 않았다. 과제를 끝낸 지금도 부족함을 많이 느낀다. 부..

3일차에는 메인 페이지를 마무리 하고 각 카테고리 페이지를 만들었다. 제일 먼저 캐러셀을 다듬었다. 내가 만든 캐러셀의 3번째 식료품점 이미지는 샘플 페이지 이미지와 위치가 달라 글자가 잘 보이지 않았다. 그래서 이미지의 위치를 조정해서 문제를 해결했다. 물론, 문제를 어떻게 해결할지 방법을 찾는데 시간이 많이 걸렸다. 후... 다음으로 메인에 들어갈 상품 frame을 만들었다. 메인에 들어가는 상품 frame이 카테고리별 상품 frame과 동일한 구조를 사용하고 있어 하나의 컴포넌트를 만들어 재사용하였다. 다만, 메인의 상품 frame은 4개의 상품만 보여주므로 렌더링할 frame 수를 props로 받을 수 있게 처리했다. 그럼 숫자를 props로 받는 경우에는 데이터를 받아와 해당 숫자만큼의 fram..

어제(2일차)는 전날 만든 header와 footer를 마무리하고 캐러셀을 넣었다. 오전에 footer에 나머지 요소들을 넣은 후 배경색까지 넣으니 만족스러웠다. 다음으로 carousel 을 만들고자 했다. 하지만 React Responsive Carousel을 처음 사용해본터라 익숙하지 않아 또 우왕좌왕 했다. 오전에 해보려고 했지만 이번에도 interface에 익숙하지 않아 실패했다. 그러다 좀 쉬었다 하자는 생각에 리프레쉬 하고 다시 시도하니 캐러셀을 넣을 수 있었다. React Responsive Carousel 상세페이지에 들어가니 캐러셀이 받을 수 있는 props들을 상세하게 설명하고 있어 좋았다. 좀 쉬다가 다시 캐러셀을 마무리 하자는 생각에 점심 만찬을 즐겼다. 허리가 끊어질듯 아프길래 너..

오늘부터 부트캠프 React 미션인 React shop 만들기를 시작했다. 지난주부터 만들었어야 하는데 React와 TypeScript를 온전히 이해하지 못해 강의를 듣는다고 늦어졌다. 물론 지금도 온전한 이해를 한 건 아니다. 처음부터 난관이었다. CRA가 아닌 Vite를 처음 사용해 봐서 혼자 우왕좌왕했다. vite로 react/typescript 환경을 설치한 후에도 npm run start를 눌렀더니 동작하지 않아 당황 interface로 type 안 넣었다고 에러 떠서 당황 svg파일로 이미지 가져와야 하는데 webpack 폴더가 없어서 당황 (svg 파일 가져오는 걸로 씨름하며 시간을 너무 많이 썼다) 결과물이 너무 빈약해 아쉽긴 한데 오늘의 최선이다. 내일은 더 많이 해봐야지. 파이팅

부트캠프 리액트 미션을 진행하면서 svg 코드를 사용해 svg 이미지를 페이지에 넣어야 할 일이 생겼다. 물론 svg 파일을 import 해와 img의 src 속성에 넣어줄 수 있었다. import svgIcon from "../assets/cards/visa.svg"; const Practice = () => { return } 하지만 제공해준 페이지를 보니 svg 코드를 그대로 넣고 있어 괜히 나도 그렇게 하고 싶어졌다. 어차피 공부하면서 만드는 것이고 제출도 다음주 수요일 까지니 그냥 천천히 하기로 했다. 빨리 해보겠다고 chatGPT를 사용해보았지만, 알려준 대로 해봐도 에러만 반환했다. 그래서 그냥 구글링 했다. 여러 페이지를 보고 시도해보았지만, 다음 페이지가 제일 정확했다. Importing..

Github 설명 자바스크립트 강의를 수강하며, 클론코딩을 통해 학습한 강의 내용은 이해할 수 있었다. 하지만 배운 내용을 사용하여 스스로 기능을 구현하기에는 한계가 있다고 느꼈다. 그래서 학습한 내용을 복습한다는 생각으로 동일한 주제로 디자인하여 하나씩 구현해 보고자 시작하게 되었다. 그 첫 번째가 todo list이다. KPT(: Keep, Problem, Try) 버튼 이미지 넣기 : 별 버튼과 쓰레기통 버튼의 기능 구현이 잘 되지 않아 한참을 고생했다. 버튼 요소 내에 이미지를 넣었더니 버튼의 기능이 구현되지 않아서 이다. 오직 이미지와 버튼 사이의 공간을 클릭했을 때만 기능이 구현되었다. 해당 부분에 대해 구글링도 해보고 관련 강의도 다시 봤지만 해결되지 않아 조언을 구해 해결했다. let ta..

🔗 배포링크 # 회고 좋은 기회로 시니어 개발자와 협업할 기회를 가졌다. 리액트와 javascript를 사용해 개발했다. Udemy 강의를 들으며 혼자 공부해서 어떻게 개발해야하는지, 어떤 생각의 흐름을 가져야 하는지 몰랐는데, 이번 경험은 정말 값진 경험이었다. 예를들어 프로그래머스 문제를 풀고 있긴 하지만, 이를 코드에 언제 어떻게 적용해야 할지 몰랐다. 그래서 매번 hard coding 하고 있었는데, 시니어 개발자분께서 '언제 어떤 경우에 이런 메소드를 사용해야 하기 때문에 프로그래머스를 통해 javascript를 꾸준히 학습해야한다'며 조언해주셨다. 사실, 다들 프로그래머스 문제를 풀어야 한다기에 풀긴 했지만, 개발시에는 어떻게 써야 하는지 와닿지가 않았다. 이번 경험은 정말 머리를 한 대 맞는..