내 경험으로 도움이 되는/원티드 프리온보딩 (25) 썸네일형 리스트형 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.. TIL - 2 - Keyword DOM / Git (PR) / RTK Query DOM은 이미 포스팅했기 때문에 굳이 여기엔 남기진 않고 궁금하다면? 보러 가기 Git은 익숙해져야 한다. Redux Toolkit Package에 포함된 RTK Query라는 것을 알게 되었고, 예제를 따라 만들어서 실행해봤지만 더 공부가 필요하다. 이건 추후 포스팅해야겠다. 보러가기 - 오늘 하루 느낀 점 역시 팀별 기업 과제가 주어지니 블로그 글쓰기는커녕 공부할 시간도 부족하다. 상태 관리를 제대로 해본 적이 없어서 꼭 해보고 싶었지만, 역시나 실제로 구현해본 적이 없어서 그런지 생각대로 되질 않는다. 더 집중하고 시간 관리를 좀 더 해야겠다. TIL - 1 - Keyword HTML / DOM / JavaScript 기본 - Quiz 정리 Q1. 일반적으로 CSS 태그를 태그 사이에 위치시키고, JS 태그를 태그 끝나기 직전에 위치시키는 이유? A1. 브라우저에 나타나는 웹사이트를 보기 위해서는 Render Tree(DOM과 CSSOM을 합친 Tree)가 필요한데, 이 Render Tree를 빠르게 구성하여 사용자에게 UI화면을 보여줌으로써, 향상된 UX를 제공하기 위해 해당 위치에 위치시킵니다. CSS부터 설명을 드리자면, 앞부분인 에 CSS 를 삽입함으로써 불필요한 렌더링을 줄이고, HTML과 거의 동시에 렌더링 할 수 있습니다. 만약 뒷부분에 삽입한다면 HTML을 렌더링 한 후에 CSS를 렌더링 하기 때문에 불필요한 렌더링을 하게 됩니다. JS 같은 .. 이전 1 2 3 4 다음