다음과 같이 다중 route path에 대해 같은 element로 접근시키려고 했는데v5까지는 support 했지만 v6부터는 지원되지 않는다고 해서 map으로 처리했다.

다국어지원을 하기 위해 i18n을 적용했다.

sticky 버튼을 클릭하면 화면의 최상단 / 최하단으로 스크롤각각의 Icon에 다음의 클릭 이벤트를 넣었다.window.scroll을 사용해서 구현했다.window sizescreen : 모니터 사이즈window.screen.width , window.screen.h

화면에 항상 고정해있는 버튼을 만든다.메인 버튼 : 클릭시 help 기능서브 버튼 : 클릭시 Home / End 스크롤\-> 설계 단계에서는 없었던 거라 이미지를 새로 그리기 애매해서 기존에 있던 이미지를 활용\-> 메인 버튼을 기준으로 서브 버튼의 위치를 고정시킬 예

메뉴를 클릭하면 그에 맞는 카테고리 버튼이 나온 채 유지되어야 하는데,메뉴를 클릭하면 활성화되었던 카테고리가 해제되었다.따로 지정했던 setSelected에 ...selected를 지정하니까 해당 문제가 해결되었다.

🟥 Cannot find file: '.tsx' does not match the corresponding name on disk: '...경로'\-> branch를 합치고나서 pull 을 땡겨왔는데 VSCode 자동완성 때문에 오류가 발생했다.\-> 경로 철자가 틀

외부 prop을 받는 경우 그에 대한 type을 지정해야 하는데,그동안은 아래와 같이 지정하던 것을 그 다음 방식으로 변경했다.코드 길이가 줄었고, 덜 헷갈리게 되었다.

밖에서 컴포넌트만 다르고 전체 구조는 같은 Layout을 추가했다.Outlet을 사용하지 않고 props.children을 사용했다.(1),(2) : 외부에서 prop이 들어오는데, children이 들어오고, 컴포넌트가 들어오니까 React.ReactNode로 지정한

event-driven programming : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 사용자와의 상호작용에 따라 (버틀 클릭, 키보드 입력, 마우스 이동 등) 함수를 호출하여 어떤 처리를 하고 싶을 때, 보통 사용자가 행동을 "언제" 할지 몰라서

media query를 사용해서 데스크톱 사이즈와 모바일 사이즈로 반응형 웹사이트를 만들었는데, 뼈대는 지정한 픽셀에 따라 바뀌었으나 메뉴는 props를 초반에 받아서 그리다보니까 새로고침을 해야 제대로 변경되었다.이에 화면 사이즈가 변경되면 이를 감지하고, 자동으로

1. styled-component로 간단히 드롭다운 구현 원하는 위치에서 dropdown되게 하려면 position:absolute를 사용해야 하는데, absolute는 부모의 position을 기준으로 위치를 선정하는 prop으로, 부모의 position이 rela

media query를 활용해서 디바이스 사이즈에 따라 화면이 다르게 보이게 설정한다.기준은 최소 반응형 레이아웃으로, break point를 각각 다음과 같이 했다.

광고란에 이미지 사이즈가 틀어지지 않았는지 확인하기 위해 일시적으로 인라인 스타일을 적용해보았다. //Section.tsx import { ReactNode } from 'react'; . . . interface Props { img?: string; bod

랜딩페이지에서 섹션 사이에 이미지가 들어가는 파트를 고정하고, 외부 props로부터 쉽게 교체하고 싶었다.평소 React만 쓸 때처럼 타입을 지정하지 않으면 다음과 같은 에러가 발생한다.🟥 Binding element 'img' implicitly has an 'an

아이콘과 전체적인 페이지 색감 등 테스트를 마쳤으니 바로 페이지를 완성하고싶지만,경험상 Layout 구조를 만든 후 페이지를 구현하는 것이 재사용과 관리 측면에서 좋았어서다음의 순서로 개발을 진행한다.Layout 완성dynamic import + 로딩바 구현컴포넌트 +

1. Footer를 body 컨텐츠 크기에 상관없이 하단에 고정 position:fixed; bottom:0; left: 0; right: 0; 2. TS + Styled-Components props 변수 사용 컴포넌트의 기본 margin값을 상수로부터 불러오고, 일

메뉴에 마우스를 호버하면 서브메뉴가 나오고, 밑줄이 가운데에서 밖으로 나가는 애니메이션을 추가했다.서브메뉴는 앞의 두 개의 메인메뉴에서만 적용될 예정이어서, 해당 서브메뉴의 이름들을 constants/data.ts 의 menuData에 list 형태로 저장한 후, ma

1. 아이콘 이미지 제작 Photoshop으로 웹페이지 내에 쓰일 아이콘과 로고 등을 제작했다. (로딩 img는 웹페이지 기능이 어느정도 완료된 후 추가작업할 예정 (gif)) 2. 이미지 스프라이트 기법 (+ Styled-Components) 이미지 스프라이트 기법

금일 오전 메일이 와 있었다.Firebase Cloud Firestore 데이터베이스에 대한 클라이언트 액세스가 3일 후에 만료됩니다테스트 모드에서 개발을 시작하도록 선택했기 때문에 Cloud Firestore 데이터베이스가 인터넷에 완전히 공개됩니다. 공격자에게 취약