티스토리

Record

검색하기

블로그 홈

Record

record22.tistory.com/m

부족하지만 꾸준히 나아가겠습니다. instagram @__bo0o_

구독자: 2

방명록 방문하기

주요 글 목록

React 중복 체크 ... const [items, setItems] = useState(["A", "B", "C"]); ... if(items.includes("A") { console.log("중복"); } 공감수 0 댓글수 0 2022. 11. 5.
React Native pod install // pod install after remove rm -rf ios/Pods pod install // pod clean pod cache clean --all // remove build (IOS build failed) rm -rf ios/build https://stackoverflow.com/questions/46428752/how-to-clear-or-clean-specific-pod-from-the-local-cocoapods-cache 공감수 0 댓글수 0 2022. 10. 18.
XCode because it has an invalid code signature, inadequate entitlements or its profile has not been explicitly trusted by the user. Error Could not launch "ProjectName" The operation couldn't be completed. Unable to lauch ... because it has an invalid code signature, inadequate entitlements or its profile has not been explicitly trusted by the user. 해결 방법 iPhone 설정 - 일반 - VPN 및 기기 관리 - 개발자 앱 이후 XCode에서 앱을 다시 실행하면 됩니다. 공감수 0 댓글수 0 2022. 10. 10.
Zustand 함수형, 클래스형 함수 실행 및 변수 출력 상태관리 라이브러리 Zustand // store.js import create from 'zustand' const useStore = create(set => ({ deviceId: "", // 변수 setDeviceId: (id) => set(() => ({deviceId: id})), // 함수 deviceName: "deviceNameExample", setDeviceName: (name) => set(() => ({deviceName: name})), init: false, bluetoothState: false, scanning: false, found: false, connecting: false, connected: false ... })) export default useStore 1... 공감수 0 댓글수 0 2022. 10. 6.
React Native Ble Manager, [CoreBluetooth] API MISUSE: <CBCentralManager: 0x...> can only accept this command while in the powered on state [CoreBluetooth] API MISUSE: has no restore identifier but the delegate implements the centralManager:willRestoreState: method. Restoring will not be supported [CoreBluetooth] XPC connection invalid [CoreBluetooth] API MISUSE: can only accept this command while in the powered on state 블루투스 주변 장치 정보를 얻고 싶어서 React Native Ble Manager 사용하다가 (버튼 눌렀을 때 스캔 X) 위와 같은 오류들이 났는데 아래 사이트의 how to I solve [CoreB.. 공감수 0 댓글수 0 2022. 7. 13.
Nextjs Prism Syntax highlighting 1. Code highlighter Library Highlight.js Syntaxhighlighter Rainbow Prismjs 등 2. Prismjs 설치 npm install Prismjs 3. 사용법 // _app.tsx에 추가 import "prismjs/themes/prism-tomorrow.css"; ... import Prism from 'prismjs'; import { useEffect } from 'react'; const code = ` Lorem Ipsum is simply dummy text ... Example ... \ printing and typesetting industry. Lorem Ipsum is simply dummy \ printing and typesett.. 공감수 0 댓글수 0 2022. 3. 23.
font-face 한글/영어, 두께 1. font-face 한글/영어 // font.css @font-face { font-family: "Dongle"; src: url(../../public/font/Dongle-Light.ttf); font-weight: 100; } @font-face { font-family: "Dongle"; src: url(../../public/font/Dongle-Regular.ttf); font-weight: 400; } @font-face { font-family: "Dongle"; src: url(../../public/font/Dongle-Bold.ttf); font-weight: 700; } @font-face { font-family: "Dongle"; src: url(../../public/fo.. 공감수 0 댓글수 0 2022. 3. 17.
Next.js 절대경로 설정 tsconfig.json 파일에 baseUrl: "." 추가 공감수 0 댓글수 0 2022. 2. 25.
Delete `␍`eslintprettier/prettier ESLint .esLint.js 또는 .eslint.json 파일 수정 "rules": { "prettier/prettier": ["error", { "endOfLine": "auto" }] } rules에 내용 추가 공감수 0 댓글수 0 2022. 2. 25.
Next.js 고정 스타일링, styled-components 설치 및 사용법 1. CSS-in-JS 간단하게 말하자면 Javascript 코드에서 CSS를 작성하는 방식 2. CSS-in-JS 라이브러리 중, styled-components 설치 npm i styled-components - emotion 등등.. 2-1) styled-components용 babel 플러그인 및 preset 설치 npm i --save-dev babel-plugin-styled-components npm i babel-preset-next 2-2) 프로젝트 루트 폴더 바로 밑에 .babelrc 파일 생성하여 플러그인 활성화 { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] } https://github.. 공감수 2 댓글수 2 2022. 2. 5.
Next.js styled-jsx 사용법 import css from "styled-jsx/css"; import { NextPage } from 'next' interface Props { data: object } const Table:NextPage = (data) => { const style = css` // 스타일 객체 생성 .table_wrap { width: 100%; max-width: 800px; height: auto; max-height: 500px; overflow-y: auto; margin-bottom: 50px; } .table_wrap::-webkit-scrollbar { width: 8px; } .table_wrap::-webkit-scrollbar-thumb { background-color: #dee2e6; .. 공감수 0 댓글수 0 2022. 1. 28.
eject eject는 아직 git에 commit이 되지 않은 변화가 있다면 진행되지 않기 때문에 먼저 변경 사항을 커밋한 후, eject을 실행해주어야한다. git add . git commit -m "Commit before npm run eject" npm run eject Are you sure you want to eject? This action is permanent. » (y/N) y customizing 등 가능 webpack.config.js sassRegex 수정하면 @import 'utils.scss'; 이런식으로 사용 가능 https://xtring-dev.tistory.com/55 https://stackoverflow.com/questions/48854585/error-with-run-n.. 공감수 0 댓글수 0 2021. 11. 23.
scss 설치 및 사용법 1. 설치 1. node 설치 후 확인 node -v npm -v 2. npm을 이용해 sass 설치 npm install -g sass 3. sass 설치 확인 npm show sass version 2. 사용법 // example.scss // 1. 변수 선언, 변수 사용 가능 $white: #fffffff; $colors: ( red: #e03131, orange: #ff922b, yellow: #ffd43b, green: #69db7c, blue: #74c0fc, indigo: #3b5bdb, purple: #7048e8, gray: #ced4da ); .example-btn { background-color: $white; } // 2. 중첩 기능을 이용하여 편리하게 사용 가능 .btn { pa.. 공감수 0 댓글수 0 2021. 11. 23.
.prettierrc 여러 사람과 협업할 때 코드 스타일 통일 프로젝트 루트 디렉터리(src, public)에 .prettierrc 파일 추가 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 수동 코드 정리 단축키 VsCode F1 - format - prettier 자동 코드 정리 VsCode 설정 - format on save 체크 공감수 0 댓글수 0 2021. 11. 23.
.map, _lodash 1. map이란 Javascript 배열 객체 내장 함수인 map을 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다. 2. map 사용법 var numbers = [1, 2, 3, 4, 5]; var processed = numbers.map(function(num) { return num * num; }); 1) 실제로 적용 const Example = () => { const imgSrc = ["images/example.png", "images/example2.png"]; const imgAlt = ["example.png", "example2.png"]; ret.. 공감수 0 댓글수 0 2021. 7. 6.
Prettier 적용하기 1. Prettier Prettier를 사용하여 자동으로 코드 정리를 하면 코드가 깔끔하게 정렬됩니다. 세미콜론이 빠진 곳에는 세미콜론이 자동으로 추가되고, 작은따옴표/큰따옴표/탭 간격 등을 설정할 수 있습니다. 이는 협업을 하는 과정/규칙을 정하는데 있어 많은 도움이 됩니다. 2. 설치 먼저 VSCode에 prettier 확장 프로그램을 검색하여 설치합니다. 3. 설정 File - Preferences - Settings 에 들어간 후에 { ... /* Prettier 정의 */ "prettier.printWidth": 200, /* 줄바꿈 하여 보여줄 길이 지정 */ "prettier.tabWidth": 2, /* 탭 간격, 공백 수 */ } 위 아이콘 모양을 누르면 setting.json 파일이 열.. 공감수 7 댓글수 0 2021. 7. 6.
자주 사용하는 확장 프로그램 Beautify Live Sass Compiler Live Server Path Intellisense Prettier indent-rainbow auto rename tag color highlight highlight matching tag : 매칭되는 태그 강조 bracket pair colorizer React-Native/React/Redux snippets for es6/es7 - Themes https://www.freakyjolly.com/top-and-best-vs-visual-studio-code-themes/ Github Theme Dracula Official CRT Themes Dracula Official Panda Theme SynthWave '84 Synthwave x Flu.. 공감수 0 댓글수 0 2021. 7. 3.
React i18next 다국어 처리 1. i18next란 JavaScript로 작성된 국제화 프레임 워크로 여러 국가의 언어를 처리할 수 있도록 하는 것이다. 2. i18next 설치 npm install react-i18next --save 3. i18next을 사용한 다국어 처리 1) 3개의 파일 생성 src/config/lang/i18n.js src/config/lang/translation.ko.json src/config/lang/translation.en.json 첫 번째 사이트를 참고하여 만들었습니다. 2) translation.ko.json, translation.en.json 파일 작성 i18n.js 파일을 작성하기 전, 한국어와 영어, 두 가지 버전을 보여주기 위한 json 파일을 만들고 데이터들을 넣어줍시다. { "he.. 공감수 0 댓글수 0 2021. 6. 20.
네이티브 앱, 웹 앱, 하이브리드 앱 모바일 앱을 만드는 3가지 방법들이 있는데 1. Native App Swift 또는 objective-c 언어, Xcode로 iOS 앱을 만드는 것, Java 또는 코틀린 언어, Android studio로 Android 앱을 만드는 것으로 Native App을 코딩하는데 사용되는 자체 언어로 만든 애플리케이션을 네이티브 앱이라고 합니다. 2. Web App HTML, CSS, JS를 사용해 만들어진 애플리케이션으로 PC용 홈페이지를 모바일에 맞추어 만든 웹 앱을 의미합니다. 그냥 웹 사이트를 보는 것이기 때문에 따로 설치할 필요가 없지만 앱에서 실행할 수 있는 카메라 등을 사용할 수 없고 오로지 브라우저 API만을 사용할 수 있습니다. 3. Hybrid App Native + Web App의 기술을 함.. 공감수 0 댓글수 0 2021. 6. 7.
React-native, 개발환경 및 Expo로 프로젝트 생성/실행 1. React-native란 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크로 React의 방식으로 native 앱을 개발할 수 있습니다. 2. React-native 개발환경 설치 1) nodejs 10.0 이상 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) expo 설치 만든 결과물을 스마트폰으로 확인하기 위해서는 Xcode(mac용)나 Android Studio(window, linux용)가 필요하지만 expo 오픈 소스 플랫폼을 설치하면 아주 간단하게 Application 테스트 해볼 수가 있습니다. 먼저 App store 또는 playstore에서 Expo.. 공감수 0 댓글수 0 2021. 6. 6.
React npm start, package.json React 프로젝트를 실행할 때, 보통 npm start로 실행하지만 위와 같은 명령어로 실행이 되지 않는 경우 프로젝트의 package.json 파일의 scripts 부분을 확인해야합니다. ... "scripts": { "start-client": "react-scripts start", "start": "npm run build && (cd server && npm run start)", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, ... npm run start-client // 또는 npm run-script start-client npm start 대신 위의 명령어를 실.. 공감수 0 댓글수 0 2021. 6. 6.
React dangerouslySetInnerHTML, DOMPurify 1. React dangerouslySetInnerHTML란 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 즉 dangerouslySetInnerHTML 태그를 사용하여 직접적으로 HTML을 삽입할 수 있습니다. 하지만 일반적으로 코드에서 HTML를 설정하는 것은 XSS 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다. 2. React dangerouslySetInnerHTML 사용법 dangerouslySetInnerHTML은 위와 같이 사용될 수가 있는데, 사용자가 입력할 수 있는.. 공감수 2 댓글수 0 2021. 6. 6.
Media Query 디바이스별 분기점 반응형할 때 꼭 필요한 내용이라 혹시 다시 작업할 때 잊어버릴까봐 포스팅합니다! 1. meta viewport 설정 2. 4개의 반응형 분기점 - 낮은 해상도의 PC, 태블릿 가로 : ~1024px - 태블릿 가로 : 768px ~ 1023px - 모바일 가로, 태블릿 : 480px ~ 767px - 모바일 : ~480px 3. 3개의 반응형 분기점 - PC : 1024px ~ - 태블릿 가로, 세로 : 768px ~ 1023px - 모바일 가로, 세로 : ~768px 4. Media Query 사용법 @media screen and (min-width:1024px) { /* Desktop */ } @media screen and (min-width:768px) and (max-width: 1023px).. 공감수 2 댓글수 0 2021. 6. 5.
React Swiper 보기 쉽게 정리하려 포스팅합니다. 1. Swiper 설치 npm i swiper 2. Swiper 옵션 1) 자주 쓰는 옵션 slidesOffsetBefore // 슬라이드 시작 부분 여백 slidesOffsetAfter // 슬라이드 끝 부분 여백 slidesPerView // 한 슬라이드에 보여줄 개수 spaceBetween // 슬라이드 사이 여백 initialSlide // 시작 위치 값 centeredSlides // true 시 슬라이드가 가운데로 배치 navigation={{ // 네비게이션 적용, nextEl: '.swiper-button-next', // 다음 버튼 클래스명 prevEl: '.swiper-button-prev', // 이전 버튼 클래스명 }} pagination={.. 공감수 2 댓글수 4 2021. 5. 31.
React style, className, onClick 보기 쉽게 정리하려 포스팅합니다. 1. React style /* React의 경우 */ 2. React className /* React의 경우 */ 3. React onClick import React from "react"; import "./Example.css"; class Example extends React.Component { funcExample = (idx) => { console.log(idx); } render() { return ( this.funcExample(1)}> ) } } export default Example; 공감수 0 댓글수 0 2021. 5. 31.
React if문 보기 쉽게 정리하려 포스팅합니다. 1. React if { exampleIdx === 1 && 1 출력 } { exampleIdx === 2 && 2 출력 } //Show if someItem {someItem && displayThis} //Show if else {someItem ? displayThisIfTrue : displayThisIfFalse} https://stackoverflow.com/questions/36771017/what-is-the-equivalent-to-ng-if-in-react-js 공감수 0 댓글수 0 2021. 5. 31.
React 자식 컴포넌트에서 부모 컴포넌트 데이터 변경하기 보기 쉽게 정리하려 포스팅합니다. 1. 부모 컴포넌트 import React from "react"; import ChildComponent from "../ChildComponent/ChildComponent"; export default class ParentsComponent extends React.Component { parentsFunction = (idx) => { console.log(idx); } render() { const exData = "data"; return ( // 함수 전달 ) } } 먼저 자식 컴포넌트로 함수를 전달하고 2. 자식 컴포넌트 import React from "react"; export default class ChildComponent extends Reac.. 공감수 0 댓글수 0 2021. 5. 31.
React props, state 사용법 1. React props - React에서 props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있습니다. props을 바꾸려면 부모 컴포넌트에서 바꿔주어야 합니다. 1) 함수형 컴포넌트 function ExampleComponent(props) { return Hello, {props.name}; } export default ExampleComponent; 1-1) 함수형 컴포넌트, 화살표 함수 문법 const ExampleComponent = (props) => { return {props.name}; } export default ExampleComponent; // 또는 const ExampleComponent = ({.. 공감수 0 댓글수 0 2021. 5. 31.
React import, 함수형/클래스형 컴포넌트, ES7 React 확장 프로그램 사용 예 보기 쉽게 정리하려 포스팅합니다. 1. React import // React import React from "react"; // CSS import "./ExampleComponent.css"; // Component import ExampleComponent from '../components/Example/ExampleComponent' // Library import { BrowserRouter } from 'react-router-dom'; import { Route, Switch } from 'react-router'; import { Redirect } from 'react-router'; 2. React Component 기본 / ES7 React/Redux/GraphQL/React Na.. 공감수 0 댓글수 0 2021. 5. 31.
React 프로젝트 설치/생성/실행, 구조, 라우터 설정 보기 쉽게 정리하려 포스팅합니다. 1. React 프로젝트 설치/생성/실행 1) 설치 npm install -g create-react-app 2) 생성 create-react-app client 3) 실행 cd client npm start 2. React 구조 3. React 라우터 설정, BrowserRouter 1) 설치 npm install --save react-router-dom 2) 설정 // App.js(react-router-dom version 5.2.0) import { BrowserRouter, Switch, Route } from 'react-router-dom'; import { Redirect } from 'react-router'; import Header from './c.. 공감수 0 댓글수 0 2021. 5. 19.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.