도서 리액트를 다루는 기술 | 김민준 을 읽고 작성한 게시글입니다. 리액트를 다루는 기술(개정판) 개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요 books.google.co.kr 개인적으로 늘 헷갈리는 부분.. context api / redux 등등. . 이쪽이 유독 개념이 너무 헷갈려서 이 참에 도서를 정독하며 포스트로 정리해보고자 한다. Context API란? Context 먼저, 리액트의 context는 React 컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. 꼭 전역적일 필요는 없으며, 단순히 "리액트 컴포넌트..
에러 errno: -2, code: 'ENOENT', syscall: 'stat', path: '~/node_modules/.cache/default-development/0.pack' 리액트는 Node.js 기반 프로젝트 갑자기 위와 같은 에러가 나면서 프론트 로컬서버가 종료되는 경우가 가끔 발생함 원인은 Node.js 환경에서 기대되는 파일이나 디렉토리가 없거나 경로가 잘못되었기 때문 해결방법 -> node_modules 폴더 삭제 $rm -rf node_modules $npm install 또는 $npm i
준비물 라즈베리파이4(4GB), 라즈베리파이 카메라모듈3, USB 마이크, 투명 아크릴판, 하프미러필름, 모니터 ( 액자 및 이젤 선택사항) 개발 환경 웹 프론트엔드 앱 프론트엔드 백엔드 데이터베이스 인공지능 하드웨어 배포환경 협업 스마트미러 시연영상
음성인식 in Raspberrypi with python SpeechRecognition 필요한 라이브러리 설치 pip3 install SpeechRecognition 에러1. Could not import the PyAudio C module 'pyaudio._portaudio'. AttributeError: Could not find PyAudio; check installation sudo apt-get install -y portaudio19-dev python3-pyaudio asoundrc 세팅하기 나의 경우에는 마이크는 card1, 스피커는 card2(모니터 hdmi 사용) $ sudo nano /usr/share/alsa/alsa.conf defaults.ctl.card 0 defaults..
Scale & Ship Faster with a Composable Web Architecture | Netlify Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now! www.netlify.com 회원가입 및 로그인, 팀 생성 과정은 생략 Add new site - Import an existing project 연동 원하는 깃 레포지토리 선택 빌드 설정해주기 레포지토리 안에 프론트/백을 나누어 관리중이라면 프론트 폴더(client)를 Base directry에 입력한다. build command 는 CI=..
해당 에러는 비동기 통신을 할 때 주로 나타나는 오류라고 한다. 다른 해결방법들은 시도했는데, 이번 프로젝트는 vite로 한 프로젝트여서 babel.config.js 설정이 먹히지 않았다. 아래처럼 하니 해결 ! npm install vite-plugin-babel @vitejs/plugin-legacy // vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import legacy from '@vitejs/plugin-legacy' import babel from 'vite-plugin-babel' // https://vitejs.dev/config/ export default define..
clean 후 재빌드하니까 에러 해결 .. yarn add @react-native-community/picker cd android && ./gradlew clean && cd ..
monogoDB와 express를 연동하고 테스트하기 위해 간단하게 유저리스트를 보여주고, 새 유저를 등록하고, 특정 유저를 삭제하고, 모든 유저를 삭제하는 실습을 할 것이다. (+ejs) MongoDB Database 생성 Cloud: MongoDB Cloud account.mongodb.com 먼저, 위 사이트에 접속하여 MongoDB 를 생성해야 한다. 1. new Project 생성 2. create a depolyment M0 버전으로(무료) provider는 AWS (다른 것도 상관없음) 지역 Seoul Name 지정 후 create 버튼 3. userName과 password 지정(password 기억 꼭하기 !) 하고 create User 4. Add My Current IP Adress ..
이번에 스터디에서 바닐라 자바스크립트로 프로젝트를 하고 있는데, 매번 리엑트를 사용하다보니 JS로만 프로젝트를 하는 것은 은근히 까다롭고, JS 공부에 도움이 많이 되고 있다. (얼마나 외부 라이브러리에 의존적이었는지 느끼고 있다.) 리엑트에서 API KEY같은 정보를 외부로부터 숨길 때에 DOTENV를 사용했었는데, 바닐라 자바스크립트에서는 외부 라이브러리를 사용하지 않으므로 사용할 수 없다. 그래서 config.js 파일에 API_KEY 값을 저장하고 export한 후 사용하려는 곳 (api.js)에서 import한 후 gitignore에 추가하는 방식으로 진행했다. 이 방법이 완전히 옳은 방법인지는 잘 모르겠다. 나중에 배포를 하게 된다면 오류가 나게 될 수도 있을 것 같은데, 배포 단계에서 포스팅..
issue 회원가입 기능을 구현하는 중이다. 이메일을 작성하는 input 태그의 배경을 기본값을 가장 위 사진처럼 설정해놨다. (whitesmoke, 아무것도 입력안했을 때) 그냥 입력하면 두번째 사진처럼 원래 배경색으로 나오는데, 자동입력을 하게되면 세번째 사진처럼 배경이 파란색으로 나온다. issue 원인 크롬과 일부 다른 웹 브라우저들은 사용자의 입력 이력을 기반으로 input 필드에 자동완성(Autocomplete)을 제안할 때 :-webkit-autofill 스타일에 !important를 사용하여 적용해두었기 때문에 background-color, background-image, color 등의 스타일링이 어렵다. 이렇게 제안된 자동완성 항목을 사용자가 선택하면 input 필드의 배경색이 파란색..