코딩애벌레

https://www.notion.so/331e0e377a1e80238889cea7728ecd64?source=copy_link

https://www.notion.so/331e0e377a1e803388d0e23475baaa41?source=copy_link

https://www.notion.so/330e0e377a1e8043b166caa167b36afc?source=copy_link

Service Worker APIWeb에서 흔히 들어볼 수 있는 역할인데,→ 웹 응용 프로그램, 브라우저, 네트워크 사이의 프록시 역할을 한다. 의도는 여러가지 있지만, 그 중 오프라인 경험, 네트워크 요청 인터셉트, 서버 업데이트가 가능하다. 조사하게된 계기인 푸시 알림, 백그라운드 동기화 API로의 접근도 제공한다고 한다.*주의사항지원 브라우저의 보안 컨텍스트(HTTPS)에서만 사용할 수 있음. (+ localhost, 127.0.0.1)서비스 워커의 개념Javascript 파일의 형태를 갖고 있으며 출처와 경로에 대해 등록하는 이벤트 기반 워커다. (여기서 말하는 Worker는 Backend 에서 작업하는 Worker와 다르다. 처음에 같은건 줄 앎 ㅎㅎ..) 아래 표는 Web Worker, Ser..

오늘은 유진 코치가 전달해준 정처기 공부를 어떻게 할지 일정을 작성하고 진행해볼까 한다. 시험 날짜는 4월 18일 토요일 9시로 3시간 정도 예상된다고 한다.실기 공부 팁으로는 실기도 기출이 중요하다. 시간 관계상 어렵다면 최신 기준 2~3년 기출을 정리하고 시험에 응시하자.또한 프로그래밍 언어를 반드시 알아야 한다. 내가 아는건 Python이랑 Javascript인데.. Python 밖에 쓸데가 없군… 추가로 SQL가 중요하다고 한다.소프트웨어 생명 주기 (Software Development Life Cycle, SDLC)[1]프로젝트 계획 → [2]요구 분석 → [3]설계 → [4]구현 → [5]테스트 → [6]유지 보수폭포수 : 선형 순차적 개발 / 고전적, 전통적 개발 모형 / Step-by-s..

반년간 블로그 작성안한게 너무 웃기다. 하지만 그만큼 바빴다는거~ 오랜만에 찾아왔지만, 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 페이지를 재활용 해주어야 하는데, 실제 팝업..