히치키치

💙 meta tag? index.html 파일의 부분에 있으며 문서의 내용, 키워드, 이미지 등을 알려주며 브라우저와 검색엔진에게 해당 페이지에 대한 정보 제공 💙 OpenGraph Protocol Facebook에서 정의한 HTML문서의 메타 데이터 정보를 적는 방식에 대한 규약입니다. url공유시 표현되는 title, thumbnail등은 해당 사이트의 Bot이 og정보를 기반으로 파악하여 표현하는 것입니다. 1. meta 태그 내 og 속성 지정 단순한 링크 공유 시 다음과 같이 보임 (썸네일이 생겼다고 보면 편하다) 2. meta 태그 내 twitter 속성 지정 트위터 공유 시 입력창에 보여주는 방식을 조정함 3. index.html 파일 내 favicon과 사이트 title 지정

목표 : 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 파일 명을 지정해 클릭시 해당 이미지가 ..

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

💙 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 ..