개발공부일지

※※ socket.io https://socket.io/docs/v4/tutorial/introduction ※※ 참고 https://github.com/subinkr/simple-chat ** 프로젝트 내용 중 유저를 follow했다면 채팅이 가능하도록 만들었다. - 유저간의 follow가 이루어지면 user data안에서 rooms가 만들어지고 그걸 토대로 - follow list를 만들어 먼저 친구 목록을 보여주었다. - 친구목록에서 채팅하고싶은 유저의 정보와 채팅할수있는 아이콘을 만들었고 - 아이콘을 누르면 채팅창이 나타난다. ** Atomic Design Pattern으로 작업! - MainPage 중 가장 오른쪽 아래에 위치해 있는 채팅 아이콘! - follow목록을 숨겨두고 위의 이미지 아이..

** 프로젝트 내용중에 검색하는 searchBar와 팔로우 유저와 채팅하는 input box가 있었다. - 검색한 다음, 채팅의 메세지를 보낸 다음 입력내용이 사라지지않아서 초기화 작업을 해주었다! 1. searchBar 컴포넌트 - 검색한 내용을 서버에 요청보내야 했기 때문에 searchQuery로 상태를 관리하고있었고 - useEffect를 사용하여 setSearchQuery("")를 주어 검색창의 입력상태를 초기화했다. const SearchBar = ({ handleSearch }) => { const location = useLocation(); const [searchQuery, setSearchQuery] = useState(""); useEffect(() => { setSearchQuery..

/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js,jsx,tsx}"], darkMode: "class", theme: { extend: { colors: { "accent-blue": "#1976D2", }, fontFamily: { logo: ["logo"], }, }, }, plugins: [], }; - tailwind.config.js에 darkMode: "class" 추가하여 다크모드 스타일 적용하기 * { @apply transition-colors duration-100; } .dark { background-color: #23272f; color: #fff; } - tail..

** SearchBar component const SearchBar = ({ handleSearch }) => { const [searchQuery, setSearchQuery] = useState(""); const handleSubmit = (e) => { e.preventDefault(); handleSearch(searchQuery); }; return ( setSearchQuery(e.target.value)} type="text" placeholder={"Search..."} className="border-none w-[90%] pl-2" /> ); }; - input에 작성하고, 값을 setSearchQuery에 담고(onChange) - onsubmit에 handleSubmit 함수를 ..

const Main = () => { const [data, setData] = useState({}); const [board, setBoard] = useState([]); const [page, setPage] = useState(false); useEffect(() => { if (!data.boards) { const boardData = async () => { try { const response = await axios.get( `${process.env.REACT_APP_API_SERVER}/page/1` ); setData(response.data); setBoard(response.data.boards); setPage(response.data.nextPage); } catch (er..

** tailwind.config.js - 사용자 원하는대로 설정해서 사용이 가능한 테일윈드! - 다크모드, 메인 색상, 폰트, 반응형 breakpoint 설정이 가능 /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js,jsx,tsx}"], darkMode: "class", theme: { extend: { colors: { "accent-blue": "#1976D2", }, fontFamily: { logo: ["logo"], }, maxWidth: { 128: "32rem", }, }, screens: { mobile: { min: "320px", max: "767px" }, table..

https://react.dev/learn/thinking-in-react - 메뉴판 만들기 (table) function ProductTable({ products, filterText, inStockOnly }) { const rows = []; let lastCategory = null; products.forEach((product) => { if (product.name.toLowerCase().indexOf(filterText.toLowerCase()) === -1) return; if (inStockOnly && !product.stocked) return; if (product.category !== lastCategory) { rows.push( ); } rows.push(); lastC..

목차 1. children props 2. Hooks ① useRef ② useMemo ③ useContext ④ useCallback ⑤ useReducer ⑥ custom hook : useInput 1. children props - 주로 컴포넌트 간의 데이터 전달이나 구조를 유연하게 관리하기 위해 사용 (어떤 내용이든 전달할수있음!) - 부모 컴포넌트는 자식 컴포넌트에게 데이터, 함수 또는 JSX 요소와 같은 내용을 전달할 수 있음 - 코드의 재사용성을 높이고 컴포넌트 간의 결합도를 낮출 수 있다고한다! export const LoginButton = ({ children }) => { return {children}; }; 2. Hooks ① useRef https://react.dev/refe..

목차 1. 요구사항 2. App에서 설정 3. 회원가입 4. 메인페이지 5. 글쓰기 6. 글보기 7. 글 수정하기 완성 코드 github → https://github.com/subinkr/react-pair-coding 1. 요구사항 - user 회원가입, 로그인, 마이페이지 - board 리스트(main), 글쓰기, 보기, 수정하기, 삭제하기 - 회원가입하고 로그인해야 글쓰기가 가능 - 수정, 삭제도 작성자일 경우 가능 2. App에서 설정 - Routes, Route, useState 사용 - [ user, setUser], [ userList, setUserList ], [ boardList, setBoardList ] 각 페이지에 맞는 상태를 props로 전달해주기 3. 회원가입 - userna..

목차 1. React Router Hook 2. Styled Component 3. 고차 컴포넌트(HOC, Higher Order Component) 4. Atomic Pattern 1. React Router Hook - 리액트의 페이지는 어떤 컴포넌트를 보여줄지 URL로 요청 보냈을때 - 페이지 전환 이벤틀르 막고 - URL 내용을 가지고 조건 처리해주면 컴포넌트가 바껴서 페이지 전환된것처럼 보임 - 쇼핑몰 페이지에서 - params 값을 가지고 처리한다거나, query 로 처리하는데 ---> hook을 사용 - 상품을 검색했을때 state 상태값에만 저장하면 - 검색한것을 브라우저가 url 저장해두면 공유한다면 /shop/params - URL 파라미터일 경우 : /:shop/:type/:optio..