2024/08 35

Figma 작업 단계

우선 좋은 플러그인이 있어서 필자가 래퍼런스할 사이트인 Splice를 좀 긁어와서 수정 작업을 하고 있다.작업 중, 커다란 계획을 세분화해서 생각하게 되는 계기가 생겼는데화면을 구성하는 것들을 계속 만지다보니 어떤걸 추가하면 좋을지 생각이 이것저것든다.여기 매뉴바를 참고해서 보면 sounds 탭을 샘플을 듣고 다운받을 수 있는 페이지로 가면 좋을 것 같고, Create는 판매권한자나, 판매권한을 얻기 원하는 사용자가 샘플을 올리게끔 하는 업로드 즉 우리가 여태 했던 'write'의 개념과 같은 곳으로, Community 탭은 접속하면 Discord로 보내서 서로 정보를 나눌 수 있는 탭으로, Blog는 다양한 아티스트들의 글을 긁어와서 볼 수 있는 곳으로 Pricing은 재화 충전을 위한 탭으로 나눈다...

스포티파이 for Developers 튜토리얼 번역 ( 5 )

토큰 새로 고침리프레시 토큰은 클라이언트 애플리케이션이 사용자가 애플리케이션을 재승인할 필요 없이 새로운 액세스 토큰을 얻을 수 있도록 하는 보안 자격 증명입니다.액세스 토큰은 의도적으로 제한된 수명을 가지도록 설정되며(1시간), 이 시간이 끝나면, 인증 토큰 요청 응답 중에 획득한 원래의 리프레시 토큰을 제공하여 새로운 토큰을 얻을 수 있습니다:{ "access_token": "NgCXRK...MzYjw", "token_type": "Bearer", "scope": "user-read-private user-read-email", "expires_in": 3600, "refresh_token": "NgAagA...Um_SHo"}요청액세스 토큰을 새로 고치려면, 다음 매개변수를 포함한 ..

스포티파이 for Developers 튜토리얼 번역 ( 4 )

암시적 승인 플로우!!!암시적 승인 플로우에는 몇 가지 중요한 보안 취약점이 있으므로, 이 플로우 사용을 강력히 권장하지 않습니다. 클라이언트 시크릿을 안전하게 저장할 수 없는 경우에는 PKCE와 함께 사용되는 인증 코드 플로우를 대신 사용하세요.!!!암시적 승인 플로우는 클라이언트 측에서 수행되며, 비밀 키를 포함하지 않습니다. 따라서 서버 측 코드가 필요하지 않습니다. 발급된 액세스 토큰은 단기간 동안만 유효하며, 만료 시 갱신할 수 있는 리프레시 토큰이 제공되지 않습니다.다음 다이어그램은 암시적 승인 플로우가 어떻게 작동하는지 보여줍니다:전제 조건이 가이드는 다음을 전제로 합니다:인증 가이드를 읽었습니다.앱 가이드를 따라 앱을 생성했습니다.소스 코드GitHub의 web-api-examples 저장소..

스포티파이 for Developers 튜토리얼 번역 ( 3 )

클라이언트 자격 증명 플로우클라이언트 자격 증명 플로우는 서버 간 인증에 사용됩니다. 이 플로우는 사용자 정보에 접근하지 않기 때문에, 오직 사용자 정보에 접근하지 않는 엔드포인트만 접근할 수 있습니다.다음 다이어그램은 클라이언트 자격 증명 플로우가 어떻게 작동하는지 보여줍니다:클라이언트 자격 증명 플로우전제 조건이 가이드는 다음을 전제로 합니다:인증 가이드를 읽었습니다.앱 가이드를 따라 앱을 생성했습니다.소스 코드GitHub의 web-api-examples 저장소에서 클라이언트 자격 증명 플로우를 구현한 예제 앱을 찾을 수 있습니다.권한 요청첫 번째 단계는 Spotify OAuth 2.0 서비스의 /api/token 엔드포인트에 다음 매개변수를 application/x-www-form-urlencode..

스포티파이 for Developers 튜토리얼 번역 ( 2 )

PKCE를 사용한 인증 코드 플로우PKCE를 사용한 인증 코드 플로우는 모바일 앱, 단일 페이지 웹 앱 또는 클라이언트 시크릿을 안전하게 저장할 수 없는 다른 유형의 애플리케이션에서 권장되는 인증 플로우입니다.PKCE 확장의 구현은 다음 단계로 구성됩니다:코드 검증기를 사용하여 코드 챌린지를 생성합니다.사용자로부터 권한을 요청하고 인증 코드를 가져옵니다.인증 코드를 사용하여 액세스 토큰을 요청합니다.마지막으로, 액세스 토큰을 사용하여 API 호출을 수행합니다.전제 조건이 가이드는 다음을 전제로 합니다:인증 가이드를 읽었습니다.앱 가이드를 따라 앱을 생성했습니다.예시GitHub의 web-api-examples 저장소에서 PKCE 확장이 포함된 인증 코드 플로우를 구현한 예제 앱을 찾을 수 있습니다.코드 검..

스포티파이 for Developers 튜토리얼 번역 ( 1 )

인증 코드 플로우인증 코드 플로우는 사용자가 한 번만 권한을 부여하는 장기 실행 애플리케이션(예: 웹 및 모바일 앱)에 적합합니다.모바일 앱 또는 클라이언트 시크릿을 안전하게 저장할 수 없는 애플리케이션에서 인증 코드 플로우를 사용하는 경우, PKCE 확장을 사용해야 합니다. 올바르게 구현하는 방법을 배우려면 계속 읽어보세요.다음 다이어그램은 인증 코드 플로우가 어떻게 작동하는지 보여줍니다:인증 코드 플로우전제 조건이 가이드는 다음을 전제로 합니다:인증 가이드를 읽었습니다.앱 가이드를 따라 앱을 생성했습니다.예시GitHub의 web-api-examples 저장소에서 인증 코드 플로우를 구현한 예제 앱을 찾을 수 있습니다.사용자 권한 요청첫 번째 단계는 사용자로부터 권한을 요청하여 우리의 앱이 사용자를 대..

국비 지원 IT(웹앱개발) 취업반 강의 58일차 (Spring)

List에서 댓글개수 확인 할 수 있게끔 코드를 짜는 것 부터 시작.일단은 강사님이 하시는 걸 보고 만들었는데, 기존에 내가 만든 것은 댓글이 보이긴하는데 수가 맞지 않았다. 메서드를 아예 새로 만들어서 만들었는데 좀 많이 복잡한 방식이였다.기존 코드를 적극 활용하자.왜 계속 뭔가 새로운걸 만들어서 해결하려고 하는지 모르겠다. 강사님이 하시는거 보면 기존코드를 약간 고치거나 추가한다. 아니면 작성했던 코드를 복붙해서 메서드 이름을 바꾸거나 고친다. 이를 적극 활용하도록 노력하자.그래서 어디를 약간 고쳤냐하면 @Select(""" """) public List getForPrintArticles(int boardId, int limitFrom, int l..

Coding History 2024.08.28

국비 지원 IT(웹앱개발) 취업반 강의 57일차 (Spring)

좋아요 싫어요를 할 때, 로그인을 하지 않으면 작동하지 않도록 막아두었다.(인터셉터 사용)하지만 디테일을 더 살리자면 로그인이 필요하다면 로그인 페이지로 사용자를 던져주는게 사용자의 경험을 높혀주는 일이 될 것이다. 그리고 로그인을 하면 다시 원래 보던 게시글로 이동시켜줘야한다. 이를 적용하기 위해서 어떻게 해야 좋을까.나의 생각일단 인터셉터에서 처리하던 것을 빼고 메서드 내에서 관리를 할 지, 아니면 인터셉터에 새로운 메서드를 만들어 적용시킬지 둘 중 하나를 선택해서 구현하는게 맞는 것 같다. 난 뭔갈 하면서 최종적인 목표를 생각하는 것이 약간 습관이라면 습관인데 코딩을 할 땐, 의식적으로 바로 앞의 문제부터 해결하자고 생각하면서 코드를 쓴다. 그래서 일단 닥친 문제.문제 1.인터셉터에서 처리하던 로그..

Coding History 2024.08.28

개인 프로젝트 DB 설계중.

구조 설계의 핵심.구체화된 검색기능 제공을 위한 테이블 분리를 생각하며 만들어보자판매권한 레벨을 userId에 부여하자일단 해보고 이상하면 수정하자.만들던 중 고민악기도 악기 속성별로 나누어야할지 아니면 다 instrument에 넣을지 고민이다.그래서 사이트 참고 결과 말이 악기지 악기의 사운드들을 특정적으로 배치하는 모습이 보인다.일단은 그냥 이 형식을 따라보자.테이블 분리하기로 결정.일단 설계는 여기까지 했다. 더 필요한게 무엇일까.내 머리로는 뭐가 더 필요할지 더 나오지가 않아서 GPT한테 계획서랑 함께 뭐가 혹시 더 필요한지 물어보았다.1. Spotify API를 통한 회원가입 및 로그인OAuth 통합: Spotify API를 통해 회원가입 및 로그인을 구현하려면 OAuth 2.0을 활용한 인증이..

국비 지원 IT(웹앱개발) 취업반 강의 56일차 (Spring)

내가 이미 구현한 좋아요 / 좋아요 취소, 싫어요 / 싫어요 취소, 좋아요 상태에서 싫어요를 누를시 좋아요 취소되면서 싫어요활성, 싫어요 상태에서 좋아요 누를시 싫어요 취소되면서 좋아요활성을 만드는 시간을 가졌다. 그래서 나는 그냥 개인 프로젝트 화면 초안을 그려봤다. 그건 따로 포스팅.그래서 간간히 강사님이 말씀 하실 때만 수업을 들었고 듣다보니까 내 코드에 문제점을 하나 발견했다.AJAX를 사용해서 실시간 데이터변화를 적용시키긴 했다만, 사실 좋아요와 싫어요의 숫자가 새로고침을 해야지 숫자가 변해서 이를 location.reload(); // 새로고침하여 결과 반영이걸 함수 안에 넣어서 꼼수를 썼었는데 이게 정답인 줄 알았다.근데 이게 새로고침을 하는게 페이지 전체를 좋아요나 ..

Coding History 2024.08.27