내배캠 4기 React - TIL (64) 썸네일형 리스트형 230131 TIL 정예부대 마지막 수업 - 리액트 총정리 DB가져와서 리액트 프로젝트 만들어보기 (투두리스트 같은거) 비동기 통신 이용 배열과 관련된 API 다룰 수 있어야한다. (map, filter, find 등등) jsonplaceholder 이용해서 db 뽑아볼 수 있어야한다. json 공부 esport와 esport default 차이 230130 TIL 리액트 심화 아웃소싱 프로젝트 KPT (무드망고) Keep : 협업 규칙과 git 커밋 컨벤션을 미리 세세하게 정해놓고 시작하니 훨씬 편했습니다. Problem : 타입스트립트 공부가 부족해서 적용시키지 못해 아쉽습니다. 최종 프로젝트 전에 공부를 많이하고 들어가야 할 거 같습니다. Try : 기본기를 더 탄탄하게 다져야겠고 코드를 직접 써보고 응용해보는 시간을 가져야 할 거 같습니다. Feel : 기본기 탄탄하게 다지기! 에러를 겁내하지말기! 모르는 건 무조건 물어보기! 230119 TIL 기존 JS로 한 React 프로젝트를 TS로 리팩토링 일단 터미널에서 Typescript 추가 yarn add typescript @types/node @types/react @types/react-dom tsc --init 위 명령어를 입력해 tsconfig.json 파일 생성 그리고 js, jsx 파일을 ts, tsx로 변경해준다. 230117 TIL 비동기 통신 import "App.css"; // async, await // then, catch, finally function App() { // fetch 키워드를 이용해서... fetch("http://localhost:4000/posts/1") .then((response) => { // 정상인 경우 console.log("response", response); }) .catch((error) => { // 오류인 경우 console.log("error", error); }) .finally(() => { // 무조건 나옴 console.log("무조건"); }); return Hello React!!; } export default App; // 비동기 : 제어권이 넘어간 상태 // then.. 230116 TIL 리덕스 툴킷 createSlice의 결과물이 action creators와 reducers createSlice 함수 안에는 객체가 인자로 들어간다. const todosSlice = createSlice({ name: "", initialState: "", reducers: "", }) reducers에는 객체로 구성되어 있고, todoList에서 쓰이는 reducer로 구성해 보면 addTodo, removeTodo, switchTodo가 있고 얘네들은 함수이다, 이 함수 하나하나가 action creator의 이름이 됨 외부에서 이것을 호출하면 type과 payload를 가진 action을 만들어줌. const todosSlice = createSlice({ name: "todos", initial.. 230113 TIL 밀린 TIL 한 번에 작성하기... 프로젝트 기간 동안 회의감이 많이 들고 하는 게 딱히 없었어서 TIL 쓸 내용이 없었다. 이번 프로젝트는 기여한 바가 정말 없고 팀원들이 고생이 많았다고 생각한다. 별개로 나 스스로가 많이 현타가 왔고 회의감도 왔고 개인적으로 힘든 일도 겹쳐서 이번 프로젝트에는 집중을 못했던 거 같다. 이번주에 정신을 좀 재정비해서 다음 주부터 최종까지 잘 마무리할 수 있도록 해야겠다. 리액트 네이티브 프로젝트 KPT (3%) Keep : git PR을 자주 하는 게 충돌을 최소화시키는 거 같아서 유지했으면 좋겠습니다. Problem : css가 웹과 다르게 안 먹히는 부분이 많아서 힘들었습니다. 해결 : native에 사용할 수 없는 css요소가 어떤 게 있는지 미리 알아보는 게 좋.. 230110 TIL 리덕스에서는 action creators와 reducers를 수기로 만들어 줬는데 이걸 편리하게 해주는게 createSlice라는 리덕스 툴킷 API 정예부대 수업 질문 리스트 1. 렌더링 되는 기준 -> state, props, 부모 컴포넌트 변경 2. 리액트에서 불변성 유지 -> 화면이 변경되려면 state가 변경 됐는지 아닌지 리액트가 알아차려야함 주소값을 참조하는 배열이나 객체는 메서드로 인해 주소값은 안바뀌고 가지고 있는 값만 바뀜 spread문법, map 메서드를 통해 state가 변경됐는지 리액트가 알 수 있음 그래서 불변성을 유지해야함. 3. ../와 ./ -> ./은 현재 디렉토리 ../은 상대경로 4. 일반 함수와 화살표 함수 차이 -> 디스바인딩 여부 디스바인딩이란 함수 내부에서 디스.. 220106 TIL 네이티브 프로젝트를 시작했는데 UI구성하는게 생각보다 많이 어려웠다. 안드로이드에 안되는 것도 좀 있고 css도 안먹히는게 있는 거 같고... 일단 해보자! 이전 1 2 3 4 5 ··· 8 다음