Dev
[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 ..
[React] 컴포넌트의 타입 관리, prop-types
React props의 타입 문제 React는 props에 매개 변수를 넘길 때 타입 검사를 하지 않는다. 나는 Number 자료형으로 넘겨 받고 싶지만, 만약 String이 넘겨와도 문제가 되지 않는다 HTML 삽입 미리보기할 수 없는 소스 const Age = (props) => { return {props.age} } const App = () => { return( ) } 위와 같은 경우가 생기기에, 좀 더 타입을 명확히 해주기 위해서 PropsTypes 기능을 사용한다. //prop-types 모듈을 설치한다. npm install prop-types Proptypes 사용 방법 이제 을 사용하게 되면 타입이 맞지 않아 문제가 된다. const Age = (props) => { return {p..
[React] 함수형 컴포넌트에서 props 사용하기.
props란? 컴포넌트를 빌드할 때, 컴포넌트를 생성하는 함수의 매개 변수로 전달이 가능한 기능 아래의 코드는 input tag의 상태를 useState로 관리하여 그 값을 Btn 컴포넌트 props에 넘겨주는 코드 입니다. HTML 삽입 미리보기할 수 없는 소스 props에 넘길 수 있는 값 props에는 일반적으로 데이터를 넘기지만, 함수 등 다양한 값을 넘길 수 있다. const Test = ({name, click}) => { return( {name} ) } const App = () => { const onClick = () => { window.alert("Click Success") } return( ) }
[JavaScript] ES6 문법(1)
ES6란? ECMAScript 2015 혹은 ECMAScript 6는 ECMAScript의 표준 버전이다. 문법의 해당 사항으로는 아래와 같다. 변수 선언, const & let 화살표 함수, Arrow Function 템플릿 리터럴, Template Literals 기본 매개 변수, Default parameters 배열, 객체의 비구조화, Array & object destructing 가져오기 및 내보내기, import & export 프로미스, promise 클래스, Class 나머지 매개 변수 및 확산 연산자, Rest parameter & Spread operator 변수 선언, const & let const와 let은 변수 선언을 위한 새로은 ES6의 키워드다. //기존 변수 선언 var ..
[Node JS] http 모듈
Http 모듈을 이용하여 서버를 활성화 하자 http 모듈은 내장 모듈로, 별도의 설치 없이 이용 가능하다. //http 모듈 추출 const http = require("http") //http.createServer 이용하여 서버 객체 생성 const server = http.createServer((req, res) => { //Get반응으로 "/" 경로 요청시 Hello Node JS 반환 if (req.url === "/" && req.method === "get") { res.statusCode = 200 res.end("Hello Node JS") } }) const port = 8080 server.listen(port, () => console.log(`Server on port : ${..
[React] CDN으로 시작하기
React CDN React, ReactDom, Babel을 사용하기 위한 CDN이다. /* react cdn */ /* babel cdn */ JS를 이용하여 Counter 페이지 만들기 Btn을 클릭할 시 Total 횟수가 증가하는 Page를 JS를 이용하여 만들어보자. HTML 삽입 미리보기할 수 없는 소스 Click Total : 0 React를 이용하여 Counter 페이지 만들기