본문 바로가기

react14

ReactNative 초기 환경 구성(with. Cursor AI) ReactNative 한번도 안해본 백엔드 개발자가 AI 도구(cursor)를 사용해서ReactNative로 Helloworld 까지 찍어보는걸 시도해보았습니다.그 과정을 포스팅해봅니다. 1. 환경맥북M2 에어를 사용 중입니다.node 버전은 v20.15.0이 설치되어 있습니다. 2. Cursor로 프로젝트 시작하기에 앞서...먼저 rule을 작성하는 것을 권장합니다. 저는 아래 경로에다가 만들었습니다.{프로젝트 루트}/.cursor/rules/react-native-test-rule.mdc You are an expert in JavaScript, React Native, Expo, and Mobile UI development. Code Style and Structure: - Write.. 2025. 6. 28.

React 에서 활성화된 focus 해제(blur) 방법. [feat. Typescript] 모바일 웹브라우저를 통해서 React로 작성된 웹페이지 이용할 때 input box에 텍스트 입력시 하단 영역에 키보드가 표시되게 됩니다. 보통은 입력완료하고 다음 단계 진행 시 해당 키보드 영역은 사라지게 되는데요. 여기서 입력하다가 중간에 다른 작업을 수행하려하려 키보드 영역을 사라지게 하고싶다면. 해당 input box에 onBlur 이벤트를 호출해주면 됩니다. 아래와 같이 말입니다. (Typescript코드입니다. 그냥 React에서는 document.activeElement.blur() 해주면 됨) function App() { const otherOneTouch = useCallback((event: TouchEvent) => { (document.activeElement as HTMLElem.. 2020. 12. 3.

React 에서 WebSocket 활용하기 (feat. Typescript) React에서 Websocket 연결 및 간단 사용방법에 대해서 정리합니다. 서버단 코드는 따로 없습니다. 서버는 있다고 가정합니다. ^^: React + Typescript 환경의 프론트 엔드 코드만 있어요. (웹 소켓 서버 구축은 검색해보면 많이 나와요...Pass) 01. CRA로 프로젝트 생성하기 create-react-app ws-example --typescript 위 같은 커맨드로 React 프로젝트를 생성합니다. 02. Package 구조 └─src │ App.css │ App.tsx │ index.tsx │ ├─components │ Chatting.tsx │ TextInputBox.tsx │ └─websocket WebSocketProvider.tsx 필요없는거 날리고 간단하게 위와 같.. 2020. 9. 16.

React 에서 Canvas 활용하기 (feat. Typescript) React를 활용해서 canvas를 그림판처럼 활용해보는 예제입니다. 01. CRA를 이용해 프로젝트 생성 create-react-app canvas-example --typescript --typescript를 붙여서 React + Typescript 트프로젝트를 생성합니다. 02. canvas element 추가 import React, { useRef } from 'react'; import './App.css'; interface CanvasProps { width: number; height: number; } function App({ width, height }: CanvasProps) { const canvasRef = useRef(null); return ( ); } App.default.. 2020. 9. 11.

React 메뉴 활성/비활성 상태 관리하기 대부분의 웹사이트는 현재 표시하는 메뉴가 어떤 메뉴인지 사용자에게 알려줍니다. 색깔을 다르게 표시한다던가 해서 말이죠. 이번에는 React로 Menu에 대한 상태 관리 방법을 간단하게 정리해봅니다. 상태관리 도구는 Redux를 사용합니다. 아래 예제는 타입스크립트를 사용했습니다. 01. index.ts / App.ts // index.ts import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import store from "./store/configureStore"; ReactDOM.render( , document.getElementById('root')); // App.ts import React f.. 2020. 2. 5.

2019 Log 2018 Log에 이어 올해도 회고록을 작성해본다. 2019년은 시간이 빠르게 흘러간 것 같은 느낌이든다. 시간이 빨리 흘러갔다는 것은 그만큼 변화가 없고, 새로운 경험도 없었다는 것의 반증이다... 뇌속에 새롭고 신선한 뭔가가 저장되지 않았다. 이토록 슬플수가...ㅜㅜ "회사출근 - 퇴근 - 가끔 집공부 - 잠 - 주말데이트 or 스벅 공부" 루틴이 반복된 것 같은데, 크게 기억에 남는 일이 없었던것 같다. 2020년에는 더 행복한 삶을 사는 개발자가 되기 위해 올 한해의 개발회고를 해보도록 하자. 토이 프로젝트(팻 프로젝트) 크게 3가지의 토이 프로젝트를 기획하고 개발했다.(고 쓰고 싶지만 개발중단됬다고 보는게 맞겠네유) 첫 토이 프로젝트로 NBA 선수검색 서비스를 만들어보고자 했다. 평소 NBA를 .. 2020. 1. 3.

React 이미지파일 미리보기 이번에는 React 프로젝트에서 이미지 파일 미리보기 기능을 정리합니다. 음.. 좀더 상세히 말하면 웹사이트에서 이미지 파일을 업로드 하기전에! 웹사이트 상에 이미지를 출력하여 미리보기 하는 기능입니다. 간단한 예제를 만들며 정리하겠습니다. 01. 화면 UI 만들기 화면 UI는 아래와 같이 만들어 보겠습니다. 간단하게 이미지 미리보기영역과 input(type file)박스입니다. 코드는 아래와 같습니다. import React from 'react'; function App() { return ( ); } export default App; 02. State 추가하기 이미지는 미리보기 할때는 에 들어갈 base64 인코딩 값이 필요합니다. 또 file의 상태도 필요할겁니다.(결국 업로드는 file을 하는.. 2019. 12. 24.

React 프로젝트 Font 적용하기 해당 글에서는 Material-Ui 라이브러리를 사용하여 React 프로젝트에 웹 Font를 적용하는 방법을 정리합니다. 먼저 폰트파일은 아래 사이트에서 다운로드 받을 수 있습니다. 무료 한글 폰트 사이트 ↓↓↓ https://noonnu.cc/index 이후 create-react-app으로 프로젝트 생성 했다는 가정하에 진행합니다. 01. material-ui 설치 npm install @material-ui/core 02. font 디렉토리 생성 src | App.tsx | index.css | index.tsx | react-app-env.d.ts | serviceWorker.ts | +---fonts | CookieRunBold.ttf 위와 같이 index 경로에 fonts 디렉토리를 생성하고 .. 2019. 11. 16.

React로 ProgressBar 구현하기 요즘 몇몇 웹사이트 들어가보면 브라우저 상단에 ProgressBar가 동작하는 것을 확인 할 수 있습니다. 유투브, 구글애드센스 등 브라우저에서 요청을 하면 ProgressBar를 표시해서 사용자에게 나름(?) 사용성을 향상 시켜줍니다. 해당 글에서는 React 프로젝트에서 상단 ProgressBar를 구현하는 방법을 정리합니다. 아래의 주요 라이브러리를 사용했습니다. CRA(Create React App) Axios(비동기 요청 라이브러리) Material-UI(React UI 라이브러리) 01. 관련 라이브러리 설치 1 2 npm install --save axios npm install --save @material-ui/core cs material-ui의 progressbar 컴포넌트를 사용할 .. 2019. 10. 4.

Redux-Saga 로 비동기 요청 예제 redux-saga는 애플리케이션의 "부작용"들(데이터 요청(fetch) 등의 비동기 작업, 브라우저 캐시 같은 순수하지 않은 것들)을 쉽게 관리하고 효과적으로 실행하고 간단한 테스트와 쉬운 실패 처리를 목적으로 한다. redux-saga는 애플리케이션에서 필요한 사이드 이펙트를 별도의 스레드로 분리해서 관리할 수 있고, 리덕스의 미들웨어로 리덕스의 액션은 스레드를 시작, 중지, 취소시킬 수 있다고 한다. (redux-saga github에서 발췌) redux-saga를 이용해서 어떻게 애플리케이션을 작성하는지 나름 정리를 해볼까합니다. 검색요청을 하는 기능을 만든다고 가정합시다. 동작은 간단합니다. input box에 검색어 입력 검색 버튼 클릭 서버로 비동기 요청 수행 요청에 대한 성공 또는 실패를 .. 2019. 8. 18.

React 이미지 파일 업로드 하기 React로 파일을 업로드 방법을 정리하려고합니다. 간단한 방법은 아래와 같습니다. 클라이언트 앱(react) view 페이지에서 input[type=file] 요소를 적절한 위치에 추가. state 추가( state를 이용해서 파일을 업로드하려고합니다.) input[type=file] 이벤트 처리 추가 전송 버튼 클릭 시 axios 호출 코드 추가 서버 앱(express) multer 설치(aws s3에 업로드하려면 multer-s3 설치) fileupload 모듈 작성 route에서 upload 코드 추가 먼저 클라이언트앱을 작성해봅시다. 01. view 페이지에 input[type=file] 추가 ./src/App.js import React, { Component } from 'react' cla.. 2019. 6. 24.

React와 Express 서버 연동 시키기 React로 토이 플젝을 진행 중인데 서버 코드가 필요하고 Express 서버를 사용할까 합니다. 간단하게 Express로 서버를 만들고 React와 연동 시켜보겠습니다. 연동 방법은 create-react-app v2에서 새롭게 추가된 기능 중 하나인 proxy 설정 커스터 마이징을 이용하는 것이고 npm-run-all 모듈을 이용해서 명령어 하나로 client와 server를 동시에 띄워볼려고 합니다. create-react-app로 플젝이 생성 완료 됬다고 가정하고 진행하겠습니다. 01. server 작성 먼저 src와 같은 level에 server라는 폴더를 만들었습니다. 그리고 app.js를 아래와 같이 작성하였습니다. const express = require('express'); const .. 2019. 4. 28.

이전 1 2 다음

티스토리툴바