문제 상황쉐리어 프로젝트 개발계에서 포트폴리오 업로드 기능 확인 중이었다.포트폴리오 업로드는 포트폴리오 가이드(모달)을 확인 후 확인 버튼을 클릭하면 파일을 업로드할 수 있는 인풋폼을 노출시키는 형태였다.하지만 포트폴리오 가이드(모달)을 확인 후 확인 버튼을 누르고 파일탐색기에서 포트폴리오를 업로드하니 업로드가 되지않았다.시간이 지난 후에도 업로드가 되지 않아 다시 한 번 업로드를 시도하니 이번에는 파일 업로드가 되었다.여러 반복 끝에 이 상황이 버그라고 판단했고 즉시 사수님께 보고하여 문제해결을 시도했다. 코드// 부모 컴포넌트 코드const [shown, setShown] = useState(false); // 모달 확인 여부const [showPop, setShowPop] = useState(fal..
전체 글
상황팀피어 사이드프로젝트(쉐리어) 진행 중이다.유저의 구독 상태에 따른 회원탈퇴 여부를 결정하는 로직을 개발 중이다. 유저의 구독 상태는 유저 정보에 담겨있다.유저 정보는 유저 정보 요청 API를 통해 얻는다. 서비스(쉐리어)는 JWT 인증 방식을 사용하고 있다. 유저 정보 요청 API 요청 시 헤더에 JWT 토큰을 담아 요청을 보내야한다. 필자는 해당 테스트를 위해 POSTMAN(이하 포스트맨)을 사용했으며 서비스에서의 HTTP 요청을 포스트맨에서 동일하게 구현하는 것을 목표로 한다.(포스트맨 사용 이유 : 서비스 UI 가 없어도 HTTP 요청을 마구마구 보낼 수 있어서 테스트에 용이함)하지만 필자는 포스트맨에서 요청을 보낼 때 헤더에 토큰을 담아 보내는 방법을 몰랐다.이 글에서는 포스트맨에서 요청을 ..
들어가기 앞서, 클라이언트 환경변수는 모두 브라우저에 노출된다는 사실을 인지해야한다.필자는 현재 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..