분류 전체보기 검색 결과
224 개의 검색 결과가 있습니다.
Frontend/Svelte

[Svelte] 스벨트 커스텀 이벤트와 이벤트 데이터 추출하기

🌈 커스텀 이벤트 추가 및 이벤트 데이터 추출하기 Svelte.js - 완벽 가이드의 [섹션 6:: 컴포넌트에 대해 자세히 알아보기] 를 수강한 후에 정리한 내용이다. 👨‍💻 커스텀 이벤트와 데이터 추출 커스텀 이벤트에 있어 중요한 키워드는 dispatch이다. 하위 컴포넌트의 스크립트에서 createEventDispatcher를 통해 커스텀 이벤트의 이름과 전달할 데이터를 바인딩 한 메서드에 dispatch한다. Add to Cart 하위 컴포넌트에서 dispatch한 커스텀 이벤트와 데이터를 상위 컴포넌트에서 사용할 수 있게 되었다. alert(''Add to cart!)} /> 또한 하위 컴포넌트에서 전달한 이벤트의 데이터를 추출하기 위해서는 아래와 같이 하위 컴포넌트의 프로퍼티에 메서드를 바인딩한..

2023. 1. 12. 15:01
Dev Tools

[Eclipse] 이클립스 디버깅 에러 해결 (Unable Install breakpoint ...)

🌈 이클립스 디버깅 오류 해결 방법 오랜만에 이클립스로 개발할 일이 생겨 디버깅 모드로 기동 하였으나 아래와 같은 오류가 발생하였다. 1️⃣ 경고 끄기 해당 경고창이 떠도 디버깅하는데에는 문제가 없다고 한다. 하지만 너무 많이 뜨기 때문에 경고를 꺼버리는 옵션이다. 상단의 Windows > Preferences > Java > Debug > Warn when unable to install breakpoint due to missing line number attributes 체크 해제 2️⃣ 프로젝트 Clean 및 breakpoint 제거 ◾ 톰캣 서버 Clean Serves > 디버깅 오류가 뜨는 서버 우클릭 > Clean ◾ 프로젝트 Clean 상단의 Project > Clean ◾ breakpoi..

2023. 1. 11. 19:13
Frontend/JavaScript

[JS] 자바스크립트 배열 평탄화하기 (flat, flatMap)

🌈 자바스크립트 중첩 배열 평탄화 하는 방법 정리 중첩된 배열을 평탄화하기 위해 배열의 내장 메서드인 arr.flat() 을 통해 쉽게 처리할 수 있다. 1️⃣ flat( ) ◾ 기본 구문 const arr = oldArr.flat([depth]) // depth : 중첩된 배열을 평탄화할 때 사용하는 깊이 값이며 기본값은 1이다. ◾ 사용방법 /* 기본 depth인 1만큼 평탄화한다. */ const arr = [1, 2, [3, 4]]; arr.flat(); // [1, 2, 3, 4] /* 입력한 숫자만큼의 depth를 평탄화한다. */ const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] arr2.flat(2); // ..

2023. 1. 9. 20:05
Frontend/Svelte

[Svelte] 두 가지 종류의 컴포넌트 (Container VS Presentational component)

🌈 Container (=Stateful components) VS Presentational component Svelte.js - 완벽 가이드의 [섹션 5:: 강의 프로젝트 첫 번째 단계] 를 수강한 후에 정리한 내용이다. 1️⃣ Container (=Stateful components) ◾ 데이터를 가지고 있으면서 관리하는 역할을 한다. ◾ 다른 컴포넌트에 데이터를 전달한다. ◾ 스테이트풀에서의 스테이트(=상태)는 데이터를 의미한다. ◾ 스테이트풀의 데이터는 정적일 필요가 없고, 상호작용에 의해 서버로부터 페칭(fetch)되어 변경될 수 있다. ◾ 예) App, Product ... : 데이터 관리를 위한 루트 위치 또는 메인 기능 컴포넌트 ◾ 스테이트풀 컴포넌트는 소수이다.(유지보수↑) 2️⃣ P..

2023. 1. 8. 15:45
Mobile

[Mobile] 모바일 크롬 개발자 모드 디버깅 환경 구축하기

🌈 모바일 크롬에서 개발자 모드 구축하는 방법 모바일에서의 디버깅이 필요할 때 크롬 개발자 모드를 통해 쉽게 개발 환경을 구축할 수 있다. 1️⃣ 안드로이드 개발자 모드 활성화 개발자 옵션 메뉴가 보이지 않는 경우 개발자 옵션이 보이도록 설정해야 한다. 휴대전화 정보 → → 소프트웨어 정보 → 빌드번호 7번 클릭 시 개발자 옵션 메뉴가 보이게 된다. 개발자 옵션 메뉴가 보이는 경우 아래 절차를 따라 모바일에서의 디버깅 환경 설정을 마친다. 개발자 옵션 → 켜진 상태로 유지 → USB 디버깅 2️⃣ PC와 휴대폰 연결 USB를 통해 PC와 휴대폰을 연결한다. 3️⃣ 크롬 개발자 도구 페이지로 이동 및 포트 포워딩 URL에 chrome://inspect/#devices 를 검색하여 개발자 도구 페이지로 이동..

2023. 1. 7. 16:13
Dev Tools

[Eclipse] 이클립스 search시 기존 탭 유지 & 새 탭 열기

🌈 이클립스 파일 검색 시 기존 탭 유지 후 새 탭 여는 방법 1️⃣ 문제 이클립스에서 Ctrl + h 를 통해 파일을 검색하고 해당 파일을 열을 때 기존에 찾은 다른 파일이 열려있다면 해당 파일의 탭에 새로운 파일이 열리게 된다. 이러한 것은 기본 이클립스 설정이 새로운 탭을 열지 않고 기존 탭을 재사용하기 때문이므로 설정을 변경해 주어야 한다. 2️⃣ 해결방법 상단 메뉴의 Window - Preferences > General > Search > Reuse editors to show matches 체크 해제

2023. 1. 6. 23:03