들어가기 앞서, 클라이언트 환경변수는 모두 브라우저에 노출된다는 사실을 인지해야한다.필자는 현재 Next.js + Supabse를 활용해 풀스택(?) 프로젝트를 개발하는 상황이다.이 때, 프로젝트에서는 클라이언트 환경변수(NEXT_PUBLIC)에 Supabase API 요청을 위한 보안 키인 anon 키 값을 저장한다.이에, 클라이언트측에서 직접 API 요청을 보내고 비즈니스 로직 또한 브라우저에 노출된다.그러던 중, 클라이언트 환경변수에 anon키를 저장하면 브라우저에 노출될텐데 이런 경우네는 어떤 보안 위협성이 있는 지 생각했다.결론부터 말하면 anon키가 클라이언트에게 노출됨으로써 데이터접근 권한 및 DOS 공격과 관련된 보안 위협은 증가하지 않는다. 다양한 예시 상황으로 보안 위협을 가정해보았다...
분류 전체보기
https://jy-beak.tistory.com/185 [Prettier] Next.js13 + Prettier 관련 에러 해결Next.js13 프로젝트에 prettier, prettier 관련 플러그인 적용시 관련 에러를 해결한 과정을 작성한 글입니다. 이슈 1 - .prettierrc 파일 적용 안되는 경우 vscode 하단에는 prettier가 적용되고 있다는 표시가jy-beak.tistory.com1. Ctrl + Shift + P → "Preferences: Open User Settings (JSON)" 선택2. 아래 이미지를 참고하여 Ctrl + F 로 각 속성을 찾고 객체 프로퍼티 값을 아래와 같이 변경한다.
문제 : React에서 배열 렌더링 도중 key 속성을 부여했음에도 불구하고 오류가 발생하였다.//오류 코드 { responseData?.map((el, idx)=>{ return( ) }) }원인 : React에서는 리스트를 렌더링할 때, key 속성은 각 요소의 최상위 부모에 부여해야합니다.결론 : fragment element()를 삭제하여 을 최상위로 올려야한다.//해결 코드 { ..
Vercel은 정적 사이트를 배포하는 데 최적화된 플랫폼으로, HTML, CSS, JavaScript로 구성된 프로젝트를 매우 쉽게 배포할 수 있습니다. 아래에 Vercel을 이용해 프로젝트를 빌드하고 배포하는 방법을 단계별로 정리했습니다.1. Vercel 계정 생성 및 CLI 설치계정 생성Vercel 공식 웹사이트에 접속해 회원가입을 완료하세요.GitHub, GitLab, Bitbucket 계정으로 로그인하면 코드 저장소와의 연동이 편리합니다.Vercel CLI 설치터미널에서 아래 명령어를 사용해 Vercel CLI를 설치합니다.npm install -g vercel설치가 완료되면 CLI를 통해 Vercel과 연동할 수 있습니다.2. 프로젝트 준비프로젝트 디렉토리 구성HTML, CSS, JS 파일을 포..
// 사용법// 1. 라이브러리 설치// npm install react-swipeable// npm install @mui/material @emotion/react @emotion/styled// npm install @mui/icons-material// npm install styled-components// 2. 컴포넌트 사용(props로 )// // 사용법// 1. 라이브러리 설치// npm install react-swipeable// npm install @mui/material @emotion/react @emotion/styled// npm install @mui/icons-material// npm install styled-components// 2. 컴포넌트 사용(props로 )/..
웹 디자인GDWEBhttps://www.gdweb.co.kr/main/index.asp http://www.gdweb.co.kr www.gdweb.co.kr WWIThttps://wwit.design/tag/realestate Lifeplus한국의 UI/UX 모바일 패턴을 수집합니다.wwit.design 웹쟁이https://www.webjangi.com/artwork 웹쟁이 | 모든 웹 작품과 리소스가 한 곳에웹쟁이 | 모든 웹 작품과 리소스가 한 곳에www.webjangi.com 컴포넌트코드펜https://codepen.io/ CodePenAn online code editor, learning environment, and community for front-end web development usi..
운영 서비스에 내가 개발한 회원탈퇴 기능과 메인 페이지 애니메이팅 동기화 작업이 반영되었다!!완전 감동 뿌듯..!!앞으로도 사수님을 보고 열심히 배워서 더 멋진 프론트엔드 개발자가 되고 말테다 히히
들어가며해당 게시물은 Sequelize 프로젝트 세팅과 WSL, mysql-server 설치완료 환경을 가정합니다.자세한 설치 방법은 아래 두 링크를 참고해주세요. [Node.js] Node.js + Express + Sequelize + MySQL 프로젝트 세팅 방법들어가기해당 게시물은 Node.js 와 MySQL이 설치된 환경을 가정합니다. Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org MySQLOver 2000 ISVs, OEMs, and VARs relysooncoding.tistory.com 윈도우에서 리눅스 명령어 사용하기(WSL..
