뉴히의 개발 로그

Learned | 이번주 배운 것 리액트 리덕스/파이어베이스를 사용해서 앱을 만들었다. firebase API를 가져다 쓰는게 처음에 너무 어렵고 ㅠㅠ힘들었다. 그런데 쓰다보니 API를 가져와서 쓰기만 하면 되는 거라 너무 편리해질듯 싶다. Keep | 다음 프젝에도 유지했음한다 막히는 부분은 팀원들과 vs 라이브쉐어를 통해서 같이 코드를 만들어갔다. 혼자서는 오래 고민해도 해결되지 않던부분도 팀원과 함께 해결하니 훨씬 수월하게 해결 할 수 있었다. Problem | 이번프젝 문제점/해결방안 컬렉션을 각각 다르게 만들었고 나중에 그걸 비교해서 매칭해서 사용하려니 어려웠다. 결국은 필드에 비교할 수있는 중복값을 각각 넣어서 매칭을 시켰는데 이게 좋은 방법인지는 의문이다! 일단은 매칭이 가능하게 해결은 됬다..

특강시간에 ThemeProvider를 이용한 전역스타일링 관리를 실습했다. 페어프로그래밍으로 실습을 진행했는데 팀원분중에 상당한 실력자분이 계셔서 아주 나이스하게 마무리했다. styled-component에서 제공하는 ThemeProvider는 테마를 만들어 관리해줄 수 있는데 예를 들어 팀프로젝트에 포인트컬러, 서브컬러, 타이틀 사이즈등을 일괄적으로 정해두고 그걸 수정할 시에 한곳에서 수정하면 한번에 관리가 가능하다. 다크/라이트모드 관리 폰트컬러와 배경색을 지정해두고 다크모드/라이트모드 관리가 가능하다. //첫번째 코드 const darkTheme = { backgroundColor: 'black', fontColor: 'white' }; const lightTheme = { backgroundCol..

map함수 key값 map함수로 반복되는 엘리먼트를 생성할때 에러는 아닌 경고가 뜬다 !!! 맵함수는 몇번째인지, 유니크한 무언가 있는지, id 가 무엇인지, 어떠한것을 태그를 붙여줘야한다. 태그에 key={} 넣어줘야함 나같은 경우는 id를 가져오기때문에 각 id를 key값으로 넣어줬다! key={item.id} Router import 라우터를 리턴할때는 import를 잘해야함 ㅎㅎㅎㅎㅎ 리액트에서 제공하는 API 엘리먼트가아닌 우리가 export한 Router를 잘 가져와야한닿ㅎㅎㅎㅎㅎㅎㅎㅎㅎ 화면이 안뜨고 할 수있음 ! 동료분도 뭐가 문제인지 한참을 헤멧는데 이것때문이엇당 기본 매개변수 지정 과거의 코드를 안쓰지는 않으나 현대코드로 편리하게 사용하자

리액트 숙련 주차로 react hook에 대해서 좀더 배웠고, 리덕스 라이브러리 사용법을 배웠다. 프롭스를 아래아래아래로 내려줘야하면 헷갈리고하는데 리덕스를 쓰면 데이터 접근이 훨씬 수월해지는것 같다. 그리고 금요일 과제 제출 후에는 다른분이 라이브 코딩을 하는것도 봤는데 너무 쉽게 잘 짜시더라는 ㅎㅎ 부럽부럽 ㅎㅎ 저많은 지식을 머리에 어떻게 다 담고 있나.....? 나는 일단 ㅎㅎㅎ 많은 양을 소화해야하는데 머리에 과부화가 걸리는듯한 ㅎㅎㅎ 자꾸 몸도 쳐지고 쏙쏙들어오지 않고 튕겨나가는듯한 한주였다ㅎㅎ자꾸 뒤돌면 새하얘지고 또 하얘지고 또 봐도 또 하얘지고 ㅎㅎㅎㅎㅎㅎㅎ 이래저래 따라는 하는데 이해하기가 힘들었던 ㅎㅎ그래도 이제 리액트가 뭔지, 리덕스가뭔지, 라우터가뭔지 ㅎㅎ 대략적으로 어렴풋하게 ㅋ..

Select - onClick, onBlur 이벤트 셀렉트 박스에 onclick으로 타겟의 텍스트로 상단 텍스트가 바뀌도록 코딩해뒀다. const [buttonText, setbuttonText] = useState('리액트'); const changeText = (e) => { const textValue = e.target.textContent; setbuttonText(textValue); setSlide((slide) => !slide); }; return ( setSlide(false)} className="selDefault" > {buttonText} 리액트 자바 스프링 리액트네이티브 ) 코드를 왜 이모양이르 짯는지 몰라도 ^^ 어제 잠결에인가 ㅎㅎㅎ onBlur를 추가하니 셀렉트 옵션들을 ..

React Styled Components CSS-in-JS 라이브러리 Styled Components를 사용해서 컴포넌트 만들기 CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법 기본사용 방법을 다룬글도 있긴한데 https://newheee.tistory.com/41 오늘은 props에 따라 다른 스타일 적용이 가능한 가변 스타일링에 대해 공부한 내용을 기록하려한다 const StButton = styled.button` align-items: center; background-color: ${(props) => props.bgColor || '#fff'}; border: ${(props) => props.stBorder || 'no..

styled components css에서 자바스크립트를 사용할 수 있는 styled components react 패키지 설치 후 사용 가능하다. yarn add styled-components 사용방법 // App.jsx import React from "react"; import styled from "styled-components"; // styled 키워드를 사용해서 styled-components 방식대로 컴포넌트 생성 const Box = styled.div` // styled.뒤에는 html의 태그를 넣는다 // 빽틱안에 css코드를 넣는다. jsx 안에 바로 사용하던 객체스타일 말고. 원래 css코드와 동일 width: 100px; height: 100px; margin: 20px; `..

Reducer : 변화를 일으키는 함수 리액트는 state의 변화가 있어야 리렌더링이 된다. 그래서 useState 사용시에 우리는 setState로 상태 변화를 주고 리렌더링이 발생하도록 했다. redux 에서는 reducer가 그 역할을 한다. state를 action의 type에 따라 변경한다. 리듀서는 인자로 state와 action 인자를 받는다. state에는 초기 상태값을 할당해 줘야한다. //초기상태값(state) const initialState = { number: 0 // number라는 state : 초기값 0 }; //리듀서 const counter = (state = initialState, action) => { switch (action.type) { case PLUS_ONE..