본문 바로가기

분류 전체보기811

[Web] Route 사용법(react-router-dom) 및 페이지 설정 Route 사용법(react-router-dom) 및 페이지 설정 1. 설치방법 터미널 창에서 아래 명령어 입력 npm install react-router-dom@6 2. 환경 설정 index.js 파일에서 아래처럼 App을 BrowserRouter로 감싸주시면 됩니다. import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 3. 라우터(Router)로 페이지 설정 App.js 파일에서 import 후 페이지 설정을 하면 됩니다. import { Routes, Route, Link } from 'react-router-do.. 2022. 7. 12.
[Web] HTML/CSS 링크(a href, Link) Underline, Decoration, Color 변경하기 HTML/CSS 링크(a href, Link) Underline, Decoration, Color 변경 // App.js 홈 1. 밑줄 제거 // App.css .link { text-decoration-line: none; } ※ text-decoration-line 속성입니다. none : 선 없음 underline : 밑줄 overline : 윗줄 line-through : 취소선 - 'text-decoration: none;'으로 해도 됩니다. 2. 밑줄 Color 변경 // App.css .link { text-decoration-color: red; } 3. 밑줄 Dot(점선)로 변경 // App.css .link { text-decoration-style : dotted; } ※ text-d.. 2022. 7. 11.
[Web] Node.js - HTTP 서버 및 클라이언트 예제로 확인하기 HTTP 서버 및 클라이언트 1. server.js // index.html Hello!!! // server.js var http = require('http'); var fs = require('fs'); var url = require('url'); // 서버 생성 http.createServer( function (request, response) { // URL 뒤에 있는 디렉토리/파일이름 파싱 var pathname = url.parse(request.url).pathname; console.log("Request for " + pathname + " received."); // 파일 이름이 비어있다면 index.html 로 설정 if(pathname=="/"){ pathname = "/ind.. 2022. 7. 8.
[Web] React 프로젝트 생성 시 보안 오류인 PSSecurityException, UnauthorizedAccess 에러 발생 React 프로젝트 생성 시 스크립트 (신뢰하지 않는 스크립트) 에러 발생 node에서 script를 실행 시 PSSecurityException, UnauthorizedAccess 에러가 발생할 수 있습니다. 이유는 MS(마이크로소프트)에서 스크립트 정책을 'Restricted'로 설정을 해놓아서 발생이 됩니다. npx create-react-app 프로젝트명 으로 React 프로젝트 생성 시 스크립트 관련 에러가 발생이 되면, 검색에서 PowerShell을 관리자 권한으로 실행 또는 Window key + x 로 아래와 같이 선택하시면 됩니다. PowerShell(관리자) 실행 후 명령어("Set-ExecutionPolicy Unrestricted")를 입력, y 입력 후 Enter 하시면 됩니다. 2022. 7. 6.
[Web] Node.js - Blocking & Non-Blocking code Blocking & Non-Blocking code 1. Blocking Code : 프로그램이 메서드가 끝날 때까지 대기를 한 후 다음 명령어로 진행이 됩니다. - Blocking 예제 코드 // input.txt Let's understand what is a callback function. What the HELL is it? // main.js var fs = require("fs"); var data = fs.readFileSync('input.txt'); console.log(data.toString()); console.log("Program has ended"); 결과를 확인하면, $ node main.js Let's understand what is a callback function... 2022. 7. 5.
[Web] Redux(리덕스) 시작하기 Redux : Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. Redux는 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 1. Redux 기본 예제 import { createStore } from 'redux' /** * 이것이 (state, action) => state 형태의 순수 함수인 리듀서입니다. * 리듀서는 액션이 어떻게 상태를 다음 상태로 변경하는지 서술합니다. * * 상태의 모양은 당신 마음대로입니다: 기본형(primitive)일수도, 배열일수도, 객체일수도, * 심지어 Immutable.js 자료구조일수도 있습니다. 오직 중요한 점은 상태 객체를 변경해서는 안되며, * 상태가 바뀐다면 .. 2022. 7. 4.
[Web] Moden JS - 변수와 상수, 데이터 타입 Moden JS(모던 자바스크립트) 변수와 상수, 데이터 타입 1. 변수와 상수 변수: 특정 이름에 특정 값을 설정하는 것입니다. 이를 변수 선언이라고 합니다. let value = 1; value -2; - 변수는 변경할 수 있는 값을 말합니다. 즉 선언 후 수정이 가능합니다. ※ 주의할 점은 똑같은 이름을 선언하지는 못합니다. let value = 1; let value = 2; 상수: 한번 선언하고 값이 변경할 수 없는 값입니다. const a = 1; ※ Var 타입은 더 이상 사용하지 않습니다. 2. 데이터 타입 : 변수나 상수를 선언하게 될 때, 숫자 외에도 다른 값들을 선언 숫자(number) let value = 1; 문자열(String) let text = 'Copymaster'; 참/거.. 2022. 6. 30.
[Web] React Hooks - useState, useEffect 등 React Hooks : React v16.8에 새로 도입된 기능입니다. useState: 함수형 컴포넌트에서도 상태 관리 useEffect: 렌더링 직후 작업을 설정 useContext: Context 쉽게 사용하기 위해 사용 useReducer: 컴포넌트에서 다양한 상태에 따라 다른 값으로 업데이트 1. useState : 함수형 컴포넌트에서도 가변적인 상태로 상태를 관리하는 경우 사용이 됩니다. React 개념 설명했듯이 Html 값을 변화시키려면 새로고침을 해야 하는데, 전체 화면을 새로고침하는 것은 비효율적입니다. 그래서 변경된 화면만 새로고침하기 위해 useState를 사용합니다. 참고 글 : [Web] 프론트엔드 React 개념 2022.06.23 - [Programming Web[프론트엔드.. 2022. 6. 29.
[Web] React의 LifeCycle API 알아보자 React LifeCycle 관련 API : 브라우저에서 보이고 사라지는 등 업데이트 및 호출되는 컴포넌트 API입니다. 1. 컴포넌트 생성 : 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들입니다. 1.1 constructor : 컴포넌트 생성자 API로 컴포넌트가 새로이 만들어질 때마다 호출됩니다. constructor(props) { super(props); } 1.2 componentWillMount : 컴포넌트가 화면에 디스플레이가 되기 전에 호출되는 API입니다. React v16.3부터 해당 API가 deprecated가 되었으며, v16.3 이후부터는 UNSAFE_componentWillMount()로 사용됩니다. 기존에 담당하던 부분은 1.3 componentDidMount에서.. 2022. 6. 28.
[Web] React state & setState 개념 이해 React state & setState 개념 이해 : 동적인 데이터 처리할 때 state를 사용한다. import React, { Component } from 'react'; class Counter extends Component { state = { number: 0 } increase = () => { this.setState({ number: this.state.number + 1 }); } decrease = () => { this.setState({ number: this.state.number - 1 }); } render() { return ( 카운터 값: {this.state.number} + - ); } } export default Counter; 여기서 increase() 함수와.. 2022. 6. 27.
[Web] React props & defaultProps 개념이해 React props & defaultProps 1. props : props는 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 값입니다. import React, { Component } from "react"; class MyJob extends Component { render() { return ( 제 직업은 {this.props.job} 개발자입니다. ); } } export default MyJob; 자신이 받아온 props 값은 this. 키워드를 통하여 조회할 수 있습니다. job = "Web"으로 props 값을 설정하였습니다. import { Component } from 'react'; import MyJob from './MyJob'; // import MyJob class App ext.. 2022. 6. 27.
[Web] npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 에러 발생 npm 에러 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 1. npm이 설치되어 있지 않은 경우 "npm download"를 검색하거나 아래 사이트에 접속하셔서 LTS 버전으로 설치하시면 됩니다. https://nodejs.org/ko/download/ 관련 글: Node 개요와 설치방법 2022.06.26 - [Programming 개발은 구글로/Web[프론트엔드&백엔드]] - [Web] Node.js 개요와 설치방법 2. VSCode 터미널 설정이 잘못된 경우 VScode의 기본 터미널 설정이 "Powershell"로 되어 있다면 .. 2022. 6. 26.
728x90

티스토리툴바