'workspace/web' 카테고리의 글 목록

2025.04.13

워드프레스 게시글에 댓글 기능 붙이기 (REST API 기반)

📘 워드프레스 REST API를 이용해서 나만의 사이트 만들기 - 6편게시물에 댓글 보기 & 작성 기능 추가하기 (댓글 API 활용) 🧭 게시물 클릭 → 상세 페이지로 이동하는 구조 포스팅은 따로 하지 않았지만 게시물 목록 화면(index.html)에서 각 게시물 하단에 각 게시물의 링크를 클립보드에 복사할 수 있는 버튼과, 현재 게시물에 작성된 댓글의 개수를 보여지도록 구현해놓은 상태입니다.여기서 댓글을 클릭하면 id를 포함한 쿼리 파라미터를 이용해 상세 페이지로 이동하도록 설정했습니다.location.href = `post.html?id=${post.id}`; 그렇게 이동한 post.html에서는 URL에서 id 값을 추출하여 해당 게시물을 불러옵니다.const postId = new URL..

workspace/web

2025.04.12

워드프레스 글에 이미지 추가하기 (커스텀 필드 활용)

📘 워드프레스 REST API를 이용해서 나만의 사이트 만들기 - 5편이미지를 업로드하고 게시물에 연결하기 (커스텀 필드 활용) 이제 다시 글쓰기로 돌아와 사용자들이 글을 작성할 때 이미지를 함께 업로드할 수 있도록 구현할 것입니다.짧은 텍스트 중심의 트위터 스타일 웹 앱이지만, 이미지가 추가되면 콘텐츠의 전달력과 몰입도가 확실히 달라집니다. 그래서 간단하면서도 직관적인 이미지 업로드 기능을 구현해봤습니다. 목표이미지 선택 및 미리보기최대 8장까지 업로드 제한워드프레스 Media API를 통한 이미지 등록image_urls라는 커스텀 메타 필드에 이미지 URL 저장 왜 커스텀 메타 필드가 필요한가?워드프레스에서 대표 이미지(featured_media)는 하나만 설정할 수 있고, 본문(content)..

workspace/web

2025.04.11

워드프레스 사용자 프로필 이름 다루기 (display_name 사용법)

📘 워드프레스 REST API를 이용해서 나만의 사이트 만들기 - 4편워드프레스 사용자 프로필 이름 다루기 (display_name 사용법) 이전 3편에서는 일반 사용자도 직접 회원가입을 할 수 있도록 기능을 구현했고, REST API로 간단하게 작성자 권한의 유저를 생성하는 방법까지 확인했다.큰 항목들은 처리가 된거같고 앞으로는 조금씩 수정을 하며 보기 좋은 사이트로 바꿔가는 과정만 남았다.이번에 해볼것은, 가입된 유저의 표시 이름(display_name)을 닉네임(nickname)으로 자동 설정해서 글 목록에 사용자 이름이 깔끔하게 보이도록 만드는 것이다. 🤔 왜 표시 이름(display_name)을 따로 설정해야 할까?워드프레스에서는 회원가입 시 사용자 계정 이름(username)이 기본적으..

workspace/web

2025.04.10

워드프레스 사용자 회원가입 기능 직접 만들기 (플러그인 활용)

📘 워드프레스 REST API를 이용해서 나만의 사이트 만들기 - 3편워드프레스에서 일반 사용자 회원가입 기능 만들기 (커스텀 플러그인 활용) 이제 글을 불러와서 보여줄 수 있고, 사용자가 글을 쓸 수 있도록 로그인하고, JWT 인증을 이용해서 게시물을 작성하는 기능까지 붙여봤다.이제 기본적인 '보고', ‘쓰기’ 흐름은 완성된 셈이다.그렇다면 다음 단계는?바로 일반 사용자도 스스로 회원가입할 수 있어야 한다는 점이다. 왜 회원가입이 필요할까?트위터처럼 짧게 글을 쓰는 구조로 사이트를 만들기로 했기 때문에,관리자 혼자 블로그처럼 글을 계속 쓰는 방식이 아니라 여러 사용자가 자유롭게 글을 남길 수 있어야 한다.그래서 사용자 계정이 필요하고, 그 사용자들이 로그인해서 글을 쓸 수 있어야 한다.그러려면 ..

workspace/web

2025.04.09

워드프레스 로그인 & 글 작성 직접 구현하기 (JWT 인증)

📘 워드프레스 REST API를 이용해서 나만의 사이트 만들기 - 2편워드프레스로 로그인 & 글쓰기 직접 구현하기 (JWT 인증 사용) 지난 글에서는 워드프레스 REST API를 이용해서 등록된 게시물을 가져와서 웹사이트에 표시하는 걸 해봤다.REST API가 잘 동작하는것을 확인했으니 이제 이것을 이용해서 원하는 사이트를 만들어 볼 차례이다. 무엇을 만들 것인가이번 프로젝트는 트위터처럼 짧고 간단한 글을 남기는 구조를 목표로 하고 있다.그 이유는, 나에게 있었던 일이나 게임 플레이 기록, 구매한 물건 등 다양한 일상들을 블로그 글이라고 하기엔 애매할 정도로 짧게 남기고 싶었기 때문이다.“언제, 어떤 일이 있었다” 정도만 빠르게 기록할 수 있는 형식을 고민하다가, 트위터처럼 가볍게 글을 쓸 수 있는 구..

workspace/web

2025.04.08

워드프레스에서 REST API로 글 목록 불러오기

📘 워드프레스 REST API를 이용해서 나만의 사이트 만들기 - 1편워드프레스로 게시물 목록 불러오기 (GET 요청 활용) 웹사이트를 구축할 때 가장 쉬우면서도 유연하게 CMS와 백엔드를 구성할 수 있는 방법 중 하나가 워드프레스라고 생각한다.기본적인 관리 UI도 잘 되어 있고, 무엇보다 REST API를 통해 데이터를 쉽게 가져오고 다룰 수 있어서 프론트엔드는 내가 원하는 대로 자유롭게 만들 수 있다.그래서 이번에 워드프레스 REST API를 이용해서 내가 원하는 스타일의 웹사이트를 직접 만들어보려고 한다.이 과정을 정리해서 블로그에 시리즈로 기록해보려고 하고,이 글들이 나처럼 프론트 중심으로 작업을 하면서 CMS가 필요했던 누군가에게 작은 도움이 되면 좋겠다.기록은 복잡하게 쓰지 않고, 최대한 내..

workspace/web

티스토리툴바