개발공부일지

https://tailwindcss.com/docs/installation/using-postcss https://react.dev/learn/typescript https://react-typescript-cheatsheet.netlify.app/docs/basic/setup - 설치하기 npx create-react-app mini --template typescript npm install @types/react @types/react-dom npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p - tailwind.config.js /** @type {import('tailwindcss').Config} */ module.e..

** 프로젝트 github : https://github.com/Stacker-Labs/KGA-React-Project ** 배포: https://eunjae.store/ ** API명세 : https://api.subin.kr/api/ ** 발표자료 : https://docs.google.com/presentation/d/1SOk42-FVH7GwYIztDuq8l47He3BJ500XuKWtMjfsUVs/edit?pli=1#slide=id.g14c2555d3ae_0_33 1. 초기 디자인 페이지 (반응형 - 태블릿, 모바일) 2. 완성페이지 (반응형 그대로 진행, 다크모드 추가)

※※ 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..

let slideIndex = 0; let slides = document.getElementsByClassName("slide"); let ellipses = document.getElementsByClassName("ellipse"); let isProcessing = false; let slideInterval; function initializeSlides() { for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; ellipses[i].classList.remove("active"); } slides[0].style.display = "block"; ellipses[0].classList.add("active");..

1. 프로젝트 2. 와이어프레임 그리기 3. Figma 사용해보기 1. 프로젝트 - 메인페이지, 로그인, 회원가입, 공지사항, 자유게시판 구현 - 메인페이지에 슬라이드 - User관리 (id, pw 회원정보) - figma - 스키마만들기 : ERD, 스웨거 - postman, thunder client - 칸드보드 : 트렐로, 노션, github - 컨셉잡고 메인 색상과 사용할 색상 고르기 - 로고 만들기 2. 와이어프레임 그리기 3. Figma 사용해보기 - 각 페이지 디자인하기 https://www.figma.com/proto/vmZrD7AuXhu7AHw74ARvkn/project?type=design&node-id=01&viewport=457%2C481%2C0.27&t=3MlNwwgvYKxek1s..