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. 스테이징 : 운영 환경과 거의 동일한 환경을 만들어 놓고 릴리즈 이전에 여러가지 ..

접근성을 준수한다는 건 뭘까? 대체 텍스트를 꼼꼼하게 넣는 것? 행정기관 프로젝트 보고서를 읽다보면 "콘텐츠 접근성 지침(국가표준) 24개 검사 항목에 대한 점검을 했는가?","장애유형별(시각,지체,뇌병변,청각) 사용자 평가를 실시하고 장애인 사용자의 어려움을 개선했는가?" 등이 나오는데 이것이 바로 접근성이다. 본 포스트에서는 웹 접근성을 3가지로 정의하고 각 의미에 알맞게 준수해야하는 항목과 항목에 따른 목적,도구, 방법을 설명할 것이다. 또, 실질적인 웹 접근성 개선 방안을 살펴보는 것으로 실제 공공기관에서 겪었던 이슈를 기억하고자 한다. 1. 스크린 리더기를 사용하는 장애인과 고령자에게 차별없는 웹을 제공하기 위하여 준수해야하는 것웹 접근성목적 : "한국형 웹 콘텐츠 접근성 지침"이 존재하며, 이..