[React] 리액트 오류 Cannot find module, 'MODULE_NOT_FOUND' 해결 방법

오류문구 리액트 서버 실행시 콘솔창에 아래와 같은 오류가 발생했습니다. Error: Cannot find module 'C:\Users\hj\Desktop\React\ToyProject\backend\src\src\' at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12) at node:internal/main/run_main_module:17:47 {..

• format_list_bulleted React
• · 2022. 6. 2.
• textsms

[React] 리액트 오류 Matched leaf route at location does not have an element. 해결 방법

오랜만에 리액트로 프로그래밍을 하던 중 오류가 발생했습니다. 오류가 발생한 코드는 아래와 같습니다. import React from 'react'; import { Routes, Route } from 'react-router-dom'; import MainPage from './pages/MainPage.js'; const App = () => { return ( ); }; export default App; 오류문구 화면에 아무런 내용이 표시가 되지 않아 개발자 도구를 확인해보니 아래와 같은 경고 문구가 있습니다. Matched leaf route at location "/main" does not have an element. This means it will render an with a null..

• format_list_bulleted React
• · 2022. 6. 2.
• textsms

[CSS] 텍스트에 짧은 밑줄(라인) 만들기

텍스트에 밑줄 만들기 텍스트 밑에 짧은 밑줄을 만드는 방법입니다. 밑줄은 border 속성을 이용해 만들 수 있으며 width값을 조절하면 긴 밑줄도 만들 수 있습니다. See the Pen css - underline by saladent (@saladent) on CodePen.

• format_list_bulleted CSS
• · 2022. 3. 8.
• textsms

[CSS] display 속성 none, inline, block, inline-block 개념과 차이

display 속성 display 속성은 요소를 어떻게 보여줄지를 결정합니다. none, inline, block, inline-block 총 4가지 속성값이 있습니다. 아래 예시를 통하여 4가지 속성값의 개념과 차이를 알아보겠습니다. BOX 1 BOX 2 BOX 3 none 요소를 숨김처리 합니다. visibility 속성을 hidden으로 설정한 것과 달리 공간을 차지 않고 숨김처리합니다. See the Pen css - display : none by saladent (@saladent) on CodePen. inline 새 라인에서 시작하지 않고 내용만큼 너비를 차지합니다. 너비와 높이를 설정하려고 해도 효과가 없습니다. See the Pen css - display : inline by sala..

• format_list_bulleted CSS
• · 2022. 3. 6.
• textsms

[MSSQL] NULL값 대체하기 - ISNULL

MSSQL NULL값 대체하기 MS SQL Server의 ISNULL 함수는 null 값을 지정된 값으로 바꾸는 데 사용됩니다. ISNULL 함수의 구문은 다음과 같습니다. ISNULL(expression, value) 여기서 expression은 null을 확인하려는 값이고 value는 expression 값이 null인 경우 대체 값으로 사용하려는 값입니다. 예제 예를 들어 다음과 같이 employee 테이블이 있습니다. id name salary 1 John 50000 2 Mary NULL 3 Tom 45000 salary 열의 null 값을 기본값 0으로 바꾼다면 다음과 같이 ISNULL 함수를 사용합니다. SELECT id, name, ISNULL(salary, 0) AS salary FROM ..

• format_list_bulleted MSSQL
• · 2022. 3. 4.
• textsms

[javascript] 익명함수란, 익명함수 쓰는 이유

익명 함수 익명함수란 말 그대로 이름이 없는 함수입니다. const sum = function (a, b) { return a+b; } console.log(sum(1, 2)); // 3 왜 익명 함수를 쓰나요?🧐 일반함수와 익명함수 둘은 다른 목적으로 생겨난 함수입니다. 일반적으로 함수란 재사용하기 위해 사용합니다. 재사용이 필요없다면 나중에 호출해 쓸 이름을 굳이 붙혀놓을 필요가 없겠죠? 바로 변수에 함수 호출 결과값을 넣어줌으로써 익명함수의 사용은 1회성으로 끝이납니다. 또한 메모리 관리 측면에서도 효과적일 수 있습니다. 일반 함수의 경우 언제든 호출될 수 있기 때문에 항상 메모리를 차지하고 있습니다. 반면 익명 함수의 경우 한 번만 사용하는 함수로 만들어졌기 때문에 쓰는 순간 외에 불필요한 시간동..

• format_list_bulleted javascript
• · 2022. 1. 20.
• textsms

javascript 배열 선언, 배열 항목에 접근하기(Array() 생성자사용)

지난 포스팅에서는 javascript 배열을 리터럴 표기법으로 생성해보았습니다. 실제 업무에선 리터럴 표기법이 작성이 간단해 많이 사용하며 Array() 생성자를 사용하는 것보다 리터럴 표기법을 사용하는 것이 여러 브라우저에서 좀 더 좋은 성능을 보입니다. javascript 배열 선언, 배열 항목에 접근하기(리터럴 표기법) 배열 생성 방법 javascript로 배열을 생성하는 방법은 2가지가 있습니다. 먼저 리터럴 표기법에 대해 알아보겠습니다. 대괄호([ ])를 사용하는 배열 리터럴 표기법 Array() 생성자로 Array 객체 생성 배 likedev.tistory.com 배열 생성 방법 javascript로 배열을 생성하는 방법에는 2가지가 있습니다. 이번엔 Array() 생성자를 사용해 배열을 만들..

• format_list_bulleted javascript
• · 2022. 1. 18.
• textsms

javascript 배열 선언, 배열 항목에 접근하기(리터럴 표기법)

배열 생성 방법 javascript로 배열을 생성하는 방법은 2가지가 있습니다. 먼저 리터럴 표기법에 대해 알아보겠습니다. 대괄호([ ])를 사용하는 배열 리터럴 표기법 Array() 생성자로 Array 객체 생성 배열 선언 배열을 선언할 때에는 [ ] 안에 값을 나열하면 됩니다. const fruits = ['사과', '바나나']; const arr = ['사과', '바나나', 1234]; // 서로 다른 데이터 타입도 가능 인덱스로 배열 항목에 접근하기 배열의 인덱스는 0부터 시작합니다. console.log(fruits[0]); //사과 console.log(fruits[1]); //바나나 빈 배열 생성 후 값 추가하기 크기를 지정하지 않고 빈 배열을 생성합니다. var fruits = []; fr..

• format_list_bulleted javascript
• · 2022. 1. 18.
• textsms

javascript 배열 앞, 뒤, 중간에 값 추가하기

배열 앞에 값 추가하기 배열의 내장함수인 unshift 함수를 사용합니다. fruits.unshift('딸기') //['딸기', '사과', '바나나', '오렌지'] 배열 끝에 값 추가하기 배열의 내장함수인 push 함수를 사용합니다. fruits.push('오렌지') //['사과', '바나나', '오렌지'] 배열 중간에 값 추가하기 배열의 내장함수인 splice 함수를 사용합니다. fruits.splice(2, 0, 'melon'); //['딸기', '사과', '수박', '바나나', '오렌지'] splice함수는 다음과 같은 형태를 가집니다. array.splice(start, deleteCount [, item1 [, item2 [, ...] ] ]) start: 기준이 되는 배열의 index dele..

• format_list_bulleted javascript
• · 2022. 1. 17.
• textsms

javascript 객체 생성, 추가, 값 가져오기

객체란 데이터와 함수의 집합입니다. 예제를 통해 javascript 객체의 기본 형태와 빈 객체를 생성하고 값을 추가하고 조회하는 방법에 대해 알아보겠습니다. 기본 객체 생성 객체를 생성하고 속성까지 추가해보도록 하겠습니다. 키와 값은 ':'로 분리됩니다. 한쌍의 키와 값은 ','로 구분합니다. 여기서 name, age는 키가 되고 'Bob', 32의 경우 키에 대한 값이 됩니다. const person = { name: 'Bob', age: 32 }; 값에는 모든 자료형이 들어갈 수 있으며 함수와 배열도 들어갈 수 있습니다. const person = { name: 'Bob', age: 32, interests: ['music', 'skiing'], greeting: function() { alert(..

• format_list_bulleted javascript
• · 2022. 1. 17.
• textsms