목록분류 전체보기 (95)

히치키치

이상청 : 미디어쿼리와 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
이상청 : Github actions 이용한 AWS 배포 CI/CD

CI/CD 💙 어플리케이션 개발 단계부터 배포까지 자동화를 통해 효율적이고 빠르게 사용자에게 빈번히 배포할 수 있는 것 파이프라인 Code ⇒ Build ⇒ Test ⇒ Release ⇒ Deploy CI : Continuous Integration 코드 변경 사항을 주기적으로 빈번하게 머지함 통합을 위한 단계 (빌드, 테스트, 머지)의 자동화 주기적으로 머지된 코드의 변경 사항이 자동으로 빌드가 되어야 함 코드 변경 사항 이후에도 코드의 빌드 성공 여부 확인되어야 함 코드 변경 사항으로 인해 기존 시스템에 버그 초래 여부 테스팅 진행함 → 개발 생산성 향상, 빠른 코드 결함과 문제점 발견으로 인한 버그 수정 용이 CD : Continuous Delivery / Continuous Deployment C..
이상청 2022. 8. 6. 19:21
Prev 1 ··· 4 5 6 7 8 9 10 ··· 24 Next