본문 바로가기

분류 전체보기

 (265)
[React] package.json 종속성 업데이트 package를 업데이트하고자 한다. 1. ncu 글로벌 설치 npm install -g npm-check-updates 2. 업데이트 가능한 항목 확인 ncu 3. 전체 업데이트 ncu -u 4. 적용 npm i * 특정 버전 업데이트 npm i axios@1.4.0 *특정 패키지 업데이트하기 위한 버전 확인 npm info axios //최신 버전 확인 후 위와 같이 버전쓰고 업데이트 https://maaani.tistory.com/127 #2. package.json 종속성 최신 버전 업데이트 package.json 에 있는 종속성들을 하나하나씩 업데이트 하는데 [ex) npm update 모듈명] 이걸 한번에 최신버전으로 업데이트 할 수 있다 이렇게 있다고 하자 package.json 에 > np..
[React] axios, async-await 사용시 try-catch 주의점(catch-비즈니스 로직 x) axios 를 이용해 API통신을 하는 코드를 작성중, catch에서는 비즈니스 로직을 태우면 안된다는 코드리뷰를 받았다. 리뷰 등록에대한 비즈니스로직으로 사용자의 요청을 처리하고 결과를 제공하는 로직인 if (!values?.content) { alert('내용을 작성해주세요.'); } 이런 if else 가 예외를 처리하는 catch에서 쓰여지면 안된다는 것이다. catch에서는 종료되어 끝나야 한다. ▼ ❌ 수정 전 코드 try{ if (data.data.code === 200) { alert('등록완료'); setValues({ content: '' }); } } catch (err) { if (values?.content === '') { alert('내용을 작성해주세요.'); } else { ..
[React] 이미지 파일은 public폴더 vs src폴더 어디에 넣을까 이미지를 어떤 폴더에 넣을 지 궁금해서 찾아봤다. 아래 출처 블로그 내용) 📁 public : 앱이 컴파일될 때 사용하지 않는 모든 것 앱을 컴파일하는 데 필요하지 않은 요소들. 절대경로 사용이 가능해진다! import 해올 일이 있을 때, ../../이렇게 상대경로로 써주지 않아도 되고, 그냥 파일명 써주면 가능하다! 정적파일을 담는 곳. 사용자가 직접 웹브라우저상으로 볼 수 있는 index.html같은 파일들, image 파일들이 담긴다. 경로를 동적으로 참조해야 할 때 퍼블릭 폴더를 쓴다 (You have thousands of images and need to dynamically reference their paths. 상대경로로 쓰면 경로가 하나 바뀔 때마다 다 수정되기 때문에인가?) 📁 sr..
[JS] Promise 프로미스 의미 Promise란 코드에서 바로 값을 return 하지 않는 대신 promise를 return 하여 최종적으로 나중에 값을 제공하는 것을 뜻합니다. 그렇다면 이 Promise는 어디서 사용할까요? 나중에 값을 제공한다니 떠오르는게 하나 았지 않으신가요? 네. 바로 HTTP 호출을 했을 때 입니다. 물론 HTTP 호출할 때 외에도 여러 방면에서 Promise를 쓰긴 하지만 일반적으로 가장 많이 사용하는 곳은 HTTP 호출할 때입니다. JavaScript에서 promise는 비동기이기 때문에 해결 또는 끝내는데 시간이 걸립니다. 하지만 JS 엔진인 promise가 끝날때까지 기다리지 않고 다른 코드들을 실행합니다. 그래서 promise가 최종적으로 값을 return 하기 전까진 pending 상태가 retur..
[Basic] Chrome inspect- 모바일 웹 디버깅하는 방법 Chrome inspect 크롬 인스펙터 실제 모바일 기기를 연결하면 크롬 개발자 툴에서 그대로 구현해서 편리하게 디버깅을 할 수 있다. 삼성 폰에서 띄운 화면을 웹에서 보기 위해서 디버깅을 했다. (케이블 c타입으로 본체와 연결함) 아래 사이트 방법 참고함) https://jfbta.tistory.com/71 크롬 인스펙터] chrome inspect, 모바일 웹 디버깅 하는 방법 Chrome Inspect. 한글로 '크롬 인스펙터' 라고 하는데 실제 모바일 기기를 크롬 개발자툴에서 그대로 구현해서 편리하게 디버깅할 수 있는 기능이다. 사용방법 첫째, 모바일 USB 드라이버를 설치한다. jfbta.tistory.com 사용법 1. 모바일 USB 드라이버 설치 https://developer.androi..
[CSS] 다크모드 - 삼성브라우저 스타일 이상하게 나오는 이슈 웹사이트 구현시 이슈가 발생했다. 아이폰이나 안드로이드 크롬 다 정상적으로 보여지는데 삼성 폰에서 기본 브라우저로 접속시에는 사이트의 배경이 검은색으로 자동 변경되어 스타일이 망가지는 것... 해결하려고 여러 방법을 시도해보았지만 실패 * 참고로 삼성 다크모드 기본 설정하는 방법은 (설정>디스플레이>다크선택) 이유는? 현재 삼성인터넷이 다크모드 설정을 강제적으로 바꾸는 기능을 지원해서 이슈가 일어났다..! prefer-color-scheme으로 dark설정시 변경하려 했지만 삼성에서는 지원하지 않는 기능이어서 적용이 안된던 것.(네이버도 들어가면 스타일 깨짐) 따라서 이는 자체 변경은 불가능하고, 내가 설정한 다크모드시 style을 보기 위해서는 따로 삼성브라우저에서 설정을 변경해야한다. 방법: 개인 삼..
[React] npm run start vs npm start 차이 실행명령어 npm run start 와 npm start의 차이가 있는지 궁금해서 정리해본 글이다. script 실행 명령어 중 start와 test 스크립트의 경우, 자주 사용되기 때문에 npm run에서 run을 생략해도 무방하다. 즉, 아래 두 커맨드는 동일한 효력을 낸다. 참고사이트 $ npm run start $ npm start 아래 두 커맨드도 마찬가지 이다. $ npm run test $ npm test 개발자들은 대부분 짧은 명령어를 선호하기 때문에 run을 생략하고 많이 사용하는 것 같다. script가 정의되어 있는 경우, npm run start과 npm start는 동일하게 작동된다. 두 명령 모두 package.json 파일 내의 scripts 항목에서 설정된 start 스크립트..
[React] 비밀번호 일치 Form 유효성검사 중 오류 해결(useEffect) 비밀번호 input과 비밀번호 재확인 input 2개의 비밀번호 일치여부 판단 코드를 작성 중 오류가 났다. helperText는 useState로 값이 변경되며 이러한 값이 변하는 조건은 다른 파일에서 props를 사용해 받아온 상황이다. 만약 아래와 같이 코드를 작성해서 helperText값이 변경되도록 하면 한단계 늦게 작동되는 오류가 났다. ▼ 오류 코드 {helperText} 하지만 이렇게 작성할 경우는 바로 변경된 useState값이 적용되었다. ▼ 정상작동 코드 {confirm ? '' : '비밀번호가 일치하지 않습니다.'} 하드코딩으로 한 경우만 바로 적용되어 텍스트를 나타낼 수 있었다. {helperText}가 한박자 늦게 반영되는 이유는 상태(state) 업데이트가 비동기로 이루어지기 ..

티스토리툴바