감귤밭 호지차 농장

메인 플젝 기회기 단계 중 우리가 구현하고 싶은 부분에 대해서 추가적으로 공부해야 할 필요성을 느껴서 급하게 블로깅을 합니다. 현재 체크해야 할 부분이 크게 3가지가 있습니다. 1. 무한 스크롤 2. 휠 스크롤 이미지 3. 구글 OAuth Chapger 01. 무한 스크롤 몇 달 전에 수업에서 무한 스크롤 구현을 도전 해보세요! 라고 했을 때, 저는 그냥 데이터를 불러왔고 그대로 화면에 쭈 - 욱 조회 되는 것을 보고 이게.. 무한 스크롤..? 이라고 생각을 했었습니다.. 하지만 어림도 없죠 ! 이런게 무한 스크롤일리가 없죠! 그렇게 잊고 있던 중 다시 구현해야 할 상황이 생기게 된 것입니다. 무한 스크롤 (Infinite Scroll) 은 화면을 보던 중 특정 페이지가 하단에 도달 했을 때, API 가..

1. 사용자 기능 요구 사항 정하고 있다. 2. 백엔드 / 프론트 회의를 통해 기능 세부 사항들에 대해서 논의 했다. 3. 순수 우리 아이디어를 바탕으로 논의하기 때문에 백과 프론트가 서로 고려하고 고민하고 회의해야 할 부분이 많은 것 같다. 4. 상, 중, 하 로 우선순위를 나누고 있다. 5. 기술 스텍 정했고, 깃 컨벤션은 내일 백엔드 분들과 함께 논의하기로 함 6. 프론트는 fe-deb > fe-feat/mainpage > feat/footer. 이런 식으로 하기로 함. 7. 피그마 디즈인 UI 예시 페이지 체크해서 내일 부터 화면 정의서랑 피그마 작업 들어갈 것 같습ㄴ다.

import React,{useState, useEffect} from 'react'; import Button from '../Button'; import PagenationBtn from './PagenationBtn'; import QuestionItem from './QuestionItem'; import {Fetcher, Link} from 'react-router-dom'; import { useQuery, QueryFunctionContext } from '@tanstack/react-query'; import { HomeInquiryType } from '@/mocks/homeinquiry'; // export const fetchInquiryData = async () => { // tr..

import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { cva } from 'class-variance-authority'; import { cn } from '@/utils/cn'; import LoginHeader from '../components/LoginHeader'; import BigLogoIcon from '@/assets/icons/BigLogoIcon'; import SearchIcon from '@/assets/icons/SearchIcon'; import { useQuery } from '@tanstack/react-query'; const fetchData..

> 프리 프로젝트 순서 1. 메인 화면 ( 비로그인) 2. 로그인 3. 메인 화면(로그인) 04-A 질문 목록 클릭 - a : 상세 페이지로 이동 - b : 답변 수정 기능 작동 -> 저장 - c : 댓글 수정 기능 작동 -> 저장 - d : 댓글 작성 기능 작동 -> 저장 04-A 질문 작성 클릭 - a : 질문 작성 페이지로 이동 - b : 질문 작성 후 저장 -> 목록에 추가 5. 유저 아이콘 클릭 - a : [EditProfile] / [Setting] 클릭 시 유저 정보 수정 화면 - [1] : 정보 수정 후 저장 시 유저 정보 업데이트 - b : [Activity] 클릭 시 유저가 작성한 데이터들 목록 화면 - [1] : 로그인 한 유저가 댓글, 질문 작성 시 목록에 출력. CORS - 한 사..

import React from 'react'; import UserInfo from '../../components/userinfo/UserInfo'; import {UserTopNav} from '../../components/userinfo/UserNav'; import UserMain from '@/components/userinfo/UserMain'; interface Userpage {} const UserPage = ({}:Userpage) => { return( ) } export default UserPage; UserTopNav에 있는 버튼 클릭에 따라 Main에서 나타날 화면이 다르게 하고 싶었다. Main에는 또 두 가지 버전의 화면이 있다.. 지금 아직 작성 중이라 SideNav ..

styled-components( CSS - in - JS )에서는 클래스 네이밍을 자동으로 생성해주어 겹칠 가능성이 없지만 CSS로만 구현하면 모든 스타일을 global에 선언하기 때문에 중복되는 경우가 발생할 수 있다. 이러한 불편함을 해결하기 위해 "BEM" 이 자주 사용된다. 1. BEM CSS 제작 방법으로 일종의 네이밍 컨벤션 이다. 기본적으로 class 만 사용하며, " 목적 " 에 따라 네이밍 하는 것이 특징이다. { Block }__{ Element }--{ Modifier } ex. Header__navigation--navi-text { /.../ } > 참고 : CSS-네이밍 컨벤션- BEM 2. Utility-First ( Tailwind, Bootstrap ) Utility-Fi..

> Toggle 1차 에러 발생 in Wrapper TS2769 : No overload matches this call, import styled from 'styled-components'; interface ThemeToggle { themeMode: string; toggleTheme: () => void; } const Wrapper = styled.button` background: ${({ theme }) => theme.mode.mainBackground}; border: 1px solid ${({ theme }) => theme.mode.border}; box-shadow: 0 1px 3px ${({ theme }) => theme.mode.divider}; border-radius: 3..

Redux 와 Redux-toolkit " Redux " 는 상태 관리 라이브러리 중 하나로 가장 인기가 많은 녀석입니다. props 를 여기저기 내려주다가 props드롤링 이 일어나는 것을 방지하기 위해 서버와 주고 받는 데이터를 관리해주는 역할을 학도 있습니다. > 댕쩌는 설명 블로그가 있어서 첨부합니다. : 최고 리덕스야 고맙다! Redux & Redux Toolkit 알아보기 > 내가 정리한 Redux : [230424 ~ 5] 리덕스::REDUX Redux-toolkit 은 redux의 상위 업그레이드 버전으로 이해했습니다요... 어차피 {toy-project-DailyMusic}작업을 redux 로 상태 관리 하기로 했으니까 이왕 하는거 redux-toolkit으로 적용해서 사용해보겠습니다. ..

Tawilwind 엄청나게 많은 유틸리티 클래스로 이루어진 CSS 프레임워크입니다. 제공되는 유틸리티 클래스들을 다양하게 조합하여 CSS 코드 작성 없이 class 속성에서 스타일링을 할 수 있습니다. ^현재 버전 : V3.3.2 ^공부 환경 : React + TS + Vite Install 방법 1. vite 로 리액트 프로젝트 생성 npm create vite@latest {생성 예정 폴더 이름} 이렇게 하면 Vite 설정할 수 있는 선택지들이 나오는데 원하는대로 엔터> 엔터 > 엔터 > 하믄 됩니다! 2. Tailwind CSS 설치 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p - tailwind.config.js파..