본문 바로가기

분류 전체보기

 (81)
검색기능 처리 과정
이미지 업로드 방식 실제 파일은 storage에 저장 storage파일에 접근할수 있는 이미지 주소를 준다. DB에는 파일이 들어가지 않는다. (파일을 접근할 주소만 가지고 있음) _app.tsx 세팅 yarn add apollo-upload-client yarn add -D @types/apollo-upload-client import { createUploadLink } from "apollo-upload-client"; ApolloLink import link: ApolloLink.from([uploadLink as any]), 타입스크립트 부분
Firebase https://blog.naver.com/dlalsgh0812/222555752283 리액트 기초 4 1. keyframes 웹에서 애니메이션을 구현할 대는 transition과 animation이라는 스타일 속성을 많이 사용합... blog.naver.com
11월 24일 메모 resolvers 함수들을 모아서 resolvers에 감싸서 넣기. 실행되는 공간 (api는 함수) Board.insert() axios 처럼 db로 요청 BAAS Backedn As a Service SAAS PAAS (software, platform) realtime database 채팅이나 알람, 실시간 서비스
백엔드, 프론트엔드, DB는 어떻게 상호작용 하는가 - 11월 23일 서비스 배포를 위해서는 3개의 프로그램이 필요하다 (백엔드, 프론트엔드, DB) 누구든지 접속을 하기위해 내컴퓨터가 아닌 누구든지 접속할수 있는 컴퓨터에 설치를한다. 표에 저장 = 관계형 데이터 베이스(SQL ,RDB) Oracle, MySQL, Postgres.. 서류봉투 = collection NoSQL(이후에 나온것) MongoDB, Firebase.. ORM R=relation DB가 RDB일때 연결해 주는거 sequalize prisma typeorm ODM DB가 NoSQL일때 연결해 주는거 orm odm도 객체로 표현
코드캠프 4기 - 11월 22일 여러개의 함수를 묶어서 하나의 객체를 만든다. 객체(객체지향프로그래밍-OOP) 함수형 컴포넌트를 위해 훅, 함수를 통해서 컴포넌트를 만들었다. 함수형 컴포넌트에서 setstate와 같은 기능을하는 것은 클래스 컴포넌트에서는 extends Component을 통해 class component를 만든다. 화면에 그리기 render() 클래스 안에 함수 만들때는 function적는것 빼기 클래스 안에 this.onClickCounter (클래스 안에 있는것을 접근하기 위해) 자바스크립트 클래스 밖에서 this를 하면, 가장 최상위인 window를 가르킨다. this.alert("dd")은 window.alert("dd")와 같다. onClickCounter()는 클릭했을때 실행이된다. 새로운 환경이 만들어지고..
State 끌어올리기, 스프레드 연산자, Deep copy, 무한스크롤 - 11월 19일 state 끌어 올리기 자식1의 카운트가 올라가면 자식2의 카운트를 올리고 싶을때? 두개의 state를 부모로 끌어올린다. 부모 state를 props로 각각 내려준다. 부모의 setstate를 자식으로 propsfh 내려준다 모든 컴포넌트가 하나의 state를 공유 글로벌 state string, number boolean 에 값이 들어가지만 객체, 배열은 값은 다른곳에, 주소만 저장 profile의 모든 key value들 복사 ... 스프레드 연산자 위와 같이 스프레드 연산자를 사용해도 객체 안의 객체는 저장되지 않는다. (shallow copy) Deep Copy 전체를 문자열로 바꾸고, 문자열을 다시 객체로 돌리기 객체를 문자열로 바꾸기 JSON.stringify(profile) 문자열을 객체로..
이벤트 버블링 - 11월 18일 태그 안 props.childern, 모든 페이지들을 가운데 정렬을 할 수 있다. yarn add -D @types/react-slick 내가 설치했던 모든 파일 yarn.lock은 깃허브에 올리는게 중요하다. event.target as Element 엘리먼트라고 강제 id는 중복이 안되게끔 만드는데, 아이디를 많이 쓰는게 좋지 안흠 하나의 함수에서 여러가지 값을 받는 방법이 있다. 페이지네이션? 이벤트 버블링 (event.currentTarget.id)
리액트 폰트 적용하기 https://daeguowl.tistory.com/183 React 웹폰트 초간단 적용하기 react 웹폰트 초간단 적용하기(react create app 사용시) 정말 초간단 적용 방법입니다. 다른 것 설치하고 할 필요 없습니다. 제 로컬에는 폰트가 잘 깔려 있어서 이상이 없었는데.. safari에서는 폰트가 daeguowl.tistory.com
코드캠프 4기 - 11월 17일 return 페이지들 _app.tsx 설정담당 파일 Component 부분을 감싸기 (변하지 않는 부분을 만들기 위해) *여러 레이아웃 구조 생각해보기* 이 부분의 페이지들이 바뀐다 props 수동 props 자동 ----- props.children global style 모든페이지에서 적용하기 폰트다운받을때 경량화 버전으로 다운로드 받기 React Slick yarn add react-slick npm install slick-carousel --save import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css";

티스토리툴바