📌 TOY-PROJECT 썸네일형 리스트형 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) 5일 간의 솔로 프로젝트 마무리 : KPT 회고 Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) README 작성하기 Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) redux/toolkit(RTK) / 토스트 애니메이션 자연스럽게 구현하기 Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) RTK Query Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) 헤더 컴포넌트의 DropDown 메뉴 만들기 Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) Next.js 13 - StackoverFlow에 질문글을 올리다. Next.js 13과 redux/toolkit, styled-components 등으로 북마크 기능이 들어있는 쇼핑몰 앱을 구현한 프로젝트이며, 설명에 필요한 코드만 최소한으로 서술되었습니다. : (1) gitHub - README 및 전체 코드 보러 가기 (2) 프로젝트 요구 명세서 보기 (해당 프로젝트 첫 포스팅) GitHub - Doyu-Lee/COZ-shopping: This project consists of a main page, a product list page, and a bookmark page, offering respons This project consists of a main page, a product list page, and a bookmark page, offering r.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) git 전략 : 작업 브랜치 생성 이번 프로젝트는 실제 프로젝트를 진행하는 것처럼 작업 브랜치를 분기하여 진행하였다. 즉, main 브랜치에 직접 코드를 작성하거나 push하는 행위는 절대 금지 git 전략 개념 다양한 git 전략이 있지만 아래와 같은 그림에서의 "Gitflow" 전략을 간단히 정리해보았다. 브랜치를 특정 목적에 맞게 구성하고, 병합 과정을 통해 개발과 배포를 관리하는 방식으로 운영한다. 각각의 브랜치는 특정 작업 단계나 기능 구현, 버그 수정 등을 담당한다. 팀 단위의 협업이나 지속적인 배포에 유용하며, 프로젝트의 안정성과 효율성을 높일 수 있다. 어떠한 제품의 요구 발생시 하나의 레포지터리가 생성되며 그와 동시에 master(이하 main) branch 생성 Main branch가 생성되면 바로 개발을 위한 deve.. 📌 TOY-PROJECT/2305 쇼핑몰 웹앱 (북마크 기능) 솔로 프로젝트 시작 : 스크럼을 통한 프로젝트 계획 오늘부터 5일 동안 진행되는 솔로 프로젝트는 프로젝트 요구사항 분석, 업무 단위 분할, 애자일(Agile) 방법론 적용을 통한 프로젝트 가시화, 그리고 코드 작성을 통한 구현 등 프로젝트 관리 및 개발의 전반적인 흐름을 경험할 수 있는 시간이다. 실제로 페어와 함께 요구사항 명세서를 함께 분석하여 업무 단위를 쪼개는 것부터 figma 파일을 받아 코드를 통한 구현과 페어와 담당 멘토 분의 코드리뷰까지 A부터 Z까지 배운 것을 총동원하여 하나의 결과물을 만드는 스프린트이다. 프로젝트를 진행하면서 기록할 만한 것들을 정리하여 블로그에 적어보았다. 1. 프로젝트 요구사항 분석 소프트웨어가 해결해야 할 문제와 고객의 요구사항을 파악하고 정의하는 단계 개발할 소프트웨어의 기능과 제약 조건, 목표 등을 소프트웨어 .. 📌 TOY-PROJECT/2303 문답게시판 [연습 프로젝트] 문답 게시판_서버 개발 1. fetch로 서버 연결 2. GET : 전체 데이터 조회 3. POST : 새로운 글 생성 4. DELETE : 특정 글 삭제 결과물 GitHub PR 서버 서버 쪽은 정말 간단하게 끝났다... 재밌어! 폴더 구조 1. my-agora-states-server my-agora-states-server/app.js 는 서비스에 필요한 미들웨어와 웹 서버를 실행하는 코드가 작성되어 있다. 2. router my-agora-states-server/router/ 안에는 discussion API 요청을 수행하는 라우터가 작성되어 있다. 작성된 라우터 내용을 통해 API 요청을 받을 수 있다. 3. controller my-agora-states-server/controller/ 안에는 정의된 API 요청.. 📌 TOY-PROJECT/2303 문답게시판 [연습 프로젝트] 문답 게시판 _ pagination & local storage 코드 분석 처음에는 뭐가 뭔지 이해가 하나도 안 갔던 pagination과 local storage를 통한 게시판 기능 구현. 하루에 한 번씩 들여다 보니 어느 순간 이해가 되어 정리된 것들을 블로그에 옮겨본다. pagenation과 local storage 원리를 코드와 함께 하나하나 뜯어서 정리해보겠다. (우걱우걱) 초기 세팅 (변수 data) // console.log(agoraStatesDiscussions); let data; // 앞으로 사용할 data 변수 선언 const dataFromLocalStorage = localStorage.getItem("agoraStatesDiscussions"); // 아고라더미데이터 가져오기 if(dataFromLocalStorage) { // 만약 localStor.. 📌 TOY-PROJECT/2303 문답게시판 [연습 프로젝트] 문답 게시판_클라이언트 : 페이지네이션 등 결과물 ** 반응형 아님 (모니터 권장) 수정 할 것 페이지네이션 (수정 완료) 페이지 나누기 (수정 완료) + 전반적인 코드정리와 리팩토링 (수정 완료) 답변 렌더링 (취소) 배치 & 디자인 사용자 경험을 고려하여 컴포넌트 배치를 바꿔보았다. 이제 display: flex는 껌이구나! clear localStorage 로컬 데이터를 비우는 버튼을 만들어주었다. 페이지네이션 더보기 // index.html을 열어서 agoraStatesDiscussions 배열 요소를 확인하세요. console.log(agoraStatesDiscussions); let data; const dataFromLocalStorage = localStorage.getItem("agoraStatesDiscussions"); if .. 📌 TOY-PROJECT/2303 문답게시판 [연습 프로젝트] 컴포넌트(component) 만들기 컴포넌트란? 컴포넌트는 다양한 분야에서 여러 문맥에 따라 사용되기 때문에, 한 마디로 정의하는 것은 쉽지 않다. 디자이너나 PM에게는 “하나의 역할을 하기 위해 모은 디자인 요소”가 UI 컴포넌트고, 프론트엔드 개발자에겐 "하나의 기능 구현을 위한 여러 종류의 코드 묶음"이 컴포넌트이다. 신기하게도 프론트엔드 개발자 입장에서 코드 컴포넌트를 열심히 만들고, 디자이너 입장에서 열심히 UI 컴포넌트를 만들다 보면 비슷하게 맞아 떨어지는 경우가 많다. 유저가 편하게 사용할 수 있는 애플리케이션을 제작해야 하기 때문에, 자연스럽게 기능 위주로 코드와 디자인이 분류되기 때문이다. 아예 디자이너와 프론트엔드 개발자가 합심해서 하나의 완성된 애플리케이션 제작을 위한 디자인 시스템을 만들기도 한다. 이런 점들을 종합해.. 📌 TOY-PROJECT/2303 문답게시판 [연습 프로젝트] 나만의 아고라 스테이츠 만들기 결과물 ** 반응형 아님 (모니터 권장) HTML 삽입 미리보기할 수 없는 소스 추가 기능 (기본 + 심화 기능은 아래 각각 서술) 새로운 글을 쓸 때마다 프로필 사진이 랜덤으로 바뀐다 (이 경우 우리 집 털뭉치 사진 😻) 추가 디자인 포인트 뉴모피즘 컨셉을 적용 제목에 다양한 그림자를 동적으로 구현하여 마우스를 올릴 때 그림자가 쏙 들어감 움직이는 배경 구현 배포링크 : https://doyu-lee.github.io/agara_states/ 참고한 사이트 배열 랜덤 뽑기 마우스 오버할 때, 그림자 이동하기 배운 점 (엄청나다) 이때까지 배운 전반적인 것들을 복습하고, 응용할 수 있었던 소중한 기회였다. 특히 데이터들을 HTML에 동적으로 구현하는 방법이 막연했는데 이번 프로젝트로 많은 걸 배웠다. 자.. 📌 TOY-PROJECT [Python] 크롤링하기 크롤링이란? 네이버 영화랭킹을 예시로 들자면 별점과 함께 순위의 이름을 가져오는 것 (엄밀히 말하면 스크래핑이라고 말한다. 혼용해서 씀) 구글, 네이버의 검색엔진이 내 사이트를 퍼가는 행위 https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303 랭킹 : 네이버 영화 영화, 영화인, 예매, 박스오피스 랭킹 정보 제공 movie.naver.com 네이버 영화랭킹의 순위, 영화명, 별점을 들고와보자. 크롤링 기본 세팅 bs4 패키지 설치 후 아래 코드 입력 이미 가져온 것을 가지고 솎아내는 것이 크롤링이다. 중요한 것은 다음과 같다. 1. 요청을 하는 거 (request 패키지) 2. 요청돼서 가지고 온 html 중 원하는 정보를 솎아내.. ⬆︎ 이전 1 다음
