티스토리

이준희 개로그

검색하기

블로그 홈

이준희 개로그

ejunyang.tistory.com/m

ejunyang 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[프로젝트] Nexj.js 리뷰 페이지네이션 구현하기 최종 프로젝트 웹 ui이를 만들면서 모바일에선 없던 페이지네이션 기능이 생겼다. 좋아요 버튼부터 페이지네이션 기능까지 한번도 구현해보지 못했던 기능인데 이번 최종 프로젝트 때 뭔가 해보고싶었던 기능들은 다 해보는 것 같다. [React] Pagination 구현하기프로젝트를 하면서 Pagination이 필요해 구현해 보기로 했다. 찾아보니 라이브러리도 여러 개 있던데 머리도 쓸 겸 그냥 직접 구현해 보기로 했다. Pagination의 동작 구조 전반적인 동작 구조는 네이imdaxsz.tistory.com [리액트] Tanstack Query 쿼리취소, 페이지네이션, 무한스크롤1. Query Cancellation대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진.. 공감수 1 댓글수 0 2024. 8. 16.
[프로젝트] 선택삭제 forEach ? map ? 프로젝트를 하면 할수록 내가 맡은 기능에 빈틈이 보여 계속 수정하게된다. 에러로직이나 선택한 상품이 없는 하단에 상품 개수가 보인다던가. 특정 상품만 체크하고 수량을 올렸더니 체크가 모두 활성화된다던가 이런 빈틈들이 잘보이고 유저테스트 이후로 기능 구현을 섬세하게 해야한다는게 얼마나 중요한지 뼈저리게 느꼈다ㅎ 오늘은 체크한 상품들을 선택 삭제하는 기능 구현을 해보려고한다!! DeleteButton.tsx선택 삭제 버튼을 따로 만들어주었다. 선택 삭제를 염두해두고 상품 삭제하는 로직이 있는 커스텀 훅을 만들어놓아서 코드를 간단하게 짤 수 있었다. 여기서 마주친 문제.. 처음 코드를 쓸 때 map을 사용했었다.import { useDeleteProduct } from '@/hooks/localFood/.. 공감수 0 댓글수 0 2024. 8. 9.
[프로젝트] supabase 여러 테이블 데이터 한번에 가져오기 적용 아래 코드는 디테일 페이지에서 특정 상품의 데이터를 가져오는 부분이다. 원래는 상세 정보와 리뷰 탭이 없었는데 UT를 진행하면서 리뷰가 있었으면 좋을 것 같다는 피드백이 많아서 구현하게 되었다. UT를 해볼 기회는 없었는데 이번에 해보게 되어서 너무 좋았다(?) 피드백을 받고 수정하는데 테스트 전보다 완성도 높은 작업물이 나올 것 같다.const { data: food, isPending, error } = useQuery({ queryKey: ['localfood', id], queryFn: async () => { const { data, error } = await supabase .from('local_food') .select.. 공감수 0 댓글수 0 2024. 8. 8.
[프로젝트] Next.js로 장바구니 구현하기 - (5) [프로젝트] Next.js 장바구니 구현하기 - (4)가현님 덕에 최고심에 빠져버렸다.. 채김져.. 미루고 미루던 삭제 구현하기. 그래도 수량 버튼을 useMutation으로 처리하면서 힌트를 얻어서 삭제도 useMutation을 통해 데이터를 업데이트하려고 한다.ejunyang.tistory.com 기존 구조삭제까지 모두 완료해서 체크 상품만 결제 되도록 해보려고한다. 처음엔 체크 전에도 장바구니에 담긴 상품의 결제금액이 바로 브라우저에 보였는데 체크 전까진 0원으로 보이도록 하려고한다. 처음 구조는 아래와 같다. CartList는 장바구니 테이블을 보여주는 페이지이다. 그 아래 DataTable과 CartFixedButtons를 임포트하고 있는데 여기서 내가 사용한 shadcn의 데이터 테이블 컴포.. 공감수 1 댓글수 0 2024. 8. 5.
[프로젝트] Next.js에서 Swiper 적용하기 🔗 swiper API Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com 설치yarn add swiper Import8버전 이하는 import의 경로가 다를 수 있으니 확인해봐야한다. 가장 최신 버전은 아래와 같다.import { Swiper, SwiperSlide } from 'swiper/react'; module importimport { Pagination } from 'swiper/modules';더보기Virtual - 가상 슬.. 공감수 0 댓글수 0 2024. 7. 31.
[프로젝트] Next.js 장바구니 구현하기 - (4) 가현님 덕에 최고심에 빠져버렸다.. 채김져.. 미루고 미루던 삭제 구현하기. 그래도 수량 버튼을 useMutation으로 처리하면서 힌트를 얻어서 삭제도 useMutation을 통해 데이터를 업데이트하려고 한다. 🧺 장바구니 1단계 [프로젝트] Next.js 장바구니 구현하기 - (1)이번주 월요일부터 개발작업에 들어갔다. 와이어프레임이 거의 나와서(혜원님의 열일) 개발을 바로 시작할 수 있었다. 내가 맡은 기능은 아래와 같다. 우선 월요일에 특산물 전체보드와 상세페ejunyang.tistory.com🧺 장바구니 2단계 [프로젝트] Next.js 장바구니 구현하기 - (2)장바구니에 담은 상품 수량 추가/감소 기능 구현하던 중 추가하면 아래 결제 금액도 변경이 되어야하는데 변경이 되지 않고 새로고침.. 공감수 1 댓글수 0 2024. 7. 30.
[프로젝트] Next.js 장바구니 구현하기 - (3) 수량을 누르면 총 결제금액이 오르는 것까지 구현했다. 근데 수량 버튼을 눌렀을 때 좀 느리게 브라우저에 반영되어서 optimsitic update로 구현해보려고한다. [프로젝트] Next.js 장바구니 구현하기 - (2)장바구니에 담은 상품 수량 추가/감소 기능 구현하던 중 추가하면 아래 결제 금액도 변경이 되어야하는데 변경이 되지 않고 새로고침해야 변경이 되었다.. useState로 화면에 바로 렌더링되도록ejunyang.tistory.com Optimistic update(낙관적 업데이트)말 그대로 낙관적이다. 서버에 요청을 보내고 됐겠지~~~하고 화면에 적용해버리는 것. 서버 요청이 정상임을 가정하고 더 나은 UX를 제공할 수 있다. 예시로 좋아요 버튼을 구현할 때 많이 사용한다. 시간이 걸린.. 공감수 1 댓글수 0 2024. 7. 28.
[프로젝트] Next.js 장바구니 구현하기 - (2) 장바구니에 담은 상품 수량 추가/감소 기능 구현하던 중 추가하면 아래 결제 금액도 변경이 되어야하는데 변경이 되지 않고 새로고침해야 변경이 되었다.. useState로 화면에 바로 렌더링되도록 했는데 먹히질 않았다.. 열받아서 41번이나 눌러본 건에 대하여. 파일구조장바구니 ui는 shadcn ui - Data Table을 사용했다. 공식문서에서 말하는대로 컬럼 컴포넌트와 테이블 컴포넌트를 분리해서 만들었다. 근데 분리해서 만들었더니 props 전달에 문제 발생.. DataTable이 CartList 컴포넌트 안에 있었기 때문.📦cart ┣ 📂_components ┃ ┣ 📂data-table ┃ ┃ ┣ 📜CountButton.tsx ┃ ┃ ┣ 📜Data-table-column-header.ts.. 공감수 0 댓글수 0 2024. 7. 25.
[프로젝트] Next.js 장바구니 구현하기 - (1) 이번주 월요일부터 개발작업에 들어갔다. 와이어프레임이 거의 나와서(혜원님의 열일) 개발을 바로 시작할 수 있었다. 내가 맡은 기능은 아래와 같다. 우선 월요일에 특산물 전체보드와 상세페이지를 대충 끝냈고, 화요일에 피그마에 나와있는대로 섬세하게 ui를 조정했다.특산물 판매 전체 보드특산물 상세페이지장바구니메인페이지 대망의 장바구니 .. 회원가입 후 쿠폰을 𖤐발급𖤐 해줘서 장바구니에 담은 상품을 결제할 때 사용해야한다.(무조건) 쿠폰함을 따로 만들어 선택하는 것이 어떠냐는 의견이 나왔지만 .. 내가 생각해도 그것이 사용자 입장에서 너무 좋겠지만 .. 시간대비 효율이 너무 떨어질 것 같았다.. 우리한테 남은 시간이 그렇게 많지 않기 때문에 추후 선택 사항으로 남겨놓았다. 근데 뭔가 하면 할수록........ 공감수 0 댓글수 0 2024. 7. 24.
[프로젝트] Nextjs 프로젝트 생성, supabas 타입 지정 Next.js 프로젝트 생성npx create-next-app@latest supabase 테이블 생성 superbase clientyarn add @supabase/supabase-js 📁 utils / 📁 supabase / client.tsimport { createBrowserClient } from '@supabase/ssr'export function createClient() { return createBrowserClient( process.env.NEXT_PUBLIC_SUPABASE_URL! as string, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! as string )}export default supabase; supabas.. 공감수 0 댓글수 1 2024. 7. 22.
[프로젝트] Next.js 심화 프로젝트 (2) - 기획편 [프로젝트] Next.js 심화 프로젝트 (1) - 기획편사전 기획 - 마인드맵 선정 주제각 지역별 전통 시장을 소개하고 특산물을 판매하는 웹사이트를 제작하기로 했다. 레퍼런스 리서치 페이지별 세부 기능ejunyang.tistory.com 기능 선정 이번에 맡은 기능은 아래와 같다.메인페이지특산물 전체 보드 페이지특산물 디테일 페이지장바구니선택사항 => 체크한 상품만 결제 페이지로 넘어가기실시간 채팅을 구현해보고싶었는데 사다리타기에서 졌다.. 하지만 맡으신 혜미님은 훨씬 더 잘 구현하실 것 같다 넘 든든한 팀원,, 실시간 채팅 기능은 개인 프로젝트 때 적용해보아야겠다! [프로젝트] 공공데이터포털 API 가져오기심화 프로젝트 주제로 전통시장을 홍보하는 웹사이트를 구현하기로 했다. 원래는 공공데이터.. 공감수 0 댓글수 0 2024. 7. 19.
[프로젝트] 공공데이터포털 API 가져오기 심화 프로젝트 주제로 전통시장을 홍보하는 웹사이트를 구현하기로 했다. 원래는 공공데이터포털에 '전통시장표준데이터규격' api를 사용하려고 했는데 계속해서 SERVICE KEY IS NOT REGISTERED ERROR 이라는 오류가 떴다. 인증키를 재발급 받아보기도하고, 인코딩된 키값을 넣어 호출하면 해당 키값이 한번더 인코딩되어 온다고해서 decodeURIComponent() 메서드를 사용해서 디코딩 작업을 했는데도 오류가 사라지지 않았다.. 공공데이터 키값으로 해당 에러를 경험한 사람이 많아서 우선은 구글에 나오는 방법들로 시도해봤지만 에러가 고쳐지지 않아 공공데이터포털에 문의를 넣은 상태이다. 키 값의 문제가 아니라고 하면 에러 이유에 대해서 더 알아봐야할 것 같다.그렇게 돌고 돌아 다른 api 를.. 공감수 0 댓글수 0 2024. 7. 18.
[프로젝트] Next.js 심화 프로젝트 (1) - 기획편 사전 기획 - 마인드맵 선정 주제각 지역별 전통 시장을 소개하고 특산물을 판매하는 웹사이트를 제작하기로 했다. 레퍼런스 리서치 페이지별 세부 기능 공감수 0 댓글수 0 2024. 7. 17.
[팀프로젝트] 리액트로 뉴스피드 웹사이트 제작하기 - 마이페이지(2) 🔗 마이페이지(1) [팀프로젝트] 리액트로 뉴스피드 웹사이트 제작하기 - 마이페이지(1)🔗 사전기획 [팀프로젝트] 리액트로 뉴스피드 웹사이트 제작하기 - 사전기획리액트로 첫 팀프로젝트가 시작됐다. 뭔가 프로젝트다운 프로젝트를 하는 것 같다. 인스타그램이나 페이스북, 블ejunyang.tistory.com ✏️ 내가 쓴 게시글 불러오기로그인한 아이디와 같은 유저 아이디를 가진 데이터의 모든 정보를 posts 테이블에서 가져온다. const { data: postData, error: postError } = await supabase .from('posts') .select('*') .eq('user_id', userData.email); setP.. 공감수 0 댓글수 0 2024. 6. 25.
[팀프로젝트] 리액트로 뉴스피드 웹사이트 제작하기 - 마이페이지(1) 🔗 사전기획 [팀프로젝트] 리액트로 뉴스피드 웹사이트 제작하기 - 사전기획리액트로 첫 팀프로젝트가 시작됐다. 뭔가 프로젝트다운 프로젝트를 하는 것 같다. 인스타그램이나 페이스북, 블로그 같이 게시글을 쓰고 읽고 수정하고 삭제할 수 있는 뉴스피드 웹사이트를ejunyang.tistory.com 마이페이지 구현마이페이지에 필요한 기능을 정리해보았다.1. 로그인한 사용자의 데이터 가져오기 => id, nickname, 프로필 이미지2. 사용자가 쓴 게시글 데이터 가져오기3. 사용자가 좋아요 누른 게시글 데이터 가져오기4. 사용자가 저장한 북마크 게시글 데이터 가져오기 컴포넌트 분리아래와 같이 컴포넌트를 나누었다. 사용자 데이터 가져오기 준혁님께서 Auth.api 를 만들어주셔서 getUse.. 공감수 0 댓글수 0 2024. 6. 18.
Rendered more hooks than during the previous render. 👾 오ㅗ류지출내역리스트 코드를 작성하다 마주한 에러이다. 한참 고민하다가 if문 구문 순서를 바꾸어 보았다.const ExesList = () => { const { selectedMonth } = useContext(ExpenseContext); const { userInfo } = useContext(AuthContext); const { data: expenses = [], isPending, error, } = useQuery({ queryKey: ["expenses"], queryFn: getExpense, }); const filteredExpenses = userInfo ? expenses.filter( (exe) => exe.mont.. 공감수 0 댓글수 0 2024. 6. 17.
[팀프로젝트] 리액트로 뉴스피드 웹사이트 제작하기 - 사전기획 리액트로 첫 팀프로젝트가 시작됐다. 뭔가 프로젝트다운 프로젝트를 하는 것 같다. 인스타그램이나 페이스북, 블로그 같이 게시글을 쓰고 읽고 수정하고 삭제할 수 있는 뉴스피드 웹사이트를 구현하는 프로젝트이다. 그리고 처음으로 서버를 사용해서 작업한다!! supabase를 사용하는데 프론트엔드 애플리케이션에 백엔드 서비스를 제공하기 위해 사용하는 모델이다. 와이어프레임전직 웹 퍼블리셔 + 디자인을 했었던 터라 디자인은 모두 내가 맡아서 진행했다. 어떤 뉴스피드를 할까 의견이 많이 나왔는데 1. 크림같은 중고거래 웹사이트, 2. 코디한 옷 공유하는 사이트, 3. 아이스크림 후기 공유하는 사이트 세가지가 나왔다. 우리 팀명이 구구콘이라 3번으로 탕탕탕ㅋㅋㅋㅋ 아이스크림 후기를 공유? 뭔가 생소할 수 .. 공감수 1 댓글수 0 2024. 6. 13.
[리액트] 개인 지출 관리 사이트 맹들기 - RTK🐢 이제 마지막 ! context 에 이어 리덕스 툴킷 라이브러리로 전역상태 관리하기! 📌 Context로 만든 지출 관리 사이트https://ejunyang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EC%9D%B8-%EC%A7%80%EC%B6%9C-%EA%B4%80%EB%A6%AC-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%B9%EB%93%A4%EA%B8%B0-Context%F0%9F%90%A2 [리액트] 개인 지출 관리 사이트 맹들기 - Context🐢props-drilling에 이어 context로 props를 전달해서 기존 기능들이 정상적으로 작동되게 만들어보자!!🔥 📌 props-drilling으로 만든 지출.. 공감수 1 댓글수 0 2024. 6. 10.
[리액트] 개인 지출 관리 사이트 맹들기 - Context🐢 props-drilling에 이어 context로 props를 전달해서 기존 기능들이 정상적으로 작동되게 만들어보자!!🔥 📌 props-drilling으로 만든 지출 관리 사이트https://ejunyang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EC%9D%B8-%EC%A7%80%EC%B6%9C-%EA%B4%80%EB%A6%AC-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%B9%EB%93%A4%EA%B8%B0%F0%9F%90%A2 context > redux 순으로 상태 관리를 변경해가며 구현해야" data-og-host="ejunyang.tistory.com" data-og-source-url="https://ejun.. 공감수 1 댓글수 0 2024. 5. 31.
[리액트] 개인 지출 관리 사이트 맹들기🐢 세번째 개인 프로젝트이다. 리액트로는 두번째 개인 프로젝트! 간단한 개인 지출 관리 사이트를 만들어보자!!🐢이번 과제는 props-drilling > context > redux 순으로 상태 관리를 변경해가며 구현해야한다. 과제를 진행하면서 props-drilling의 단점과 전역 상태 관리 라이브러리의 장점을 이해하도록 하려는 취지 같았다. 결론적으론 전역 상태 라이브러리를 사용하면 props-drilling 이슈를 해결할 수 있다는 것만큼은 제대로 알았다. 와이어 프레임 참고로 준 프로젝트 완성본은 맨 위에 입력 폼이 있는데 디자인은 달리 들어가도된다고 해서 따로 디자인하고 작업했다. 아래와 같이 컴포넌트 분리를 했고 react-router-dom으로 페이지 분리를 먼저 해주려고 한다. 컴.. 공감수 1 댓글수 0 2024. 5. 30.
[리액트] 리액트로 ToDoList 만들기 - 토글 기능 https://ejunyang.tistory.com/entry/PP-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-ToDoList-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%82%AD%EC%A0%9C-%EA%B8%B0%EB%8A%A5 [P.P] 리액트로 ToDoList 만들기 - 삭제 기능https://ejunyang.tistory.com/entry/PP-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-ToDoList-%EB%A7%8C%EB%93%A4%EA%B8%B0 [P.P] 리액트로 ToDoList 만들기 - UI구현, 리스트 추가또 다른 프로젝트가 시작됐다 ㅎ 저번주 금요일에 리액트ejunyang.tistory.com UI 구현Todo 추가 하.. 공감수 1 댓글수 0 2024. 5. 20.
[리액트] 리액트로 ToDoList 만들기 - 삭제 기능 https://ejunyang.tistory.com/entry/PP-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-ToDoList-%EB%A7%8C%EB%93%A4%EA%B8%B0 [P.P] 리액트로 ToDoList 만들기 - UI구현, 리스트 추가또 다른 프로젝트가 시작됐다 ㅎ 저번주 금요일에 리액트 강의가 발제 됐는데 자바스크립트 보다 훨씬 재밌고, 뭔가 이해가 더 잘 되는것 같다(?) 자바스크립트 라이브러리 아닌가..? 강의 듣는ejunyang.tistory.com UI 구현Todo 추가 하기Todo 삭제 하기Todo 완료/취소 상태 변경하기 (진행중 ↔ 완료) 기능 구현제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 in.. 공감수 1 댓글수 0 2024. 5. 17.
[리액트] 리액트로 ToDoList 만들기 - UI구현, 리스트 추가 또 다른 프로젝트가 시작됐다 ㅎ 저번주 금요일에 리액트 강의가 발제 됐는데 자바스크립트 보다 훨씬 재밌고, 뭔가 이해가 더 잘 되는것 같다(?) 자바스크립트 라이브러리 아닌가..? 강의 듣는데 이해가 잘되서 재밌던 적은 처음이었다 이게 얼마나 갈까?ㅎㅎ UI 구현Todo 추가 하기Todo 삭제 하기Todo 완료/취소 상태 변경하기 (진행중 ↔ 완료) 기능 구현제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성해주세요.[삭제하기] 버튼을 클릭하면 Working 또는 Done 에 있는 것과 상관없이 삭제처리가 되도록 해주세요.Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소.. 공감수 0 댓글수 0 2024. 5. 16.
[자바스크립트] 바닐라JS 캐러셀 구현하기 - TMDB 데이터 사용 🔗 이전 삽질https://ejunyang.tistory.com/entry/TP-%EB%B0%94%EB%8B%90%EB%9D%BCJS%EB%A1%9C-%EC%BA%90%EB%9F%AC%EC%85%80%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 [T.P] 바닐라JS로 캐러셀기능 구현하기🔗 레퍼런스https://www.wavve.com/ Wavve(웨이브)세상 얕은 콘텐츠부터 세상 딥한 콘텐츠까지 JUST DIVE! Wavvewww.wavve.com ✅ 구현 사항1. 한 눈에 데이터 3개 노출하기 (swiper-slide)2. 버튼으로 슬라이드ejunyang.tistory.com ✅ 구현 사항1. 한 눈에 데이터 3개 노출하기 (swip.. 공감수 0 댓글수 0 2024. 5. 3.
[자바스크립트] 바닐라JS로 캐러셀기능 구현하기 🔗 레퍼런스https://www.wavve.com/ Wavve(웨이브)세상 얕은 콘텐츠부터 세상 딥한 콘텐츠까지 JUST DIVE! Wavvewww.wavve.com ✅ 구현 사항1. 한 눈에 데이터 3개 노출하기 (swiper-slide)2. 버튼으로 슬라이드 동작 구현하기 (swipe-button-next / swipe-button-prev) html .. 공감수 0 댓글수 1 2024. 5. 2.
[자바스크립트] TMDB api 사용해 영화 검색 기능 구현 https://ejunyang.tistory.com/entry/PP-TMDB-api-%EC%82%AC%EC%9A%A9%ED%95%B4-%EC%98%81%ED%99%94-%EB%AA%A9%EB%A1%9D-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0 [P.P] TMDB api 사용해 영화 목록 가져오기https://ejunyang.tistory.com/entry/PP-TMDBThe-Movie-DB-api-%EC%82%AC%EC%9A%A9 [P.P] TMDB(The Movie DB) api 사용🚩 영화 검색 사이트 구현 Javascript과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이ejunyang.tistory.com ✅ 필수 사항1. jQuery 라이브러.. 공감수 0 댓글수 0 2024. 4. 30.
[자바스크립트] TMDB api 사용해 영화 목록 가져오기 https://ejunyang.tistory.com/entry/PP-TMDBThe-Movie-DB-api-%EC%82%AC%EC%9A%A9 [P.P] TMDB(The Movie DB) api 사용🚩 영화 검색 사이트 구현 Javascript과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다. 영화정보 오픈API인 TMDB(The Movie DB)를 사용합니다. TMDB API문서 https://devejunyang.tistory.com ✅ 필수 사항1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기3. 영화정보 카드 리스트 UI 구현- 카드에는 title(제목), overview(내용.. 공감수 0 댓글수 0 2024. 4. 24.
[자바스크립트] TMDB(The Movie DB) api 사용 🚩 영화 검색 사이트 구현Javascript과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다.영화정보 오픈API인 TMDB(The Movie DB)를 사용합니다.TMDB API문서 https://developer.themoviedb.org/reference/intro/getting-started Getting StartedWelcome to version 3 of The Movie Database (TMDB) API. This is where you will find the definitive list of currently available methods for our movie, tv, actor and image API.developer.themoviedb... 공감수 0 댓글수 0 2024. 4. 22.
[프로젝트] 웹기획 - 와이어 프레임 구성 🦴 와이어 프레임이란?간단한 모양만으로 인터페이스를 시각적으로 묘사한 것이다.와이어프레임은 페이지 요소의 구성방식, 페이지에 표시될 내용, 인터페이스의 작동 방식 을 설명하는데 사용된다. 와이어 프레임은 프로젝트 개발에서 매우 중요한 과정 중 하나이다. 어떤 레이아웃에 따라 구성할 것인지 포함되는 주요 기능은 무엇인지 등을 최대한 단순하게 확인하고 의견을 나눌 수 있는 기준이 된다. 회사에 다닐 때는 웹 디자이너분이 피그마로 와이어 프레임 + 디자인까지 전달해주셔서 직접하는 일은 없었는데캠프를 시작하면서 팀플 첫 작업이 와이어 프레임이었다. 나름 찾아보면서 작업했는데 매 프로젝트를 진행하면서더 섬세하고 구체화할 수 있을 것 같다. ✅ 와이어 프레임 기본 양식 1. 타이틀화면의 제목과 url,.. 공감수 0 댓글수 0 2024. 4. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.