rosie

❓상태관리 하는이유 상태 관리는 애플리케이션의 복잡성을 다루는 중요한 방법중에 하나 상태는 시간에 따라 변화하는 데이터를 의미하기 때문에 사용자 인터페이스, 네트워크 응답, 사용자 입력 등으로 부터 데이터가 변경되고 이러한 변경사항을 추적하고 예측 가능하게 관리하는 것은 애플리 케이스의 안정성과 유지 보수성을 보장하는데 필수적임 ❓리액트에서 상태관리 하는 방법 로컬 컴포넌트 상태 = useState나 useReducer Hook을 사용하여 간단하게 상태관리를 할 수 있음 ContextAPI = 리액트 내장 Context API를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 상태를 쉽게 전달할 수 있고 중간에 있는 컴포넌트들이 상태를 통과하는것을 방지하며, 상대적으로 간단하게 전역 상태 관리하기엔 유용할 수..

1. 협업을 진행하며 느낀 아쉬운 점, 뿌듯한 점 ❗️ 아쉬운 점 1주일동안 오늘의 집을 클론코딩을 진행을 하였습니다. 저는 여기서 로그인, 회원가입파트를 담당하였는데 카카오톡 로그인을 처음 다뤄보면서 정확한 지식이 하나도 없다는 것을 깨닫고 제대로 이해하지 못한 상태에서 기능구현만 하려고 하니 많이 어려웠던거 같습니다. 또, 지난번에 처음으로 api 붙이는 작업을 하였을때 기본적으로 붙이는 과정만 진행하고 쿠키나 토큰같은 것은 다뤄보지 않았던게 이번 로그인, 회원가입 기능 구현을 할때 많이 힘들게 되었던거 같습니다. 헤더나 바디로 토큰을 전달해주는데 이것에 대해서 한번도 제대로 다뤄보지 않고 진행하니깐 많이 막막해서 같은 파트를 담당했던 백엔드분에게 많이 죄송한 마음이 들었던거 같습니다. ❗️ 뿌듯한 ..

1. Axios ⅰ. Axios Axios는 JavaScript에서 HTTP통신을 위한 라이브러리 Promise기반으로 작동하여 비동기 처리를 쉽게 할 수 있음 Axios를 사용하면 서버로 HTTP 요청을 보내고 응답을 받는 것이 간단해짐 ⅱ. Axios의 장점 Promise 기반 Axios는 Promise를 반환함. 이를 통해 비동기적인 동작을 쉽게처리할 수 있음 요청과 응답을 반환 사용자가 요청을 보내기 전이나 응답을 받은 후에 데이터를 변환할 수 있음 HTTP 요청 취소 가능 Axios는 HTTP 요청을 취소하는 기능을 제공함 HTTP 요청 재시도 네트워크 이슈나 서버의 일시적인 문제로 요청이 실패한 경우 자동으로 재시도하는 기능을 제공함 ⅲ. Axios설치 및 기본 사용 예제 Axios 설치 방법..

1. 리덕스 설정 ⅰ. 리덕스 설치 리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설채해야함 yarn add redux react-redux 폴더 구조 생성하기 ① src 폴더 안에 redux 폴더를 생성 ② redux 폴더 안에 config, modules 폴더를 생성 ③ config 폴더 안에 configStore.js 파일을 생성함 ❓폴더와파일의 역활 - redux: 리덕스와 관련된 코드를 모두 모아 놓은 폴더 - config: 리덕스 설정과 관련된 파일들을 놓은 폴더 - configStore: "중앙 state 관리소"인 Store를 만드는 설정 코드들이 있는 파일 - modules: State들의 그룹, ex) ToDoList에 필요한 state들이 모여있는 todosljs 파일이 곧 하..

1. LifeCycle ⅰ. 생명주기(LifeCycle) 소개 리액트 생명주기란? 리액트 컴포넌트는 각각 [Mount] -> [Update] -> [Unmount]의 과정을 거침 리액트 생명주기(라이프사이클)란, 컴포넌트 중심 라이브러리의 집합체라고 보면 됨 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드들이 있음 생명주기 생성될때(mount) 업데이트 할때(update) 업데이트를 할 때는 리렌더링을 같이 고민해야함 제거될때(un-mount) ⅱ. Mount 개요 컴포넌트가 생성될 때를 말함 constructor() getDerivedStateFromProps(nextProps, prevState) render() componentDidMount() 각 메서드 소개 constru..

1. 라이프 사이클(클래스형 vs 함수형) 리액트는 자바스크립트를 기반으로 한 사용자 인터페이스(UI) 개발을 위한 인기있는 라이브러리 리액트 컴포넌트는 라이프 사이클이라고 불리는 여러 단계를 거쳐 생성되고 업데이트되며 소멸됨 리액트의 라이프 사이클은 클래스형 컴포넌트와 함수형 컴포넌트에서 약간 다르게 작동함 ⅰ. 클래스형 컴포넌트 라이프 사이클 - 클래스형 컴포넌트의 라이프 사이클은 다음과 같은 단계로 이루어짐 ① constructor - 컴포넌트가 생성될 때 처음으로 호출되는 메서드. 초기 상태값을 설정하거나 메서드를 바인딩하는 등의 작업을 수행함 ② componentDidlMount - 컴포넌트가 렌더링되기 전에 호출됨. 이 단계에서는 주로 API 호출이나 초기 데이터 로딩과 같은 작업을 수행함.D..

📌 자바스크립트 map() / filter 함수 - 두 기능의 가장 큰 차이는 각 함수의 리턴하는 기능이 다르다는 것!! 📚 map() - callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 리턴값으로 새로운 배열을 생성함 array.map(callback(currentValue[, indx[, array]])[, thisArg]) callback: 새로운 배열 요소를 생성하는 함수. 다음 세가지 인수를 가짐 ⅰ. currentValue: 처리할 현재 요소 ii. index(Optional): 처리할 현재 요소의 인덱스 iii. array(Optional): map()를 호출한 배열 iv. thisArg(Optional): callback을 실행할 때 this로 사용할 값 📚 fi..

❓ 오류 발생 상황과 이유 const { color, reverseColor, size, comment, icon } = props const [isClicked, setIsClicked] = useState(false); const onReverseColor = () => { setIsClicked(true); setTimeout(() => { setIsClicked(false); }, 250); }; const onOpenAlert = () => { if (comment === "Large Primary Button") { window.alert("버튼을 만들어보세요"); } if (comment === "Large Negative Button") { window.prompt("어렵나요?"); } }..

feat : 새로운 기능 추가 fix : 버그 수정 docs : 문서 수정 style : 코드 formatting, 세미콜론(;) 누락, 코드 변경이 없는 경우 refactor : 코드 리팩터링 test : 테스트 코드, 리팩터링 테스트 코드 추가(프로덕션 코드 변경 X) chore : 빌드 업무 수정, 패키지 매니저 수정(프로덕션 코드 변경 X) design : CSS 등 사용자 UI 디자인 변경 comment : 필요한 주석 추가 및 변경 rename : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우 remove : 파일을 삭제하는 작업만 수행한 경우 !BREAKING CHANGE : 커다란 API 변경의 경우 !HOTFIX : 급하게 치명적인 버그를 고쳐야 하는 경우

1. useContext(Context API) ⅰ. useContext란? react context 의 필요성 부모컴포넌트 -> 자식 컴포넌트로 데이터를 전달해 줄 때 props를 사용함 부모 -> 자식 -> 그 자식 -> 그자식의 자식 이렇게 너무 깊어지게 되면 prop drilling현상이 일어나게됨 porps drilling의 문제점은 깊이가 너무 깊어지면 이 prop가 어떤 컴포넌트로부터 왔는지 파악이 어려워짐 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어져 대처가 늦어짐 그래서 등장한것이 react context API => useContext hook을 통해 쉽게 전역 데이터를 관리할 수 있게 됨 ⅱ. context API 필수 개념 createContext: context 생성 Con..