[24.08.28] 팀프로젝트 1일차 - 뉴스피드 만들기

오늘 팀프로젝트가 시작됐다!이번 주제는 뉴스피드 만들기.. 사실 지금껏 구체적인 기능과 테마가 제시돼 있어서 기획 회의에 시간이 많이 걸리진 않았던 것 같은데 이번에는 공통주제가 뉴스피드 만들기고 세부 주제는 팀별로 정해야해서 회의할 내용이 많았다 🥹그래도 팀원분 중에 피그마에 익숙하신 분도 계시고 다들 적극적으로 회의에 참여해주셔서 늘어난 양에비해 시간은 생각보단 양호했던 것 같다!! 기획 내용 / 담당역할발제 들으면서 생각난 내용을 제안했는데 내 의견이 채택됐다~~바로 내배캠에 참여하면서 진행한 프로젝트를 게시하고, 그 게시물에대한 피드를 확인할 수 있는 과제자랑용 뉴스피드다내 담당은 아니지만 제일 뷰가 마음에 드는 마이페이지.. 그리고 이번 프로젝트 주제가 잘 드러나는 메인페이지(피드)!내가 담당..

• format_list_bulleted 일지
• · 2024. 8. 28.
• textsms

[React] react-router-dom Outlet 이동하지 않을 때

원하는 페이지로 이동하지 않는 오류시도한 방법알고보니 Outlet과 관련된 문제였고 내가 Outlet의 개념을 정확히 몰라서 ㅎㅎ ㅠ 설정을 잘못 한 것이 문제였다우선 라우팅되는 경로들을 확인했을 때 로그인 후 ProtectedRoute로 이동 -> 로그인 되지 않은 경우 (예외처리) SignIn 페이지로 이동 -> 그렇지 않은 경우 Outlet 반환인 것을 확인했다. const routesForAuthenticatedOnly = [ { path: "/", element: , }, { path: "", element: , }, { path: "/profile", element: , }, ]; export const ..

• format_list_bulleted React
• · 2024. 8. 27.
• textsms

[React] useReducer, context API로 투두리스트 만들기

챌린지반 과제로.. 과제로 나온 Context, RTK 외에 useReducer도 다뤄보자는 의미로 투두리스트 만들기 과제가 생겼다ㅎㅎㅎ 개인과제를 조금 욕심내서 기능구현 위주로 빨리 해보자고 목표를 잡은게 다행이었던 것 같다.. Reducer: 여러곳으로 흩어져있는 state 관리 로직을 단일 함수로 통합해 관리하기위해 사용즉, state를 다루는 방법 중 하나다! useState에서 useReducer로 변경하기1. state를 설정하는 것에서 action을 dispatch로 전달하는 것으로 바꾸기- setState를 사용해야하는 부분에서 setState로 직접 변경하는 것이 아니라 action을 전달해 어떤 형식으로 업데이트 할지 reducer에게 전달- action은 일반적으로 객체, state와..

• format_list_bulleted 챌린지반
• · 2024. 8. 26.
• textsms

[24.08.22-23] 개인프로젝트 1,2일차 - 포켓몬 도감 만들기

숙련주차 강의 끝내고 드디어 프로젝트 시작~~원래는.. 화요일에 시작하고 싶었는데 챌린지반 과제 중간중간 들어오고 리덕스 실습에서 에러로 막히고 ㅋㅋㅋ ㅠㅠ 하느라 생각보다 늦어졌다..  이번 목표이번에 해보고싶은 거!1) 지난번 개인과제에서 폴더 구조를 고민해보라는 피드백을 받았다. 컴포넌트 폴더 기능/맥락으로 나눠보고 피드백받기!2) 기능 구현 먼저 빨리하고 스타일 -> 리팩토링 적용하기 아자~~  Button, NavButton 컴포넌트지난번에 Button, Input 같은 태그를 한 겹 감싸는 태그를 만들어보고싶다 했었는데 첫 랜딩페이지부터 버튼이 필요해서 한 번 만들어봤다.이번엔 react-router-dom을 이용하는 것이 미션이어서 페이지 이동이 있는데 과제에서는 페이지 이동이 많이 없지만...

• format_list_bulleted 일지
• · 2024. 8. 24.
• textsms

[React] 컴포넌트에 styled-components 로 스타일 적용하기

개인프로젝트로 열심히 기능 구현을 하고 styled-component를 처음 활용해보려는데.. 시작부터 난관에 막혔다 🥹일반적인 div 태그 등에는 잘 적용이되는데 내가 만든 컴포넌트에는 아무리 시도해도 적용이 안됐다겨우겨우 해결하고 원인을 좀 더 알아봤다 ** 튜터님께 여쭤보니 globalStyle을 제외하고는 따로 분리를 잘 하지 않는다고 한다! jsx 파일에서 필요한 곳에서 styled component 생성해서 사용해주면 된다 기존 코드지금 스타일을 적용하려는 컴포넌트는 NavButton이고 이 컴포넌트는 button을 감싸는 Button에 추가 기능이 적용된 컴포넌트다// Home.styles.jsimport styled from "styled-components";import NavButto..

• format_list_bulleted React
• · 2024. 8. 23.
• textsms

[React] useState, useEffect 동작 만들어보기

오늘은 useState와 useEffect를 간단하게 만들어보는 실습을 진행했다.클로저에대해 대강 이해는 해도 어떨 때 쓰는건지 잘 와닿지 않았는데 오늘 조금은 더 알게된 거 같다! 클로저함수와 그 함수가 선언될 때 렉시컬 환경의 조합함수가 생성될 당시의 외부 변수 상태를 기억하고, 이를 함수 호출시에도 계속 접근할 수 있게 해줌 function outer() { let count = 0; // inner함수가 선언될 때의 환경 return function inner() { count++; console.log(`Count: ${count}`); }}const counter = outer();counter(); // Count: 1counter(); // Count: 2counter();..

• format_list_bulleted 챌린지반
• · 2024. 8. 21.
• textsms