내가 보려고 만듬

발단 어드민페이지를 어드민 사용자에게만 노출하고, 그 외 일반사용자에게는 노출하지 않으려면 어떻게 해야 할까? 상태를 구분해서 어드민에게만 보여주면 된다. 지금까지는 vue를 사용하면서 VueX를 통해 전역적으로 상태를 관리했다. 예를 들면 로그인 여부, 어떤 페이지를 보여줄지, 에러메세지 등 여러가지를 온오프하는 방향으로 하여 한꺼번에 관리했는데, 사용자의 입장에서 굳이 관리자가 아니라는 상태를 알 필요가 없다고 느껴졌다. 그래서 관리자일때만 관리자임을 알릴 수 있도록 하였다. 해결과정 서버에서 관리자 여부를 클라이언트로 전송하는 방법은 여러가지가 있겠다. 내가 고민했던 부분을 나열해보려 한다. 1. 토큰 이미 jwt에 role을 섞어서 보내고 있고, 클라이언트가 확인하고 해석하면 될까 싶지만 애초에 ..

기존에는 SQL문을 익히고, DB와 오고가는 과정을 확인하기 위해 ORM 없이 DB에 접근했다. 이번에 서비스를 하나 만들어보면서 경험을 위해 TypeORM으로 마이그레이션을 해보았다. 구글링하면서 배우면서 가장 많이 본 내용은 버전에 관련한 내용이였다. typeORM이 업데이트를 하면서 deprecate된 것이 워낙 많아서 기존 그대로 사용하는 유저들이 많다고 한다. 내가 포스팅을 남기고자 하는 이유는 분명 많은 유저들이 있을텐데.. 업데이트된 버전을 사용하는 사람들은 정말 대부분이 Nest.js를 사용하는 것 같았다. typeORM이 업데이트된 내용 중에 가장 대두되는 부분이 repository를 세팅하는 부분이였다. 아래 포스팅을 통해 업데이트하면서 바뀐 이유를 알고 접근하는데 도움이 되었다. ht..

https://github.com/sh5080/BackTrack GitHub - sh5080/BackTrack Contribute to sh5080/BackTrack development by creating an account on GitHub. github.com 과정 프론트단에서 모든 것을 해결하려고 처음엔 생각했지만 기능 명세를 정리하면서 추후 서비스를 배포할 생각까지 하고 있다보니, 로그인과 별도의 내용 저장, 불러오기 등을 생각하고 있어서 레포를 하나로 사용하되, 브랜치를 프론트와 백 기준으로 나누어 생성했다. 취업을 위해서는 포스트맨이 곧 프론트고, 뷰임을 알지만 배포도 하고 기능에 대해 사용자를 통한 실제적인 피드백을 받기 위해서는 프론트가 필요했다. 리액트를 배울 시간에 node.js만 ..

기획 의도 유튜브 쇼츠 프로젝트가 유튜브api를 인가받아야 해서 의도치 않게 중단되면서, 그 동안 만들어보고 싶었던 것을 메모해놨던 것 중에서 하나를 정했는데, 이전에 음악을 하면서 연습할 때가 갑자기 스쳐지나갔다. 그냥 메트로놈 어플 아무거나 키고 박자연습 하고, 튜닝하고 이정도로 어플을 통해 사용했는데, 연습에 관련된 유용한 어플을 찾아봐도 없었던 것 같다. 물론 이미 최소 6년은 넘어가는 이야기지만...^^ 그 당시 나는 코드를 보고 즉흥으로 초견을 연습하는데 직접 노트에 코드를 적으면서 그 코드에 맞는 연습을 했다. 그래서 다양하게 연습하기 위해서 엄청 많은 코드를 적고, 종이를 찢어서 랜덤하게 배치해서 연습하고 그랬던 기억도 난다...ㅋㅋㅋㅋ 먼저는 그걸 그대로 구현하면서, 기능에 살을 보태면 ..

이전에서 멱등성에 대해 공부하며 스스로 정의를 내린 것은, 무조건 post라서 멱등하지 않고 get이라서 멱등하다고 정의하기엔 어렵다는 것이다. 미들웨어를 구현한 결과를 비교하며 자세히 생각해보자. 1. 토큰 로그인 Request data saved to DB는 말그대로 db에 저장되는 요청 데이터의 값인데, 모든 요청에 대해 로직이 실행되기 전에 가장 먼저 거쳐가게 된다. 보는 바와 같이 post메서드로 토큰 로그인을 시도, sh5080을 입력하였고(비밀번호는 보이지 않게 함) 쿠키에는 값이 없고 키에는 값이 들어있다. 로그인을 시도하면서 먼저 요청한 내용과 key값을 넣어서 보내주고, 로직이 작동한 이후의 데이터를 비교한다. 사실상 메서드, url, body는 달라질 일이 없고, 쿠키와 키를 살펴보면..

목표 구현과정(1)에는 영상의 자막에 관한 내용을 ai가 만들어주고, 자동으로 저장하고 불러와서 사용했다면 (2)에는 영상을 만드는 중간과정을 생략하고, 만들어진 영상을 특정 경로에 저장했을 때 유튜브에 업로드할 수 있도록 구현하려 한다. 현재 vrew를 통해 가볍게 영상을 만들어서 업로드하는 방향으로 하고 있고, 자막을 db에 저장하는 이유는 vrew에서는 ai의 목소리를 지원하고 있어서 자막을 그대로 가져다가 쓰면서 조금 수정하면 간단한 쇼츠영상을 제작할 수 있기 때문이다. 그렇다면 이제 만들어진 영상을 유튜브에 업로드하도록 구현하려 한다. 다만, 제목과 같이 나의 경우는 잠시 어쩔 수 없이 진행이 더뎌지게 되었다. 유튜브 업로드 권한의 경우 구글의 심사가 필요했기 때문이다. 그렇기 때문에 몇일 간..

ERD를 통해 먼저 DB에 어떻게 넣을지를 기획하고 나니 구현속도가 훨씬 빨랐다. 처음에는 간단하게 시작하고 있지만, 내 무한한 성장동력을 바탕으로 자동으로 영상을 생성하는 미래를 기대하며 초반부터 타이트하고 밀도있게 잡아가기 위해 타입스크립트로 시작하게 되었다. mvc 패턴에 맞게 설계하고, view는 나에게 중요한건 아니니.. 나중에 하고..ㅎㅎ model은 순수하게 sql 쿼리만 작성하는 로직으로 구성된 model과 db관련된 로직인 service로 구분했고, controller에는 클라이언트 관련된 로직으로 구분하였다. 엘리스에서 2차프로젝트로 타입스크립트를 사용할 때 고통받으며 꾸역꾸역 해냈던게 도움이 되는 것 같다. 초기세팅하면서 에러처리, 타입 등 커스텀하게 설정해줄 수 있는 부분들을 db설..

계기 유튜브 알고리즘으로 왜 그런게 떴는지는 모르겠지만.. 우연히 보게 된 영상의 내용을 통해 새롭게 구현해보고 싶은 것이 생겨서 기획하게 되었다. 10분정도 투자해서 챗지피티를 이용해 명언을 찾고 유튜브 쇼츠를 통해 수익을 만들 수 있다는 간단한 강의영상이였다. 방법은 간단했다. ai에게 유명한 명언과 스크립트를 만들어달라고 하고, 만들어진 스크립트를 복사해서 ai 음성을 붙여 간단한 쇼츠영상을 만드는 것이였다. 이전에 open ai를 이용해서 화풍에 맞는 그림을 만들어주는 서비스 프로젝트를 했었는데, 문득 영상에 나오는 방법을 이용해서 open ai api를 사용하면 조금 더 편하게 쇼츠를 만들 수 있지 않을까 싶었다. 기획 쇼츠를 만드는 것 자체는 어쨌든 수동으로 하든 그건 지금 머릿속에 방법이 떠..

계기 쿠키를 통해 로그인하여 인증정보를 주고받을 때, 쿠키를 효율적으로 사용할 수 있는 것이 무엇이 있을지 생각해보다가 팝업을 구현해보기로 하였다. 전부 다 프론트에서 처리할 수도 있겠지만, 팝업 구현이 목적이 아니라 프론트와 백이 쿠키를 주고 받는 것을 확인하고 쿠키가 오고가는 것을 확실히 공부하기 위함이다. 목표 구현 목표는 간단하게 3일간 보지 않기 기능을 가진 체크박스와 닫기 버튼으로 이루어진 팝업창을 만들고, 기본적으로 로그인할 때 팝업창을 띄우지만, 체크박스에 체크를 하면 3일간 팝업창을 무시하도록 하려 한다. 방법 기본적으로 서버에서 html파일을 보내주면 클라이언트측에서 받아서 띄워주는데, 서버에서 보내주는 기준은 쿠키의 유무로 한다. 팝업창이 확인되었을 때 체크박스를 클릭하고 닫게 되면 ..

구현하게 된 계기, 기획은 아래 링크에서 확인할 수 있다. https://prpn97.tistory.com/123 [세션 / 토큰 로그인 프로젝트] 고도화(2) 멱등성 검사 미들웨어(1) 계기 및 기획 계기 기본적으로 get, put, delete는 멱등하고, 멱등하지 않은 메서드는 post, patch로 알고 있다. 동일한 요청을 여러 번 반복했을 때 결과값이 동일하면 멱등한 것이라고 볼 수 있는데, 단순하게 로그 prpn97.tistory.com 구현 과정 앞서 설명했듯, 클라이언트의 요청이 들어오는 시점에서 가장 먼저 해당 미들웨어를 두고 로직이 작동하기 전에 로그를 기록하고, 작동한 후를 직전 로그와 비교하는 방법으로 구현하였다. 1. saveRequestToDB 요청시점의 로그를 기록하는 미들웨..