ZOELOG

Next.js 에서 localhost 혹은 127.0.0.1:3000 로 프로그램 실행 시 openssl 을 적용하고자 한다. 1. 먼저 server.js 파일을 만들어 준다. const fs = require('fs'); const https = require('https'); const next = require('next'); const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev }); const handle = app.getRequestHandler(); const httpsOptions = { key: fs.readFileSync('./private.pem'), cert: fs.readFileSync('./certif..

1차시도 npm i serve 로 serve 모듈을 이용한 배포 npm run build 실행하면 프로젝트 경로에 build 폴더가 생김 build 폴더안에서 npx serve 하면 페이지가 열리긴 하는데 템플릿때문에 사용한 a 태그와 form 에 action 기능 (라우터관련)들이 전부 404처리 되는 문제 발생 정적인 페이지만 로드되는 듯 보임 2차시도 npm i express 로 express 서버 다운로드 /public 경로에 server.js 파일 만들고 https://velog.io/@ghrfde/react-router-404-error const express = require("express"); const path = require("path"); const app = express();..

새 웹 프로젝트를 create react app 으로 만들었다 디자인을 직접하면 너무 오래 걸리고 결과가 그닥 예쁘지도 않을 듯 해서 유료 ui 템플릿을 구매! 해당 템플릿은 html + css + js 로 구성 된 템플릿이였다 리액트 탬플릿이 아닌 일반 템플릿은 리액트에 적용해본적이 없어서 해보는데 살짝 애 먹은 부분이 있어서 포스팅 하게 되었다. 일단 지금까지 해놓은 걸 정리하자면 1. react 에 있는 기본적인 index.html 에 템플릿 css 파일과 js 파일을 임포트 해 둔다 (이 방식으로 하면 프로젝트 단위로 css랑 js 가 적용되므로 쓸데없는 로드가 많아 무거워지니 비추.. 이긴하지만 일단 나는 ui 템플릿이라 다 로드해야됨) 여기서 이상한거는 저 파일들을 보기 좋게 src 디렉토리에..

1. 하위 컴포넌트에서 상위 컴포넌트로 props 넘기기 2. 넘겨진 props 에 의해 상위 컴포넌트 전체 리랜더링 되는거 막기 먼저 설명할 컴포넌트의 구조를 그림으로 그려보면, 이런식으로 상위 A 컴포넌트 안에 B, C, D 를 두었다 (select box 나 input, date picker 같은 컴포넌트) 이때 B에서 state를 변화했을때 A 에서 이를 어떻게 알까? Angular 같은 경우는 하나의 service 에 변수를 빼서 그 변수를 구독하는 식으로 여러 컴포넌트에서 썼었는데 리액트는 어떻게 사용하는 지 모르겠어서 구글링을 해보았다. 상위 컴포넌트에서 state를 정의해두고 useState 함수에 해당하는 값을 하위 컴포넌트로 넘겨주면 된다고 한다. //상위컴포넌트, 도식화 A const..

next.js 에 외부 라이브러리들을 dynamic import 해서 사용하고 있는 도중 두번씩 렌더링 되는 현상 관측. 그래프가 두번씩 랜더링 되길래 console 쳐보니까 콘솔로그도 두번씩 찍힘. 처음에 dynamic import 가 문제인가 해서 찾아보고, useEffect 에 뭐잘못했나 찾아보고 하는 도중 그 상위 컴포넌트에서도 콘솔 두번씩 찍히는거 확인. 최상위 _app.js 까지 올라가서 콘솔 찍어봤는데 심지어 거기서도 두번호출.. 구글링 하던 도중 알아낸 사실은 React.StrictMode 가 true 인 경우 그렇다고 한다. https://ko.reactjs.org/docs/strict-mode.html Strict 모드 – React A JavaScript library for buil..

나는 그냥 단순히 select * from user 조인 user level 을 하고 싶었는데 구글 예제들은 다들 prisma 모델을 사용 한 것들만 나와서 쪼금 삽질 한 결과 prisma에 $queryRaw를 사용하면 풀쿼리를 날릴수 있음을 알게되었다! (지금 라이브러리를 prisma 쓸지 serverless-mysql 쓸지 고민햇는데 나중에 디비 mysql 안 쓸 경우도 봐야하니까 prisma로 선택 :D) 도움이 된 블로그 글을 먼저 소개 https://velog.io/@iamhayoung/prisma-schema Prisma & MySQL 시작하기 Node.js, TypeScript용 ORM인 Prisma를 MySQL과 함께 도입해봅니다🤓 velog.io 1. prisma 다운로드 npm i pr..

(오..npm에 본인들이 만든 hooks을 공유하는 개발자들이 굉장히 많다.. 영상에서 니꼬쌤도 실제로 npm에 자신이 만들어 쓰는 hooks을 공유할거라고 했고, 나도 npm upload를 해보고싶다.) https://nomadcoders.co/react-hooks-introduction/lectures/1586 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 저번에 노마드코더의 리액트 기초와 NextJS를 완강했으니 이번엔 실전형 리액트 Hooks 에 대해 들어보고자 한다. 이것도 역시 무료강의. code sendbox 에서 실습 useState const [item, setItem] = useState(..

npx create-next-app@latest 타입스크립트를 사용하고 싶다면 npx create-next-app@latest --typescript (타입스크립트가 좋긴함) jsx를 쓰기 위해 별도로 리액트를 import 필요는 없지만, useState나 useEffect 같은 react method(hooks)를 쓰고 싶으면 react.js를 import 해야함 import { useState } from "react"; 노드 버전 안맞는 에러 발생 v16.15.0 노드로 재 다운로드 npm run dev로 실행 * Library vs Framework : 라이브러리는 개발자로서 내가 가져다 사용하는 것. => 자유도가 높음 : 프레임워크는 나의 코드를 불러오는 것 => 해당 프레임워크의 특정한 규칙..

실제로 현업에서 Angular 프레임워크를 사용했는데 생각보다 무겁고 배포, 빌드, 환경설정에 많은 시간을 들이게 되는 듯 했다.. 그리고 무엇보다 데이터를 빠르게 처리해야하는 과정에서 렌더링이 너무 느렸다 그리고 실제로 앵귤러 버전 9미만에서 9이상으로 올렸을 때 기존 웹에서 사용하던 라이브러리들이 잘 동작하지 않는 이슈도 있었고,,, (한땀한땀 수정..) 좀 더 라이트한 리액트를 공부해봐야겠다 싶었고 서치 중 SSR(Server side rendering)과 CSR(Client side rendering)을 잘 설명해준 유튜브를 보게되었다. 좋은 영상이라 공유. https://www.youtube.com/watch?v=D71ByEIBWEs&t=420s * SSR (server side renderin..

Babel JSX 문법 사용시 브라우저가 읽을 수 있도록 호환 JSX 이런식으로 대문자로 생성해서 기존 html 과 구분 state 기본적으로 데이터가 저장되는 곳 React js state특징 : 리랜더링 필요없이 컴포넌트에 바뀐부분만 업데이트 됨. 상호작용성이 좋음. * React 의 컴포넌트 리랜더링 방법 => React.useState(초기값); 사용 이때 [값, 실행함수] 가 리턴. 실행함수 실행 시 리랜더링이 자동으로 이루어짐 * js 배열 요소 꺼내기 => const food = ["tomato", "potato"] const [myFavFood, mySecondFavFood] = food; 하면 myFavFood 했을때 tomato 나옴. * state를 바꾸는 2가지 방법 => 1. 실행..