Developer 19

[Front-end/React] npm start 명령어 실행 오류

1. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.npm i -g react-scriptsreact-scripts가 설치되어 있지 않아 발생한 문제로 npm install을 수행해주면 된다.  2. Error: Cannot find module 'react'npm i react react-domreact가 설치되지 않아 발생한 문제로 마찬가지로 react, react-dom을 설치해주면 된다.

[Front-end/React] MUI(Material UI) 사용하기

MUI는 Material Design을 적용하기 쉽게 만든 라이브러리로, 사용하기 위해서는 터미널에서 아래 명령어를 통해 설치해주어야 한다. 이 코드에서 --legacy-peer-deps는 충돌이 날 경우 무시하고 설치하라는 명령어이다.npm install @mui/material @mui/icons-material @emotion/react @emotion/styled --legacy-peer-deps 위 코드를 실행해주면 MUI의 아이콘을 포함한 디자인을 활용할 수 있다.Material Design 혹은 MUI가 궁금하다면 아래 링크를 통해 확인해보자. - Material designhttps://m3.material.io/ Material DesignBuild beautiful, usable pro..

[Front-end/React] Google Fonts의 무료 폰트 사용하기

Google Fonts에서는 무료로 사용할 수 있는 여러 폰트를 제공하고 있다. 나는 'Roboto' 폰트를 가져왔다.가져오는 방법은 Google Fonts에서 사용할 폰트를 클릭하여 상세 페이지로 들어간 후, 'Get embed code' 버튼을 클릭한다. 그런 다음 @import 옵션을 선택하고 Copy code를 해준 다음 index.css 파일에 붙여 넣는다. (style 태그는 제거한다)

[Front-end/React] BrowserRouter 라이브러리 사용하기

React는 SPA(Single Page Application)으로, 하나의 페이지를 동적으로 활용하여 웹 페이지를 구성하는 방식을 의미한다. 사용자의 동작에 대해 자원을 동적으로 관리하여 효율적으로 기능하도록 하는 것이 목적이다.따라서 React는 URL 마다 새로운 페이지를 호출하는 것이 아니라, Router를 통해 변경될 부분의 코드만 불러온다. 이 때 사용하는 React Router는 여러 종류가 있지만, 우리는 BrowserRouter 라이브러리를 활용하려고 한다.이 라이브러리를 사용하기 위해서 아래 코드를 터미널에 실행하여 설치하여 준다.npm i -s react-router-dom 그리고 index.js 에서 코드를 로 감싸준다.index.js 코드의 전체 코드를 확인해보면 아래와 같다.i..

React.js 환경 구축

목차0.  Environment1. Installation2. Start a react project3. References  0. Environment- OS: Windows- 그 외 특이사항 없음 1. Installation(1) Nodejs 설치: v20.15.0 (LTS, 2024.06.24 기준)아래 링크로 접속하여 LTS 버전의 Node.js를 설치한다. 별도로 클릭할 것 없이 동의하고 모두 Next 버튼을 눌러준다.Installation 버튼까지 눌렀다면 설치가 진행되고 있는 상황이 Status bar로 나타날 것이다.모두 설치가 끝난 후 Finish 버튼을 눌려주면 Node.js 설치는 완료되었다.https://nodejs.org/en/ Node.js — Run JavaScript Ever..

JAVA 환경 구축: MacOS에서 JAVA를 설치해보자

Summary- StanfordCoreNLP 라이브러리를 활용하는 Python 코드를 구현하던 중 JAVA가 `RuntimeError: Java not found.` 메시지를 마주하였다. 이에 JAVA를 설치해보고자 한다.- 현재 내 맥의 환경은 아래와 같다. * OS: 13.0.1 (22A400)* Processor: 2.3 GHz Quad-Core Intel Core i5 Contents내용은 아주 간단하다. (1) 오라클에 들어가서 JAVA JDK를 설치해주고 (2) 환경 변수를 등록해주면 된다.차례차례 진행해보도록 하자. 1. 먼저 내 맥에 JAVA가 없는지 확실히 확인하기 위해 아래와 같이 실행하였다.java --version 확실히 설치되지 않았음을 알 수 있다.  2. Oracle 다운로드 ..

[환경구축][PEFT] RuntimeError: Failed to import transformers.trainer because of the following error (부제: 윈도우에서 PEFT를 시도하려고 할 때 생기는 일)

Summary 이 글은 아래 환경에 있는 사람들이라면 참고하시기 좋은 글입니다. 1. Window OS 환경에서 PEFT를 시도하는 중인 분 2. 그 과정에서 엄청난 길이의 Warning과 Error를 맞이한 분 3. bitsandbytes 라이브러리 설치를 위해 pip install bitsandbytes로 시도한 분 시간이 없어 얼른 해결하고 싶은 분들은 아래 명령어를 실행하시길. (만약 bitsandbytes를 사전에 설치하셨던 분이라면 pip uninstall bitsandbytes를 실행한 후 아래 코드를 실행하세요!) python -m pip install bitsandbytes --prefer-binary --extra-index-url=https://jllllll.github.io/bits..

[Basic][grammar] 이중 리스트의 행과 열 바꾸기 (부제: zip 함수 활용하기)

이중 리스트가 있을 때, 각 동일한 열 값끼리 더하고 싶을 때에는 어떻게 하면 좋을까? Question: 학생의 성적이 리스트 형태로 저장되어 있다. 자세한 형태는 아래와 같다. # 국어, 수학, 영어, 과학, 사회 scores = [[30, 90, 55, 100, 60], [100, 85, 100, 90, 95], [60, 75, 50, 100, 100], [80, 80, 80, 80, 80]] 과목별로 평균, 최대값, 최소값을 구하려면 어떻게 해야 할까? Answer: 이중 반복문을 이용하는 방법도 있겠지만, zip() 함수를 이용하여 이중 리스트의 행과 열을 역전하여 풀어보겠다. zip 함수는 여러 개의 iterable 객체를 엮어주는 역할을 수행하는 함수로, 튜플이나 리스트 등 iterable 객..

Developer/Python 2023.09.22

[Algorithm][DP] 동적 계획법(Dynamic Programming) 알아보기 (참고 문제: 프로그래머스 - 정수 삼각형)

Summary - 동적 계획법의 기본적인 개념과 구현 과정에 대해서 소개하였다. 그리고 코드를 통해 실제 문제에 적용해보았다. (프로그래머스 정수 삼각형 문제) - 동적 계획법과 분할 정복 알고리즘의 차이를 간단하게 언급하였다. Description 1. 동적 계획법(DP, Dynamic Programming)이란? 동적 계획법은 문제를 효율적으로 해결하기 위하여 문제 해결 과정에서 생성된 결과를 미리 저장해두고, 그 값을 주어진 문제에 활용하는 방법이다. 달리 표현하면 본 문제를 해결하기 위하여 활용하기 좋은 하위 문제들로 분리하고, 하위 문제의 결과값들을 재활용하여 본 문제를 해결하는 방법이다. 글로만 설명하였을 때 쉽게 이해하기 어려울 수 있기 때문에 '피보나치 수열'을 예시로 들어보겠다. 피보나치..

Developer/Python 2023.08.13