seopport.log

Redux Toolkit 리덕스 사용을 용이하게 하는 라이브러리 리덕스 툴킷에 필요한 값 세가지 : 타입이름, 이니셜스테이트(초기값), 리듀서 const todoSlice = createSlice({ name: "todos", initialState, reducers: { addTodo: (state, action) => { state를 변경하는 코드 }, removeTodo: (state, action) => {}, switchTodo: (state, action) => {}, }, }); export const { addTodo, removeTodo, switchTodo } = todoSlice.actions; export default todoSlice.reducer; useEffect와 옵셔널 체..

🔽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

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

좀 늦었지만 쓰는 첫 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..

prop-drilling 코드 Context API로 리팩토링 하기 작업중인 팬 레터 사이트 프로젝트의 컴포넌트와 전달받는 props들을 도식으로 정리해보았다. 프로젝트 구조를 살펴보면 Home과 Detail 페이지에서는 단순히 프롭스를 받아서 하위 컴포넌트로 전달하는 역할만을 수행하고 있다. 이를 해결하기 위해 context를 통해 state를 전역에서 관리하도록 수정하였다. 최상위 컴포넌트인 router.js 에서 편지를 저장하는 state를 정의하였고, 선택 캐릭터 정보는 Home컴포넌트에서만 쓰이기 때문에 Home 컴포넌트에서 정의하여 context로 관리하였다. 트러블 슈팅 - 초기 렌더링 시 undefined 오류 및 useEffect로 발생하는 렌더링 문제 문제 상황 페이지가 불러와지면 한 ..

팬레터 사이트 트러블슈팅 1. styledComponent, props 오류 styled components에서 props를 통해 스타일을 제어하는 부분에서 오류가 나고있었다. 1.' React에서 "알 수 없는 속성이 DOM 요소로 전달되고 있습니다' 코드를 살펴보니 이러한 오류가 나는 props들은 스타일드 컴포넌트에서만 사용되는 props였다. 다른 컴포넌트로 해당 props를 전달하지 않고, 해당 스타일 규칙이 현재 컴포넌트의 스타일 범위 내에 있다면 해당 props는 스타일드 컴포넌트에서만 사용되는 것으로 간주된다. 그러나 DOM은 이를 알지 못하고 속성(attribute)으로 인식하게 되어 경고가 발생하는 것이다. 해결 방법은 transient props(일시적인 props)를 사용하는 것이다..

router, param으로 동적 페이지 이동하기 /: 뒤에 값을 지정하면 슬래쉬 어떤 값이 들어오든 details 라는 하위페이지로 이동하게 된다. id라고 적어주는 값은 슬래쉬 뒤에 들어온 값을 id로 지칭하겠다는 의미이다. navigate(`/details/${item.id}`)}>상세보기 그런 다음 details 페이지로 넘어가는 버튼(링크) 역할을 하는 요소에 navigate를 줄때 param 부분에 요소의 id값을 가지고 넘어가도록 작성하면 하위페이지에서는 이런식으로 주소가 설정된다. const param = useParams(); 따라서 하위페이지에서는 id라고 지칭한 부분을 usePrams를 통해 받아옴으로써 클릭한 요소의 id값을 알 수 있다. //클릭한 요소만 출력되게 {savedLet..

useState와 useRef 비교하기 useState와 useRef의 차이점을 알아보기 위해 간단한 코드를 작성해보았다. function App() { console.log("렌더링 되었음") const [text, setText] = useState(''); const handleStateChange = (e) => { const newText = e.target.value; setText(newText) console.log(newText) } const inputRef = useRef(); const handleRefChange = () => { console.log(inputRef.current.value); } return ( State Ref ) } 두 input에 각각 state와 ref를..