HAEDDA

반응형 작업을 할 때 보통은 개발자도구의 Device mode를 사용한다.하지만 이렇게 디바이스 모드로 보는 것과 모바일 기기로 보는 것이 느낌이 다를 때가 있다. 그래서 일할때는 꼭 내 휴대폰으로 한번씩 개발 서버에 접속해실제 모바일기기에서는 어떤 느낌으로 보여지는지 확인하곤 한다. 개인 포트폴리오 작업 중에도 이렇게 모바일 기기로 확인하고 싶어져서방법을 찾아봤다.회사에서처럼 그냥 ip주소로 접속하면 될 줄 알았는데vite를 사용해서 그런건지 package.json 파일을 조금 수정해주어야 했다. (아주 간단함!)  [기존 코드] [수정된 코드] "dev"의 vite를 vite --host로 변경해주기만 하면 끝!  서버를 재실행해보면, 기존에는 localhost만 떴던 것과 달리코드 수정 후에는 ip..

tip 2024. 8. 15. 15:52

vite로 포트폴리오 사이트를 만들어보려 했는데서버 실행이 안되고 자꾸 이런 오류가 발생했다. TypeError: fsevents.watch is not a function at createFSEventsInstance  ...? 🥹CRA로는 잘만되는데 vite는 왜... 🥹🥹  node 버전도 업그레이드 해보고fsevents도 재설치해보고node-modules와 package-lock.json 삭제 후 재설치도 해보고gpt한테 울어도 보고구글 서치해서 해보라는거 다 해봤는데도 안되더니결국 npm install watchman이 해결책이었다... 🥹  혹시 watchman 설치하는데 이런 오류가 뜬다면 권한 문제니까sudo를 앞에 붙여주면 된다. 분명 나중에 또 이럴 것 같아서 나를 위해 남기는 ..

tip 2024. 8. 14. 23:51

리액트에 대한 기억 끌어올리기 위한 강의 따라하기 프로젝트...  만들어 볼 메모메모장의 기본 화면. 디폴트 값으로 가장 최신 메모가 노출되고작성, 수정 버튼은 따로 없이 쓰자마자 바로 업데이트 되는 형식. 사이드 바에서 메모의 타이틀을 누르면 해당 메뉴가 노출되고+ 버튼을 누르면 새 메모가 생성된다. 삭제 버튼도 있는데 그건 지금 이 글을 쓰고 있는 단계에선 아직 안만들었고기능 구현 하면서 만들 예정!  일단 여기까지의 과정 강의 들을때는 따라가기 급급해서 흐름 파악이 안되길래 뼈대를 그려보았다.근데 넘 간단함... ㅎㅎㅎㅎ사실 원래는 데이터 흐름을 그려보려했는데 그 자잘한걸 다 그려놓고 시작하는게불가능하다는걸 깨닫고 그냥 이렇게 끝냈음. 흐름도대로 파일을 만들고 더미데이터를 만들어서컴포넌트들로 보내주..

스터디 프로젝트 2024. 8. 10. 22:43

자바스크립트의 모듈 시스템에 대해 알아봤으니이제 다시 프로젝트로 돌아와 프로젝트의 파일들을 모듈화해보자.  모듈별 기능 상세TabBar.js : 각각의 버튼을 누르면 알맞은 api를 호출하고 데이터를 받음Content.js : api 호출 결과를 받아 알맞은 사진 표시api.js : api 호출 후 데이터 반환 TabBar.js에서는 각각의 버튼을 누르면 알맞은 api 정보를 호출해야 하기 때문에 api.js의 기능을 가져와야 하고,api.js에서는 TabBar 모듈에서 어떤 버튼을 눌렀는지 누른 버튼의 정보를 가져와야 한다.그리고 Content.js 파일에서는 알맞게 호출된 api의 결과값을 받아 알맞은 사진을 표시해야 하기 때문에 TabBar와 api 모듈이 가지고 있는 정보들을 모두 가져와서 사용해..

스터디 프로젝트 2024. 8. 4. 01:09

지난 편에 있었던 문제들탭 클릭시 새로운 페이지로 이동해 새로운 파일들이 계속해서 실행되고,api를 통해 데이터를 계속해서 받아오기 때문에 지연시간 발생.너무 많은 중복코드 존재.을 개선해보기 위해 컴포넌트 단위로 요소들을 쪼개보자* 컴포넌트란웹 애플리케이션을 기능별로 나눈 독립적인 부분. 장점: 중복코드를 작성하지 않고 재사용 가능. 기능과 구조를 명확하게 분리 가능. 독립적인 요소이므로 유지보수 편리     디저트 앨범은 크게 '탭바(Tab bar)'와 컨텐츠 영역으로 컴포넌트를 나누어 볼 수 있다.두 컴포넌트의 기능을 정의해보자면 이렇다.탭바 : 버튼에 적혀있는 동물들의 사진 데이터를 api 호출을 통해 가져오는 기능컨텐츠 : api 호출을 통해 알맞은 동물 사진들을 표시하는 기능  참고로 컴포넌트..

스터디 프로젝트 2024. 8. 3. 13:46

*인프런의 한 번에 끝내는 자바스크립트: 기초 문법부터 SPA 개발까지 강의의 중간실습과제를 학습한 후, 복습하며 작성한 글입니다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스  만들어 볼 페이지 데이터를 json 형식으로 받아와 화면에 이미지와 텍스트를 표시하는 페이지를 만들어 볼 것이다!단순히 데이터를 화면에 뿌리는 것 뿐만 아니라 전체/케이크/커피/아이스크림 탭을 클릭 시그에 해당하는 데이터만 보여지는 작업도 추가해보자!  API로 데이터 가져오기const API_URL = '../resources/dummy.json'; 화면에 텍스트도 불러와보고 싶어서 텍스트 데이터를 추가하기 위해 폴더 내에 더미 데이터를 만들어보았다.경로를 API_URL 이라는 이름으로 지정해 놓..

스터디 프로젝트 2024. 8. 2. 00:08

Promise자바스크립트에서 비동기를 간편하게 처리하는 방법 const myPromise = new Promise((resolve, reject) => { // resolve는 성공 // reject는 실패}) promise는 처음엔 대기 상태에서 undefined의 값을 가지고 있다가,resolve가 호출될 경우 promise의 상태를 fulfilled(성공)로 변경하고reject가 호출될 경우 promise의 상태를 rejected(실패)로 변경한다.   const myPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve('성공'); }, 3000)})myPromise .then((res) => { ..

javascript 2024. 7. 24. 21:59

배열의 구조분해할당let colors = ['red', 'blue', 'purple'];let color1 = colors[0]; // 'red'let color2 = colors[1]; // 'blue'let color3 = colors[2]; // 'purple'console.log(color1) // 'red'console.log(color2) // 'blue'console.log(color3) // 'purple' 이것을 구조분해할당으로 바꿔보면 let colors = ['red', 'blue', 'purple'];let [color1, color2, color3] = colors;console.log(color1) // 'red'console.log(color2) // 'blue'..

javascript 2024. 7. 21. 23:36