WEB/HTML CSS JS (75) 썸네일형 리스트형 [React Router v6] 1. BrowserRouter 준비하기 실습하며 공부할 생각이라 리액트 프로젝트를 만들어 줍니다. react 프로젝트 설치가 완료되면 react-router-dom을 설치합니다. 이제 해당 프로젝트를 실행시켜주고 vsCode로 폴더를 열어줍니다. 준비가 완료되면 Router 공부를 시작하겠습니다. React-Router 기존에는 페이지를 이동할 때 새로운 파일을 서버로부터 전송받아 화면에 출력했지만 페이지가 많아짐에 따라 새로운 기술 SPA(Single Page Application)와 Router가 등장했습니다. 이 기술은 서버에는 필요한 데이터가 있을 때만 호출을 하고 나머진 사용자 브라우저 자바스크립트로 처리해 서버에 부하를 줄였습니다. Single Page이지만 자바스크립트를 이용해 주소에 따라 여러 페이지를 출력하는 데 이때.. [Node.js] npm 대신 yarn 설치하기 yarn yarn은 npm보다 빠르고 여러가지 추가기능을 제공합니다. 그러니 npm 대신 yarn을 사용해봅시다. npm install -g yarn 공식 사이트에서는 corepack을 쓰라는데 npm으로 설치하는게 더 나아 보인다. 설치가 완료된 모습이다. React-app 이제 yarn을 사용해 react프로젝트를 한번 만들어 볼 생각이다. 생각보다 프로젝트를 만드는데 시간이 걸린다. Happy hacking! 설치하는데 1분 넘게 걸렸다. hello 폴더를 vsCode로 열어주면 편하게 react 편집할 수 있다. Vscode hello folder를 열어주면 이렇게 다양한 파일들이 들어있다. 즐겁게 react 공부를 시작하자 [Node.js] mariadb 설치하고 Node.js 연동하기 데이터베이스로 maridb을 한번 설치해보려고 한다. 데이터를 txt, 엑셀 파일로 저장하게 되는데 이제는 데이터베이스를 사용해 관리해 볼 생각이다. mariaDB 설치 먼저 mariadb를 설치해 줘야 한다. https://mariadb.org/download/?t=mariadb&p=mariadb&r=10.11.1&os=windows&cpu=x86_64&pkg=msi&m=blendbyte Download MariaDB Server - MariaDB.org REST API Release Schedule Reporting Bugs … Continue reading "Download MariaDB Server" mariadb.org 이미 포드번호를 사용 중이라고 뜬다. 그냥 port 번호를 3306 -> 3.. [Node.js] openai로 ChatGPT API 호출해서 사용하기 일단 OpenAI 사이트를 가입해 주면 됩니다. 저는 google 아이디로 간편하게 가입했습니다. https://openai.com/api/ OpenAI API OpenAI is an AI research and deployment company. Our mission is to ensure that artificial general intelligence benefits all of humanity. openai.com 프로필 아이콘 -> Manage account -> API Keys에서 key를 신청합니다. 여기까지 했으면 나머진 Node.js에서 진행 하겠습니다. Node.js node.js Library openai를 npm으로 설치해 줍니다. 일단 openai에서 제공하는 예제를 그대로 실행합.. [React.js] 11. CSS, SCSS react.js에서도 css와 scss를 사용해 웹페이지를 꾸밀수 있습니다. CSS css는 우리가 기존에 사용하던 방식으로 .css 파일을 만들어주면 됩니다. 그 후 해당 컴포넌트에 import 해줍니다. import React from 'react'; import './CssEx.css'; const CssEx = () => { return ( 제목 내용 재밌는 react css, scss를 사용하는 방법은 ... ); }; export default CssEx; table, tr, th, td{ border: 1px solid black; border-collapse: collapse; } table { margin: 10px; } HTML에서 link 태그로 css를 연결해주는 방법과 비슷해 큰 .. [React.js] 10. hook useMemo 2023.01.31 - [WEB/HTML CSS JS] - [React.js] 9. 아날로그 시계 만들기 useMemo는 컴포넌트 내부에서 연산을 할 때 최적화할 수 있는 hook입니다. 앞에서 만들었던 아날로그 시계는 setInterval 함수를 이용해 100ms마다 새 date를 만듭니다. 로그를 통해 값이 변하는 1초마다 렌더링 되는 걸 알 수 있습니다. 그런데 초가 변할 때 시, 분까지 같이 호출됩니다. 이런 문제를 해결하기 위해 React는 값이 변할 때만 최적화하는 useMemo을 제공합니다. useMemo Memoization은 컴퓨터 용어로 이전에 계산한 값을 메모리에 저장해 반복 수행을 제거하는 기술입니다. 즉 우리는 sec가 변할 때 min, hour는 기존 계산된 값을 사용하도록 만드.. [React.js] 9. 아날로그 시계 만들기 시계 이번에는 지금까지 배운 React를 사용해서 아날로그 시계를 만들 생각이다. 공부하면서 여기저기 본 것들을 조합하면 충분히 만들 수 있을 것 같다. Date 객체 바로 아날로그 시계를 만들기 보단 자바스크립트 내장객체 Date를 먼저 사용해보자. 어떻게 만들지 대략적으로 생각한 뒤 코드를 작성하면 import React, { useEffect, useState } from 'react'; const Timer = () => { const [time, setTime] = useState(new Date().toString()); useEffect(() => { setInterval(() => { setTime(new Date().toString()); }, 700) }); return ( {time}.. [React.js] 8. map()을 이용한 컴포넌트 반복 map()은 자바스크립트 내장 객체 배열의 메서드 입니다. 컴포넌트, 요소를 반복을 하려면 배열을 만들어 map()을 사용하면 됩니다. map() // Arrow function map((element) => { /* … */ }) map((element, index) => { /* … */ }) map((element, index, array) => { /* … */ }) // Callback function map(callbackFn) map(callbackFn, thisArg) // Inline callback function map(function (element) { /* … */ }) map(function (element, index) { /* … */ }) map(function (elem.. 이전 1 2 3 4 5 ··· 10 다음
