DEVELOP
article thumbnail
[ React + netlify ] React 앱 netlify로 배포하기 (GitHub 연동, page not found 해결 )
FRONTEND/React 2023. 11. 1. 19:14

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=..

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
[ mongoDB + express + ejs ] 간단한 get, post, delete 구현하기
BACKEND/Node.js 2023. 9. 27. 03:21

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 ..

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
[JavaScript] setTimeout 함수로 디바운싱 / 쓰로틀링 구현하기
FRONTEND/JavaScript 2023. 8. 28. 23:45

디바운싱(debouncing)이란? -> 변화하는 도중에는 효과가 발생 안 하다가, 멈출 시 효과가 발생하는 것 디바운싱 구현 with setTimeout / clearTimeout 전역 변수로 timer 변수를 정의한다. setTimeout을 실행하는 타이머를 이 timer에 저장한다. 특정 이벤트(여기에서는 input)리스너를 등록한다. 만약 timer 값이 있다면, 아직 타이머에 설정한 시간이 지나지 않았으므로, 다시 타이머를 초기화해준다. (clearTimeout) timer에 setTimeout를 저장하며, 실행될 코드를 안에 작성한다. let timer; $(window).resize(function() { clearTimeout(timer); timer = setTimeout(function..

article thumbnail
[ JavaScript ] 프로그래머스 level1 문제 풀이 (6)
CODING TEST/Programmers 2023. 8. 8. 01:41

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr GitHub - cjy00n/coding-test Contribute to cjy00n/coding-test development by creating an account on GitHub. github.com 실패율 #42889 문제 설명 실패율 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로..