전체 글

[C#] vscode로 작업 환경 셋팅하기

1. 확장 프로그램 설치 C# 확장 프로그램에서 C#을 설치한다. 2. 터미널 dotnet new console 터미널을 열어 아래의 명령어를 실행한다. dotnet new console 실행하면 실행한 폴더에서 아래의 구조가 작성된다. 3. Program 실행, dotnet run 아래의 명령어로 프로그램을 실행시킨다. dotnet run 해당 프로그램을 실행 시키면 Hello World가 실행된다.

[JavsScript] 비동기처리 - Callback Function

JavaScript는 비동기적 언어다. 비동기(Asynchronous)란 하나의 작업이 끝나지 않아도 다음 작업을 실행하는 방식을 의미한다. 동기(Synchronous)란? 하나의 작업이 끝나야 다음 작업을 실행하는 방식을 의미한다. 예를 들어 카페에 가서 커피를 구매한다고 생각하자. 동기적 처리의 예시 카페에 가서 커피를 주문할려고 한다. 카페에 도착한 나는 점원에게 아이스 아메리카노를 주문하였고, 점원은 주문을 받은 후 커피를 만드는 중에 다른 손님이 왔지만, 커피를 만들고 나에게 건네주기 전까지는 다른 손님의 주문도 받지 않고 그 사람이 원하는 커피를 제작하지 않았다. 이처럼 동기적 처리에서는 하나의 작업이 끝나기 전까지는 다른 작업을 실행하지 않는 것이 특징이다. 비동기적 처리의 예시 카페에 가서..

[React] axios에 대해서 알아보자!

Axios란? Axios란 브라우저, Node JS를 위한 HTTP 비동기 통신 라이브러리다. Promise 기반이며, async, awit 사용이 가능하며, JavaScript의 내장 라이브러리인 fetch와 다르게 설치를 통해서 사용이 가능하며, 구버전의 브라우저와 호환이 되기에, 데이터를 JSON 형태로 자동 변환할 수 있다. Axios 사용하기. npm 혹은 yarn을 이용하여 axios를 설치한다. #Use npm npm install axios #Use Yarn yarn add axios 설치 후엔 사용할 파일에 적용해준다. //JS ES6의 import 이용 import axios from "axios" Axios의 기본적인 사용 방법은 아래와 같다. //Axios GET [1] axios(..

[HTML] HTML 알아두면 좋은 태그

progress Tag는 진행률을 나타낼 수 있는 태그다. HTML 삽입 미리보기할 수 없는 소스 progress Tag는 3가지의 속상을 가지며, min과 max를 통하여, 진행바의 최소 최대 크기를 지정해주고 value로 현재 진행률을 지정해준다. progress Tag는 CSS랑 같이 사용할 수도 있다. details Tag는 Toglelist를 Html만으로 구현할 수 있다. HTML 삽입 미리보기할 수 없는 소스 details Tag는 아래와 같이 작성하여 Toggle을 만든다. 안에 는 Toggle에 보이는 텍스트를 작성하고, 그 아래의 내용들은 전부 Toggle로 숨겨지는 내용들이다. PINO PINO IS Student datalist Tag는 HTML만으로 자동 완성 기능을 구현할 수 있..

[React] useParams를 이용하여, 게시글 리스트와 조회 하기.(index, show)

해당 게시글은 Nomad Coder님의 강의를 보고 작성한 게시글 입니다. 해당 강의에 있는 영화 API를 사용 합니다. src/index.js //index.js import React from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" import App from "./App" const root = ReactDOM.createRoot(document.getElementById("root")) root.render( ) src/App.js //App.js import { Route, Routes } from "react-router-dom"; import Detail f..

[React] react-router-dom 사용하기

01. react-router-dom 설치하기 npm 혹은 yarn 등의 패키지 모듈을 이용하여 react-router-dom 모듈을 설치한다. #npm npm install react-router-dom #yarn yarn add react-router-dom 02. BrowserRouter react-router-dom에서 라우터를 사용하기 위해서는 BrowserRouter 기능을 사용해야한다. index.js의 Tag를 아래와 같이 감싸주도록 하자. src/index.js //index.js import React from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" im..

[Linux] 자주 사용하는 터미널 명령어

cd 'cd' 명령어는 디렉토리(폴더 경로)를 이동하고 싶을 때 사용한다. 상대 경로 혹은 절대 경로로 사용이 가능하다. #현재 경로에 있는 test 폴더로 이동 cd test #현재 경로의 상위 폴더로 이동 cd .. #현재 경로에 있는 test/hello 폴더로 이동 cd test/hello #절대 경로 이동 cd /usr/admin/documents ls 'ls' 명령어는 현재 디렉토리에 존재하는 모든 파일 목록을 확인 할 수 있다. mkdir 'mkdir' 명령어는 폴더를 현재 경로에 생성한다. #test 폴더 생성 mkdir test #test 폴더로 이동 cd test touch 'touch' 명령어는 현재 경로에서 파일을 생성 할 수 있다. #hello 파일 생성 touch hello #in..

[Linux] 터미널 경로 확인하기.

Visual Studio Code를 이용하거나, Git Bash 등 다양한 터미널을 사용 할 때 터미널에 익숙치 않은 사람들은 경로 설정에서 실수를 많이 하게 된다. 터미널을 사용하면 command line 마다 현재 터미널의 경로가 적혀있다. 글쓴이의 경로 : /documents Visual Studio Code도 마찬가지다. 글쓴이의 경로 : /documents/project create-react-app test 당신이 create-react-app을 통하여 react 프로젝트를 생성한다면, 현재 경로에 test라는 폴더가 생겼을 것이다. 하지만 당신의 터미널 경로는 생성된 test 폴더가 아니라, 여전히 documents/project다. 따라서 터미널 명령어를 사용하여 경로 설정을 해주거나, 폴..

[React] Map을 이용하여 To do List

사용 기능 - Map - useState //App.js import { useState } from "react" function App() { //input 입력 값 관리 const [toDo, setToDo] = useState("") //To do List 상태 관리 const [toDos, setToDos] = useState([]) //BtnClick Event const onSubmit = (e) => { e.preventDefault() //input 입력 값이 빈 값이면 다시 돌려보냄 if (toDo === "") { return } //입력 값을 현재 배열과 더해 새로운 배열을 생성 setToDos((current) => [...current, toDo]) //입력 값 초기화 setTo..

[React] useEffect 사용 방법

useEffect는 컴포넌트가 빌드 되었을 때, 업데이트 될 때 마다 실행하게 되는 훅 입니다. export default function Count () { const [count, setCount] = useState() console.log("Count On") return setCount((current) => current + 1}>{count} } 위와 같은 코드를 작성하게 되면, count의 상태가 변경될 때 마다 React는 컴포넌트를 refresh하기 때문에, console.log("Count On") 부분이 계속 찍히게 됩니다. 하지만 저희는 해당 컴포넌트가 빌드 되었을 때 한 번만 실행하고 싶기에 useEffect를 사용하게 됩니다. import { useEffect } from 'r..