전체 글 (188) 썸네일형 리스트형 JavaScript - [Map, for of 구문, Set, 전개연산자] Map 객체 - js에는 hashmap처럼 쓸수 있는 Map이라는 객체가 존재한다. - key와 value값을 가지며 key는 하나의 value값만을 가진다. 길이 - map의 길이는 size로 구할 수 있다. map.lenght는 0이다. 초기화 - map.clear() 키 제거 - map.delete(key) : 해당하는 키에 대한 value값이 제거 되고 map.has(key) 값이 반환된다. 키 참조 - map.get(key) : 해당하는 키에 대한 value값을 반환한다. 키값이 존재하는지 - map.has(key) : 해당하는 키가 존재하면 true, 존재하지 않으면 false를 반환한다. 키 set - map.keys() : 객체안에 존재하는 모든키들을 iterator 객체로 반환한다. 값 .. Event - 1 [window, 이벤트 추가, 삭제, 취소] Window EventTarget 이라는 속성을 상속받는 형태이다. - 결국에는 event발생시 event관련 listener를 받아야 한다는 의미이다. - 이러한 eventTarget은 얼마든지 다양한 DOM객체가 될수있다. 현재 자바스크립트가 실행되고 있는 창을 말하며 브라우저에서는 각각의 탭을 window라는 객체로 표현한다. 즉, 브라우저의 탭하나가 window객체 하나라는 의미이다. 이벤트 추가 - addEventListener("이벤트 이름", 실행할 함수 ) eventTarget에 이벤트 발생시 실행될 함수를 추가한다. window에 탭을 닫은 이벤트 발생시 실행할 함수를 추가하고 싶다면 const listener = (event) => { event.preventDefault(); even.. React Hooks - 1 [useState, useEffect, useRef] React Hook ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org hook이라는 개념이 나온이유 react는 컴포넌트를 재사용하려면 사용자가 어느정도까지 재사용을 할 것인지, 어느 부분을 재사용하는지 명시해 놓지 않는다. 따라서 여러 패턴이 필요하며 패턴을 사용할 때마다 컴포넌트를 재구성하는 것이 필요하고 이렇게 변경된 코드들은 같은 일을 하지만 다른 모습을 하고 있기에 코드를 추적하기어렵다. 특히나 컴포넌트의 생명주기와 관련되어서는 상태변화에 따라서 해당 함수가 만들어진 목적과 다르게 사용되는 경우가 매우 많다. 예) componentDi.. ReactNative - 현재 날씨를 알려주는 어플 github.com/Doodream/NativeProject Doodream/NativeProject React Native를 연습하는 앱 입니다. Contribute to Doodream/NativeProject development by creating an account on GitHub. github.com expo.io/@doodream/projects/NativeProject NativeProject on Expo 현재 날씨와 온도를 알려주는 앱입니다. expo.io 어플소개 현재 위치의 경도와 위도를 받아서 openweather api에 넘기면 해당 api가 날씨 정보를 반환한다. 우리는 해당하는 날씨 정보를 받아서 날씨에 따른 정보를 화면에 출력해준다. - reactNative를 이용해서 .. ReactNative - 3 [배포] Expo 배포 ReactNative를 배포하는 것은 expo에서 할수도 있고 app store나 andriod market에서 할수도 있다. 여기서는 expo에서 배포하는 것만 언급하고 추후 app store에 올리는 방법을 설명하겠다. 정말 매우 간단한데, expo 에 회원가입을 하고 아이디가 있으면 위의 보라색 버튼만 누르면 알아서 배포가 된다. 이후에 다른사람들이 이앱을 써보려면 expo 홈페이지에 들어가서 위 사이트를 보면 왼쪽아래 Scan to open 이라는 곳이 있다. 이 코드를 휴대폰 카메라로 스캔하면 해당앱이 열린다. 물론 휴대폰에는 expo가 깔려 있어야 한다. expo.io/@doodream/projects/NativeProject NativeProject on Expo 현재 날씨와 .. ReactNative - 2 [View] Text - 이전까지는 이러한 것들을 써왔다면 React Native에서는를 사용한다. 마찬가지로 View - 이러한 것들은 안에 다 들어와야한다. 브릿지 규칙 때문이다. React Native에서는 css 규칙을 적용할수도 있는데 이는 stylesheet api를 구현해놨기 때문이다. 몇몇 규칙은 적용이 안되지만 대부분은 적용이된다. 안되는 규칙들 같은 경우에는 실제로 해보고 에러메세지를 참고하자 px은 안되서 %로 해보라고 메세지가 뜬다. 그렇게 고쳐보면 적용이 된다. 이런식이다. react styelsheet api에서만 특이하게 적용되는 규칙들을 보면 1 .flexDirection : column - 기본 값이 column으로 들어간다. - 가로로 하고 싶으면 row로 해줘야한다. 원래 css에서.. React Native - 1 [설치] React Native - 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다.[3] 안드로이드[4], iOS, 웹[5], UWP[6]용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다 즉, react로 모바일 앱을 만들때 사용한다. react로 모바일 앱을 만들게 해주는 프레임 워크라고 할수 있다. 개발환경은 - 모바일 기기에 expo client 설치 - node 설치 - npm 설치 - expo-cli 패키지 설치 (react native의 react-create-app같은 명령어 이다.) macbook@Macbookui-MacBookPro ~ % npm install -g expo-.. React - Material-Ui [makeStyles Hook] makeStyles Hook - 사용자 정의 스타일을 적용할 수 있도록 makeStyles 를 사용하면 css속성을 정의한 객체를 값으로 갖는다. - css로 html 태그에 className을 먹이는 것과 비슷하다. 커스텀 스타일을 적용하려면 makeStyles hook으로 작성한 함수를 호출한 결과를 classes변수에 저장한다. 그리고 커스텀 스타일이 필요한 곳에 className prop의 값으로 classes 변수에 저장된 클래스 이름을 넘긴다. import {makeStyles} from "@material-ui/core/styles"; import {Box} from "@material-ui/core"; const useStyles = makeStyles({ home:{ backgroundC.. 이전 1 2 3 4 5 6 7 8 ··· 24 다음
