리액트 (4) 썸네일형 리스트형 리액트 일지 005 | 스크롤 따라다니는 하단 플로팅 바 구현하기 | 리액트 특정 위치에서 스크롤 고정하기 | 리액트 스티키 플로팅 바 | 스크롤 고정 메뉴바 | 리액트 sticky components 에러로그 아래와 같은 사이트 메인 페이지 내 하단에 위치하는 메뉴바를 구현하고자했다. 처음에는 윈도우 화면의 스크롤을 조작해서 설정해야할 줄 알았는데 position: sticky; 라는 속성을 사용하면 css 코드 몇 줄로 간단하게 구현할 수 있는 기능 같았다. 이에 조금 더 찾아보니 플로팅 버튼이나 스티키 헤더같은 경우로 종종 사용되는 경우 같았다. sticky 속성 설정과 위치값만 설정하면 간단하게 해결할 수 있는 부분일 줄 알았는데 생각보다 시간이 좀 걸렸다.. 응애 나 코린이... 플로팅 헤더로는 자료가 많지만 하단에 고정하는 예시는 많이 없는 것 같기에 간단하게 구현했던 방법을 기록해보려한다. 내가 시도했던 다양한 방법들을 기록해놓은 관계로 하단에 3줄요약도 적어놨다. 나의 멋진 해결 /* 스.. 리액트 일지 003 | 리액트 배열 렌더링하기 | API 연동하여 데이터 출력하기 | 리액트 배열 오류 에러로그 아래와 같이 음식 데이터를 받아와 화면에 출력하는 메뉴판을 만들던 중, 데이터를 배열로 받아와 출력하는 과정에서 여러가지 에러를 만났다. 분명 이전에 리액트 배웠을 때엔 배열을 가져와서 배열을 저장하고 map 함수를 써서 출력해주었던 것 같은데 다른 내용으로 시도해보았을 때 잘 안됐어서 좀 많은 시간을 소비했다ㅠㅠ 나의 멋진 해결 타입스크립트에서는 타입 명시를 보다 명확하게 해주어야하는데 그 부분이 부족했다. 이렇게 recoMenu라는 이름으로 useState를 설정하고 axios.get을 통하여 데이터를 받아온 뒤 두번째 인자에 배열을 저장해주었다. 오류가 난 근본적인 이유는 배열도 명시적으로 입력해주어야하는데 그렇지 않으면 암시적으로 항상 비어있는 항상 비어있는 배열을 가져오기 때문이였다(n.. 리액트 일지 002 | 리액트 SVG 파일 겹침 현상 | 여러개의 SVG 파일 사용시 이미지 겹침 현상 | 리액트 SVG 오류 에러로그 아이콘 이미지와 메뉴명을 같이 사용하는 하단 네비게이션 바 구현 중, 이미지아이콘을 SVG링크로 복사하여 사용할 때에 이미지가 겹치는 일이 발생했다. 프로젝트에서 icons 폴더내에 각각의 파일들로 svg링크들을 보관하여 사용하고 있었고, import 경로도 각각 파일로 확실했는데 어디가 틀린지 몰라서 한참 고민했다 ㅠㅠ 심지어 미리보기에서도 각 이미지가 제대로 출력되었다. 이거 확인하려고 svg미리보는 확장팩까지 깔았다. 나의 멋진 해결 알고보니 이런 현상이 발생하는 이유가 SVG 링크의 id가 제일 처음 올린 id와 중복되어서 발생한 에러였다. id가 한가지로 지정되어있었기때문에 해당 아이디를 갖고 있는 홈 이미지만 출력됐던 것이였다. 요렇게 SVG 링크는 각각의 pattern id 를 갖게.. 리액트일지001 | 리액트 메뉴바 클릭시 글자 색상 변경하기 | 변경하고 글자 색상 유지하기 | 리액트 NavLink 에러로그 사이드 프로젝트로 쇼핑몰 구현 중에 아래 이미지와 같이 사이드 메뉴바 클릭시에 글자 색상과 굵기를 변경하고 해당 페이지에 머무를 때에 변경된 글자 스타일을 유지하게 구현하고 싶었다. 나의 멋진 해결 처음에는 useState를 사용하여 상태관리를 하려했는데 좀 더 간단하게 구현할 수는 없을까 찾아보다가 NavLink를 알게 되었다. NavLink는 현재 경로와 to 로 설정한 Link의 경로가 일치하는 경우 특정 스타일을 적용할 수 있는 컴포넌트이다. 코드먼저 //MyPageMenu.tsx import React from 'react'; import { Link, NavLink } from 'react-router-dom'; import * as S from './style'; export con.. 이전 1 다음
