redux16 [TIL] 2023.04.06 기술면접 스터디, Programmers 문제 풀기 Today I Learned Programmers 문제 풀기 기술면접 스터디 Programmers 문제 풀기 등수 매기기 나의 풀이 function solution(score) { const average_array = score.map((item) => (item[0] + item[1]) / 2); const sorted_array = [...average_array].sort((a,b) => b-a); return average_array.map((v) => sorted_array.indexOf(v)+1); } 두 과목의 점수를 평균내서 average_array를 만들고 이 배열을 내림차순으로 sort 해서 sorted_array를 생성한다. 그리고 average_array를 map을 돌려서 sort.. 2023. 4. 6. [TIL] 내일배움캠프 React 과정 2022.12.26 Today I Learned 팀 프로젝트 진행 팀 프로젝트 진행 기록 form help text 수정 원래 CheckMsg라는 스타일 컴포넌트 기본값을 display: none;을 주고 "아이디를 입력해 주세요"등의 메시지가 뜰 때마다 display: block;으로 변경되도록 구현했었는데 생각해보니 CheckMsg의 기본값을 display: block;으로 설정해 놓고 태그 안에 텍스트를 입력하지 않은 상태에서 innerText만 넣어줘도 동일한 효과가 발생한다. if (!idRegExp.test(userDi)) { userDi_msg.current.innerText = "4~12자의 영문 소문자, 숫자로 작성 가능합니다."; userDi_msg.current.style = "display:block".. 2022. 12. 27. [WIL] 내일배움캠프 여덟째 주_Redux-Thunk 이해하기 거의 3주 가까이 React -> Redux -> Thunk(DB 사용) 단계를 거치면서 리액트를 배우고 있다. 처음 시작할 때만 해도 이렇게 지겹도록 투두리스트를 보게 될 줄은 몰랐는데 그래도 처음과 비교하면 어느새 수정 기능도 생기고 내 투두리스트가 점점 진화하고 있는 거 같다. thunk 함수와 axios를 이용해서 투두리스트를 구현할 때 어려웠던 부분은 서버와 통신해서 데이터를 가져오고, 또 그 데이터를 state에 넣기까지 공백이 생긴다는 점이었다. 만약 데이터를 가져오는 데 성공한다고 하면 세 단계를 거치는데 일단 initialState에 설정해놓은 todos의 빈 배열이 pending을 거쳐서 fulfilled 단계에 갔을 때만 빈 배열 안에 서버의 데이터가 채워지기 때문에 이것을 위해 추가.. 2022. 12. 26. [TIL] 내일배움캠프 React 과정 2022.12.22 Today I Learned 리액트 팀 프로젝트 시작! React-Query 강의 시청 React-Query 상태의 종류 클라이언트 상태 : 뷰를 위한 데이터 한 유저만을 위한 데이터 (세션 간 지속될 필요 없는 데이터) 예시) input 입력 값을 state로 관리(렌더링에 반영하기 위한 데이터) 서버 상태 : 서버에서 가지고 오는 데이터 여러 유저가 공유해야하는 데이터 (세션 간 지속되어야 하는 데이터) 예시) 게시물 리스트 (DB에 저장되어 있는 데이터) React Query 상태 관리 흐름 fetching : 데이터 요청 중 fresh : 데이터를 갓 받아온 직후 / 컴포넌트의 상태가 변하더라도 데이터 재요청하지 않음 stale : 데이터 만료 / 최신화가 필요한 데이터 inactive : 쿼리가.. 2022. 12. 22. [WIL] 내일배움캠프 일곱째 주_Redux 이해하기 이번 주는 리액트 숙련 과정과 개인 과제를 진행하면서 리덕스의 작동 흐름을 이해하기 위해 노력했다. 결과적으로 수정하기까지 구현에 성공해서 과제를 제출할 수 있었다. 공부하면서 이해가 안 되는 부분들은 튜터님들께 가져가서 질문했고 그 과정에서 배우는 것들은 혼자 공부했을 때보다 더욱 기억에 남았다. 주말에는 리액트 심화 과정인 redux toolkit, json-server, axios 강의를 들었는데 이제 좀 redux를 이해하나 싶었는데 새로운 개념들이 한꺼번에 등장하니까 너무 어렵다. 하지만 결국엔 프로젝트를 진행하면서 흐름을 이해하고, 극복할 수 있을 거라고 믿는다! 숙련 과제 vercel로 배포하고 싶었지만 실패하고 gif 파일로 결과물을 기록한다 ㅎㅎ 이번 주의 TIL 목록 [TIL] 내일배움.. 2022. 12. 19. [TIL] 내일배움캠프 React 과정 2022.12.18_Thunk Redux thunk 이해하기 Redux 미들웨어란? 리덕스에서 dispatch를 하면 action이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다. 근데 미들웨어를 사용하면 action이 Reduxer로 전달되는 과정 사이에 하고 싶은 작업들을 넣어서 할 수 있다. 만약 counter 프로그램에서 더하기 버튼을 클릭했을 때 바로 +1을 더하지 않고 3초를 기다렸다가 +1이 되도록 구현하려면 미들웨어를 사용해서 구현해야 한다. 원래는 dispatch가 되자마자 바로 action이 리듀서로 달려가서 새로운 state를 반환하는데 여기서 “3초를 기다리는 작업"을 미들웨어가 해주는 것이다. 리덕스 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이고, 또한 그중에서도많이 .. 2022. 12. 18. [TIL] 내일배움캠프 React 과정 2022.12.18_Axios Today I Learned React 심화 강의 수강 Axios 이해하기 Axios란? 공식문서에서는 axios를 node.js와 브라우저를 위한 Promise 기반 http 클라이언트라고 소개하고 있다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하시면 된다. Axios GET // url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있다. // config는 axios 공식문서에서 확인한다. axios.get(url[, config]) // GET get은 서버의 데이터를 조회할 때 사용한다. Axios config 공식문서 소개 링크 // src/App.js import React, { useEffect, useState } fro.. 2022. 12. 18. [TIL] 내일배움캠프 React 과정 2022.12.17 Today I Learned React 심화 강의 수강 vercel React 배포에 실패했던 이유 찾기 어제 이런 에러 메시지가 뜨면서 vercel배포에 실패했었는데 뭔가 실마리를 찾은 거 같다..! 내가 이렇게 REACT 폴더 안에 프로젝트를 여러 개 만들어 놓고 REACT 폴더에서 yarn으로 styled-components와 reacr-router-dom을 설치했었다. 그리고 git에 올릴 때는 TO-DO-LIST-REDUX 폴더만 올렸으니 설치된 것들이 반영되지 않은 거였다. 이걸 어떻게 확인할 수 있냐면 package.json 파일을 확인하면 된다. TO-DO-LIST-REDUX 밖에 있는, 그러니까 최상위 폴더 REACT 폴더의 package.json를 보면 react-router-dom이 .. 2022. 12. 17. [TIL] 내일배움캠프 React 과정 2022.12.16 Today I Learned React 숙련 개인 과제 코드 리뷰 강의 수강 React 숙련 개인 과제 수정 Vercel로 React 배포하기 warning과 error 메시지가 뜨면서 deploy에 실패하고 있다. 오전 내내 에러 해결해보려다가 결국 포기했다 ㅎ https://vercel.com/guides/how-do-i-resolve-a-module-not-found-error text-overflow: ellipsis;가 적용되지 않던 문제 const TodoTitle = styled.h2` text-overflow: ellipsis; overflow: hidden; width: 250px; white-space: nowrap; margin: 10px 0; // 이 부분 수정함 display: f.. 2022. 12. 16. [TIL] 내일배움캠프 React 과정 2022.12.15 Today I Learned React 숙련 개인 과제 수행 Redux로 TO DO LIST 구현하기 styled-components 사용하기 const Btn = styled.button` margin-right: 12px; height: 35px; width: 120px; border-radius: 20px; border: transparent; color: white; font-size: 16px; font-weight: bold; cursor: pointer; background-color: ${(props) => props.backgroundColor}; :hover { opacity: 0.8; } ` styled-components의 장점을 잘 보여주는 예시 코드. jsx에서 props를 넘겨.. 2022. 12. 16. 이전 1 2 다음
