DEVELOP
article thumbnail
[ Next js + Notion ] Notion을 DB처럼 쓰는 Notion api
STUDY 2024. 3. 9. 04:40

Next.js 14버전으로 포트폴리오를 제작하려고 한다. 이번 기회에 Next.js 14를 차근차근 익히고 싶다. 포트폴리오는 내 개인 프로젝트이니까, 궁금했거나 하고 싶었던 기능이나 기술 들을 활용할 예정이다. 그 과정에서 겪는 것들을 블로그에 정리하면 좋을 것 같아서 글을 작성해보고자 한다. 첫번째 게시글은 Notion api에 대한 글이다. Notion을 DB처럼 쓸 수 있도록, Notion api를 사용해보겠다. 평소 Notion을 항상 켜두며 작업할 정도로 자주 쓰는데 , Notion api가 있다는 것을 처음 알았다. 🙀 하드코딩으로 포트폴리오 내부 내용을 작성하기 보다는, 내가 변경하거나 추가하고 싶을 때 Notion에서만 직접 수정하면 되어서 이 방법을 선택하게 되었다. API 통합 생성하..

article thumbnail
[에러해결🪄 ] Error: error:0308010C:digital envelope routines::unsupported : Node 버전 맞춰주기
STUDY/Trouble Shooting🔨 2024. 1. 18. 14:43

에러발생 Error: error:0308010C:digital envelope 에러 도서 [ 웹 개발 스킬을 한 단계 높여 주는 프론트엔드성능 최적화 가이드 ] 를 공부 중인데, 책에서 주어진 깃 레포를 클론 받고 npm run start를 하자마자 아래와 같은 에러가 떴다. 더보기 Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:68:19) at Object.createHash (node:crypto:138:10) at module.exports (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/w..

article thumbnail
[ 에러해결 🪄 ]Node.js vscode errno -2 : node_modules 폴더 삭제
STUDY/Trouble Shooting🔨 2023. 11. 30. 17:37

에러 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

article thumbnail
라즈베리파이 스마트미러 구현 (매직미러 x, 웹 구현)
STUDY 2023. 11. 20. 17:02

준비물 라즈베리파이4(4GB), 라즈베리파이 카메라모듈3, USB 마이크, 투명 아크릴판, 하프미러필름, 모니터 ( 액자 및 이젤 선택사항) 개발 환경 웹 프론트엔드 앱 프론트엔드 백엔드 데이터베이스 인공지능 하드웨어 배포환경 협업 스마트미러 시연영상

article thumbnail
[라즈베리파이4B, python] - 마이크 음성인식하기
STUDY/Trouble Shooting🔨 2023. 11. 7. 19:41

음성인식 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..

article thumbnail
[React + Vite] Uncaught ReferenceError: regeneratorRuntime is not defined
STUDY/Trouble Shooting🔨 2023. 10. 31. 15:58

해당 에러는 비동기 통신을 할 때 주로 나타나는 오류라고 한다. 다른 해결방법들은 시도했는데, 이번 프로젝트는 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..

article thumbnail
[에러 해결] "RNCAndroidDialogPicker" was not found in the UIManager
STUDY/Trouble Shooting🔨 2023. 10. 30. 19:35

clean 후 재빌드하니까 에러 해결 .. yarn add @react-native-community/picker cd android && ./gradlew clean && cd ..

article thumbnail
[JavaScript] 바닐라 자바스크립트 API KEY 숨기기 (.gitignore)
STUDY/Trouble Shooting🔨 2023. 9. 5. 10:46

이번에 스터디에서 바닐라 자바스크립트로 프로젝트를 하고 있는데, 매번 리엑트를 사용하다보니 JS로만 프로젝트를 하는 것은 은근히 까다롭고, JS 공부에 도움이 많이 되고 있다. (얼마나 외부 라이브러리에 의존적이었는지 느끼고 있다.) 리엑트에서 API KEY같은 정보를 외부로부터 숨길 때에 DOTENV를 사용했었는데, 바닐라 자바스크립트에서는 외부 라이브러리를 사용하지 않으므로 사용할 수 없다. 그래서 config.js 파일에 API_KEY 값을 저장하고 export한 후 사용하려는 곳 (api.js)에서 import한 후 gitignore에 추가하는 방식으로 진행했다. 이 방법이 완전히 옳은 방법인지는 잘 모르겠다. 나중에 배포를 하게 된다면 오류가 나게 될 수도 있을 것 같은데, 배포 단계에서 포스팅..

article thumbnail
[css] input 태그 자동완성 시 배경 파란색으로 변경되는 이슈 해결
STUDY/Trouble Shooting🔨 2023. 8. 28. 23:52

issue 회원가입 기능을 구현하는 중이다. 이메일을 작성하는 input 태그의 배경을 기본값을 가장 위 사진처럼 설정해놨다. (whitesmoke, 아무것도 입력안했을 때) 그냥 입력하면 두번째 사진처럼 원래 배경색으로 나오는데, 자동입력을 하게되면 세번째 사진처럼 배경이 파란색으로 나온다. issue 원인 크롬과 일부 다른 웹 브라우저들은 사용자의 입력 이력을 기반으로 input 필드에 자동완성(Autocomplete)을 제안할 때 :-webkit-autofill 스타일에 !important를 사용하여 적용해두었기 때문에 background-color, background-image, color 등의 스타일링이 어렵다. 이렇게 제안된 자동완성 항목을 사용자가 선택하면 input 필드의 배경색이 파란색..

article thumbnail
[SQL] 2. SQL 기본 및 활용 - Chapter 3. 관리 구문 : DML, TCL, DDL, DCL
STUDY/SQL 2023. 3. 13. 00:02

2023 유선배 SQL개발자(SQLD) 과외노트 를 읽고 내용을 정리한 글입니다. 2023 유선배 SQL개발자(SQLD) 과외노트 - YES24 SQL Server 분야 베스트 1위!핵심만 쏙쏙 담은 알찬 수험서! SD에듀가 가장 효율적·효과적인 합격의 길을 제안합니다.유튜브 선생님에게 배우는 유·선·배, 『유선배 SQL개발자 과외노트』와 함께 20 www.yes24.com DML : Data Manipulation Language, DDL에서 정의한 대로 데이터를 입력하고, 입력된 데이터를 수정, 삭제, 조회하는 명령어 INSERT : 테이블에 데이터를 입력하는 명령어 INSERT INTO 입사 (부서명, 입사년월, 입사자사번 ) VALUES ('개발''202201','220101'); - 위 방식의 ..