코딩애벌레

반년간 블로그 작성안한게 너무 웃기다. 하지만 그만큼 바빴다는거~ 오랜만에 찾아왔지만, SSAFY수료를 해버렸다. 1년은 긴걸까 짧은걸까. 열심히 살았을까? 기억에 28일쯤에 구미 내려와서 1월 1일에 드론쇼가 동락공원에서 열린다고 해서 설렁설렁 카메라 들고가서 찍고온 기억. 그와중에 빛번짐 못잡는 초보의 역량을 보여준다.  프로젝트 기획 발표하면서 PPT가 날아가는 아찔한 경험을 했지만, 고난을 이겨내고 1등! 상품권은 추후 정처기 책이 된다.  사실 용도에 맞는 로봇을 만들어야하는데 재미로 스포츠카도 만들어보았다. 이때도 종합 1등을 했다. 도환이랑 상곤이랑 팀했었지?  화질이 조금 안좋지만 라이브에서 선정된 버킷리스트 였다! 음.. 저기서 지킨거는 2.5개정도 된 것 같다.  삼각대가 은근히 유용하..

Typescript는 굉장히 까다로운 친구로, Props로 데이터를 전달 받았다면 해당하는 데이터의 타입을 정의해주어야 사용가능하다. 이때 총 3가지 방법이 있는데, 동일하게 Generic(제너릭)을 사용한다. interface / type / 직접정의 하는 방법이다. 빠르게 살펴보도록하자. /////////////// App.tsx ///////////////import React from "react";import TodoList from "./components/TodoList";const App: React.FC = () => { // ts 구간 const todos = [{ id: "1", text: "Finish the course" }]; return ( // html 구간 ..

블로그를 보면 알겠지만 처음부터의 내 성장과정이 담겨있다. 알고리즘을 시작으로 Python ,Django, JavaScript, Vue 등 을 배우면서 또 프로젝트를 진행하고 마무리하면서 Web 애플리케이션을 구현하게 되었다. 걸음마부터 시작하려니 어려운 부분이 굉장히 많았으나 좋은 친구들과 교육 덕분에 끝까지 달려올 수 있었던 것 같다.  특히, 같이 공부했던 스터디 친구들에게 고마웠다. 살면서 스터디의 필요성을 갖지 않았는데, 같은 무리내에서 선의의 경쟁을하면서 짧은 기간 내에 실력이 많이 늘었던 것 같다. 현재 알고리즘은 쉬고있지만 최종적으로 골드2, SW역량은 A형을 취득하게 되었다. 알고리즘 스터디를 할 생각, 아니 어떻게 해야할 지 몰라 고민하고 있던 찰나에 내 이름을 스터디에 같이 넣어준 동..

문제는 앞서 말했던 Profile 페이지에서 carousel에 대한 삭제 이벤트가 진행 될 때, 마지막 carousel 요소가 삭제될 때 자동으로 바뀌어야하는데, 흰 화면이 나타나는 문제다.  증상을 살펴보면 중간에 있는 요소를 삭제 했을 때는 문제 없지만, 마지막 요소를 삭제했을 때는 다른 카드 페이지로 넘어가지 않는다. 반응성이 깨진건가 싶어서 Front와 Back을 나누어서 진행해봤다. 내가 만든 페이지에서는 로딩이 걸리지만, 실제로 웹을 구성할 때, pinia를 이용하여 Local 스토리지를 이용한다면 가장 빠른 반응을 보여 줄 수 있다. 내가 만든 페이지는 Back으로 요청을 보내고, 다시 데이터를 axios를 통해 호출한 다음 흩뿌려주기 때문에 1초 이상 걸리는 경우다.  당연히 web에 적용..

현재 UserProfileView.vue의 코드 길이는 무려 770lines에 달한다. 구성요소를 모두 한 페이지에서 전개했기 때문인데, 아래 Profile Page를 보면 구성요소가 무려 5가지가 있다.1. 프로필 정보2. Edit 버튼 및 dialog를 통한 정보 수정3. 사용자 금융 정보4. 꿀통에 담은 예금5. 꿀통에 담은 적금 근데 만들어진 페이지를 Refactoring 하니 불편한점이 조금 있더라. 예를들어 vue 에서 direct로 axios 요청을 보내는 경우가 많은데(1회용) 직접 분류해주어야한다. 물론 처음부터 코드를 나눠서 잘 짰으면 이런 일이 없을 것이고 유지보수도 더 편했을 것이다.. 먼저 carousel을 통해 접근 가능한 Detail 페이지를 재활용 해주어야 하는데, 실제 팝업..

사실 이틀이면 끝날 줄 알았다.. 누군들 알았겠는가 프로젝트의 코드가 잘못된 것이 많았다는 것을! 그래도 이렇게 리뷰하면서 고칠 수 있는 것도 행운인 것 같다. 다른 사람이 참고할 때 '얘네 야매네?' 라고 생각되는 것보다 훨씬 기분 좋다. 저번 시간에 발생된 버그 및 오류는 총 두가지며, 마무리 한다음 Detail Page Refactoring을 끝내려 한다. (물론 다른거 할거 많음!) 앞서 Detail 페이지에 대한 Refactoring은 List에서 불러오는 Detail (335 lines => 125 lines)Map에서 불러오는 Detail (284 lines => 136 lines)Recommend에서 불러오는 Detail (559 lines => 224 lines)Profile Page는 ..

이번엔 Saving(적금)을 해보자. Deposit(예금)과 동일하다고 생각할 수 있으나, 디테일 페이지에서 자유적립식과 정액적립식을 구분해놨기 때문에, 예금처럼 상품명 만으로는 해당 상품을 찾기 어렵다. 필요다면 Option의 데이터 정보에 자유적립인지 정액적립인지 구분하여 조건문을 통해 filter하거나 새로운 배열을 할당하면 된다. 하지만 도표는 양쪽 다 출력할 예정이기 때문에 결국 Detail을 dialog할 때는 같은 정보를 보여줄 예정이다. 즉! 적금과 똑같이 사용할 것이다. (실제 Detail 데이터는 도표기준으로 구분하지 않았다, List만 구분됨) 그리고 추가로 어제는 예상치 못했는데, dialog는 view(최상위 컴포넌트)에 변수가 존재하는데, 하위 컴포넌트에 OK 버튼이 존재하는 문..

배워야할 부분이 많지만, 진행했던 프로젝트에 대해 부족한 부분을 채우고 필요없는 부분을 다듬으면서 Code Refactoring을 해볼 예정이다. 1. Refactoring2. Component의 분리 (현재 View 14개, Component 7개)3. 무분별한 store 사용4. 중복 코드 및 미사용 코드 정리5. Profile 페이지에서 Detail 확인 시 스크롤 자동 하단 고정6. Profile 페이지에서 꿀통에 담은 상품 제거 시 버그 발생 디버깅하면서 느낀 것인데, pinia의 persist를 제거하고 하는 것이 오류가 덜 나는 것 같더라. 물론 로딩은 걸리지만 ㅎㅎ 왜 Component를 진작 사용하지 않았는가? 기능 구현이 우선이다고 생각하고 신경쓰지 않았던 부분이다. 처음에는 오히려 편..

GitHub - piaoria/HoneyMoneyContribute to piaoria/HoneyMoney development by creating an account on GitHub.github.com위 링크 클릭 시 개발한 Web github로 이동 기능에 대한 설명은 github에 게시되어있으니 궁금하신 분은 확인하시길! 추후 게시글로 코드리뷰 할 예정 페어 정하기 사실 이 부분은 어렵지 않았다. 앞선 기간동안 나랑 잘 맞을 것 같은 친구를 골라 놨었고, 프로젝트에 대한 의지를 확인했었기 때문에 3주전에 Pick 해놨다. 이왕 프로젝트 하는 거 상을 받을 수 있을 정도로 열심히 하고 싶었고, 나의 사람을 보는 안목은 틀리지 않는 듯 프로젝트 간 둘 다 미친듯이 했다. 신기했던 것은 페어를 정할 ..

이제 서론은 거의 쓰지 않을 것 같다. (바쁘자나~)computed(): 계산된 속성을 정의하는 함수: 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다: 읽기 속성(computed로 정의된 변수는 외부에서 변경 불가)을 띈다 위처럼 출력하기 위해 html에서 직접 삼항 연산자를 사용하는 방법도 물론 문제가 되지 않지만, 최대한 가시성 좋게 하기위해서는 연산은 따로 진행하고 출력만 할 수 있게 하는 것이 좋을 것이다. 또, 여러번 연산해야한다면 html 요소가 계속 길어지며 보기 좋지 않다. 이를 위한 방법이 두가지가 있다.지금까지 해왔던 함수 정의를 통해 변수를 직접 전달해주는 방법은 모두 알 것이다. 하지만 computed를 이용한다면 더 효율적이고 직관적인 ..