반응형 JavaScript/React7 [React] Fullpage jQuery 를 통해 이용하기. 라이센스를 사야하기 때문에 방법을 찾아보다가 알게되었으며 중간에 오류가 있어 기록을 남긴다. https://velog.io/@juunini/react%EC%97%90%EC%84%9C-fullpage-v2-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 react에서 fullpage v2 사용하기 별거 아닐 줄 알았는데 webpack 설정까지 가는 험난한 여정을 담은 fullpage 사용기 velog.io 사용법은 위 링크에 잘 설명되어있다. 1. 필요한 모듈 설치 1 2 yarn add fullpage.js@2.9.6 jquery yarn add -D @types/jquery cs 2. webpack.config.js 수정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 /*.. 2022. 8. 24. [React] React + Typescript + SCSS + Webpack + Babel 래퍼런스 참고용. https://velog.io/@_uchanlee/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9B%B9%ED%8C%A9%EC%9C%BC%EB%A1%9C-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0without-CRA#%EB%AA%A9%EC%B0%A8 리액트 웹팩으로 개발 환경 구축하기(without CRA) 지인의 블로그를 보다가 충격적인 사실을 발견했다."내가 회사에 가서도 CRA를 통해 개발할까? " 🤔에 대한 답변이 X(아니?) 라는 사실이였다. 몇개월 뿐이지만 리액트를 공부한 시점부터 현재까 velog.io https://velog.io/@eamon3481/React-TypeS.. 2022. 8. 4. [React] Useful Third Party Library 유용한 리액트(React) 라이브러리 정리 etc) https://www.w3schools.com/ W3Schools Free Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information .. 2022. 7. 14. [React, 두둥] React Router 를 이용한 페이지 이동 미루고 미루며 간간히 있는 웹페이지 작업은 하나의 페이지에서 컴포넌트를 숨기고 열면서 흉내만 냈다. 주소도 안바뀌곸ㅋㅋㅋㅋㅋㅋ 그런데 카카오 로그인을 하면서 redirectUri가 필요해서 /auth 페이지를 만들어보고 페이지간 이동하기도 해보려고 한다. 오랜 숙원을 끝내러 왔다. reactrouter.com/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com 무조건 처음은 뭐다? 공식문서다. 그래야 기반을 확실히 다질 수 있고 다른 사람의 설명을 보더라도 쉽게 이해가 가능하기 때문이다. npm install --save react-router-dom App.j.. 2021. 3. 19. [React,두둥] 카카오톡 로그인 (1) 카카오톡을 통해 사용자 정보를 받아오고 이를 파이어베이스를 통해 가입 및 로그인을 구현하자. 1. Kakao Developers 에 가입을 한 후 어플리케이션을 추가하자. 2. root/public/index.html ... JAVASCRIPT_KEY 는 Kakao Developers -> 내 애플리케이션 -> My App -> 앱 키 (JavaScript 키) 3. App.js //Line 1 /*global Kakao*/ function App(){ useEffect(()=>{ console.log(Kakao.isInitialized()) },[]) return( ... ) } 한 번 더 확인해준다. /*global Kakao*/를 필수적으로 적어주자. Kakao.Auth.authorize는 redi.. 2021. 3. 18. [두둥] react-responsive & react-device-detect 파이어베이스로 호스팅을 하기 때문에 하나의 프로젝트에 하나의 소스만 올릴수 있다. 따라서 두가지 방법이 있다. 1안 웹용 소스, 모바일용 소스를 각각의 프로젝트에 올려서 domain.com 과 m.domain.com에 적용할지 2안 하나의 소스 내부에서 PC || Table || Mobile 을 판단해서 이에 따라 적용할 소스를 바꿔주는 것이다. 관련 정보를 찾아본 결과 "반응형 모듈" 을 사용해서 구현하는것이 대중적으로 보인다. 이는 화면의 크기에 따라 구분하는 것이다. github.com/contra/react-responsive#react-responsive-- contra/react-responsive CSS media queries in react - for responsive design, a.. 2021. 3. 17. [React, Next.js] When to Use Static Generation VS Server-side Rendering nextjs.org/learn/basics/data-fetching/two-forms Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 보통의 경우에는 Static Generation을 권장하지만 유저의 요청에 따라 빈번하게 데이터를 업데이트해야하는 경우라면 Server-side Rendering을 추천한다. 2020. 10. 25. 이전 1 다음 반응형
