티스토리

DEVELOP

검색하기

블로그 홈

DEVELOP

cjy00n.tistory.com/m

COMPUTER SCIENCE ENGINEERING FRONT END / BACK END

구독자: 1

방명록 방문하기

주요 글 목록

[ Next js + Notion ] Notion을 DB처럼 쓰는 Notion api Next.js 14버전으로 포트폴리오를 제작하려고 한다. 이번 기회에 Next.js 14를 차근차근 익히고 싶다. 포트폴리오는 내 개인 프로젝트이니까, 궁금했거나 하고 싶었던 기능이나 기술 들을 활용할 예정이다. 그 과정에서 겪는 것들을 블로그에 정리하면 좋을 것 같아서 글을 작성해보고자 한다. 첫번째 게시글은 Notion api에 대한 글이다. Notion을 DB처럼 쓸 수 있도록, Notion api를 사용해보겠다. 평소 Notion을 항상 켜두며 작업할 정도로 자주 쓰는데 , Notion api가 있다는 것을 처음 알았다. 🙀 하드코딩으로 포트폴리오 내부 내용을 작성하기 보다는, 내가 변경하거나 추가하고 싶을 때 Notion에서만 직접 수정하면 되어서 이 방법을 선택하게 되었다. API 통합 생성하.. 공감수 0 댓글수 0 2024. 3. 9.
[에러해결🪄 ] Error: error:0308010C:digital envelope routines::unsupported : Node 버전 맞춰주기 에러발생 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.. 공감수 0 댓글수 0 2024. 1. 18.
[ 에러해결 🪄 ]Node.js vscode errno -2 : node_modules 폴더 삭제 에러 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 공감수 0 댓글수 0 2023. 11. 30.
라즈베리파이 스마트미러 구현 (매직미러 x, 웹 구현) 준비물 라즈베리파이4(4GB), 라즈베리파이 카메라모듈3, USB 마이크, 투명 아크릴판, 하프미러필름, 모니터 ( 액자 및 이젤 선택사항) 개발 환경 웹 프론트엔드 앱 프론트엔드 백엔드 데이터베이스 인공지능 하드웨어 배포환경 협업 스마트미러 시연영상 공감수 0 댓글수 0 2023. 11. 20.
[라즈베리파이4B, python] - 마이크 음성인식하기 음성인식 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.. 공감수 0 댓글수 0 2023. 11. 7.
[React + Vite] Uncaught ReferenceError: regeneratorRuntime is not defined 해당 에러는 비동기 통신을 할 때 주로 나타나는 오류라고 한다. 다른 해결방법들은 시도했는데, 이번 프로젝트는 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.. 공감수 0 댓글수 0 2023. 10. 31.
[에러 해결] "RNCAndroidDialogPicker" was not found in the UIManager clean 후 재빌드하니까 에러 해결 .. yarn add @react-native-community/picker cd android && ./gradlew clean && cd .. 공감수 0 댓글수 0 2023. 10. 30.
[JavaScript] 바닐라 자바스크립트 API KEY 숨기기 (.gitignore) 이번에 스터디에서 바닐라 자바스크립트로 프로젝트를 하고 있는데, 매번 리엑트를 사용하다보니 JS로만 프로젝트를 하는 것은 은근히 까다롭고, JS 공부에 도움이 많이 되고 있다. (얼마나 외부 라이브러리에 의존적이었는지 느끼고 있다.) 리엑트에서 API KEY같은 정보를 외부로부터 숨길 때에 DOTENV를 사용했었는데, 바닐라 자바스크립트에서는 외부 라이브러리를 사용하지 않으므로 사용할 수 없다. 그래서 config.js 파일에 API_KEY 값을 저장하고 export한 후 사용하려는 곳 (api.js)에서 import한 후 gitignore에 추가하는 방식으로 진행했다. 이 방법이 완전히 옳은 방법인지는 잘 모르겠다. 나중에 배포를 하게 된다면 오류가 나게 될 수도 있을 것 같은데, 배포 단계에서 포스팅.. 공감수 0 댓글수 0 2023. 9. 5.
[css] input 태그 자동완성 시 배경 파란색으로 변경되는 이슈 해결 issue 회원가입 기능을 구현하는 중이다. 이메일을 작성하는 input 태그의 배경을 기본값을 가장 위 사진처럼 설정해놨다. (whitesmoke, 아무것도 입력안했을 때) 그냥 입력하면 두번째 사진처럼 원래 배경색으로 나오는데, 자동입력을 하게되면 세번째 사진처럼 배경이 파란색으로 나온다. issue 원인 크롬과 일부 다른 웹 브라우저들은 사용자의 입력 이력을 기반으로 input 필드에 자동완성(Autocomplete)을 제안할 때 :-webkit-autofill 스타일에 !important를 사용하여 적용해두었기 때문에 background-color, background-image, color 등의 스타일링이 어렵다. 이렇게 제안된 자동완성 항목을 사용자가 선택하면 input 필드의 배경색이 파란색.. 공감수 0 댓글수 0 2023. 8. 28.
[SQL] 2. SQL 기본 및 활용 - Chapter 3. 관리 구문 : DML, TCL, DDL, DCL 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'); - 위 방식의 .. 공감수 0 댓글수 0 2023. 3. 13.
[SQL] 2. SQL 기본 및 활용 - Chapter 2. SQL 활용 : 서브쿼리, 뷰, 집합 연산자, 그룹 함수, 윈도우 함수, Top-n 쿼리, 셀프 조인, 계층 쿼리 2023 유선배 SQL개발자(SQLD) 과외노트 를 읽고 내용을 정리한 글입니다. 2023 유선배 SQL개발자(SQLD) 과외노트 - YES24 SQL Server 분야 베스트 1위!핵심만 쏙쏙 담은 알찬 수험서! SD에듀가 가장 효율적·효과적인 합격의 길을 제안합니다.유튜브 선생님에게 배우는 유·선·배, 『유선배 SQL개발자 과외노트』와 함께 20 www.yes24.com 서브쿼리(Subquery) : 하나의 쿼리 안에 존재하는 또 다른 쿼리 SELECT 절 : 스칼라 서브쿼리 (Scalar Subquery) FROM 절 : 인라인 뷰(Inline View) WHERE 절, HAVING절 : 중첩 서브쿼리 (Nested Subquery) - 메인 쿼리의 컬럼이 포함된 서브쿼리를 연관 서브쿼리, 메인 쿼.. 공감수 0 댓글수 1 2023. 3. 12.
[SQL] 2. SQL 기본 및 활용 - Chapter 1. SQL 기본 ② WHERE, GROUP BY, HAVING, ORDER BY, JOIN, STANDARD JOIN 2023 유선배 SQL개발자(SQLD) 과외노트 를 읽고 내용을 정리한 글입니다. 2023 유선배 SQL개발자(SQLD) 과외노트 - YES24 SQL Server 분야 베스트 1위!핵심만 쏙쏙 담은 알찬 수험서! SD에듀가 가장 효율적·효과적인 합격의 길을 제안합니다.유튜브 선생님에게 배우는 유·선·배, 『유선배 SQL개발자 과외노트』와 함께 20 www.yes24.com WHERE절 WHERE절 : INSERT를 제외한 DML문을 수행할 때 원하는 데이터만 골라 수행할 수 있도록 해주는 구문 SELECT * FROM ENTERTAINER WHERE NAME = '이지은'; 비교 연산자 연산자 의미 예시 = 같음 where col = 10 = 크거나 같음 where col >= 10 부정 비교 연산자 .. 공감수 0 댓글수 0 2023. 3. 11.
[SQL] 2. SQL 기본 및 활용 - Chapter 1. SQL 기본 ① 관계형 데이터베이스. SELECT, 함수 2023 유선배 SQL개발자(SQLD) 과외노트를 읽고 내용을 정리한 글입니다. 2023 유선배 SQL개발자(SQLD) 과외노트 - YES24 SQL Server 분야 베스트 1위!핵심만 쏙쏙 담은 알찬 수험서! SD에듀가 가장 효율적·효과적인 합격의 길을 제안합니다.유튜브 선생님에게 배우는 유·선·배, 『유선배 SQL개발자 과외노트』와 함께 20 www.yes24.com 관계형 데이터베이스 개요 관계형 데이터베이스 (RDB, Relational Database) : 관계형 데이터 모델에 기초를 둔 데이터베이스 관계형 데이터베이스에서의 설계는 모든 데이터를 2차원 테이블 형태로 표현한 뒤 각 테이블 간의 관계를 정의하는 것으로 시작된다. RDBMS (Relational Database Management.. 공감수 0 댓글수 1 2023. 3. 11.
[SQL] 1. 데이터 모델링의 이해 - Chapter 2. 데이터 모델과 SQL 2023 유선배 SQL개발자(SQLD) 과외노트 를 읽고 내용을 정리한 글입니다. 2023 유선배 SQL개발자(SQLD) 과외노트 - YES24 SQL Server 분야 베스트 1위!핵심만 쏙쏙 담은 알찬 수험서! SD에듀가 가장 효율적·효과적인 합격의 길을 제안합니다.유튜브 선생님에게 배우는 유·선·배, 『유선배 SQL개발자 과외노트』와 함께 20 www.yes24.com 성능 데이터 모델링 성능 데이터 모델링 : 데이터베이스의 성능을 향상시키기 위해 설계 단계부터 성능과 관련된 사항들이 모델링에 반영될 수 있도록 하는 것 정규화 반정규화 테이블 통합 테이블 분할 성능 데이터 모델링 순서 데이터 모델에 맞게 정규화를 수행한다. 데이터베이스의 용량 및 트랜잭션 유형을 파악하여 성능 저하를 일으키는 부분이.. 공감수 0 댓글수 0 2023. 3. 4.
[SQL] 1. 데이터 모델링의 이해 - Chapter 1. 데이터 모델링의 이해 2023 유선배 SQL개발자(SQLD) 과외노트를 읽고 내용을 정리한 글입니다. 2023 유선배 SQL개발자(SQLD) 과외노트 - YES24 SQL Server 분야 베스트 1위!핵심만 쏙쏙 담은 알찬 수험서! SD에듀가 가장 효율적·효과적인 합격의 길을 제안합니다.유튜브 선생님에게 배우는 유·선·배, 『유선배 SQL개발자 과외노트』와 함께 20 www.yes24.com 데이터 모델의 이해 모델링(Modeling) : 현실 세계를 단순화하여 표현하는 기법 현실 세계에서 필요한 데이터를 저장하는 데이터베이스를 구축하기 위한 분석/설계의 과정 모델(Model) : 현실 세계에서 일어날 수 있는 다양한 현상에 대해서 일정한 표기법에 의해 표현해 놓은 모형 모델링은 모델을 만들어가는 일 모델링이 갖춰야 할 조.. 공감수 1 댓글수 0 2023. 3. 4.
[ 생활코딩 web2 - php ] 3. CRUD 구현 - post 방식으로 받아온 데이터의 값을 얻는 방법 : $_POST['데이터이름'] $_POST['title'] - 파일 쓰기 함수 : file_put_contents() file_put_contents('./data/'.$_POST['title'],$_POST['body']); - php의 redirect 함수 : header('Location: ~'); header('Location: /index.php?id='.$_POST['title']); 쓰기 기능 구현 (CREATE) - create 링크 클릭 시 title과 body입력 칸 나옴 - title, body 입력 후 create 클릭 시 해당 내용의 파일 생성되며 - create한 내용 보이도록 링크 redirect create 수정 기능 구.. 공감수 0 댓글수 0 2022. 12. 18.
[ 생활코딩 Web2 - php ] 2. php의 원리/ php 기본 문법 / 함수선언 / 배열 / 조건문 / 반복문 php의 원리 * html 파일 전송 시 (정적) - 웹 서버에서 html 파일을 요청받으면 그대로 읽어서 그대로 전송함 ( 언제나 똑같은 정보를 보여줌) * php 파일 전송 시 (동적) - php 파일을 요청받으면 웹 서버가 자신이 처리할 수 없다는 것을 알고, PHP프로그램에게 위임함 - php파일을 열어보고 가 나오면 해석한 결과를 웹 서버에게 보내고 웹 서버는 웹 브라우저에게 보냄 - 웹 브라우저는 php코드가 없는 순수 html만으로 이루어진 정보를 받음 php의 기본 문법 - php 시작과 끝을 알리는 기호 - 출력문은 echo 함수, 문장의 끝에는 항상 세미콜론(;) 붙여주어야 함 echo 1+2; - 문자열 연결할 때는 '.' 으로 연결 "Hello"."World!" - 문자열 길이는 s.. 공감수 0 댓글수 0 2022. 12. 18.
[ 생활코딩 Web2 - php ] 1. WampServer 이용하기 ( + vs code ) WampServer 이용하기 - wampserver 다운로드 : https://www.wampserver.com/en/ WampServer WampServer est une plate-forme de développement Web sous Windows pour des applications Web dynamiques à l’aide du serveur Apache2, du langage de scripts PHP et d’une base de données MySQL. www.wampserver.com - 성공적으로 설치 후 server가 켜지면 http://localhost/ 접속 시 아래와 같은 화면 뜸 - C:\wamp64\www 폴더에 test.php 파일 생성 후 localhost/test .. 공감수 0 댓글수 0 2022. 12. 14.
[ 생활코딩 - Web2 Python ] Flask Framework - CRUD 구현 온라인 서비스로 Flask 개발환경 세팅하기 https://glitch.com/edit/#!/resilient-tricky-oak?path=server.py%3A8%3A0 에 접속 Glitch Code Editor ･ﾟ✧ Simple, powerful, free tools to create and use millions of apps. glitch.com - Remix 버튼 클릭해서 개발환경 복제하기 - 하단 Preview - Open previwq pane 클릭해 웹 화면의 결과 확인 가능 Flask의 라우팅 - 어떤 프레임워크를 사용할지라도 라우팅이 가장 첫번째로 이루어져야하고 가장 중요함 - https://www.geeksforgeeks.org/flask-app-routing/ 참고 - 변수를 UR.. 공감수 0 댓글수 0 2022. 12. 14.
[ 생활코딩 - Web2 Python ] Django Framework - CRUD 구현 Django 설치 및 포트 접속 $ pip install django $ django-admin startproject project-name $ cd project-name $ python manage.py runserver $ django-admin startapp myapp - 127.0.0.1:8000 접속 후 아래 화면 뜨면 포트 접속 성공 - 포트 번호 직접 지정 가능 $ python manage.py runserver 8888 라우팅 - 어떤 프레임워크를 쓰더라도 라우팅이 가장 중요 - myproject/urls.py from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin.. 공감수 0 댓글수 0 2022. 12. 13.

문의안내

티스토리
로그인
고객센터

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