[React] MSW (Mock Service Worker) MSW (Mock Service Worker)Mock Service Worker의 줄임말로, MSW(Mock Service Worker)는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리입니다.실제 백엔드 서버 없이도 모의 응답(Mock Response)을 반환할 수 있게 해줍니다 *mock은 모조품, 가짜란 뜻*서비스 워커(Service Worker)는 웹 페이지와 별개로 백그라운드에서 스크립트를 실행할 수 있는 웹 브라우저의 기능입니다. 웹 애플리케이션의 성능을 향상시키기 위해 주로 오프라인 경험, 네트워크 요청 가로채기 및 처리, 푸시 알림 및 백그라운드 동기화를 처리하는 데 사용됩니다. 서비스 워커는 웹 애플리케이션에 프록시 서버.. [Next] UseSelectedLayoutSegment / UsePathname Hook [Next] UseSelectedLayoutSegment / UsePathname Hook UseSelectedLayoutSegment ?현재 레이아웃 app기준 가장 가까운 폴더들의 segment를 리턴해준다.아래와 같은 모양이라면compose / explore / home / messages / search/ username 으로 라우팅했을 경우 해당 세그먼트 리턴해준다.만약 그아래의 세그먼트들도 원한다면UseSelectedLayoutSegments를 사용하면 된다.['compose', 'tweet] / [userName, status, id] 이런식으로 나오게 된다.📦app ┣ 📂(afterLogin) ┃ ┣ 📂@modal ┃ ┃ ┣ 📂(.)compose ┃ ┃ ┃ ┗ 📂tweet ┃ ┃.. [Next] App Router의 폴더들 [Next] App Router의 폴더들next 강의를 들으면서 배운 app router에 사용되는 폴더들을 정리하려고 합니다.public폴더 : 모두가 접근 가능한 파일 넣는 곳src/app 폴더 : 경로 유/무에 따른 최상층 폴더route group : route에 영향 안주고, 그룹필 할 수있는 폴더paraller route : route에 영향 안주고, 하나의 레이아웃에 두개이상의 페이지를 병렬로 놓을 수 있다.intercept route : 경로를 가로채서 현재폴더의 특정부분에 놓을 수 있다. dynamic route : 동적 url에 관해 데이터 처리 가능하다. private folder : route에 영향 안주고, 공통 컴포넌트 뺄때 유용 public 폴더넥스트 서버에서 누구나 접근할.. [AWS] Lambda로 이미지 리사이징 하기 [AWS] Lambda로 이미지 리사이징 하기이미지 리사이징 작업이 성능적으로 많이 무리가 가는 작업이다.이미지 리사이징 전용 서버를 분리해놓는게 좋다.근데 이거를 위해서 하나를 따로 두는건 쉽지않은데, 이럴때 좋은게 lambda가 있다. lambdaLambda는 AWS에서 제공하는 서버리스 컴퓨팅 플랫폼이다.서버리스란, 서버가 없다는 뜻이 아니고 개발자가 서버의 존재를 신경쓸 필요가 없다는 뜻이다.서버가 잘 돌아가고 있는지, 개수와 사양한 적당한지 등등 신경쓸 필요없이 사용자는 오직 코드에만 집중할 수 있으니 무척 편하다.이때 사용한 컴퓨팅 시간, 용량에 대해서만 AWS에게 비용을 지불하면 된다.더 자세한 내용은 https://docs.aws.amazon.com/ko_kr/lambda/latest/d.. [AWS] S3 연결하기 ( 이미지 업로드 ) [AWS] S3 연결하기프로젝트를 배포하고 이미지 업로드할 때 문제가 있다.현재 백엔드 서버에다 이미지 올리고 있는데,이렇게 된다면 차후에 백엔드 서버가 스케일링 될때 그 이미지들까지 복사되어버린다. 이미지는 하나만 있으면되는데 여러 컴퓨터에 복사해놓을 필요가 없다. s3가 이런 백업도 다 처리해준다. 우린 할 필요 없음 프론트에서 이미지 올릴때 바로 s3로 보내려고 한다. AWS S3AWS S3 (Amazon Simple Storage Service)는 Amazon Web Services가 제공하는 객체 스토리지 서비스입니다.이 서비스는 인터넷을 통해 언제 어디서나 데이터를 저장하고 검색할 수 있는 확장성이 높은 클라우드 스토리지 솔루션을 제공합니다.S3는 특히 대규모 데이터를 저장하고 관리하기에 .. [AWS] 도메인 연결하기 (가비아) [AWS] 도메인 연결하기 (가비아)프론트엔드, 백엔드 서버를 모두 배포했다면이젠 도메인을 연결할 차례다.도메인을 구매하고, aws에 연결하고, cors / cookie (credential, cookie) 에러를 해결하려고 한다.백엔드는 처음인 나에게 너무 생소하고 어려워서 블로그에 기록해두고 차후 참고하려고 한다. 가비아도메인 구매 먼저 도메인을 구매해야하는데 어렵게 생각할 것 없이 대표적인 곳에서 가장 싼것을 사면 된다는 이야길 들었다.나는 강사님이 추천해준 가비아에서 도메인을 구매했다.할인으로 제일 싼 .shop / .store을 사려고 했었는데 어차피 한번사면 1년은 유지해야하고 개인 프로젝트용으로 지속할 생각이라면무난하게 .com 으로 사는게 좋을것 같아서 그렇게 진행했다. (아래는 예시).. [AWS] AWS에 배포하기 (ubuntu, mysql, pm2) [AWS] AWS에 배포하기 (ubuntu, mysql, pm2)무료 기준으로 프론트, 백엔드 서버 만드는 것을 설명 하겠습니다. AWS에 서버 추가회원가입 -->EC2대시보드 -->인스턴스 시작 --> 프리티어(무료) 중 하나 선택 -->ubuntu 선택 -->보안그룹에서 http, https 규칙 추가 -->키 페어 선택 / 없다면 새 키페어 생성 -->인스턴스 생성 후(프론트/백엔드) 인스턴스 메뉴로 이동 --> [웹] 인스턴스(서버) 실행 --> [깃헙] 프로젝트를 github repository에 등록 (깃을 통해서 서버에서 다운로드 위해서) -->git initgit remote add origin 깃헙 주소git add .git commit -m '커밋 메세지'orgit commit .. [Next] getServerSideProps 와 getStaticProps getServerSideProps 와 getStaticPropsNext.js에서 SSR을 위한 두 가지 주요 함수인 getServerSideProps와 getStaticProps는 서로 다른 사용 사례와 특징을 가지고 있습니다. getServerSideProps서버 사이드 렌더링 (SSR): getServerSideProps는 서버에서만 실행되며, 모든 페이지 요청마다 실행됩니다. 이는 사용자의 요청이 있을 때마다 최신의 데이터를 서버로부터 받아와 페이지를 생성합니다.용도: 동적인 데이터를 다루는 페이지나 사용자의 요청에 따라 달라져야 하는 데이터가 필요한 페이지에 적합합니다. 예를 들어, 사용자의 세션 정보나 검색 쿼리 기반으로 데이터를 불러와야 하는 경우 등입니다.성능: 모든 요청마다 데이터를 가져.. [Node] 쿠키 전달이 안돼서 로그인이 안된다면? (express) [Node] 쿠키 전달이 안돼서 로그인 인증이 안된다면? (express) 로그인을 했는데, 로그인 체크를 해봤더니 로그인이 안됐다고 한다.. 왜지? 도메인이 다른 브라우저와 서버가 있을때, 브라우저가 서버에 api 호출하게되면 cors에러가 발생한다. 그래서 이전에 cors모듈로 access-control-allow-origin을 해더에 추가해서 문제를 해결했었다. 이와 마찬가지로 도메인이 다르면 쿠키도 전달이 안된다. 로그인을 성공하게되면 서버에서 id와 임의의 문자열을 세션으로 만들고,그 문자를 connect.sid라는 이름으로 쿠키에 담아서 부라우저에 보내준다. + 유저 정보를 내려준다.여기서 유저 정보는 제대로 내려주는데 쿠키정보는 전달되지 않는다.이유는 위에서 언급한 도메인이 다르기 때문이다... [Next] 로그인 구현 ( passport ) [Next] 로그인 구현 ( passport )지난 블로그의 back단(back 서버) 초기설정과 회원가입을 완료 했다면로그인을 구현해보자 로그인을하면 브라우저, 서버가 같은 정보를 들고 있어야한다. 서버에서 로그인이 되고나서 브라우저도 이 정보를 알고있어야하는데, 통째로 보내주면 비밀번호가 들어있기 때문에 해킹에 취약할 수 있다. 그래서 로그인 정보대신에 암호화 되어있는 임의의 문자열을 브라우저로 보내준다. --> 요게 쿠키 그럼 서버는 보내줬던 쿠키정보를 로그인한 유저 정보(아이디)와 연결 시킨다. --> 쿠키와 서버쪽 세션 이렇게 되면 해커들이 서버에서 브라우저로 보낸 쿠키값을 알게 되도 해킹할 수없기 때문에(유저정보를 알수없다) 안전하다. 이후 브라우저에서 로그인 정보가 필요한 이벤트(게시글 쓰.. [Next] 회원가입 구현 (express, sequelize, mySQL) [Next] 회원가입 구현 (express, sequelize, mySQL)지난번에 express(node.js), sequelize, mysql을 공부한 이후,회원가입 구현하는 것을 배웠다.이어서 블로그에 정리하려고 한다.위 세가지의 개념을 알고 싶다면 아래 링크에서 확인할 수 있다.https://y-chyachya.tistory.com/108 회원가입을 구현하기 위해선 front, back 모두 작업이 필요하다.작업 전에 우선 흐름을 알아보고 구체적으로 코드를 짜보는게 좋을 듯 하다. [브라우저/프론트/백엔드/데이터베이스 관계]포트하나가 하나의 프로그램이라고 생각 (같은 포트는 같은 프로그램이라고 생각) 브라우저(3060(강의)/3000) - 프론트서버(next)(3060(강의)/3000) - 백엔드.. [Node] Node.js + mySQL + Sequelize 사용해보자 [Node] Node.js + mySQL + Sequelize 사용해보자강의에서 백엔드 구성을 위 세가지를 사용하는 것을 보았다.앞으로는 프론트도 백단을 알고있어야 한다고 생각하는 것과 함께다음에 내가 프로젝트를 혼자 만들때 이걸보고 참고해서 만들기 위해서이번에 잘 알아두고자 블로그에 올린다. Node.js? Node.js는 JavaScript를 서버 측에서 실행할 수 있게 해주는 런타임 환경입니다.원래 JavaScript는 브라우저 내에서만 실행되었지만, Node.js 덕분에 개발자들은 웹 서버 개발에도 JavaScript를 사용할 수 있게 되었습니다. node가 서버가 아니냐고 착각하는 분들이 있는데 node에서 제공하는 http모듈이 서버 입니다. Express.js Node.js의 웹 애플리케.. 이전 1 2 3 4 ··· 7 다음
