Dev

[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..

[Django] Django 개발 환경 구축(Mac, Anaconda, IntelliJ)

해당 게시글은 Mac에서 Anaconda와 IntelliJ를 이용하여 구축 합니다. 01. Anaconda 설치 해당 사이트에 접속하여 Andaconda를 설치한다. Anaconda | Anaconda Distribution Anaconda's open-source Distribution is the easiest way to perform Python/R data science and machine learning on a single machine. www.anaconda.com 02. Django 설치 Anaconda를 이용하여 Django를 설치한다. #conda를 이용한 Django 설치 conda install django 03. Django 폴더 생성 django-admin startproj..

[Github] Github 사용하기

해당 강좌는 Github 계정을 생성했다는 가정하에 진행 합니다. 01. Git 설치하기. 해당 사이트에 접속한 후 GIT을 설치한다. Git git-scm.com MAC 사용자의 경우 아래의 명령어를 사용하여 설치한다. //homebrew가 있을 경우 brew install git //homebrew가 없을 경우 sudo port install git 윈도우 사용자는 Git을 설치했을 때 Git BASH라는 새로운 터미널 프로그램이 설치가 되는 데 해당 터미널을 이용한다. 02. Github Repository 생성하기. Github에 접속 및 로그인 후 새로운 Repository(저장소)를 생성한다. GitHub: Where the world builds software GitHub is where ..