profile
기록의 중요성
post-thumbnail

로컬환경 Samesite 이슈 간단하게 해결(React)

현상: 프론트엔드 로컬환경이 http로 되어 있고 백엔드가 https 일경우(이미 배포가 된 상태) 크롬브라우저에 쿠키가 안심어지는 현상입니다.프론트엔드, 백엔드 쿠키공유 설정이 끝났다는 가정을 하는겁니다.(예를 들어 프론트에서 withCredentials: true

3일 전
·
0개의 댓글
·

useInfiniteQuery 사용해보기

useInfiniteQuery에 대해서 지난번 설명이 부족한거 같아 간단하게 프로젝트를 생성해 간단요약을 해보겠습니다. (처음보는 것들이 많아 헷갈리기 때문에 정리용)사용한 라이브러리(react-query 버전이 3입니다.) "react": "^17.0.2", "

2022년 9월 20일
·
0개의 댓글
·
post-thumbnail

React hook form 사용해보기

form은 사용자가 웹페이지를 사용하면서 서로 상호작용하는 필수적인 요소 중 하나입니다. form을 통해 전달된 사용자 데이터의 유효성을 검사하는 것은 개발자에겐 중요합니다.React Hook Form은 React에서 양식을 검증하는데 도움이 되는 라이브러리 중 하나입

2022년 6월 8일
·
0개의 댓글
·

React AWS amplify에 배포

React로 만들어진 프로젝트를 AWS amplify를 통해서 배포해보겠습니다.이해를 돕기위해서 사진을 많이 첨부했지만 3분안에 기본셋팅이 가능합니다.(프로젝트빌드, 및 도메인 / SSL 연결 시간 제외)사용 사례가 발전함에 따라 프런트엔드 웹 및 모바일 개발자가 다양

2022년 5월 29일
·
0개의 댓글
·
post-thumbnail

React - AWS Amplify PDF 파일이 안열림

프로젝트는 react로 만들어진 웹페이지이며 a tag로 pdf 파일을 새로운 탭에서 열려고 하니 빈 페이지가 뜨는 현상개발환경에서는 정상적으로 열리는데 배포환경는 빈페이지 열림.pdf 파일 위치개발환경에서는 정상적으로 동작을해서 배포쪽 환경설정을 확인을 해보았습니다.

2022년 5월 28일
·
0개의 댓글
·
post-thumbnail

react-query를 이용한 infinity-scroll 구현하기

react-query를 이용하면 infinite-scroll을 보다 쉽게 구현을 할 수 있습니다. react-intersection-observer를 이용하여 infinite-scroll를 구현하는데 내부적으로 IntersectionObserver API를 사용하는데

2022년 5월 27일
·
0개의 댓글
·
post-thumbnail

Intersection Observer API 알아보기

기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공합니다.비동기적으로 실행되기 때문에 메인스레드에 영향을 주지

2022년 5월 26일
·
0개의 댓글
·
post-thumbnail

image lazy loading

lazy-loading은 사용자가(USER) 화면속 필요한 이미지만 로딩을 하고 나머지 지금 화면에 필요없는 이미지들은 나중에 로딩을 하는 것을 말한다. 이렇게 함으로써 페이지의 모든 요소가 로드될때까지 기다릴 필요가 없으므로 웹페이지 사용을 더 빨리 할 수있다. 스크

2022년 4월 26일
·
0개의 댓글
·

react-router V6

리액트 라우터 V6공식문서: https://reactrouter.com/docs/en/v6/upgrading/v5v5 =>v6 마이그레이션 해보면서 익혀보도록 하자.기존 Route에 children, component => element로 변경 가 사라짐 '\

2022년 4월 20일
·
0개의 댓글
·

Redux(4)

1. combineReducers redux로 부터 import

2022년 2월 2일
·
0개의 댓글
·

Redux(3)

src > redux > store.js 우선 하기전에 npm i redux redux 설치최상위 index.js에서 store 값 확인store.getState()로 현재 스토어 값을 가져온다.store.dispatch(액션 생성자)로 스토어를 갱신한다.store.s

2022년 2월 2일
·
0개의 댓글
·

Redux(2)

함수의 인자값으로 현재 스테이트 값, action을 받는다.

2022년 2월 2일
·
0개의 댓글
·

Redux(1)

src > redux > action.js folder 생성

2022년 2월 2일
·
0개의 댓글
·

react-native(2)

스타일링 하는 방법

2021년 10월 20일
·
0개의 댓글
·

React-Native (1)

1. 프로젝트 생성 맨뒤쪽은 프로젝트명을 명시하면됨 2. 시뮬레이터 실행 2-1 IOS 시뮬레이터 실행 하나의 터미널에서 하단 명령어 실행 또 다른 하나의 터미널에서 하단 명령어 실행 실행 시 pod install 에러나면 cd ios 이동 후 pod insta

2021년 10월 20일
·
0개의 댓글
·

바벨

크로스브라우징사용하는 말이 달라서 바벨탑이 실패하듯이 브라우저마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할 때가 많다. 스펙과 브라우저가 개선되고 있지만, 여전히 인터넷 익스플로러는 프라미스를 이해하지 못한다. 크로스브라우징의 혼란을 해결해 줄 수 있는

2021년 10월 13일
·
0개의 댓글
·

WEBPACK Loader

웹팩에서의 로더의 역할웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트로 만든 모듈 뿐만 아니라 스타일시트, 이미지 폰트까지도 전부 모듈로 보기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올 수 있다.이것이 가능한 이유는 웹팩의 로더 덕분이다.

2021년 10월 13일
·
0개의 댓글
·

NPM 버전

version: 17(Major).0(Minor).1(Patch)틸트(~)는 마이너 버전이 명시되어 있으면 패치버전이 변경한다. 예를 들어 ~1.2.3표기는 1.2.3부터 1.3.0미만 까지 포함한다. 마이너 버전이 없으면 마이너 버전을 갱신한다. ~0 표기는 0.0.

2021년 10월 13일
·
0개의 댓글
·
post-thumbnail

AWS CodeBuild로 ECR로 이미지 업로드

깃헙에 프로젝트가 하나 올라가있어야함(DockerFile도 같이 올라가야함)sample: 샘플ECR 레포지토리가 생성이 되어 있어야한다.AWS Concsole에 로그인상단 검색창에 IAM 검색사이드바에서 정책 클릭 후 정책생성 클릭JSON 탭으로 이동해당 내용 입력정책

2021년 7월 24일
·
0개의 댓글
·
post-thumbnail

react-native java.lang.NoClassDefFoundError 해결방법

리액트 네이티브에서 안드로이드 애뮬레이터를 실행했을때 java.lang.NoClassDefFoundError 해결방법자바 gradle 버젼을 수정하는 정상적으로 안드로이드 애뮬레이터가 동작을 하는걸 확인gradle-wrapper.properties에서 distribut

2021년 7월 11일
·
0개의 댓글
·