- QHD에서 HD 만들 때 그대로 Scale 50%하면 안됨 [적용 공식]1. 폭 관련 값은 절반2. 텍스트/버튼은 절반보다 20%~30% 크게 유지3. 세로 간격은 절반과 동일하게 줄이지 않는다.(0.6~0.7)

URL : https://developedbyssony.github.io/enterpriseBlockchain/ 컨텐츠 영역에 섹션이 16개 들어갔으며, 중간에 div로 묶어준 section에 data-theme="dark"를 적용하였다. 또, .sc_service 섹션 같은 경우 인터랙션에 용이하기 위해 내부에 수직 컨텐츠와 수평 컨텐츠를 따로 묶어주었다. 클론을 하면서 GSAP을 활용한 스크롤 인터랙션을 구사하는 것에 중점을 두었다. 본 포스팅에서 스크롤 인터랙션 시나리오를 간단하게 정리하고자 한다. 일단 GSAP 활용하기 위해 CDN을 넣어야한다. 스크롤 인터랙션을 구현하기 위하여 스크롤 트리거용 CDN도 넣어준다. a. 인트로 구간 const motionIntro = gsap.timeli..

URL : https://developedbyssony.github.io/cellSafe/ 셀세이프PCR 제품 Customization 기성제품의 한계를 넘어 고객이 원하는 용도에 적합한 커스터마이징 제품을 공급합니다.developedbyssony.github.io header, main, footer로 구분되는 간단한 HTML 구조에 미디어쿼리는 1200px를 기점으로 PC와 Mobile에 대응하는 웹사이트이다. 클론을 하면서 간단한 코드로 효과적인 인터랙션을 만드는 것에 중점을 두었다. jQuery를 사용하였으며 1)인터랙티브 헤더, 2)메인 슬라이드(swiper 슬라이드 라이브러리 사용), 3)간단한 모션을 중점으로 문서를 정리하였다. 1) 헤더 - 상위 메뉴 호버// .depth01 요소에 ..

2022년에 만들었던 제주완니라는 웹서비스를 반응형으로 리뉴얼하면서 장바구니 기능을 정상화하고 리팩토링하였다. 우선 2022버전은 https://animated-mandazi-93e439.netlify.app/ 이고, 2025년 버전은 https://jeju2025-5e32e.web.app/ 에서 볼 수 있다. 2022년에 만들어진 장바구니 기능 코드를 보니 정리가 많이 안되어 있었다. 특히, 백엔드 통신을 할지 로컬 스토리지로 저장할지 리덕스를 사용할지 고민한 흔적이 고스란히 나타나있었고, 결국 로컬 스토리지에 저장하는 코드를 짰으나 작동이 되지 않았다. (아래는 고민한 흔적..) /* 백엔드 통신 함수 (한 유저의 장바구니 가져오기) const getCartItems = async() =..

[수정 전 jsx 파일] return ( }/> }/> }/> ... );  url 변경하여 브라우저에서 렌더링되는 화면들이 최초 경로("/")의 화면 아래에 뜨는 현상 발생하여 라우팅 담당하는 jsx파일을 수정하였다. [수정 후 jsx파일] }/> 최초 경로에 해당하는 컴포넌트를 불러올 때 exact를 속성을 추가하여 모든 요청에 매칭되지 않고 정확히 값이 일치할 때만 해당 루트를 호출하도록 디버깅하였다.

1. 로컬 서버 : 개발자 PC의 환경2. 개발 서버 : 각 개발자들이 만든 코드를 합쳐 서버 환경에서 테스트해볼 수 있는 환경3. 통합 서버 : 개발 서버에서 코드가 정상적으로 동작한다면 통합 개발 환경에서 테스트 진행, 개발 서버와 마찬가지로 최소한의 리소스로 구성하며 여러개의 컴포넌트를 동시 개발하고 각 컴포넌트가 다른 컴포넌트에 대해서 dependency를 가지고 있을 때 컴포넌트를 통합 및 테스트하는 환경으로 사용함4. QA 서버 : 개발환경에서 QA환경으로 배포가 되면 여기서 QA 엔지니어가 테스트를 수행한다. (기능/비기능) 여기서 이슈가 발견되면 개발자에게 전달되고 개발자는 해당 이슈를 로컬에서 다시 수정5. 스테이징 : 운영 환경과 거의 동일한 환경을 만들어 놓고 릴리즈 이전에 여러가지 ..