본문 바로가기

전체 글

 (88)
[AJAX] AJAX가 무엇인가 & 사용방법 AJAX(Asynchronous Javascript And XML) AJAX는 자바스크립트 라이브러리 중 하나이며 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML, Json 데이터들을 주고받는 기술이다. 다시말해 비동기 방식으로 새로고침없이 서버와 클라이언트가 통신할 수 있도록 도와주는 라이브러리다. AJAX 사용 방법 jQuery Ajax를 사용한다. Axios 라이브러리를 사용한다. 자바스크립트 기본 함수인 fetch()를 사용한다. 최근에는 jQuery를 사용하지않고 Axios나 fetch()를 사용한다.따라서 React에서 사용하려는 나에게는 호환성도 관련문서가 많은 Axios를 사용하는 것이 ..
[Node.JS] express를 사용해보자 1. Node.js 설치가 필요하다. 구글에 Nodejs 검색 후 가장 먼저 나오는 사이트에 들어가 설치를 하도록 합시다. 10버전 이상이 필요하니 이전에 설치하셨던 분들은 신버전으로 다시 설치하십시오. (중요) 설치 경로 임의로 바꾸시면 npm 어쩌구 이런 명령어가 안먹을 수 있습니다. 경로는 건들지말고 C드라이브 기본 경로로 냅둡시다. (더 중요) 2. VS code 에디터가 필요합니다. 비쥬얼 스튜디오 코드 Visual Studio Code 라고 부르는 에디터인데 역시 구글 검색해서 설치합니다. 설치 후 실행까지 하도록 합시다. (바탕화면에 아이콘이 안보이면 검색메뉴에서 검색해보세요) 3. 작업 폴더를 만들고 에디터로 오픈합니다. 설마 폴더 만드는 법은 설명 필요없겠죠? 에디터로 오픈하려면 에디터 ..
[Node.JS] Node.JS를 서버로 사용하는 이유 Node.js는 자바스크립트 실행기 이전 게시글에서도 말했다 싶이 Node.js는 크롬 브라우저에 V8 즉, JavaScript 런타임이다. 그런데 이 엔진을 왜 이토록 Server 프로그래밍에 사용되는 이유가 무엇일까? 장점 자바스크립트를 동일하게 사용해서 서버단 로직을 처리할 수 있다는게 가장 큰 장점! 새로운 언어를 습득하지 않고도 자바스크립트를 활용해 서버기술을 빨리 개발/응용할 수 있습니다. 개발이 빠르고 쉽다. 서버 설치부터 화면 띄우는 것까지 금방 처리 됩니다. Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능 로컬에서 서버만 켜봐도 얼마나 가볍게 돌아가는지 알 수 있다. 이벤트 기반 비동기방식이라 서버 무리가 적다. Non-blocking I/O 이 무엇인가?..
[Node.JS] Node.js의 정체 JavaScript와 Node.JS Node.js를 알기위해선 먼저 JavaScript에 대해서 알아야한다. JavaScript는 HTML을 컨트롤 하기위해서 사용하던 언어였다. 지금과는 다르게 그다지 영향력이 크지않았다. 하지만 이 언어가 주목받게 되는 일이 생기는데 바로 크롬 브라우저의 탄생과 그 궤를 같이한다. JavaScript 구동 엔진인 V8의 등장 크롬, 파이어폭스, 익스플로러 이런 브라우저들이 자바스크립트를 읽고 해석하는 역할을 한다. 자바스크립트를 빠르게 읽고 해석하면 웹사이트 렌더링 성능도 빨라지니 브라우저 개발자들은 자바스크립트를 해석할 수 있는 엔진 개발에 열성이었다. 그러다가 구글 사내에 있던 ‘크롬 브라우저 개발자’들이 문제를 일으킵니다. 자바스크립트 해석엔진인 V8이라는 프로그..
[React] Import in body of module; reorder to top import/first 해결 - 문제 발견 import의 하는 부분 중 Compotent만 따로 분류해서 주석을 달아주려고했다. 정리 후에 구동을 시키는데 위와 같은 에러가 출력되었다. - 문제 해결 import './App.css'; import { Navbar,Nav} from 'react-bootstrap'; import { Route, Switch } from 'react-router'; import { useState } from 'react'; import Mainpage from "./Compontent/mainpage.js"; import Login from './Compontent/login.js'; import SignUp from "./Compontent/sign_up.js"; import Search from ..
[React] props로 부모 컴포넌트에 state를 사용해보자 App이라는 컴포넌트안에 예를들어 이라는 컴포넌트를 만들었다고 가정하자. (이걸 용어로 부모 자식관계라고 합니다. App은 부모 컴포넌트고 Modal은 자식 컴포넌트이다.) 근데 자식 컴포넌트가 부모 컴포넌트 안에 있던 state를 갖다 쓰고싶을 때가 가끔 있다. 그럴 땐 대충 { 부모에 있던 state이름 } 이렇게 쓰면 안되고 props라는 문법으로 state를 전송한 뒤에 { props.state이름 } 이런식으로 사용해야한다. 뭔소린지 알아보자. props를 알기쉽게 그림으로 표현하자면 저번시간에 컴포넌트라는걸 쓸 수 있다고 배워보았다. 컴포넌트안에 컴포넌트를 집어넣어서 사용할 수 있고. 그럴 때 안에 들어간 컴포넌트를 자식컴포넌트라고 부른다. ▲ 우리가 지금까지 만들었던 사이트를 그림으로 표현하..
[React] map함수를 이용해 반복되는 JSX 줄이기 자바스크립트 map 함수 쓰는 법 JSX 중간중간 중괄호 열고 { 변수명 } 넣어 사용하였다. 그럼 반복문도 중괄호 안에서 { for (){} } 이렇게 집어넣을 수 있지 않을까라고 생각할 수 있지만 {} 중괄호안에는 변수, 함수 형태만 입력 가능하다. 그래서 중괄호 안에서 쓸 수 있는 map 이라는 반복문을 이용한다. 반복문은 아니고 array에 붙일 수 있는 일종의 내장 함수이다. array 자료형이 하나 있다고 치자. array 안의 모든 자료에 똑같은 작업을 하나씩 시켜주고 싶을 때가 가끔 있다. 그럴 때 쓰는 문법이 바로 map 이라는 내장 함수이다. let 어레이 = [2,3,4]; 어레이.map(function(a){ return a * 10 }); 콜백 함수 소괄호 안에 파라미터를 아무 이..
[React] Component(컴포넌트) 사용해보자 복잡한 HTML들을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다. Component라고 한다. 이걸 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 삽입할 수 있다. function App (){ return ( HTML 잔뜩있는 곳 ... ) } function Modal(){ return ( 제목 날짜 상세내용 ) } 위 코드에서 Modal 함수가 Component(컴포넌트)이다. 위 코드처럼 하면 원하는 HTML을 한 단어로 줄일 수 있다. 줄이는 법은 1. function을 이용해서 함수를 하나 만들어주고 2. 그 함수 안에 return () 안에 원하는 HTML을 담으시..

티스토리툴바