웹 개발 1도 모르는 사람입니다. (당당)
💡 왜 웹 개발 1도 모르는데 웹페이지 만들기 프로젝트를 시작하게 되었는가?
요즘 포트폴리오 작업을 다시 하고 있는데 저를 소개하는 부분이 빈약하다고 느껴졌습니다.
왜냐하면 말로만 그럴싸해 보였거든요. 누구나 말할 수 있는 부분 같아 보였습니다.
그.래.서! 내가 실제로 보여 줄 수 있는, 증명할 수 있는 것들을 같이 담아 소개란에 적어야겠다는 생각이 들었습니다.
그 중 꽤 오랫동안 꾸준히 하고 있는 스터디를 보여드리고 싶었습니다.
다만, 노션에서 비공개로 기록하고 있어서 이를 섣불리 보여드리고 싶진 않았습니다. (프라이버시 존중점요)
그래서 '이 스터디를 소개할 수 있는 공개 페이지를 만들어보자'로 결론이 났습니다.
단순히 소개 글만 작성하는 것 말고 실제로 우리가 기록하는 것들의 공개하고 싶은 부분만 모아서 말이에요.
스터디 소개 페이지 만들고 싶어서 ㅇㅇ
🤔 그러면 뭐부터 시작해야 하지?
우선 소개 페이지를 어떻게 구성할 것인지 대강 머릿속으로 그려봤습니다.
스터디가 만들어진 계기, 멤버 소개, 진행 상황 등 들어갈 내용은 금방 나오더라구요.
그중 가장 소개 페이지에 넣고 싶은 내용은 저희가 여태 진행한 스터디 시간이었습니다.
현재 스터디 멤버들은 노션 DB에 매일 스터디 내용을 기록하고 있습니다.
따라서 시간이 기록될 때마다 소개 페이지에 반영하는 것이 첫 번째 아이디어였습니다.
그래서 우선 이 기능부터 만들어야지 하고 시작하게 되었습니다.
👩💻 노션 API 사용하기
우선 노션의 DB를 활용해야하니 노션 API를 찾아봤습니다.
노션 공식 문서도 있고 많은 블로그 글들도 있어서 시작이 어려워 보이진 않았습니다.
1. 노션 API를 사용 할 DB 만들기
- 비공개 DB : 관계형 속성으로 비공개 DB인 활동 DB를 가져왔습니다.
- 롤업 : 비공개 DB의 시간 속성을 롤업하였습니다.
- 수식 : 롤업된 속성의 합입니다. 👉 여태 진행한 스터디 시간
우선 테스트를 위해 간단하게 DB를 만들었습니다.
2. 노션 API 만들기
https://www.notion.so/profile/integrations
Your connected workspace for wiki, docs & projects | Notion
A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.
www.notion.com
이 링크로 들어가서 노션 API를 만들어야 합니다.
왼쪽 API 통합 메뉴를 눌러 새 API 통합을 만듭니다.
- API 이름 작성
- 아까 만든 DB가 있는 워크스페이스 선택
- 프라이빗 유형 선택
- 로고는 귀찮아서 생략
저장을 누르면 짜잔하고 API가 생성됩니다.
3. DB와 API 연결
DB가 있는 페이지 오른쪽 상단 미트볼 메뉴에서 연결을 누른 후 API를 찾아 연결해주면 됩니다.
4. DB id 얻기
DB의 오른쪽 상단 미트볼 메뉴에서 보기 링크 복사를 합니다.
https://www.notion.so/DB의 id?v=43cdd6389fcc4b8bb228840d280d9cfb&pvs=4
해당 부분이 DB의 id가 됩니다.
5. post man에서 노션 API 셋팅하기
post man에 POST 요청을 설정한 후 다음 형식에 맞춰 URL을 입력해줍니다.
https://api.notion.com/v1/databases/아까 얻은 DB의 id/query
그러면 Authorization에 Notion API 셋팅을 자동으로 추천해줍니다.
저는 Notion API (OAuth 2.0)로 셋팅하도록 하겠습니다.
Authorize 버튼을 누르면 Postman에서 저의 워크스페이스에 액세스를 요청하게 됩니다.
그 중 원하는 페이지에만 체크하고 액세스 허용을 누르면 성공적으로 액세스를 허용하게 됩니다.
DB가 있는 페이지의 오른쪽 상단 미트볼 메뉴의 연결에서도 Postman이 활성화되어 있는 것도 확인할 수 있습니다.
하지만 여기서 추가로 Notion-Version을 헤더에 넣어줘야 최종적으로 셋팅이 완료됩니다.
노션 버전은 다음 링크에서 확인할 수 있으며 저는 최신 버전을 넣었습니다.
https://developers.notion.com/reference/changes-by-version
Changes by version
Version Breaking changes 2022-06-28 Page properties must be retrieved using the page properties endpoint. Parents are now always direct parents; a parent field has been added to block. Database relations have a type of single_property and dual_property . S
developers.notion.com
6. POST 요청하기
셋팅이 완료되었다면 send를 눌러 POST 요청을 해봅시다!
다음과 같이 JSON 형식의 데이터를 확인할 수 있습니다🥳
⚠️ 그러나 문제가 생겼습니다!
관계형으로 가져온 비공개 DB는 공개되어 있지 않아 API에서 제대로 된 정보를 가져오지 못 하네요.
POST 요청에 성공하여 기쁨도 잠시... 내일은 이 이슈를 해결해봐야겠네요...🫠
⭐참고한 블로그 ⭐
https://wooncloud.tistory.com/131
[노션 API] 노션 API 연동으로 데이터베이스 사용하기
개요 다들 한 번씩 노션을 사용해 보셨을 겁니다. 노션 안에는 표나 갤러리, 리스트 등 노션 데이터베이스 기능이 있습니다. 이 기능을 잘 쓰면 사용자나 팀원에 좋은 데이터베이스가 되죠. 만약
wooncloud.tistory.com
'프로젝트 > 웹페이지' 카테고리의 다른 글
| 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 6일차 (1) | 2025.01.15 |
|---|---|
| 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 5일차 (0) | 2025.01.13 |
| 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 4일차 (0) | 2025.01.08 |
| 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 3일차 (1) | 2025.01.02 |
| 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 2일차 (0) | 2025.01.02 |
