반응형 JavaScript25 SFC(Single-File Components) https://ko.vuejs.org/guide/scaling-up/sfc.html Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org SFC는 컴포넌트의 템플릿,로직 및 스타일을 하나의 파일(*.vue)로 묶어낸 특수한 파일 형태입니다. 아래는 예시(공식 페이지, Composition API)입니다. {{ greeting }} Vue SFC는 JavaScript, HTML, CSS를 자연스럽게 하나로 합친 것 입니다. SFC의 이점 (공식 홈페이지 인용) 친숙한 HTML, CSS 및 JavaScript 문법을 사용하여 모듈화된 컴포넌트 작성 본질적으로 사용 목적에 따라 구성됨 런타임 컴파일 비용이 없는 사전 컴파일된 템플릿 컴포넌트 범위 CS.. 2024. 1. 19. Option API & Composition API https://ko.vuejs.org/guide/introduction.html#api-styles Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Vue의 컴포넌트는 두 가지 작성 방식이 있다. Option API 그리고 Composition API 우선 Option API에 대해서 알아보자 Option API data, methods, mounted 와 같은 객체를 사용해 컴포넌트의 로직을 정의합니다. 예시(공식 페이지 내)는 아래와 같습니다. 숫자 세기: {{ count }} data에서 컴포넌트가 사용할 속성들을 정의하고 this를 통해 호출 될 수 있습니다. methods에서는 속성들을 컨트롤 할 수 있는 함수를 정의 합니다. mo.. 2024. 1. 19. [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-Native] XML to JSON 공공데이터 포털을 사용하여 데이터를 받아오는데 JSON이 아닌 XML으로만 받을 수 있어서 이를 JSON으로 변환하기 위한 방법을 찾아보았다. https://github.com/connected-io/react-native-xml2js GitHub - connected-io/react-native-xml2js: XML to JavaScript object converter. XML to JavaScript object converter. Contribute to connected-io/react-native-xml2js development by creating an account on GitHub. github.com 검색 결과 위 도구를 사용하기로 했다. Install 1 2 3 npm install.. 2022. 2. 10. [React-Native] fetch [TypeError: Network request failed] 오류 React Native 에서 공공데이터 포탈의 API를 이용하려다 발생한 오류이다. [TypeError: Network request failed] 기본적으로 http 요청을 막아놓아서 발생한 오류로 판단된다 IOS /ios/Pods/Info.plist ... NSAppTransportSecurity NSAllowsArbitraryLoads ... 2022. 2. 9. [React Native] Redux 개발환경... 더보기 System: OS: macOS 11.1 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 2.10 GB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 17.3.1 - /usr/local/bin/node Yarn: Not Found npm: 8.3.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, .. 2022. 1. 17. 안드로이드 폰트 스케일링 끄는 법(Disable FontScaling [React Native] 출처 https://stackoverflow.com/questions/35964078/how-to-disable-font-scaling-in-rn-for-android/44453017 How to disable font scaling in RN for Android? Simply using allowFontScaling={false} fixes this on iOS, but I'm unsure how to set this on Android. Also, for anyone that's not familiar with RN and is coming here from the Android tag, I don't th... stackoverflow.com Please Update ManiApplication... 2021. 7. 30. [React-Native] 도움이 되는 사이트 https://www.reactnative.express/ React Native Express The all-in-one guide to React Native www.reactnative.express React Native 로 할 수 있는 기본적인 UI 표현법(?) 을 배울 수 있다. https://reactnavigation.org/. React Navigation | React Navigation Routing and navigation for your React Native apps reactnavigation.org React Native Navigation 으로 화면 이동을 다룰 수 있다 React의 Router와 같은 역할이다. 2021. 5. 10. [React-Native] error Could not find "Podfile.lock" npx react-native run-ios 실행시 error Could not find "Podfile.lock" at /... 오류 발생 해결법. github.com/bluelion2/Project-issue-repo/issues/14#issuecomment-568258244 [React Native] Cocoapods install이 안될때 · Issue #14 · bluelion2/Project-issue-repo 상황 react-native-cli: 2.0.1 pod --version : 1.8.4 react-native: 0.61.5 React native 개발 셋팅하기 따라하던 중, IOS관련 설치가 불가능하고 실행이 안됨. React-native init project cocoapods을 .. 2021. 5. 10. [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. 이전 1 2 3 다음 반응형
