목록전체 글 (96)

히치키치

이상청 : CSS Position과 Canvas, html link를 사용한 곰돌이 아바타

목표 : CSS Position을 이용해 api 응답값에 대응하는 여러 png 이미지를 하나의 영역 내 겹쳐서 곰돌이 아바타 생성 html2canvas를 사용해 곰돌이 아바타 영역에 대한 uri 생성 후 html link 속성을 이용해 로컬 다운로드 가능 cf) html2canvas와 aws s3 간의 보안 정책상 제약 때문에 로컬의 이미지 사용하는 방식으로 진행함 💙 CSS Position의 relative와 absolute 간의 관계 사용해 곰돌이 아바타 생성 1. 부모 relative이고 자식이 absolute인 경우 부모를 기준으로 자리를 잡음 2.html2Canvas의 datatoURL 이용해 URI 생성하고 html a 태그에 href와 download 파일 명을 지정해 클릭시 해당 이미지가 ..
이상청 2022. 8. 8. 06:15
이상청 : 미디어쿼리와 useWindowWidth() 이용한 반응형 웹페이지

💙 반응형 웹 1. 모바일 / PC 사용자 모두에게 이질감 없는 UI 제공 : CSS 미디어 쿼리 사용 2. 모바일 / PC 환경에서 편리한 유저 행동에 근거해 반응형 컴포넌트 렌더링 모바일 : 스크롤로 투표 목록 보기 & 드래그를 통해 찬반 투표가 편리 PC : 슬라이드를 넘기며 투표 목록 보기 & 클릭으로 찬반 투표가 편리 : useWindowWidth()와 조건부 랜더링 사용 💙 CSS 단 반응형 처리 : CSS 미디어 쿼리 사용 목표 : 기기 타입별 너비를 상수화하며 기기타입을 키 값으로 활용해서 반응형 CSS가 적용되도록 함 1. 기기별 타입별 너비 상수화 /constants/deviceInfo.js 2. 상수화된 타입별 기기 너비를 이용해 미디어 쿼리문 생성 /styles/mediaQuery...
이상청 2022. 8. 8. 05:47
이상청 : Axios interceptor, instance 모듈화 통한 api 통신

💙 Axios란 Promise api를 활용하는 http 비동기 통신 라이브러리 💙 Axios 선정 이유 1. 간단한 메서드로 요청 타입을 작성해 restful API에 CRUD 요청에 유리함 2. 데이터 전송 시 자동으로 JSON 변환되어 fetch와 달리 JSON.stringify 불필요 3. 별개로 status와 statusText가 별개로 제공되어 철저한 응답 상태 구분/처리 가능 3. http 요청 가로챌 수 있는 interceptor 기능 제공 💙 Axios instance 생성 create() 메서드 사용 config 설정 옵션으로 baseURL, headers의 Access-Control-Allow-Origin, withCredentials을 설정함 headers의 Bearer Token ..
이상청 2022. 8. 8. 04:52
이상청 : Recoil 사용한 비동기적 상태관리 & 사용자 경험 향상

사전 Recoil 공부 내용 https://hixsch-kixsch59.tistory.com/77 Recoil : 시작하기 다음의 공식문서를 공부하며 작성한 내용입니다. https://recoiljs.org/docs/introduction/getting-started/ [Getting Started | Recoil Create React App recoiljs.org](https://recoiljs.org/docs/introduction/.. hixsch-kixsch59.tistory.com https://hixsch-kixsch59.tistory.com/78?category=964664 Recoil : selector에서 비동기 로직 처리 다음의 글을 참고하며 공부한 내용 https://velog.io..
이상청 2022. 8. 7. 05:16
Prev 1 ··· 4 5 6 7 8 9 10 ··· 24 Next