유령이 나오는 젤리하우스

웹/React

[Next.js] Data Fetching의 방법들

한 줄 요약 Next.js는 4가지의 Data Fetching을 제공한다. 1. SSR 2. CSR 3. SSG 4. ISR 1. SSR SSR. (Server Side Render)는 말 그대로 서버에서 데이터를 패칭하여 화면을 그린다는 뜻이다. 서버 측에서 화면을 준비할 수 있다는 것은 React와 차별되는 Next만의 큰 장점인 만큼, 공식화된 방법을 통하여서만 수행할 수 있다. 이때 사용하는 함수가 getServerSideProps이다. export async function getServerSideProps() { return { props: { randoms: Math.round(Math.random() * 100) }, }; } export default function Home({ rand..

TIL

(21.11.04) Node.js 요약

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄본문 자체가 요약입니다!🦄 본문 Node.js란? 1. 웹 서버란 요청을 처리하고 적절한 결과를 보내주는 프로그램 2. Node.js는 서버나 프레임워크가 아니라, 자바스크립트의 런타임이다. 쉽게 말해서 웹 브라우저 밖에서 자바스크립트 코드를 실행 할 수 있도록 (특히 서버에서) 도와주는 환경이다. 3. Node.js를 사용하면 좋은 서비스 제작할 앱이 리얼타임일 경우 커스터마이징이 많이 필요한 경우 자바스크립트 API를 사용해야할 경우 빠른 실행과 성능이 중요한 경우 4. Node.js의 특징은, 비동기 방식을 이용한다는 것이다. 한 번에 하나씩 순차적으로 일을 해나가는 동기적 방식과는 다르게, 비동기적 방식은 한번에 여러 일을 시작하고 진행한다. 또한,..

TIL

(21.10.27) TS] Type assertion에 관하여

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄TypeScript에서는 시스템이 추론 및 분속한 타입 내용을 변경 할 수 있는데, 이를 Type assertion이라고 한다.쉽게 말해, 프로그래머가 내가 이 자료의 타입을 잘 알고 있으니, 토 달지 말라고 선언 해주는 것이다.🦄 **Type Casting라고도 하는데, 이보다는 Type assertion이 더 적합한 표현이다. 일반적으로 캐스팅이라는 말은 실행 시간에 어떤 동작이 일어날 것임을 내포하기 때문이다. 본문 1. 타입 어센션을 하는 방법 : 꺽쇠를 변수 앞에 작성 as foo : 변수 뒤에 붙임 * 용례 var foo:any; var bar = foo // 이제 bar의 타입은 string입니다. var bar2 = foo as Boolean..

TIL

(21.07.19) CRA로 만든 react의 webpack 수정하기 (with CRACO)

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄create-react-app으로 만든 프로젝트는 쉽고 간편하지만, webpack 설정을 건드리지 못한다.🦄 🦄webpack 설정을 건드리고 싶으면 CRACO 라이브러리를 이용해서 바꿀 수 있다!🦄 CRACO가 뭐에요? CRACO는 Create React App Config Override의 준말로, eject 없이 cra의 설정을 바꿀수 있게 해준다. 나는 항상 프로젝트에서 뭔갈 import 할 때 상대경로를 사용해왔다. 이유인즉, 내가 처음 웹을 배운 "head first HTML&CSS" 교재에서 절대경로로 파일을 불러오면 다른 사람의 PC에서 제대로 불러오지 못한다는 경우가 있다는 말을 보고 맹목적으로 상대경로만을 사용하게 되었다. 그렇게 철썩 같이..

TIL

(21.07.18) React-native bulid, Image 컴포넌트

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄리버스 도메인이란 영문 주소로 DNS에 질의하여 IP주소를 찾는것과 반대로, IP 주소를 통하여 도메인 네임을 찾는 것을 의미한다. Expo를 사용하여 앱을 빌드할 때 리버스 도메인이 필요한데, 이는 com.AAAA.BBBB 같은 형식으로 이루어진다.🦄 🦄React Native의 Image 태그의 속성으로 source를 사용한다면, Styled Component로 만드는 것은 지양해라.🦄 🦄Source 태그를 사용할 때는 RN만의 규칙이 있다.🦄 네트워크 정적 파일을 Image 컴포넌트에 활용하는 경우 이거 때문에 오늘 진짜 머리 너무 아팠다. RN을 공부하면서 styled component에 익숙해지려고 모든 컴포넌트를 styled component로 만..