본문 바로가기

전체 글

🌞 2/14 내배캠 React 75일차 에러 모음 [ HEIF파일이 읽히지 않는 이슈, setState 비동기 이슈 ] HEIF파일이 읽히지 않는 이슈 사진 파일을 넣어 테스트 하기 위해 내 파인더의 다운로드 폴더에 가장 상위에 있던 파일을 가져와 테스트를 진행 했다. 그런데 그 파일만 화면에 랜더링 되지 않았다. 하필 그 파일이 HEIF 파일이었다. HEIF는 ‘고효율 비디오 압축’이라는 표준을 기반으로 하는 손실 압축 형식파일 이다. 그러다보니 화면에 랜더링이 되지 않는 이슈가 발생했다. 내가 사진이나 다른 파일을 업로드 하고 싶을 때, 허용하고 싶은 파일의 형식을 지정하고 싶다면 쓸 수 있는 코드가 있다. input 테그 안에 들어있는 속성으로 accept="image/png, image/jpeg, image/jpg" 라고 작성해주면 이.. 더보기
🌞 2/9 내배캠 React 73일차 [ Next.js Typescript Firebase CRUD ] 기술사전 노트 작성 코드 컨벤션 folder → lowercase Component → Pascal Case function → camelCase 변수,props → 명사 함수 → 동사로 시작(handle~~~, is ~, on~) id, class → cabab-case 함수명 변수명 작성 시 명확하게 처음 보는사람이 봐도 알아볼 수 있는 의미로 지어주세요. 코드 컨벤션, 프로젝트 기술, 회의록 등 이번주에 있었던 일들을 정리하여 기술사전 노트를 작성하였다. 그리고 개인 기술 파트로 게시물 CRUD를 맡았기 때문에 지금 간단하게 구현해 놓은 CRUD를 ReactQuery로 리팩토링 하기로 했다. Next.js에 Typescript언어의 .. 더보기
🌞 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.. 더보기

티스토리툴바