코드캠프 4기 (31) 썸네일형 리스트형 react 빌드후 배포시 image 오류 해결 react 빌드하고 배포진행중에 자꾸 오류가 나서 배포가 안되는 현상이 발생. netlify는 아주 친절하게 가르쳐준다.. image 에 alt 속성안달아서 진행이 안된거였다. next.js에서는 잘만 됬는데.. react에서는 꼭 달아줘야하나보다 React Native: Flatlist 사용하기 https://velog.io/@djaxornwkd12/React-Native-FlatList%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90 React-Native FlatList에 대해 알아보자 오늘은 React-Navtive FlatList에 대해 알아보자! FlatList 컴포넌트란? FlatList는 많은 양의 스크롤이 필요한 리스트 아이템을 보여주고자 할 때 쓰이는 리액트네이티브 컴포넌트이다 JS에서의 map 함수 역 velog.io https://www.skptricks.com/2018/09/react-native-simple-custom-gridview-layout-example.html React Native Simple.. React Native: TextInput Focus시 Border 색상 변경하기 react 웹개발할땐 스타일에 :focus {}를 주면 쉽게 할 수 있었다. react native에서는 :focus가 전혀 먹히지 않아서 다른 방법으로 기능을 구현했다. onFocus, onBlur를 활용하니 문제를 해결할 수 있었다. onFocus는 포커스가 되어있을때, onBlur는 포커스가 아닐때 export default function InputBasic(props) { const [isFocus, setIsFocus] = useState(false); function onFocusInput() { setIsFocus(true); } function onBlurInput() { setIsFocus(false); } return ( ) gitflow workflow gitflow workflow master 배포 브랜치 develop 개발 브랜치 feature branches feature-board feature-product .... feafure branches를 develop 브랜치로 합치기 release branches 배포 확정 된 상황. 버그 잡기 master 최종 배포 hotfixes 마스터 배포할때 버그 발견시 버그 수정 단계 깨진 이미지를 안보이게 하기 https://www.designcise.com/web/tutorial/how-to-hide-a-broken-image-in-react How to Hide a Broken Image in React? Learn how you can hide images that fail to load in React www.designcise.com 스크롤 내릴때 헤더 색깔 바꾸기 https://medium.com/@timothyde/change-header-appearance-when-scrolling-down-with-reacts-useeffect-hook-4b847acbc6fa Change Header Appearance When Scrolling Down with React’s useEffect Hook TL;DR: Using the useEffect Hook with a scroll listener enables us to apply a css class to a component based on the scroll’s pageYOffset medium.com https://www.geeksforgeeks.org/how-to-change-the-navbar-color-wh.. 이전 경로를 세션스토리지에 저장하기 https://www.grouparoo.com/blog/getting-previous-path-nextjs#tracking-the-current-and-previous-page-with-sessionstorage Get user's Previous Path with NextJS Router How to find the previous page a user visited before landing on the current page. www.grouparoo.com select 활용하기 https://wazacs.tistory.com/31 React 에서 select 사용하기 셀렉트를 사용하기 위해 다음과 같이 jsx 구문을 만들었습니다. 0.1톤 0.2톤 0.3톤 0.4톤 {/* 선택하려던 부분! */} 0.5톤 기존 html 에서 디폴트 옵션을 선택하려면 option 태그안에 selected 속성을 주어 동 wazacs.tistory.com Side sheet https://codesandbox.io/s/side-sheet-5l64b?from-embed=&file=/src/SideSheet.js Side Sheet - CodeSandbox Side Sheet by zvakanaka using react, react-dom, react-radio-group, react-scripts codesandbox.io 리액트 체크박스 구현하기 https://velog.io/@tunakim/React-CheckBox-%EC%A0%95%EB%A6%AC-%EC%A0%84%EC%B2%B4-%EC%84%A0%ED%83%9D-%ED%95%98%EA%B8%B0 React CheckBox 정리 ( 전체 선택 하기 ) React에서 체크 박스에 관련된 기능 구현을 정리한 글입니다.전체 체크 기능개별 체크 기능개별 체크 모두 체크 시 자동으로 전체 체크 ( 반대 상황 포함 )checkedList 배열개별 체크 박스들을 저장할 velog.io 이전 1 2 3 4 다음