일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- generic
- extends
- forwardref type
- Filter
- 리액트네이티브아이콘
- 안드로이드빌드에러
- TS
- 이진탐색
- 상속
- map
- set
- async
- react
- reactnative error
- 배열중복요소제거
- materialicons
- npm에러
- app.post
- reactnative
- javascript
- 타입스크립트
- Next.js
- 슬라이딩윈도우
- app:compiledebugkotlin
- err_connection_refused
- mainapplication.kt
- 스크롤이벤트
- Spring
- array
- interface
- Today
- Total
목록전체 글 (157)
rhanziy
node.js에서 npm을 설치하고 create-react-app을 하게되면 지금까지 작성했던 것들이 간편하게 제공된다. 더 좋아진 점은 쉬운 모듈화! js에서 state와 props를 생성하다가 문득 css는 어떻게 적용하지 싶었는데 따로 module.css 파일을 만들어서 컴포넌트 파일에 import해주면 된다. CSS Module CSS Module 은 CSS 클래스를 불러와서 사용 할 때 [파일이름]_[클래스이름]__[해쉬값] 형태로 클래스네임을 자동으로 고유한 값으로 만들어주어서 컴포넌트 스타일 중첩현상을 방지해주는 기술이다. 이를 사용하기 위해선, [파일이름].module.css 이런식으로 파일을 저장해야함! 그리고 js파일에서 import styles(이름) from "./App.module..
App 컴포넌트 내에 html들에 속성으로 props를 부여할 수 있다. App컴포넌트 내에서 지정한 props들은 단독으로는 실행이안되고 Btn 컴포넌트에 파라미터로 전달해줘야한다!! -> 그냥 이름일 뿐 속성에 대한 값은 실행되는 컴포넌트에서 정의한다. function Btn(props){ return(
HTML 삽입 미리보기할 수 없는 소스 분을 시간으로 바꿔주는 MinutesToHours() 컴포넌트와 km를 m로 바꿔주는 KmToMiles() 를 App에 조립했다. 이번엔 삼항연산자를 많이 사용했는데 조건에 맞으면 1, 아니면 2번 코드가 실행되는 if문의 축약형. 리액트에서 html구조안에 자바스크립트는 { } 코드블럭 안에 작성하면된다. 복잡해보이지만 엄청 간단하게 구현한 예제같다. 안보고도 척척 짤 수 있어야 할텐데! 다시 한번 복습하자면 modifier함수에 값을 할당하면 data가 그 값으로 바뀌고 리렌더링, 리프레쉬 되는 것 명심!!
HTML 삽입 미리보기할 수 없는 소스 useState( ); 는 배열로 되어있으며 const [이름1, 이름2] 로 변수설정해서 간단하게 값에 접근할 수 있다. 첫번째 인자는 data고, 두번째 인자는 modifier인데 data값이 바뀌면 modifier가 render를 다시 불러오고, UI를 새로고침해준다. 버튼클릭 시 Total Clicks를 보여주는 setCounter에서 counter +1 말고 (current) => current + 1로 한 이유는 다른 실행 결과로 인해 counter 값이 변했을 때 그 값을 반영하기위해 더 안전하게 코드를 짠 것. 현재 값 + 1로 이해하면 된다.
HTML 삽입 미리보기할 수 없는 소스 리액트 강의 새로 들으면서 기초다듬기 리액트에서 사용하는 jsx는 javascript와 거의 똑같다. 규칙이 다를뿐! 컴포넌트들을 생성해서(이름 첫글자는 대문자) 조립해서 만드는 듯. 동적 구현을 위해 아예 이벤트리스너를 태그로 이용한다. 를 포함하고 를 이용해 브라우저가 jsx로 짠 코드들을 인식하게한다. 지금은 이벤트리스너를 실행하면 콘솔찍는 것만 배웠는데 스타일 관련된건 어떻게 처리하려낭...
유튜브에서 바닐라 자바스크립트 canvas를 이용해 장애물을 피해 달리면서 점수를 얻는 게임 프로젝트 영상을 봤다. https://youtu.be/7JtLHJbm0kA = (this.gameHeight - this.height) - 40; } 이미 코드에 땅에 있는 상태를 리턴하는 함수가 있어서 2번을 이용해 코드를 짰다! class InputHandler { constructor(){ this.keys = []; window.addEventListener('keydown', e => { if(!this.keys.includes(e.key)){ this.keys.push(e.key); } }); window.addEventListener('keyup', e => { if(this.keys.includes..
일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 어떻게 호출 되었는지에 따라 this 에 바인딩할 객체가 동적으로 결정되었다. 하지만 ES6의 Arrow Function은 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수는 자신의 this가 없다. 대신 화살표 함수가 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용된다. 즉, 언제나 화살표 함수의 상위 스코프, 화살표 함수가 선언된 스코프의 this를 가리킨다. const name = 'rhan'; const rhanyi = { name: 'yi', getName: function () { console.log(this.name); }, }; rhanyi.getName(..
HTML 삽입 미리보기할 수 없는 소스 버튼을 누르면 colors 배열의 색을 랜덤으로 left, right 변수에 담아 그라데이션 배경으로 채운다. 같은 색이 채워지는걸 방지하고자 left와 right색이 같으면 컬러를 뽑는 함수를 다시 실행한다. 기능을 1. 색 랜덤 뽑기, 2. 색을 비교하여 배경색 바꾸기로 총 2개로 분리해봤는데 굳이 안그래도 될 것 같다. indexOf()함수를 사용해보자. indexOf 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다. 파라미터 searchvalue : 필수 입력값, 찾을 문자열 position : optional, 기본값은 0, string에서 searchvalue..