일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 타입스크립트
- 티스토리꾸미기
- 공통컴포넌트
- CSS
- 제네릭
- returnType
- react
- 성능최적화
- NonNullable
- 누구나 자료구조와 알고리즘
- 반복줄이기
- 리액트
- 타입좁히기
- React.js
- TSDoc
- javascript
- vue.js
- 커스텀
- const 단언문
- reactjs
- click and drag
- 레이아웃쪼개기
- Chart.js
- utilty type
- 2022
- 개발콘텐츠
- 폰트적용하기
- typescript
- JS console
- React Native
- Today
- Total
목록Development (391)
몽땅뚝딱 개발자


🚀 종속성 관리- cocoapods이란?라이브러리 의존성 관리 매니저/패키지 매니저이다. cocoapods를 사용하여 종속성을 관리한다. 🚀 xcode- xcodeproj, xcworkspace의 차이?xcodeproj: 외부라이브러리 사용 없이 프로젝트를 생성하고 사용하는 경우로 프로젝트 설정파일들이 들어있는 디렉토리이다.xcworkspace: 외부라이브러리를 사용한 경우로 workspace와 프로젝트들에 대해 설명하는 파일이 들어있는 디렉토리이다. React Native를 이용한 App을 구성할 때 cocoapods를 사용했기 때문에 HealthTimer.xcworkspace를 이용해서 프로젝트를 열어야 한다. 이는 cocoapods를 이용하면 생성한 프로젝트를 내부에 별도로 구성하면서 xc..


에러 해결 모음집 ,, 🤔계속 업데이트 예정..! - 설치 오류 시rm -rf node_modulesrm -rf package-lock.jsonrm -rf ios/buildrm -rf ios/Podfile.lockrm -rf android/buildyarn clear --forceyarn install - xcode exit:0$ npx pod-install - 뭘해도 안될 때
테스터의 기기에서 화면이 멈추는 문제가 발생했다.현상은 input 터치 후 bottom-sheet가 올라오는 과정에서 애니메이션도 동작하지않고 화면 자체가 멈췄다. 1. 해당 기기의 버전/기종 문제아닐까?같은 기종이나 버전으로 테스트해봤는데 증상이 재현되지 않았다. 2. 바텀시트의 문제일까?Bottom Sheet의 애니메이션이 동작하지 않는 것으로 판단했다.사용한 Bottom Sheet 라이브러리는 이것이다.🔗 https://www.npmjs.com/package/@gorhom/bottom-sheet 그리고 동일한 문제가 발생한 사람의 질문을 발견.. [v4] | [v2] BottomSheetModal failing to present on iOS · Issue #1560 · gorhom/reac..
https://velog.io/@sisofiy626/JavaScript-npm-vs-npx-vs-yarn [JavaScript] npm vs npx vs yarnnpm vs npx vs yarn 패키지는 프로젝트를 개발할 때 복잡하거나 까다로운 부분을 좀 더 빠르고 쉽게 구현할 수 있도록 도와줍니다.velog.io
속성에 접근할 때 꽤나 여러가지 방법이 있다는 사실을 알게됐다. 그래서 더 찾아보니 정말 많군...😃 아래는 js로 작성하는 방법이지만 css로 바꿔도 동일하게 접근 가능! (대신 문자열부분을 ''로 감싸주면 된다.) 📄 지정한 문자열이 포함된 요소 접근하기 document.querySelectorAll('img[alt*=menu]') 📄 지정한 문자열로 시작하는 요소로 접근하기 document.querySelectorAll('img[alt^=menu]') 📄 지정한 문자열로 끝나는 요소로 접근하기 document.querySelectorAll('img[alt$=menu]') 📄 특정 속성의 속성값에 특정 문자열로 이루어진 한 단어를 포함하는 요소에 접근하기 속성값이 정확이 해당 문자열인 경우나 띄어쓰기..
chrome과 axios에서는 기본적으로 URL에 percent-decoding(=%인코딩)을 하지만 특수하게 [, [, %는 인코딩하지 않고 서버에 전달한다. axios에서 보내는 파라미터를 자바스크립트 내장 객체인 encodeURI() 혹은 encodeURIComponent()를 사용하여 보낼 수도 있지만 axios에서 문자열을 한번 더 %인코딩하여 '%'가 '%25'로 인코딩되는 문제가 생긴다. (그래서 톰캣 7.x 버전 이상의 서버인 경우 한번 더 인코딩을 처리해줘야 하는 문제가 생긴다.) 💡 %인코딩이란? Percent-encoding은 URL 맥락에서 특정 의미를 갖는 8비트 문자로 인코딩하는 메커니즘으로 URL 인코딩이라고도 한다. 인코딩은 '%' 다음에 변경할 문자를 ASCII 값으로 표현..
같은 도메인이라면 contentWindow를 사용하고 다른 도메인이면 postMessage를 사용하면 된다. 1. window.postMessage() 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 한다. 페이지와 생성된 팝업 간의 통신이나 페이지와 페이지 안의 iframe 간의 통신에 사용할 수 있다. 다른 페이지 간의 스크립트는 각 페이지가 같은 프로토콜, 포트 번호, 호스트를 공유하게 있을 때에만 접근할 수 있다. postMessage는 이 제약 조건을 안전하게 우회하는 기능을 제공한다. postMessage(message) postMessage(message, options) postMessage(message, targetOrigin) postMessage(message,..
두 문서가 교차 출처인 경우 참조는 Window, Location 객체에 대해 접근을 제한한다. window.blur window.close window.focus window.postMessage window.closed 읽기 전용 window.frames 읽기 전용 window.length 읽기 전용 window.location 읽기/쓰기 전용 window.opener 읽기 전용 window.parent 읽기 전용 window.self 읽기 전용 window.top 읽기 전용 window.window 읽기 전용
[개념] document.readyState는 도큐먼트의 로딩 상태를 구독할 수 있는 속성이다. 이 속성이 변경될 때 readyStatechange에서 이벤트가 발생된다. DOMContentLoaded의 대안으로 사용된다. [속성] loading interactive: 도큐먼트의 로드가 완료되고 구문 분석은 완료 되었지만 서브 리소스(스크립트, 이미지, 스타일시트, 프레임)은 여전히 로딩 중이다. 상태는 DOMContentLoaded 이벤트가 곧 실행될 것임을 의미한다. complete: 로드가 완료되었고 *로드(load) 이벤트가 곧 실행될 것임을 나타낸다. * 로드 이벤트(🔗MDN): DOMContentLoaded와 대조되는 이벤트로, 리소스 로드가 완료될 때까지 기다리지 않고 페이지 DOM이 로드되..


📄 JS const infos = document.querySelectorAll('.info') infos.forEach((info) => { addEvent(info.querySelector('ul')) }) function addEvent(target) { const handleClass = (slideEl) => { slideEl.forEach((slide, index) => { slide.style.left = `${28 * index}px` if (index === 1 || index === 2 || index === 3) { slide.classList.add('active') } else { slide.classList.remove('active') } }) } // 이미지를 섞어야하는 경우..