내 경험으로 도움이 되는 (37) 썸네일형 리스트형 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를 구성하는 개별 단위입니다. 페이지는 컴포넌트의 조합인 느낌으로 이해하면 좋습니다... TIL - 5 - Keyword react-dnd (react-beautiful-dnd) 기업 과제 중 Component를 Drag를 하여 순서를 바꾸는 UI를 구현하는 것이 있었는데, 직접 구현하려다가 결국 능력 부족으로 라이브러리를 이용하였다. - 오늘 하루 느낀 점 이번 기업 과제는 다행히 제시간에 제출하였고, 저번 과제랑 비교하면 기능 구현도 거의 다 했다. 1주차가 끝났다. 주마다 기업 과제를 2개씩 진행하다 보니 시간도 정말 빨리 가고 사실 정신도 없다. 그래도 혼자서 하는 것이 아니라서 좋다. 새로운 지식도 얻어가고 이야기하다 보면 insight를 얻어 갈 때도 있으니 그리고 라이브러리를 사용만 하는 것이 아닌 깊게 어떻게 구현했는지를 보는 것도 중요하다는 것은 알지만 실제로 하려 하니 정말 어렵다. 이번.. TIL - 4 - Keyword Git / Styled-Component / React / Canvas / CSS 애니메이션 Git 명령어를 기억하기 위해 포스팅을 하였다. 필요한 명령어를 마주칠 때마다 수정할 예정이다. 이번 기업 과제 CSS는 tailwind에서 벗어나 styled-component를 사용하였다. CSS를 컴포넌트화 하여 재사용도 가능하고 일단 기존에 알던 CSS 문법과 유사하여 금방 적응하였다. React 자식 컴포넌트에 OnChange 설정해서 부모 컴포넌트에서 자식 컴포넌트 인자를 받아오는 신박한 경험을 하였다. 저것 때문에 시간을 얼마나 쓴 건지.. Canvas Tag와 CSS 애니메이션 관련 글을 읽었다. Canvas로 그림만 그리는 줄 알았는데 게임 개발까지 할 줄은 생각도 못 했다. -.. TIL - 3 - Keyword Git / RTK Query / Component / Tailwind / 배포 Git 명령어 익히기 RTK Query 어느 정도 감 잡았다. Component 활용과 아키텍처를 잘 짜야겠다. Tailwind는 어렵다.. 별로 쓰고 싶지 않다 Git 배포 정말 빠르다! - 오늘 하루 느낀 점 기업 과제를 막 제출한 뒤 오늘 공부한 것들을 생각해보았다. 시간은 정말 빠르게 흘러갔지만, 뭔가 진득하게 한 게 없는 느낌이었다. RTK Query는 공부했다고 할 만 하지만 나머지는 그냥 글만 읽고 쓱 지나간 느낌이랄까 자꾸 시간에 쫓기는 느낌이 든다. 시간은 흘러가는데 돌이켜 생각해보면 나는 뭐했지?라는 생각이 든다. 프론트엔드 개발자인데 CSS가 엉성하면 뭔가 자존심이 상한다. 최소 보이는 U.. 이전 1 2 3 4 5 다음