My Boundary As Much As I Experienced

디자인을 하다 프론트로 전향했지만 아직 디자인이 재밌다.백엔드도 계속 배워서 백엔드 이슈에도 끼고싶다.기획자가 없는 조그만 회사에서 사업개발, UX디자이너, 백엔드, 프론트 개발자들이공동으로 기획을 하고있지만 이것도 나름 할 만하다. 나는 그냥 제품을 만드는거 자체가 재밌는 것 같다...어차피 내 미래의 사이드 프로젝트를 수익화하기위해서비스 기획, 디자인, 프론트, 백엔드, 마케팅 다 해야될텐데 뭐가 문제인가?다 그 능력치 올리는거지 뭐.. 언제나 미래에 '내 서비스'로 성공하는 나 자신을 생각하며 살고 있다.

현재 상황회사에서 오늘의 일기라는 신규 서비스를 개발 중이다.'앤트타임' 개발은 이미 다 짜여진 구조 안에 조금씩 추가하는 느낌이었는데이번 제품은 초기세팅, 라우팅 구조부터 내가 손수 짜는거라 배우는게 많다.회사에서 돈 받으면서 독서실 공부하는 느낌이어서 기분 좋다ㅎㅎ.. 사수는 양자 시뮬레이터 정부사업 하느라 바빠서 자사 서비스는 다 내가 맡게되네? 오히려 좋아.. 리액트 네비게이션의 Stack개념이전 포스팅에서도 몇 번 얘기했다. 웹에선 한 페이지에서 다른 페이지로 넘어갈 때 모든 상태가 사라지지만모바일에선 어떤 페이지로 이동할 때 기존 화면 위에 새로운 탭이 쌓인다.그래서 아래에 있는 페이지의 state나 여러 상태들이 보존된다! 이를 리액트네이티브에서 구현할 수 있는게 '스택' 컴포넌트인 것이다...

express로 회원가입 API를 만들었다.코딩애플 선생님이 너가 알아서 만들어보라고 해서 알아서 만들어봤다. signup.ejs파일로그인이나 글작성 UI랑 똑같은거 가져와서 api만 바꿔줬다.fetch api로 찔러보고 성공하면 alert창으로 성공 메시지를 띄워준다. --> 회원가입 전송   signup get, post APIget요청 시 페이지만 단순히 던져준다.errors 객체에다가 에러가 생길때마다 하나씩 담아주고errors가 0일 때만 성공 플로우를 타게한다. 사실 아무렇게나 해도 다 성공 플로우를 타게 했는데지피티킁한테 보완할거 있냐고 하니깐 예외처리 코드들을 보충해주었다.app.get("/signup", ..

구현해야 될 기능 - 이미지 다운로드 기능 구현하기이번에 내가 제안한 아이디어를 바로 기능으로 구현할 수 있는 기회가 주어졌다.바로, 자신의 KYC스코어를 인증서 이미지로 저장하거나,이를 X(전 트위터)에 공유할 수 있는 기능을 구상하였다. 이때, 인증서 이미지를 다운받는 과정은 따로 백엔드 없이프론트엔드에서 이미지에 텍스트만 박아서 다운로드 받게 할 수 있을 것 같았고,서버 호출을 줄이기 위해 프론트엔드 단에서 기능구현을 마무리해보겠다고 제안했다.  구현 아이디어 1단계:  Share모달을 실행할 때 canvas에 이미지를 로드하기useEffect에 generateImage라는 핸들러로 nickname, kycScore, maxScore 등을 제공한다. useEffect(() => { gene..

직렬화와 역직렬화는 데이터의 저장 및 전송을 위해 사용되는 중요한 개념이다.직렬화 (Serialization)직렬화는 객체나 데이터 구조를 연속적인 바이트 스트림으로 변환하는 과정이랜다..이렇게 변환된 데이터는 파일에 저장하거나 네트워크를 통해 전송할 수 있다.직렬화된 데이터는 원본 객체의 상태를 완전히 표현하여, 나중에 이를 역직렬화해서 원본 객체를 복원할 수 있다. 예시파일 저장: 객체를 파일에 저장할 때 직렬화하여 저장하고, 필요할 때 파일을 읽어 역직렬화한다.네트워크 전송: 객체를 네트워크를 통해 전송할 때 직렬화하여 전송하고, 수신 측에서 역직렬화하여 원본 객체를 복원한다.쉽게 말해, 가장 많이 쓰는 걸로는 JSON.stringify가 있다. 객체 자료구조를 string데이터로 제단(?)한다.c..

세션은 회원기능이 필요할 때 가장 기본은 할 수 있는 보장된 인증 방식이다.node.js에서 이를 쉽게 구현하려면 passport와 express-session 등을 많이 사용한다. 설치npm install express-session passport passport-local Express-sessionexpress-session은 Express 애플리케이션에서 세션 관리를 쉽게 할 수 있도록 도와주는 미들웨어이다.서버에서 각 사용자별로 고유한 세션을 생성하고, 이 세션에 데이터를 저장할 수 있게 한다.세션ID를 클라이언트에 쿠키로 저장하여 서버와 클라이언트 간의 세션을 연결한다.const session = require("express-session");app.use( session({ sec..

1. 인증을 구현하는 방식 로그인한 유저 혹은 특정 권한이 필요한 정보를 전달할 때 '인증'이 필요해진다.이걸 구현하는 방식에는 크게 Session, Token, OAuth 등이 있다.   2. Session (세션)개념:세션은 서버 측에서 사용자에 대한 상태 정보를 저장하는 방식이다.사용자가 로그인하면 서버는 세션을 생성하고, 세션 ID를 클라이언트에게 쿠키로 전달한다.클라이언트는 이후 요청 시 쿠키를 통해 세션 ID를 서버에 전달하여 인증을 받는다.작동 방식:사용자가 로그인하면 서버는 고유한 세션 ID를 생성하고, 이를 서버 메모리나 데이터베이스에 저장한다.세션 ID는 클라이언트에게 쿠키로 전달한다.클라이언트는 이후 요청마다 이 쿠키를 포함시켜 서버에 전송한다.서버는 쿠키의 세션 ID를 확인하여 해당..

전통적인 방법한 페이지에 몇 개의 글을 보여줄 것인가? 만약 다섯개라고 한다면1, 2, 3, 4, 5, ... 페이지 번호에 -1을 하고 5를 곱한 것을 skip 시작점으로,그리고 추가적으로 보여줄 양을 limit량으로 설정하면 된다.이걸 toArray로 묶어서 가져오면 된다. 끝이다.. 클라이언트가 원하는 페이지 번호를 패러미터로 보내면 이를 반영해서 보여주면 된다.app.get("/list/:id", async (req, res) => { const col = db.collection("post"); // skip은 성능이 좋지않다. const doc = await col .find() .skip(5 * (req.params.id - 1)) .limit(5) .toArray..

요새 하고 있는 일현재 회사 서비스에서 KYC(Know Your Customer) 이벤트를 진행하고 있다.쉽게 말해 Web3 프로젝트에서 환전 전에 봇이 아닌지 인증하는 방식의 관례라고 보면 된다.보통 신분증이나 개인정보 인증을 진행한다. 그러나 우리 회사는 그냥 앱을 열심히 사용한 사람들을 '실제 유저'로 인정해주고포인트 환전 비율을 제대로 쳐주는 방식으로 진행하였다. 그래서 만들어야 하는 기능은?개중 증명을 위한 항목 중에 친구 초대가 있는데,이 점수를 채우고 싶으면 유저를 더 초대하라는 의도로 조그마한 share 버튼을 추가하였다. 모바일 환경일 때는 OS에서 제공하는 공유 바텀모달이 나오고,모바일 환경이 아닐때는 클립보드에 공유 링크만 복사된다. Webshare API란?WebShare API는 ..

보호되어 있는 글입니다.