react9 [AWS] EC2 Nginx 설치 & react 프로젝트 구동 #1. Nginx 설치 EC2 서버에 접속하여 아래 명령어를 통해 nginx 를 설치한다. sudo apt install nginx #2. 사이트 소스 설정 react 소스를 빌드한 결과는 아래 디렉토리에 위치 해 있다는 가정 하에 진행하도록 하겠다. 먼저 /etc/nginx/sites-available/ 경로에 이 사이트에 대한 설정 파일을 만들어 준다. cd /etc/nginx/sites-available/ sudo vi fe-cl.conf 내용은 아래처럼 port, location 만 설정하여 심플하게 작성한다. server { listen 80; location / { root /home/ubuntu/web; index index.html; try_files $uri $uri/ /index.htm.. 2023. 4. 23. npm install high serverity vulnerabilities : nth-check #1. 오류 발생 1년전에 작업한 react 프로젝트를 간만에 다시 띄우려고 로컬에서 npm install 해보니 235 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. 위처럼 오류가 발생했다. 시키는 대로 npm audit을 날려보자 PS C:\02.DEV\QUIZ\fe-cl> npm audit # npm audit report nth-check @svgr/plugin-svgo > svgo > cs.. 2023. 4. 20. [React] Tree형 Sidebar 만들기 - 2 이전글 - [React] Tree형 Sidebar 만들기 - 1 (tistory.com) [React] Tree형 Sidebar 만들기 - 1 #1. Sidebar 제작 필요성 React로 웹사이트를 만들기로 마음먹고 많은 템플릿과 컴포넌트를 살펴보았지만 딱 이거다 하는게 없었다. 구글링을 해봐도 샘플은 강제로 컴포넌트를 병렬로 붙여 놓고 확 garve32.tistory.com #1. 최하위 노드(leaf)와 상위 노드(root) 분리 실제 화면 url을 가지고 있는 최하위 노드(leaf)와 상위 노드(root)를 분리해서 그려보자. 최하위 노드는 link를 연결해서 해당 메뉴로 이동할 수 있어야 하고, 상위 노드는 가지고 있는 하위 노드를 접었다 폈다 할 수 있어야 한다. 일단 메뉴를 열고 닫을 때 상.. 2022. 4. 9. [React] Tree형 Sidebar 만들기 - 1 #1. Sidebar 제작 필요성 React로 웹사이트를 만들기로 마음먹고 많은 템플릿과 컴포넌트를 살펴보았지만 딱 이거다 하는게 없었다. 구글링을 해봐도 샘플은 강제로 컴포넌트를 병렬로 붙여 놓고 확장하기가 힘들다던지 아니면 제한적인 props를 제공해서 커스터마이징 하기가 힘들다던지.. 아니면 그냥 ui가 맘에 안든다던지..(react-pro-sidebar가 제일 괜찮긴 하더라) 사실 그냥 남이 만들어 놓은것을 가져다 쓰는게 제일 편하긴 하다. 굳이 편한 방법이 있는데 새로 만드는 것 자체가 시간낭비와 노력낭비지만 만드는 과정속에 배우는게 있지 않을까? 하는 마음에 굳이굳이 직접 만들어보기로 한다. #2. 기본 골격 생성 Depth가 존재하는 Tree구조의 핵심은 재귀호출이다. 일단 자기 자신과 하위.. 2022. 4. 8. [React] useState의 비동기 처리와 함수형 업데이트 #1. setState는 비동기로 동작한다 아래와 같이 동작하는 코드를 보자. 하나는 숫자를 1씩 증가시키는 버튼이고, 하나는 숫자를 1씩 감소시키는 버튼이다. import React, { useState } from "react" function App() { const [num, setNum] = useState(1) async function plus() { setNum(num + 1) } async function minus() { setNum(num - 1) } return ( {num} PLUS MINUS ); } export default App; 아직까지는 잘 작동하고 있지만, 요건이 바뀌어서 1씩 증가하던것을 3씩 증가시키기 위해 아래처럼 변경했다고 치자. import React, { u.. 2021. 7. 11. [Next.js] Image를 사용한 콘텐츠 리스트 구성 이전글 - [Next.js] API 호출을 통한 네비게이션 메뉴 생성 #1. 네비게이션 메뉴에 클릭이벤트 작성하기 네비게이션 메뉴로 만들었던 각 영화의 장르를 클릭하면 해당 장르의 영화들을 썸네일과 함께 보여주도록 만들어 봅시다. 먼저 next/router 를 임포트하고 Nav onclick 이벤트에 라우팅을 등록해줍니다. import { useRouter } from "next/router" import useSWR from 'swr' const BASE_URL = 'https://api.themoviedb.org/3/genre/movie/list'; const API_KEY = process.env.API_KEY; const fetcher = async (url) => { const res = awa.. 2021. 5. 23. 이전 1 2 다음 반응형
