IT LAB

1. useInput useState 의 기능을 활용하여 email, password 등의 입력란에 값이 적혀질 경우 렌더링 되도록 useCallback 함수로 메모이제이션한 handler 함수를 리턴하는 hooks를 정의함 input 태그의 onChange 속성에 대입하여 사용함 type ReturnTypes = [T, (e: ChangeEvent) => void, Dispatch]; const useInput = (initialData: T): ReturnTypes => { const [value, setValue] = useState(initialData); const handler = useCallback((e: ChangeEvent) => { setValue((e.target.value as u..

1. login SWR 원격상태와 (리액트의) 로컬상태를 하나로 통합해주는 모듈 적절한 타이밍에 지속적으로 원격서버에 데이터를 fetch하므로 최신데이터가 갱신됨 또한 컴포넌트간 swr의 키값이 같을경우 캐싱된 값을 전달하므로 데이터의 전역적인 공유가 가능해짐 프로젝트에서는 로그인 성공시 validate() 함수를 호출하여 swr이 서버에 사용자정보를 로그인 과정에서 인증에 성공한 이메일을 가지고 사용자 정보를 요청하게 된다 사용자 정보 요청이 성공하게 될 경우 localStorage 에 성공 이메일을 저장하고 다른 컴포넌트에서 해당 이메일을 가져와 사용자정보를 swr로 요청함 이러한 경우 요청한 사용자 정보의 데이터가 일치하면 캐싱된 데이터만 반환하므로 트래픽 과중에 대한 우려가 사라지게 됨 Login..

1. layouts 트리 구조 ├── App.tsx └── messenger ├── index.tsx └── styles.tsx Client.tsx render( , document.querySelector('#app') ); App.tsx const App = () => { return ( ); }; Client.tsx에서 내부 로직으로 사용될 App.tsx이다 BrowserRouter가 감싸고 있으며 이를 통해 URL과 UI가 동기화되도록 하는 라우터이다 Switch : Route로 생성된 자식컴포넌트중 매칭되는 첫번째 Route를 렌더링해줌 Redirect : 요청 경로를 다른 경로로 리다이렉션함 Route : 컴포넌트에 path 속성을 이용하여 원하는 url을 지정함 Messenger const ..

플랫폼 API 서버에 채팅 기능을 확인해보기 위해 프론트를 구현하였다. 저는 백엔드만 해오다가 토이프로젝트에 프론트가 필요해서 하게 되었는데 처음이라 발등에 불이 떨어져 해보게 되었다. 코딩하는데 생활코딩과 인프런에 올라와있는 조현영님의 slack clone강의를 많이 참고하였다. 프론트에서는 설정할게 많은것 같다. 실제 강의에서도 설정이 힘들다 하셨고 따라하는데 한참걸렸다.. (하지만 되니까 기분은 좋네 ㅎ) 아무튼 짧은 실력이지만 최대한 꼼꼼히 포스팅 해봐야겠다 1. 프론트엔드 초기 세팅하기 설치 모듈 프로젝트에서는 typescript를 사용할 것이다. react, react-dom typescript, @Types/react, @Types/react-dom package-lock.json 모듈들이 ..