본문 바로가기

전체 글

리액트) 폰트 어썸 font awesome 리액트(react) 에서 사용하기. 리액트 프로젝트에서 폰트 어썸 아이콘 사용하기. fontawesome - react 사용하기. - 작성 시점 : 버전5(v5)https://docs.fontawesome.com/web/use-with/react#contentHeader Set Up with React docs.fontawesome.com 1. 설치 - npm이용// fontawesom corenpm i --save @fortawesome/fontawesome-svg-core// fontawesome - 무료 solid icon 패키지npm install --save @fortawesome/free-solid-svg-icons// fontawesome - 리액트 컴포넌트로 사용하게 하는 패키지npm install --save @for..
리액트) 뭐? 리액트 프로젝트 생성할 때 사용했던 npx create-react-app 이거 이제 못 쓴다고?! 그러면 어떻게? -> 'Vite' !!! https://react.dev/blog/2025/02/14/sunsetting-create-react-app Sunsetting Create React App – ReactThe library for web and native user interfacesreact.dev 리액트 프로젝트 생성 할 때, npx create-react-app 프로젝트이름 요렇게 npx create-react-app 프로젝트이름 을 이용해서 생성했는데 , 이게 서비스를 종료한다!!!!!!!! 놀란 점) - 와우, 이게 무슨 서비스 였구나... 나는 그냥 쓰면 되는건 줄 알았네https://react.dev/blog/2025/02/14/sunsetting-create-react-app#deprecating-create-rea..
Restful Route - REST 규칙을 이용해서 만든 api 디자인 패턴 웹을 통해 데이터를 주고 받을 때 (서버 ↔ 클라이언트)http 문법을 통해 주고 받게 되는데, 큰 명령어로는 4가지가 있다. HTTP 명령어 (HTTP Verb)GET : 데이터 보기 (fetch하면 기본 명령어 속성이 Get임)POST : 데이터 생성PUT (PATCH) : 데이터 수정(Patch 라고도 불림)DELETE: 데이터 삭제 Restful Route의 필요성쇼핑몰 웹페이지를 예를 들어보자- 아이템 목록을 보여주는 페이지의 경우) /showitem /getItem 라고 만들 수 있다.- 아이템을 삭제하는 페이지의 경우) /removeItems /deleteItems라고 이름지을 수 있다.→ 이름 통일성 x 또한, 각 아이템에 대해서 CRUD (생성,읽기,수정,삭제) 총 4개의 url이 필..
리액트) 리액트 라우터 v7 설치하고 초기 세팅해보기, 좋아요! 리액트 라우터를 설치하려면 아래 단계를 따라 진행하시면 됩니다:1. React Router 설치터미널에서 다음 명령어를 실행하세요:bashnpm install react-router이 명령어는 최신 버전의 React Router(v7)를 설치합니다.2. BrowserRouter 설정React 애플리케이션의 최상위 컴포넌트를 BrowserRouter로 감싸야 합니다. 예를 들어:jsximport React from "react";import ReactDOM from "react-dom/client";import { BrowserRouter } from "react-router";import App from "./App";const root = document.getElementById("root"..
리액트) 터미널에 npm ~, npx ~ 이거 의미가 뭐야? Copilot의 대답 : 좋은 질문이에요! npm과 npx는 Node.js 환경에서 자주 사용되는 도구로, 각각의 역할이 조금 다릅니다. 간단히 설명드릴게요:npm (Node Package Manager)역할: 패키지 매니저로, Node.js 패키지를 설치, 관리, 업데이트하는 데 사용됩니다.주요 기능:패키지 설치: npm install 명령어로 로컬 또는 글로벌 패키지를 설치합니다.의존성 관리: 프로젝트의 package.json 파일을 기반으로 필요한 패키지를 관리합니다.예시:위 명령어는 React 패키지를 설치합니다. npm install reactbashnpx (Node Package Executor)역할: npm과 함께 제공되는 도구로, 패키지를 설치하지 않고도 실행할 수 있게 해줍니다.주요 기..
JS) 백틱 (`) -> 맥북에서 한글키로 '₩'입력해도 백틱 `으로 입력되게 하기! -Karabiner-elements 이용! JS에서 문자열 입력할 때, 치트키 백틱 `맥북에서는 영문입력으로 '₩' 요 원화키를 입력하면 백틱 ` 을 입력할 수 있다.-> 창피하지만 가끔 까먹어서 찾아본다. 근데, 키보드로 ₩ 이 원 문자를 입력할 때가 있을까?나는 아직 없어서, 한글이던 영어이던 백틱 입력되게 해보았다!!! 역시 많은 사람들이 불편했는지, 여러 방법을 만들어 놓았는데, 운이 좋게 내가 사용하고 있던 키보드 제어 프로그램이 있어 이걸이용하기로 했다. 나는 맥북에서 'Karabiner-elements' 이 프로그램을 이용하여 오른쪽 커맨드키로 한영을 바꾸는 것을 이용하고 있었다. -> 요 키보드 제어 프로그램을 이용하자! 프로그램 설치 후, 아래 링크를 들어가서 https://ke-complex-modifications.pqr..
JS) 아주아주아주 중요, 유용한 배열 함수, array function! 7개 - foreach, map, filter, some, every, find, findex 이제 배열 왔을 때 for문은 그만! 프론트엔드 개발자를 준비하며, 리액트 수업을 들으며 포트폴리오를 준비하고 있는 요즘! 그래도 웹 퍼블리셔로서 2~3년 경험으로html, css, js 기본은 할 줄 안다고 생각했는데, JS 아직 잘 모르나보다. 이번에 배열 관련 함수들을 알고 사용해봤는데 이거 굉장히 편리하다! 노트 해놨다가 보고 또 보자 참조 - JS) Arrayhttps://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDN다른 프로그래밍 언어의 배열과 마찬가지로, Array 객체는 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고, 일반적인 배열 연산을 수행하기 위한 멤버가 있습니다.devel..
리액트를 공부하는데 node.js 를 설치하란다. 그래서 node.js란? 리액트를 공부하는데, 제일 처음 리액트 설치할 때, 리액트보다 먼저 설치하는게 있다?!  node.js 란 뭐냐?일단, 리액트란? -> 자바스크립트 편하게 쓰라고 하는 라이브러리-> 자바스크립트는 웹!-> 웹(Js, css, html)은 브라우저에서 본다 -> 브라우저는 크롬이 짱! -> 크롬의 엔진 V8이 짱!-> 요 엔진을 이용해서 브라우저 밖 환경에서도 (자바스크립트)사용할 수 있도록!!! -> V8을 이용한 요 프로젝트 이름이 노드 프로젝트 -> node.js 등장 두둥탁!  오피셜 : 크롬V8 Javascript 엔진으로 빌드된 Javascript 런타임(환경)  왜 Node.js?- 논블로킹 (Non-blocking I/O)  : 단일 스레드 이벤트 루프 기반 비동기 방식! ...... (뭔말..