분류 전체보기 (118) 썸네일형 리스트형 코딩 테스트 시험 전 날 정리하면 좋을 기능들 이 게시물은 제목 그대로 요약정리 글이며, 너무 길어질 것을 우려하여 간략한 설명만 있으므로 이해가 안 된다면 MDN 참고 ( 계속 추가 예정 ) - Array 관련 pop() : Array의 맨 마지막 요소를 제거하고 그 요소를 Return push() : Array의 맨 마지막에 요소를 추가 shift() : Array의 맨 앞쪽에 요소를 제거하고 그 요소를 Return unshift() : Array의 맨 앞쪽의 요소를 추가 join('') : Array를 String 형태로 (구분자를 사이에 삽입) splice(start index, 개수) or splice( 삽입 또는 삭제를 원하는 index, 삭제할 개수, 삽입할 내용 ) : start index를 기준으로 개수만큼 삭제 return으로는 삭.. TIL - 11 - Keyword HashRouter / Redux Store / Github 배포 오래간만에 react-router-dom을 사용하여 routing을 하였는데, BrowserRouter로 진행하니 배포 시 문제가 생겨 HashRouter를 이용하였다. BrowserRouter로 진행하려면 서버를 React App으로 연결해줘야 함. 그렇지 않으면 404 Error가 발생 Redux의 Store에 변화가 생기면 Re-Rendering이 되는데 변수를 slice 해버려서 상태 변화 감지를 못한 Case가 발생했다. GitHub 배포가 생각보다 오래 걸렸다. (GitHub 배포 방법이 궁금하다면 보러 가기) - 오늘 하루 느낀 점 5번째 과제가 끝났다. 생각지도 못한 곳에서 시간을 너무 허비한 바람에 아쉽긴.. TIL - 10 - Keyword IntersectionObserver / Infinite Scroll / Custom Hooks / CSS 일단 무한 스크롤 적용은 했지만, 많이 부족하다. 공부할 것이 많은 한 주가 될 것 같다. - Quiz 정리 Q1. CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요. A1. SCSS와 SASS는 CSS의 전처리기입니다. CSS보다 쉬우면서, 추가 기능이 있는 CSS의 확장판 같은 역할을 합니다. SCSS는 CSS 문법에 SASS 문법을 섞은 것이며, SASS 컴파일러로 그대로 컴파일됩니다. SCSS/SASS를 사용하면 SASS의 Nesting을 이용하여 코드 중복을 줄일 수 있고, 연관된 코드를 그룹화할 수 있습니다. $로 시작하는 변수를 지정하여 일괄적으로 값을 변경할.. Redux Toolkit - Redux Toolkit Redux 표준 방식으로 만들어졌으며, 아래와 같이 세 가지 문제를 해결하기 위해 만들어졌다. 1) 기존 Redux Store 구성이 너무 복잡하다. 2) Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다. 3) Redux에는 너무 많은 상용구 코드가 필요하다. - 주요 API 1. configureStore() : Store를 구성하는 API로 Slice Reducer를 자동으로 결합하고, 제공하는 모든 Redux MiddleWare, redux-thunk, Redux DevTools Extension을 사용할 수 있다. 2. createSlice() : Reducer 함수의 객체, Slice 이름, 초기 상태 값을 받아들이고 해당 Action 생성자와 A.. localStorage, sessionStorage Web Storage 객체인 localStorage와 sessionStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해 준다. 개발자 도구(F12)에 Application 탭에 들어가면 Storage를 확인할 수 있다. 이 두 Storage는 같은 API를 가지며, key-value는 반드시 문자열이어야 한다. 쿠키와는 다르게 Web Storage 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 그 이상의 Web Storage 객체를 저장할 수 있도록 해준다. 쿠키와 또 다른 점은 서버가 HTTP Header를 통해 Storage 객체를 조작할 수 없다는 점이다. Web Storage 객체 .. TIL - 9 - Keyword Redux Toolkit / thunk / extra reducer / for in / dotenv 코드 정리가 필요했다. API 호출도 맞지 않는 위치에서 호출하여 createAsyncThunk를 이용하여, Redux 쪽에서 API를 요청하는 방법으로 하여 지저분한 코드를 정리하였다. for문으로 로직을 구현하였을 때, 비동기 처리가 제대로 되지 않았는데 for in 문으로 수정하니 문제없이 잘 작동이 되었다. CRA에는 dotenv가 default로 설치가 되어있다. 그리고 네이밍 방법도 달랐다. 앞에 반드시 REACT_APP_을 붙여줘야 된다. Redux Toolkit 정리가 필요하다. - 오늘 하루 느낀 점 4번째 기업과제에서는 나름 중요한 역할을 맡아서 재미있었다. Redux .. TIL - 8 - Keyword React Query / Redux Toolkit / localStorage / Caching Redux Toolkit을 이용하여 상태 관리를 하였지만 공식 문서와 유튜브, 블로그 여기저기 보면서 정신없이 했기 때문에 추후에 포스팅 예정 Local Storage를 이용하여 Caching을 구현하였는데, Cache Storage를 이용했어야 했나.. 그래도 Local Storage는 영구적이라 브라우저를 닫으면 소멸되는 Cache Storage보다는 안정적이라 선택하였다. 이것도 포스팅 예정 Caching 작업을 처음엔 React Query로 하였다가 (그럴 거면 차라리 RTK Query로 하지..) 다시 직접 구현하는 방향으로.. - 오늘 하루 느낀 점 이번 기업 과제에서는 챌린지 할 .. TIL - 7 - Keyword React / localStorage / 검색 기능 // 검색 시 보여줄 List 만드는 함수 const handleSearchClick = () => { const targetForestLists = JSON.parse(localStorage.getItem("myForestLists")); const selectType = currentSelectRef.current.value; const searchInput = searchInputRef.current.value.trim(); const searchMyForestLists = targetForestLists.filter((elem) => { return elem[selectType].includes(searchInput); }); .. 이전 1 ··· 4 5 6 7 8 9 10 ··· 15 다음
