개발 연습 블로그

특이사항 액시오스 http를 사용해 서버와 통신하기 위한 패키지 yarn add axios 액시오스는 GET요청을 쉽게 도와주는 패키지일 뿐이므로, 어떤 데이터(path variable 혹은 query)를 어떻게 요청하는지에 대한 방식은 차후 만들어낼 API 명세서를 봐야한다. 구조는 GET 1 2 3 4 5 6 7 8 9 10 11 12 13 const [Test, setTest] = useState(null); // axios get을 하는 함수를 생성한다. const fetchTest01 = async () =>{ const { data } = await axios.get("http://localhost:3001/Test01") setTest01(data) } useEffect (() => { //..

정리라고 해야할까.......일단 배우면서 한 번 이상 썼던 리액트 활용 명령어를 정리해둬야겠다 느꼈다. 매 번 살펴볼 수 없으니 한데 모아두고 외울 때 까지 신세져야 할 것 같다. 필수 프로그램 설치 VScode gitbash node yarn 검색 후 설치 검색 후 설치 검색 후 설치 npm install - g yarn CRA 리액트 앱 설치 1 yarn create react-app 프로젝트명 cs 폴더 구조 Components - 컴포넌트 집합 Pages - 라우터 돔 활용 위한 페이지 집합 redux - configStore.js - 리덕스 모듈 위한 장치 redux - modules - 리덕스 모듈 집합 shared - Router.js - 리액트 라우터 돔을 위한 장치 설치 명령어 모음 프..

오후 : 강의시청 특이사항 리덕스 툴킷 리덕스 활용에 도움이 되는 툴을 모아둔 키트. 기존 코드를 단순화시키는 방법으로 작동한다.(또 외워야 할 것이 늘어난다...) 일반 리덕스에서는 Ducks 패턴을 사용할 때 액션 벨류와 생성자를 만들고 리듀서에 switch case로 할당하는 방식을 썼다. 하지만 툴킷의 createSlice를 임포트한 다음 1 2 3 4 5 6 7 8 9 10 11 const 원하는슬라이스 = createSlice({ name: , initialState , reducers:{ 원하는리듀서기능1 : (state, action) => {원하는 기능 적어넣기}, 원하는리듀서기능2 : (state, action) => {원하는 기능 적어넣기}, 원하는리듀서기능3 : (state, act..

오전 : 시험 특이사항 과제랑 같은 결과물을 내놓지만, 여기서 발생한 문제를 해결하라고 전달받았다. 처음에는 내가 했던 방식과 다른 구조라 꽤나 고생했지만 찬찬히 뜯어보니 확실히 문제가 있었다. 아래는 내가 쓴 문제와 답안들이다. 1. 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음. 파악한 문제점 1-1. todo.js파일 41번 줄의 initialState의 배열 범위 설정이 잘못되어 있었음. 1-2. Form.jsx파일에 dispatch가 설정되어있지 않았음. 1-3. Form.jsx파일 22번 줄에 onSubmitHandler가 값을 전달하지 않았음. 1-4. 해답 1-1. todo.js파일 41번 줄의 initialState의 배열구조를 정리함. 이제 배열이 꼬이는 문제를 피할 수..

오전, 오후 - 과제 기능 마무리 특이사항 페이지 구분하는 부분이 꽤나 어려웠다. router를 사용하는 것인데, app.js에 있는 내용은 무조건 출력되는 것을 몰라 꽤나 고생한 것이다. 리액트 router DOM 페이지를 구성할 수 있게 해주는 패키지이다. 설치법은 yarn add react-router-dom으로 설치한다. 그 다음 src 폴더에 page폴더를 만들고 그 안에 page.js 파일들을 생성한다. 이것들은 컴포넌트와 비슷한데, 현재 라우터에 맞는 페이지를 출력하기 위한 구성품들이다. 다음에는 shared 폴더를 만들고 그 안에 router.js 파일을 생성한다. 이 안에 page 폴더에 있는 page.js 파일들을 임포트한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ..

오전, 오후 - 과제 진행 특이사항 payload 리듀서로 보내는 액션 객체에 대해 어떤 정보를 같이 담아서 보내고 싶을 때 쓰는 것이다. 이것으로 데이터를 뭉쳐서 보내면 모듈에서 따로 조립할 필요없이 곧장 받아서 쓸 수 있다. 액션 객체를 스토어로 디스패치가 던진다는 개념 잊지말고. 오늘은 과제를 진행하면서 꽤나 많은 문제들이 있었다. 잠을 잘못자서 머리가 약간 멍한 상태로, 꽤나 복잡한 작업을 진행했다. 돌이켜보면 그럭저럭이었지만 그래도 푸는 당시에는 꽤나 어려웠다. 새로 만들기엔 시간이랑 노력이 비효율적이고, 있는 걸 고치자니 뭔가 좀....에러가 많아.... 겪은 문제는 1. Hook 펑션을 찾질 못하는 문제 2. switch return에 로그만 찍어서 나오는 에러를 기존 에러로 착각 3. 액션..

오전, 오후 - 리덕스 공부 나머지 특이사항 memo 컴포넌트를 메모리에 저장해두고 필요할 때 갖다 쓰게 된다. 이 방법을 쓰면 부모 컴포넌트의 state가 변경되지 않는 한 props의 변경이 일어나질 않는다. 이렇게 하면 전혀 상관없는 state가 변경되어도 영향을 받지 않는다. 이것을 컴포넌트 메모이제이션이라고 한다. 사용법은 1 export default React.memo(해당 JSX파일명); cs usecallback 유스콜백은 인자로 들어오는 함수 자체를 기억한다. 이렇게 하는 이유는 자바스크립트에서는 함수도 객체의 하나로 따지기 때문에, 다시 만들어지면 주소값이 변경되고, 이로 인해 하위 컴포넌트들은 props가 변경되었다고 인식하기 때문이다. 사용법은 1 const 로직명 = useCal..

리액트에 대해서 입문 + 숙련 주차로 들어가는 구간이었다. 생각보다 쉽지 않아.... props 컴포넌트간의 정보교환방식이다. 부모 컴포넌트가 자식컴포넌트한테 물려주는 방식이며 단반향이다. 어떤 경우에도 읽기 전용이며 이 값의 직접적인 수정은 기피해야한다. 이 props 전달이 여러번 반복되는 drilling 현상을 기피해야한다. state 컴포넌트 내부에서 값을 바꿀 수 있는 변수를 의미한다. 리액트는 비동기식 랜더링이기 때문에, 언제 어디서 어떤 값이 변경되어야 하는지가 중요하다. state를 생성할 때에는 setState로 만들어야하며 이렇게 만들어진 state는 불변성을 위해 직접 수정을 피해야 한다. 이번주는 정보를 쑤셔넣는 것이 많아서 오히려 뭘 정리해야할지 잘 모르겠다.....하나하나가 그렇..

오전, 오후 - 리액트 Hook 공부 특이사항 스타일드 컴포넌트 순수한 CSS말고 JS로 구현하는 것이다 글로벌 스타일링 컴포넌트 안에서만 쓸 수 있는 스타일드 컴포넌트와 달리 프로젝트 전체에 들어가야할 스타일을 적용해야하는 순간이 온다. 이럴 때 쓰는 것이다. 글꼴 따위를 말이다. Sass css를 더 효율적으로 쓰기 위해 만들어진 언어. css는 규모가 커질수록 심하게 비효율적으로 복잡해지기에 휴먼 에러를 피하기 위한 언어라고 할 수 있다. 특징으로는 변수 사용 가능, 중첩 가능, 타 style을 import 가능이다. useState 가장 기본적인 hook 기능, 함수 컴포넌트에 가변적 상태 부여. 불변성을 유지해줘야 한다. useEffect 본격적으로 들어가는 hook 기능, 컴포넌트가 랜더링 될..

오전, 오후 : 과제 다듬기 특이사항 컴포넌트 분리를 시도하다가 파일 전체가 에러투성이로 점철되었다. 도무지 되감기로 해결이 안되는 수준이라 아예 깃허브에서 풀 받아서 복구했다. 세상에나....그래서 일단은 function App 밖에 있던 1 2 3 4 5 6 7 8 9 10 11 12 function ShowToDo(props){ const buttonString = props.todo.isComplete == false ?"완료" :"취소" return( {props.todo.todoName} {props.todo.todoContents} props.completeOrUndoToDo(props.todo.id)}>{buttonString} props.todoDelete(props.todo.id)}>삭..