1번 ref 로 닫기 기능 // 메뉴가 열리면 메뉴에 포커스 const menuRef = useRef(null); useEffect(() => { if (menuRef.current) { menuRef.current.focus(); } }, []); return ( e.key === 'Escape' && setMenuOpen(false)} /> 2번 useEffect로 닫기 기능 useEffect(() => { const handleKeyDown = (event) => { if (event.key === 'Escape') { setMenuOpen(false); } }; window.addEventListener('keydown', handleKeyDown); return () => { window.rem..

RMS - (Rental Management System)참여한 차수1차: 23년 11월 28일 ~ 24년 1월 19일FE Lead개발자2차: 24년 1월 22일  ~   만들게 된 계기: 회사 복지중 직원들을 위해 인터넷 강의를 제공중이다. 하지만 액셀로 강의 리스트와 대여자를 관리하고, 구글폼으로 신청과정이 번거롭게 여겨지고 시간이 많이 소요된다고 느껴 마음맞는 팀원들과 이것을 개선하는 시스템을 만들고자 프로젝트를 진행하였다.  작업과정 기능 설계 과정    Frontend Dev(프론트 개발 상세)회사에서 주니어닌 내가 Side 에서는 리드개발자!?   VIte도입이유: 지루할 정도로 길었던 서버 구동 &느렸던 소스 코드 갱신 (https://ko.vitejs.dev/guide/why.html) 결..

WebSquare5는 엔진과 스튜디오(개발도구)로 구성됩니다.스튜디오는웹스퀘어화면파일을개발할수있는환경을 제공하고,엔진은웹스퀘어화면파일을브라우저에표시합니다. 웹스퀘어 스튜디오는WYSIWYG 방식의 통합 개발 도구로, 개발자는 컴포넌트 그리기, 스크립트 추가, 화면 확인, 디버깅을한번에수행할수있습니다. useEffect [] = scwin.onpageload

https://www.eclipse.org/downloads/packages/release/2020-03/r 2020-03 R | Eclipse Packages 442 MB 5,782 DOWNLOADS The Modeling package provides tools and runtimes for building model-based applications. You can use it to graphically design domain models, to leverage those models at design time by creating and editing dynamic instances, to collabo www.eclipse.org 여기서 윈도우용 다운로드 최신버전으로 안받게 주의 https:/..

전역으로 eslint 설치 npm i --g eslint 로 해결

git ls-files | while read f; do git blame --line-porcelain $f | grep '^author '; done | sort -f | uniq -ic | sort -n

JWT의 장점은 I/O 작업이 필요없는 빠른 인증 처리였다. 클라이언트가 저장을 어디다 할까? 1. 쿠키 - 작음 문자열만 2. 로컬스토리지 - 3. 세션스토리지 4. 리덕스 스토어 1. XSS 공격으로부터 localStorage에 비해 안전하다. 쿠키의 httpOnly 옵션을 사용하면 Js에서 쿠키에 접근 자체가 불가능하다. 그래서 XSS 공격으로 쿠키 정보를 탈취할 수 없다. (httpOnly 옵션은 서버에서 설정할 수 있음) 하지만 XSS 공격으로부터 완전히 안전한 것은 아니다. httpOnly 옵션으로 쿠키의 내용을 볼 수 없다 해도 js로 request를 보낼 수 있으므로 자동으로 request에 실리는 쿠키의 특성 상 사용자의 컴퓨터에서 요청을 위조할 수 있기 때문. 공격자가 귀찮을 뿐이지 X..

클라이언트에서 로그인한다. - 리덕스 사가로 비동기 요청서버는 클라이언트에게 Access Token과 Refresh Token을 발급한다. 동시에 Refresh Token은 서버에 저장된다.클라이언트는 쿠키에 두 Token을 저장한다.매 요청마다 Access Token을 헤더에 담아서 요청한다.이 때, Access Token이 만료가 되면 서버는 만료되었다는 Response를 하게 된다.클라이언트는 해당 Response를 받으면 Refresh Token을 보낸다.서버는 Refresh Token 유효성 체크를 하게 되고, 새로운 Access Token을 발급한다.클라이언트는 새롭게 받은 Access Token을 기존의 Access Token에 덮어쓰게 된다.   jwt가 안전하려면    가장 좋은 방법으로..

https://a3magic3pocket.github.io/posts/where-you-save-auth-in-client/ React 사용 시 JWT를 어디에 저장해야할까? 개요 예전에 React를 처음 사용할 때 backend를 jwt 인증방식으로 구현한 뒤 frontend에서는 이 jwt를 어디에 저장할지 고민했었다. 그때 4장. JWT 이해 및 적용를 보고 쿠키에 httpOnly 설정으로 저장하는 a3magic3pocket.github.io

https://jser.dev/series/react-source-code-walkthrough/?utm_source=substack&utm_medium=email React Internals Deep Dive A live series of JSer deep diving into React internals, by reading the actual React source code. This series helps you understand how React works internally and write better React code. jser.dev