분류 전체보기339 커스텀 훅 커스텀 훅을 통해 관심사를 분리 1. 로직을 분리한다. import { useState } from "react"; export default function App() { const [isWhite, changeMode] = useToggle(true); return ( hello-kk click! ); } function useToggle(defaultValue) { const [toggle, setToggle] = useState(defaultValue); const changeMode = () => { setToggle((prev) => !prev); }; return [toggle, changeMode]; } Hook 1. 함수 컴포넌트 또는 다른 커스텀 훅 안에서만 쓰일 수 있다. 2. 최상위.. 2023. 3. 14. Styled-components 설치 npm install styled-components https://styled-components.com/docs/ 기본적인 사용 방법 1. const 컴포넌트명 = styled.css선택자`` `` : 백틱. 주의: 값을 집어넣을 때 따옴표를 작성하지 않는다. import styled from "styled-components"; export default function App() { const SimpleButton = styled.button` color: red; `; return ( Simple ); } 2. 만약 위에서 만든 button 컴포넌트에 또 다른 스타일 컴포넌트를 추가하고 싶다면. 즉 SimpleButton을 상속받은 LargeButton이라면 styled(상속할 컴포넌트).. 2023. 3. 13. 원티드 프리온보딩 프론트엔드 2주차 회고 2주차 회고 contextAPI: 개념정리 AWS: mock_data.json 방식 vs notion aws 주소 방식 Chakra UI: 라이브러리 설치 및 적용 3주차에 새로 해볼 내용 Styled Components 패키지 apexcharts 라이브러리 이전 강의 다시 정리하기 axios 모듈화, 적용하기 TypeScript 강의 듣기 컴포넌트 분리 2023. 3. 13. 프로젝트 디렉토리 구조 생산성을 위해, 필요한 파일을 잘 찾을 수 있도록 하기 위해. 모두가 협의하고 인지한 형태라면 괜찮다. 팀원들과 작업하다보면 틀이 어느정도 잡히게 되는 것을 경험해 봄. 📁src 📁api 📁components 📁hooks 📁layout 📁pages 📁types 📄App.tsx 2023. 3. 13. [TED] leader who inspire us https://www.youtube.com/watch?v=qp0HIF3SfI4&t=1039s 2023. 3. 13. ContextAPI Props Drilling 정말 정말 정말 해결하고 싶은 문제. 사용하지 않는 컴포넌트에서, 단지 전달해주기 위해 props를 다 적어줘야 하는데, 이를 피하기 위해 state를 전역적으로 관리를 하는 redux, react-query등이 있고 props drilling을 회피하기 위해 ContextAPI를 사용해 볼 수도 있다. ContextAPI는 전역적으로 관리하기 보다는 목적이 props drilling 피하기 위한 것. ContextAPI는 전달만 해주더라도 랜더링이 일어나기 때문에 랜더링 최적화를 위해서는 redux등을 이용한다고 한다. 그리고 redux, react-query 등의 패키지를 사용하기 위해서는 설치해야 하고.. 또 아직 규모가 작은 프로젝트에서 활용할 것이기 때문에 일단 Con.. 2023. 3. 13. 컴포넌트 모듈화 - Router 컴포넌트 모듈화부터 내겐 참 어려웠던 부분이 모듈화였다. 개념적으로는 이해할 수 있지만 코드에는 적용하기 쉽지 않았던 내용들. 모듈화. 코드를 분리하는 것. 한 예시로, MVC 등, 데이터와 뷰 컨트롤등 기능을 분리하는 책을 봤을 때 '이렇게 분리한 뒤 사용하는 거군!' 하는 멋진 느낌만 받고 App, index 를 어떻게 활용해야 할지 잘 몰랐던 것 같다. App 컴포넌트가 필요하지 않은 경우에는 삭제하고 대체할 수 없는걸까? 하는 생각도 해보고. 그런 고민을 하고 있었는데, 때마침 Router 컴포넌트를 따로 모듈화 하는 과정에서 관련 내용들을 찾아봤다. 문제가 발생한 부분은 react-router-dom이었다. 정확히 말하자면, 내가 router 폴더를 만들고, Router 컴포넌트를 따로 분리해서 라우팅 컴포넌트를 .. 2023. 3. 12. import 자동완성 새로 컴포넌트를 추가했을 때 import 를 다시 해야 하거나 하는 경우. 해당 컴포넌트 이름에서 ctrl + space 하게 되면 컴포넌트 선택창이 뜨고 import 부분을 확인해서 선택하면 import 부분이 자동으로 추가되거나 수정된다~~! 2023. 3. 10. 정리해야 할 필수적인 알고리즘 누적합 구현 그래프 이론 DFS BFS 트리순회 완전탐색 백트래킹 비트마스킹 그리디 라인스위핑 투포인터 LIS 이분탐색 DP 최단거리 2023. 3. 7. 이전 1 ··· 11 12 13 14 15 16 17 ··· 38 다음
