📌 TOY-PROJECT/2303 문답게시판 썸네일형 리스트형 📌 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에 동적으로 구현하는 방법이 막연했는데 이번 프로젝트로 많은 걸 배웠다. 자.. ⬆︎ 이전 1 다음
