본문 바로가기

전체 글

🌞 2/8 내배캠 React 72일차[ Next.js Typescript Firebase UD ] [ Next.js Typescript Firebase CRUD ] Update 기능 구현 일단 firestore에서 데이터를 가져오는 함수를 만든다. //* 스토어에서 텍스트 가져오기 const getTestData = () => { const q = query(collection(dbService, 'test')); onSnapshot(q, (snapshot) => { const newArr: any = []; snapshot.docs.map((doc) => { const newObj = { id: doc.id, ...doc.data(), // doc.data() : { text, createdAt, ... } }; newArr.push(newObj); setArr(newArr); }); console.. 더보기
🌞 2/7 내배캠 React 71일차 [ Next.js, Typescript, Firebase CR , Modal 구현 ] Next.js +Typescript의 Modal 구현 interface ModalDefaultType { onClickToggleModal: () => void; } const Modal = ({ onClickToggleModal }: PropsWithChildren) => { return ( { e.preventDefault(); if (onClickToggleModal) { onClickToggleModal(); } }} > ); }; 일단 interface로 onClickToggleModal 의 type을 설정해주고, Modal이 불러왔을 때, dialoge테그로 PostForm이라는 컴포넌트를 open할 수 있게.. 더보기
🌞 2/6 내배캠 React 70일차 [최종 프로젝트] 최종프로젝트가 진행되었다. 정말 많이 부족한 상태로 최종프로젝트를 시작하게 되었다. 너무나도 마음이 잘 통하는 팀원들과 한팀이 되어 인사를 나누고, 디자이너님도 함께 회의를 진행하게 되었다. 주제를 선정, 와이어프레임을 짜기 전, IA(정보구조도, InformationArchitecture)를 먼저 진행하였다. 와이어 프레임 및 추가적인 수정을 쉽게 하기 위해 IA를 이용하였다. 이후 IA를 기반으로 한 아주 기본적인 와이어프래임을 구상하였다. 현재 계획에서 들어가야 할 기능들은 로그인, 회원가입 CRUD Map Api 검색기능 팔로우 기능 등이 있고, 추가적으로 디테일하기 들어가는 기능들이 있다. 사진을 기반으로 한 프로젝트 이기 때문에 데이터를 불러오는 일도 많을 것이다. 그래서 React와 Next.. 더보기
🌞 2/3 내배캠 React 69일차 [React - Redux] Store 앱의 전체 상태 트리를 가지고 있는 스토어입니다. 이 안의 상태를 바꾸는 유일한 방법은 여기에 액션을 보내는 것 뿐입니다. 스토어는 클래스가 아닙니다. 단지 안에 몇가지 메서드가 들어있는 객체일 뿐입니다. 생성하기 위해서는 루트 리듀싱 함수를 createStore에 전달하면 됩니다. Store 메서드 getState() dispatch(actiom) subscribe(listener) replaceReducer(nextReducer) Vanila Js - Redux로 간단한 TodoList 만들기 index.js import { createStore } from "redux"; const form = document.querySelector("form"); const input = docume.. 더보기
🌞 2/2 내배캠 React 68일차 [React - Redux] Next.js를 배우다가 Redux를 활용하여 CRUD를 구현하기 위해 Redux를 다시 복습해보기로 정했다. Redux -react redux React에서 조금 더 쉽게 쓸 수 있는 도구이다. 요즘은 순수 react를 쓰는 것은 없다. [ Let’s get it ] 순수 기존 리엑트의 개발방법 및 한계 컴포넌트 폴더마다 각 파일들을 분리했고, 각 폴더마다 style.css를 파일로 만들어서 넣어주는 형식을 채택했음 index.html이 public 폴더에 위치하고 있다. index.html 파일의 역할은 root라는 div를 가져오는 것이다. index.js의 파일에는 document.getElementById에서 돔요소의 root라는 id를 가진 요소를 선택하게 되어있다. root에는 가장 깊은 곳.. 더보기
🌞 2/1 내배캠 React 67일차 [Next.js] Next.js Next.js는 웹 개발자에게 필요한 다양한 기능을 제공해주는 리액트 프레임워크이다. 특징 개발 환경 설정이 쉽고 간단하다. SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다. 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다. npx create-next-app npx create-next-app 폴더이름 --typescript // typescript를 쓰고싶을 때 npx create-next-app 폴더이름 --use-npm --typescript //npm을 최신화하고 typescript를 쓰고싶을 때 Library와 Framework의 차이 중요한 차이점 : Inversion.. 더보기
🌞 1/31 내배캠 React 66일차 [Throttling & Debouncing] Throttling and Debouncing : 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 예시 (게임에서 클릭을 계속해도 총알은 일정한 간격으로 나가는 것) Throttling 이란? 예시 (게임에서 클릭을 계속해도 총알은 일정한 간격으로 나가는 것) 타입 : 크게 3가지 leading edge / trailing edge / leading & trailing edge 보통 무한스크롤 할때 자주 사용한다. Leading Edge (선두 event) : event가 발생했을 때, 첫번째 함수를발동하고 딜레이를 준다, 특정 딜레이 타임이 지나가면 다시 event를 호출하고, 다시 딜레이타임을 준다. Trailing Edge (마지막 event) : 특정 .. 더보기
🌞 1/30 내배캠 React 66일차 [프로젝트 발표] 오늘 최종 프로젝트 전 마지막 프로젝트 발표가 끝났다. 이건 우리 프로젝트 Hi, 카공이다. 프로젝트 명 👋 Hi, 카공 컨셉 📕 카페에서 공부하는 사람 (카공족) 들을 위한 사이트. 작은 카페에서 눈치 보면서 카공하지 말고 넓은 카페에서 눈치보지 말고 편하게 카공하자 !! 설명 💻 혹시 카페에서 공부해보신 적 있으신가요? 아니면 나도 카페에서 공부하고 싶은데, 어디로 가야할 지 고민하신 적 있으신가요? 작은 카페는 눈치 보이기도 하고, 카페 분위기도 궁금하고, 좋은 자리가 있는지 콘센트는 얼마나 있는지 한번쯤은 궁금하셨을 거라고 생각합니다. Hi, 카공은 카공 리뷰 사이트로 이 카페의 장단점, 평점, 나만의 명당 등을 공유할 수 있는 사이트입니다. https://hi-cagong.vercel.app/ .. 더보기

티스토리툴바