seopport.log

🔽Github GitHub - picoloman6/nbc_travel_vibe: 내일배움캠프 리액트 4기 - 여행 블로그(팀 프로젝트, 작업중) 내일배움캠프 리액트 4기 - 여행 블로그(팀 프로젝트, 작업중). Contribute to picoloman6/nbc_travel_vibe development by creating an account on GitHub. github.com 🔽 배포 사이트 Travel Vibe nbc-travel-vibe.vercel.app

NavLink isActive 스타일 적용 문제 문제: 헤더 부분에서 Navlink를 사용하여 활성 상태에 따라 스타일을 적용하려 했으나, 현재 페이지의 URL이 NavLink의 to값과 일치함에도 isActive의 상태에 따라 지정한 스타일이 올바르게 작동되지 않는 문제가 발생했습니다. 시도: isActive props를 넘겨줄 때 path 비교 로직 추가하기$isActive prop을 받아와서 isActive 상태로 스타일을 제어하려고 했으나, opacity가 계속해서 100%로 적용되었습니다.이 경우 useLocation으로 path를 받아와서 NavLink isActive props에 현재 path와 비교하는 로직을 추가하여 해결할 수 있었습니다. $isActive={pathName==='/경로'..

parseInt는 공백 있거나 해도 대충 숫자면 다 변환해줌 문자열 있어도 제외하고 숫자만 반환 Number은 엄격하게 체크 태그에 onClick 같은 건 있는데 내가 스타일드를 위해 선언한 props는 인식할 수 없자나 그니까 스타일드에서만 받는 프롭스는 딸라를 붙여줘 마지막 아이템에만 적용되는 스타일: IconWrap에 margin-left: auto;를 적용하여, 마지막 아이콘만 오른쪽 끝으로 이동시킬 수 있습니다. 이 방법은 Flexbox에서 한 요소를 나머지 요소들로부터 분리하여 오른쪽으로 밀어내고 싶을 때 유용합니다. span 등 inline 속성의 margin은 양 옆으로만 적용 때문에 위 아래 마진을 적용하고 싶으면 inline block을 지정해 주거나 block 속성태그를 사용해야한다...

bundler란? js파일을 합쳐주는 거 번들러(Bundler)는 웹 개발에서 사용되는 자바스크립트(JS) 애플리케이션의 의존성 관리 도구이다. 웹 개발 프로젝트는 여러 개의 JS 파일, CSS 파일, 이미지 등 다양한 리소스로 구성되어 있으며, 이러한 자산들을 효율적으로 관리하고 배포하기 위해 번들러를 사용한다. 번들러는 이러한 파일들을 모아서(번들링) 하나 또는 몇 개의 파일로 합치는 역할을 한다. 이 과정에서 파일 크기를 최소화하는 압축, 브라우저에서 사용할 수 있도록 변환(트랜스파일링), 모듈 의존성 해결 등의 작업을 자동으로 처리해 준다. CRA로 프로젝트를 만들면 webpack을 bundler로 사용 vite로 프로젝트를 만들면 veet을 번들러로 사용 Create React App (CRA)..

🔽Github GitHub - seopport/TinyCuteLetterbox: React를 이용한 팬레터 사이트 만들기 React를 이용한 팬레터 사이트 만들기. Contribute to seopport/TinyCuteLetterbox development by creating an account on GitHub. github.com 오늘로 팬레터 사이트 과제를 마무리했다. 이번 과제는 기간도 길었지만 그만큼 어려웠던 것 같다. ㅠㅠ 수정이 제일 어려웠던 것 같고, 스타일과 컴포넌트 조건부 렌더링도 어려웠지만 어느정도 감은 잡은 것 같다. context랑 redux 리팩토링 할 때는 오류 잡느라 머리 많이 빠진 것 같다. 저번에는 일단 만들고 컴포넌트를 분리했던 것 같은데, 이번에는 와이어프레임에서 ..

좀 늦었지만 쓰는 첫 React 프로젝트 To Do List🌿 회고 🔽Github GitHub - seopport/TodoList: React를 이용한 Todo 리스트 만들기 React를 이용한 Todo 리스트 만들기. Contribute to seopport/TodoList development by creating an account on GitHub. github.com 처음으로 React를 활용하여 To do List를 구현해보았다. 이번엔 react라는 프레임워크를 사용해서 처음 프로젝트를 만드는 것이라 엄청엄청 막막했다. 근데 생각했던 것 보단 빨리 기능을 구현해서 마감기한은 지킬 수 있었다. 이번 프로젝트를 하면서 엄청난 기술을 학습했다기 보다는 props와 state의 개념, react 사..

redux로 투두리스트 만들기 타임어택 redux 개념자체는 알겠는데, 그것보다 객체배열, 구조분해할당 다루는게 더 어렵다..;; 그래서 지웠다 써보고 하면서 연습하면서 이해하려고 노력했다. 리듀서 case를 작성할 때 받아올 payload를 미리 생각해서 주석으로 써놓고 하니까 좋은 것 같다. return할 때도 객체랑 구조분해할당 때문에 문법오류가 자꾸 났는데, return문에서 값을 조작하려고 하지말고 변수에 할당해서 return하니까 알아보기도 쉽고 문법도 잘 이해되는 것 같다. 저번 redux 타임어택할때 보다 늘긴한 것 같으니 괜찮아 // 리듀서 const todos = (state = initialState, action) => { switch (action.type) { case ADD_T..

context로 관리한 상태를 redux로 리팩토링하기 context가 한정된 범위의 상태 관리 느낌이라면 redux는 앱의 전역 상태를 중앙 store에서 관리한다는 느낌이다. 저번에는 최상위 컴포넌트에서 편지 정보를 관리하고, Home 컴포넌트에서 선택 캐릭터 정보를 관리했다면 이번에는 아예 store로 따로 빼서 관리하는 느낌? 저번에 도식화했던 프로젝트 구조를 context와 redux로 리팩토링한 구조로 표현해보았다. router에서는 편지 정보를 관리하고, Home에서는 선택 캐릭터 정보를 관리 지정된 범위 내에서 상태를 관리하는 context 중앙 처리소 store를 만들어서 어디에서든 꺼내쓸 수 있는 redux letters.js const letters = (state = initialS..