React&React-Native (37) 썸네일형 리스트형 [#. React] React functional 함수형 컴포넌트에서 const(arrow function) vs function 차이점 React Hook을 사용하는 함수형 컴포넌트에서 ① const(Arrow Function) import React from 'react'; const TestPage = () => { return( TEST ) } export default TestPage; ② Function import React from 'react'; function TestPage() { return( TEST ) } export default TestPage; 이렇게 두 가지로 사용하는 것을 볼 수 있다 이 두 가지 방식의 차이점이 궁금하다 ⑴ const const printThing = () => { console.log(`Random number : ${getRandom()}`) } printThing() const ge.. [#. React] Web/Mobile 웹/모바일 토글 메뉴바 toggle menubar 추가하기 네비게이션 바에 있는 메뉴를 웹에서는 펼쳐진 상태로 보고 모바일에서는 햄버거바 ☰ 형태로 접혀 있도록 하려고 한다 ① packages 설치 antd // UI Framework @ant-design/icons // UI Icon styled-components // scss react-device-detect // web/mobile device 구분 이렇게 설치해서 사용할 것이다 npm install --save antd npm install --save @ant-design/icons npm install --save styled-components npm install --save react-device-detect ② frontend/src/components/NavBar/NavBar.js imp.. [#. React] react-device-detect 설치 후 웹/모바일 감지해서 반응형 사이트 만들기 react로 웹을 개발하려고 하는데 모바일 사이즈에서도 볼 수 있도록 반응형으로 개발해야 한다 react-device-detect를 설치하면 웹/모바일을 감지해서 따로 코딩할 수 있다 https://www.npmjs.com/package/react-device-detect react-device-detect Detect device type and render your component according to it www.npmjs.com ① react-device-detect 설치 npm install --save react-device-detect ② Landing.js 수정 ⑴ BrowserView, MobileView 사용하기 mport React from 'react'; import { Brow.. [#. React] React에서 swiper 사용하기, 배너 슬라이드 사용하기 html에서 swiper 사용하는 것과 조금 다르기 때문에 React에서도 swiper를 사용해 보려고 한다 swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com ① swiper 설치하기 npm install --save swiper ② 프로젝트/src/components/MainPage/MainPage.js import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Navigat.. [#. React] Kakao 카카오 지도 API를 이용해서 키워드로 장소 검색하기, 검색한 장소 마커 띄우기, 검색 결과 리스트 가져오기 2 키워드 검색 후 마커만 띄울 거라면 이 글을 참고하면 된다 앞글에 가서 kakao developers에서 앱키 발급 후 세팅만 하고 오자 developer0809.tistory.com/90 [#. React] Kakao 카카오 지도 API를 이용해서 키워드로 장소 검색하기, 검색한 장소 마커 띄우기 ① APP KEY 발급 받기 카카오에서 상세한 발급 과정을 알려준다 이렇게 앱키를 발급 받았으면 여기서 JavaScript 키를 사용할 것이다 ② 프로젝트/public/index.html 사이 아래 script를 추가한다 ③ 프로젝 developer0809.tistory.com ① 프로젝트/src/components/views/Landing/Sections/MapContainer.js import React,.. [#. React] Kakao 카카오 지도 API를 이용해서 키워드로 장소 검색하기, 검색한 장소 마커 띄우기 ① APP KEY 발급 받기 카카오에서 상세한 발급 과정을 알려준다 이렇게 앱키를 발급 받았으면 여기서 JavaScript 키를 사용할 것이다 ② 프로젝트/public/index.html 사이 아래 script를 추가한다 ③ 프로젝트/src/components/views/Landing/LandingPage.js import React, { useState } from 'react' import MapContainer from './Sections/MapContainer' function LandingPage() { const [InputText, setInputText] = useState('') const [Place, setPlace] = useState('') const onChange = (e) .. [#. React] React에서 checkbox select all 체크박스 전체 선택, 전체 선택 해제 하기 React에서 Checkbox 전체 선택/전체 해제, 각각 체크/해제를 해보자 난 UI Framework로 ant design을 사용해서 antd에서 Checkbox를 가져왔지만 아닌 경우, 다른 프레임워크에서 가져오거나 이렇게 input으로 가져와서 type을 checkbox로 지정해서 사용해도 된다 import React, { useState, useEffect } from 'react'; import { Checkbox } from 'antd'; function CheckTest(props) { const [CheckList, setCheckList] = useState([]) const [IdList, setIdList] = useState([]) // 장바구니 리스트 props로 받아왔을 때, .. [#. React] CRA(create-react-app)에 ESLint, Prettier 적용, 설정하기 CRA(CRA(create-react-app)로 시작한 React 프로젝트에 ESLint와 Prettier를 적용해 보자 ESLint(ES + Lint) 린트(lint)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 말한다 따라서, ESLint는 Javascript 문법에서 에러를 표시해주는 도구다 ESLint를 사용하게 되면 의도치 않은 실수뿐만 아니라 전반적인 코딩 스타일을 표준화한다 => 협업 시 균일화된 스타일을 유지할 수 있다 Prettier 정해놓은 규칙에 따라 자동으로 코드를 정렬해 준다 Formatting ESLint에도 Formatting 기능이 있기 때문에 ESLint의 기능은 종료해 둬야 한다 ① VSCode에.. 이전 1 2 3 4 5 다음
