Daily Log

CSS 상속 p태그의 color프로퍼티값은 span태그에도 적용됨 h1 태그의 border프로퍼티 값은 span태그에 저굥ㅇ되지 않음 => p에만 적용한 프로퍼티가 span만 써도 자동으로 상속되어 적용이 된다는 점. 상속이 되는 property 상속이 안되는 property가 있는데 구분이 필요함 상속가능: text-align, line-height(상하), color, font, visibility, opacity 상숙불가: width, height, margin, padding, border, display, box-sizing, background 강제 상속이라는 것도 있음. 아래와 같이 가능 span { border: inherit; } CSS media query와 반응형 레이아웃 기존에는 부..

View, Text, StyleSheet 컴포넌트 from react-native expo 라이브러리에 있는 expo/vector-icons, StatusBar, LinearGradient 날씨 정보를 Weather 컴포넌트에 넘겨주는 법 1. data.main.temp를 App.js 에서 Weather.js에 넘겨야한다. 2. 그러기 위해서는 상위 App.js에서 불러오는데이터를 state에 저장한다. 3. setState는 useState와 같은 역할을 한다. 회사에서는 hooks를 사용하니깐 class 형으로 개발하는 해당 프로젝트에서 몰랐던 부분임. setState는 어떤 일을 하나요? setState()는 컴포넌트의 state객체에 대한 업데이트 실행 getWeather class내부에서 아래와..

우선 React-Native를 쓰려면 기본적으로 React를 알아야한다. React-Native로 날씨앱 만들기 강의를 수강중인데, import되는 라이브러리중에 처음보는 라이브러리인 PropType이 있어 알아보았다. 목적 - 부모로부터 전달받은 컴포넌트의 props 타입 확인을 하기 위해 사용한다. - 자식 컴포넌트에 명시해놓은 데이터 타입과, 부모로부터 내려받은 타입이 일치하지 않으면 경고문이 뜬다. 사용법 npm이나 yarn으로 설치부터 한다. yarn add proptypes prop-types 라이브러리해서 import 하여 사용할 수 있다. import PropTypes from 'prop-types'; - PropTypes는 전달받은 데이터의 유효성을 검증하기 위해 사용된다. - prop에..

나 같은 경우 보통 Bitbucket에서 원격 브랜치를 생성한 후, 로컬로 가져와서 개발을 시작한다. 원래는 SourceTree를 사용해서 쉽게 git을 이용했었는데, 회사 내부망에서 소스트리가 잘 동작하지 않아 VSC에서 명령어로 직접 실행할 일이 많아졌다. 하다 보면 외워질 줄 알았는데 매번 헷갈려서 검색하게 되어 자주 쓰는 것은 아래에 따로 정리를 해보았다. 원격 브랜치 따오기 원격 저장소 목록 보기 git branch -r 원격 저장소 브랜치 가져오기(로컬에서 보기) git checkout --track [원하는 리모트 브랜치] 현재 브랜치 상태 확인 git branch 원격저장소에 올리기 상태 확인 git status 원격저장소 내용을 로컬에 동기화시키기(동기화 안돼 있으면 push시 거절됨) ..

Javascript ES6 const Arrow function(화살표 함수) Destructuring assignment(구조분해) 선언적 프로그래밍과 컴포넌트 추상화 Vanilla Javascript로 컴포넌트 개발하기 https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/ Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트 junilhwang.github.io h..

React-Native 컴포넌트 는 와 같음 flex: 사용하여 레이아웃짠다. -> 브라더끼리는 숫자로 경쟁하고, 숫자 큰 애가 더 큰 뷰를 차지함 RN Style 리액트 네이티브에만 있는 CSS가 있음. Style - RN의 대부분의 스타일은 웹 CSS 동작과 일치함 - 다만, id, class등의 선택자로 스타일 지정하는 것이 아님 - StyleSheet.create메소드를 이용해 스타일 object를 작성하여 컴포넌트에 style props를 전달함 기본문법 - CSS 문법은 key, value를 가지는 object 형태 기존의 CSS와 RN 스타일과의 차이점 id, class 등의 선택자 사용 안함 ; 사용 대신 , 사용 . 사용하지 않고 : 사용 .red {...} //기존 red:{...} /..

환경셋팅 설치/버전 확인(특정 버전 이상만 가능) node -v (10이상) npm -v (6이상) -> 노드 설치하면 기본적으로 설치됨 xcode -> simulator가 필요 app store나 구글 플레이스토어에서 exop client 다운 => 핸드폰에서 테스트해볼 수 있는 유일한 방법 expo 설치 npm install -g expo-cli 왜 expo를 사용해야할까? => expo를 절대 사용하지 말라는 개발자도 많음(ㅠㅠ) - 상용 앱 개발시 어차피 네이티브 코드에서 다 다시 설정해줘야 하는 경우가 많음 => 네이티브 파일 접근이 어려움(큰 기업에선 필요함) => 인스타그램, 우버 정도는 가능 Expo CLI => 네이티브 파일을 숨기고 모든걸 관리해줌. => 휴대폰에서 앱을 테스트해볼 수 ..

체이닝으로 풀어야 속도로 테스트 케이스 다 통과할 수 있음 아래 풀이로 풀었을 때는 케이스를 다 맞추진 못했음. // 첫번째 풀이 function solution(array, commands) { let answer = []; let newArray = []; commands.forEach((e) => { newArray = []; for (let i = e[0] - 1; i < e[1]; i++) { newArray.push(array[i]); } newArray.sort(); console.log(newArray); answer.push(newArray[e[2] - 1]); }); return answer; } 1. map 사용해서 한 줄씩 뽑는다. 2. array.slice(first index, ..

2차원 배열을 넣고 map 을 돌리면 item 은 배열의 첫번째 배열이 나옴 set을 활용하면 map에서 (key, value) 쌍으로 넣을 수 있음 get은 기존에 있는 값을 가져오는 것 ex. combiClothes.get(item[1]) 하면 기존에 있던 combiClothes에서 key가 item[1]인 'eyewear'라던지 거기에 대응하는 값이 반환됨 map에서 key에 대응하는 value 반환하기 map이름.get(key) 함수를 실행하면 해당 map에서 그 key에 대응하는 value가 반환됨. 배열 for문 for(let cloth of clothes) { } 어떤 객체에 key와 value 입력하는 법 let sorts = { }; sorts['이것이 key'] = '이것이 value'..

yield select 를 통해서 Reducer에 있는 상태를 Redux-Saga에서 바로 가져와서 사용할 수 있다. 컨테이너에서 useSelector를 통해 const { customerInfo } = useSelector(state => state.registerReducer) 위 처럼 가져오는 것과 비슷함 function* createCustomer() { const { customerInfo } = yield select(state => state.registerReducer) const { status, data } = yield call(api.createCustomer, { payload: {...customerInfo, rsdn: customerInfo.rsdn1 + customerInfo..