감귤밭 호지차 농장

* * 작성 중인 글입니다. * * 🍀 오늘의 날짜 : 23년 05월 02일 ~ 4일. + 0923 업데이트>< 🍀 오늘의 주제 : Cookie / Session / Token Chapter 01 : Cookie 쿠키는 서버에서 " 클라이언트 " 에 영속성 있는 데이터를 저장( 방문자 컴퓨터의 메모리에 저장 )하는 방법입니다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있고, 클라이언트에서 서버로 쿠키를 다시 전송할 수 있습니다. 일반적으로 쿠키는 우리의 인터넷 활동을 식별하는데 사용되는 작은 데이터 파일로 우리가 온라인에서 활동한 행동들을 모니터링할 수 있도록 우리들의 기기에 생성이 됩니다. 우리들의 온라인 활동을 추적하고 개인화하고 저장하기 위해 특별히 생성되는 친구들입니다. 개발자 입장..

드디어 메인 프로젝트 1차 완료가 끝났습니다. 어쨌든 배포를 하고 데이터를 불러오고 원하는 기능을 구현했다는 점에서 뿌듯? 하면서도 아쉬움이 많이 남는 프로젝트였습니다. 추가적으로도 계속 업데이트를 해나갈 예정이지만 다들 워낙 바쁘다 보니 원하는 만큼 이야기 공유가 안될 것 같은 슬픈 예감이 드는 군요.. 밤도 새가면서 열정을 다 바친 첫 프로젝트라 굉장히 뿌듯하다는 생각이 듭니다. 이 프로젝트를 1차 완성한 기념으로 자체 질의응답 및 회고록 시간을 가져볼까 합니다. 기술 스택들을 선택 이유 : React Vite TypeScript Tailwind CSS Styled-Components Twin.macro Redux-toolkit Axios # React x Vite React는 대표적인 SPA/ CS..

구글 oAuth 로그인 로직을 구현하기 앞서 기본적인 핑퐁핑퐁에 대해서 정리해보자면,,, * : 클라이언트 파트 1. 클라이언트 -> OAuth Server ( 사용자 인증 ) : 클라이언트가 OAuth server에 허가 코드를 요청 : 2. OAuth Server -> 클라이언트 : OAuth Server가 "허가코드를( Authorization Code ) " Redirect URL을 이용해서응답 - OAuth로 사이트에서 발급받은 "ID/Password/Credit"등을 넣는다. - 대부분의 OAuth는 Developer Tap에서 API와 ID 등을 발급 받을 수 있다. * Authorization Code - Redirect URL 구글 OAuth의 승인된 redirection URL 은 정상..

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

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

Proxy 클라이언트에서 서버로 접속할 때 직접 접속하지 않도록 "중간에서" 대신 전달하는 서버입니다. = 중개 서버 역할 >> 왜 굳이 Proxy 서버가 중간에서 중개역할을 하는 건가요? _[1] 캐시 수행 Proxy 서버에서는 서버로부터 응답받은 내용을 Proxy 서버의 캐시에 저장합니다. 클라이언트에서도 동일한 내용을 요청할 때 Proxy 서버는 캐시에 저장해두었던 응답을 반환할 수 있습니다. * 불필요한 네트워크 요청 ↓ * 속도 ↑ _[2] 보안 기능 수행 클라이언트의 IP를 감출 수 았고 서버로부터 오는 응답을 가려줄 수 있습니다. * 보안 기능 수행 Proxy로 api 데이터 받아서 뿌리기 과제를 하다가 api2 에서 데이터를 받아와서 뿌리는 것 까지는 "삼항 연산자"를 사용해서 컴포넌트를 ..

개발 및 유지보수 단계 Plan - Code - Build - Test - Release - Deploy - Operate - Plan - ... Chapter 1 . CI/CD CI/CD 는 파이프라인으로 표현되는 실제 프로세스를 의미하고 애플리케이션 개발에 지속적인 자동화 및 지속적인 모니터링을 추가하는 것을 의미합니다. 다만 이 용어들은 사례별로 CI/CD파이프라인에 구현된 자동화 수준 정도에 따라 그 의미가 달라집니다만 대부분의 기업에서는 " CI " 먼저 추가 후 클라우드 네이티브 애플리케이션의 일부로서 "CD " 배포 및 개발 자동화를 구현해 나갑니다. [1] CI : 개발자를 위한 자동화 프로레스인 지속적인 통합 * Continuous Integration * 개발자를 위한 자동화 프로세스 ..