내 경험으로 도움이 되는 (40) 썸네일형 리스트형 TIL - 13 - Keyword JavaScript / styled-components 기업 과제를 빠르게 끝마쳤다. styled-components를 이용하여 CSS 안에 삼항 연산자 처리를 하여 속성 값을 바꾸었다. 재사용성도 뛰어나고 좋지만, 자체적으로 class name을 부여해서 그런지 막상 해당 tag를 개발자 도구로 찾으려고 할 때, 명확하게 코드에서 어느 위치에 있는 tag인지 바로 찾기가 힘들었다. 컴포넌트가 세분화되어 복잡해서 그런 것일 수도 있지만, 알아서 naming이 된다는 것에 대한 단점도 알게 되는 시간이었다. Vanilla JS로 구현하는 것도 연습이 필요할 것 같다. TypeScript도 사용해봐야 되는데.. - 오늘 하루 느낀 점 6번째 팀 과제가 끝났다. 프리온보딩 코스를 진행하면서 .. TIL - 12 - Keyword JavaScript Algorithm / props / 상태 관리 오늘은 마이다스아이티 코딩 테스트가 있어서 JavaScript로 코딩 테스트 준비를 하였다. 오랜만에 알고리즘 문제를 푸니 수준이 많이 떨어졌다. 문제도 생각했던 것보다 굉장히 어려웠다.. 히스토그램 관련 문제와 사각형을 겹치지 않게 처리하는 문제였는데 엄청났다. 상태 관리에 있어 props vs redux store를 고민하다가 props drilling 하여 관리하기로 하였다. depth가 그렇게 깊지 않아서 괜찮은 것 같지만, 아직 둘 중에 어떤 식으로 처리해야 될지 판단이 잘 서지 않는다. - 오늘 하루 느낀 점 프리온보딩 일정을 소화하면서 코딩 테스트 준비, 면접 준비, 이력서 작성은 생각보다 정신이 없었고, 다.. 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을 이용하여 코드 중복을 줄일 수 있고, 연관된 코드를 그룹화할 수 있습니다. $로 시작하는 변수를 지정하여 일괄적으로 값을 변경할.. 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); }); .. TIL - 6 - Keyword React / localStorage / useRef - Quiz 정리 Q1. React의 개념과 장점, 그리고 컴포넌트란 무엇인가요? A1. 페이스북에서 만든 UI를 만들기 위한 JavaScript 기반 라이브러리입니다. 장점으로는 사용자와의 인터렉션을 UI로 쉽게 구현이 가능하고, 대규모의 복잡한 동적 웹페이지를 관리할 수 있습니다. Virtual DOM을 사용하여 불필요한 렌더링을 줄임으로써 성능을 향상 시킵니다. 또한, 컴포넌트별로 나눠서 개발하기 때문에 모듈화를 할 수 있고 유지 보수가 쉽습니다. SSR, CSR 모두 가능하고 라이브러리다보니 다른 프레임워크와 혼용도 가능합니다. 컴포넌트란 UI를 구성하는 개별 단위입니다. 페이지는 컴포넌트의 조합인 느낌으로 이해하면 좋습니다... 이전 1 2 3 4 5 다음