본문 바로가기

전체 글25

[React] Cypress로 E2E 테스트 E2E 테스트 ( End-to-End ) 사용자의 관점에서 애플리케이션을 테스트 애플리케이션의 모든 부분이 의도한 대로 작동하는지 확인하는 데 중점을 둔다 cypress Cypress is a next generation front end testing tool built for the modern web. Latest version: 13.5.0, last published: 5 days ago. Start using cypress in your project by running `npm i cypress`. There are 521 other projects in the npm registry using cypress www.npmjs.com 라이브러리 install npm install --dev .. 2023. 11. 14.
[React] react-csv 사용 데이터 csv 파일 다운로드 React-csv react-csv Build CSV files on the fly basing on Array/literal object of data . Latest version: 2.2.2, last published: 2 years ago. Start using react-csv in your project by running `npm i react-csv`. There are 268 other projects in the npm registry using react-csv. www.npmjs.com React-csv 라이브러리 다운로드 npm install react-csv npm install @types/react-csv or yarn add react-csv yarn add @types/.. 2023. 11. 7.
[React] React.memo & useMemo React.memo는 컴포넌트 자체의 렌더링을 최적화하는 데 사용 useMemo는 특정 값이나 변수의 계산된 값을 저장하여 재계산을 방지하는 데 사용 export default React.memo(Component); 컴포넌트의 렌더링 최적화를 위해 React.memo를 사용하는 것만으로 충분할 수 있다. useMemo는 특정 변수에 대한 성능 최적화를 위해 추가적으로 사용될 수 있다. 2023. 11. 6.
[에러일지] Next.js: "url" parameter is not allowed 문제import Image from "next/image"이미지 최적화 Image 태그에서 외부 리소스가 적용하지 않음이미지 url를 주소창에 입력하면 정상 작동한다해결next.config.js 파일에서 domains 수정module.exports = withBundleAnalyzer({ images: { domains: [images.url.com], },});domains 속성은 애플리케이션에서 허용하는 이미지 도메인 목록을 지정한다허용된 도메인에서만 이미지를 불러올 수 있다보안상의 이유로 애플리케이션이 특정 도메인에서만 이미지를 허용할 때 사용함remotePatterns 은 보다 유연한 이미지 로딩 패턴을 정의하는 데 사용다양한 도메인에서 이미지를 가져와야 하는 경우, 프로토콜과 호스트 이.. 2023. 11. 3.
[Axios] interceptors Axios interceptors는 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있다 import axios from 'axios'; 요청 전 axios.interceptors.request.use( (config) => { // 요청이 전달되기 전에 작업 수행 return config; }, (error) => { // 요청 오류가 있는 작업 수행 return Promise.reject(error); }, ); 응답 전 axios.interceptors.response.use( (response) => { // 응답 데이터가 있는 작업 수행 return response; }, (error) => { // 응답 오류가 있는 작업 수행 if (error.response?.status =.. 2023. 9. 26.
[Flutter] Text Overflow 문자 줄바꿈, 말줄임, 페이드 기본 Text Widget Text( '나는 언덕 잔디가 이 지나가는 헤는 것은 하나에 있습니다. 아무 가을 책상을 아이들의 위에도 하나에 이웃 내린 위에 봅니다.', style: TextStyle( fontSize: 18, fontWeight: FontWeight.w500, color: WhiteColor, ), ), TextOverflow clip 부모 위젯의 경계를 벗어나면 텍스트를 그냥 잘라버려 표시되지 않는다. SizedBox( width: double.infinity, height: 50, child: Text( '나는 언덕 잔디가 이 지나가는 헤는 것은 하나에 있습니다. 아무 가을 책상을 아이들의 위에도 하나에 이웃 내린 위에 봅니다.', style: TextStyle( fontSize: 1.. 2023. 9. 13.
[에러일지] Pass 본인인증 Window: message 이벤트 Window: message 이벤트 문제 새창을 띄워 PASS 본인인증을 하였지만 본인인증 버튼를 누른 (현재) 페이지에서는 본인인증이 완료 되었는지 모름 해결 메세지 수신을 위해 사용함 useEffect(() => { window.addEventListener('message', (event) => { const { verified } = event.data; if (verified) { axios .post(`${backUrl}/api/account/identification`, { name: event.data.name, birthdate: event.data.birthdate, gender: event.data.gender, CI: event.data.CI, phoneNumber: event.da.. 2023. 9. 12.
flutter secure storage 디바이스 내부에 정보를 저장하기 위함 Android에서는 keystore 영역, iOS에서는 keychain 내부 저장소 영역을 사용 2023. 8. 28.
토큰과 세션 토큰 베이스64 인코딩 된 스트링 헤더, 페이로드, 시그니처 구성 데이터베이스에 저장하지 않음 시그니처값을 검증해서 매번 확인 필요없음 정보가 토큰에 모두 담겨있기에 정보유출 위험 세션 유저 정보를 데이터베이스에 저장 ID값으로 구성 - 클라 요청보낼때 ID같이 보내면 정보받음 서버에서 생성 , 클라에서 쿠키로 저장 요청때마다 데이터베이스 매번 확인 서버저장이므로 클라에서 노출위험 없음 2023. 8. 28.

티스토리툴바