본문 바로가기

IT_Developers868

React.js - 배포를 위한 빌드하기 "npm run build" 리액트 배포 파일 만들기 안녕하세요. 고코더 입니다. ● 1. 리액트를 만들면 이것을 배포하여서 서비스를 게시해야 합니다. 아무리 열심히 만들어도 다른 사람에게 보여주지 못한다면 의미가 없습니다. 리액트로 생성한 프로젝트는 간단한 명령어를 통해 빌드하여 배포할 수 있는 버전으로 만들 수 있습니다. 그 방법을 한번 알아보겠습니다. ● 2. 명령 프롬프트로 우리가 만들어놓은 리액트의 폴더로 이동합니다. 그리고 아래와 같은 명령어를 실행합니다. 그럼 알아서 빌드가 진행되고 배포 버전으로 파일들이 만들어집니다. npm run build ● 3. 해당 빌드를 실행하면 프로젝트에 전에 없던 build라는 폴더가 생성됩니다. 이는 말 그대로 빌드된 파일들을 저장하는 폴더입니다. C:\react\hello\build .. 2021. 1. 16.
React.js - 기본 생성된 "package.json" 파일 살펴보기 " 리액트 패키지 환경설정 파일 안녕하세요. 고코더 입니다. ● 1. 이전 시간에 리액트 기본 프로젝트를 생성했습니다. 그리고 폴더의 구조도 알아보았습니다. 하지만 가장 중요한 파일이 있습니다. 바로 패키지 매니저(Package manager)를 통해 설치된 모듈과 스크립트 명령어를 담은 json 파일입니다. 이 파일 하나로 npm 패키지들을 관리할 수 있습니다. 따로 node-modules 파일들을 공유할 필요 없이 package.json만 있으면 필요한 작업환경을 구축할 수 있습니다. ● 2. package.json 파일은 프로텍트 폴더 루트(/)에 위치해 있습니다. 해당 파일을 메모장이나 에디터로 열어보겠습니다 ● 3. 파일의 내용은 이렇습니다. 파일명처럼 json 형태로 되어 있습니다. 해당 프로.. 2021. 1. 16.
React.js - 리액트 프로젝트 기본 폴더 구조 리액트 디렉터리 구조 안녕하세요. 고코더 입니다. ● 1. 이전 시간에 create-react-app로 생성하여 프로젝트를 만들어보았습니다. 자동으로 파일들이 생성되고 실행에 필요한 모든 요소가 갖추어졌습니다. 오늘은 생성된 파일의 기본 구조를 알아보는 시간을 가져보겠습니다. ● 2. 저와 함께 실습했다면 아래 폴더에 파일들이 생성되어 있습니다. 구조는 생각보다. 간단합니다. C:\react\hello ● 3. "node_modules" 폴더 npm을 통해 설치된 패키지 매니저(Package manager)들이 모여 있는 디렉토리 입니다. C:\react\hello\node_modules ● 4. "public" 폴더는 html 파일들과 이미지 파일들이 모여 있는 걸 확인할 수 있습니다. 정적인 성격을 .. 2021. 1. 15.
React.js - 리액트의 기본 create-react-app 설치하고, 실행하기 리액트의 보일러플레이트 create-react-app 안녕하세요. 고코더 입니다. ● 1. 리액트를 사용하기 위해서는 코드를 실행하기 위한 환경을 설정해야 합니다. 보통 리액트를 연습하거나 사용할 때 크게 두 가지 방식을 사용합니다. 하나는 코드 펜을 이용하여 간단하게 실습하는 방식과 create-react-app를 사용하는 방식입니다. 오늘은 그중에서 로컬 컴퓨터에 환경을 만드는 create-react-app를 설치하는 방법을 알아보겠습니다. 리액트를 배우고 싶다면 연습할 수 있는 환경을 만들어 보는 게 가장 먼저입니다. create-react-app는 리액트 환경을 도와주는 보일러플레이트 ● 2. create-react-app는 리액트를 사용하기 편리하게 해주는 보일러 플레이트입니다. 오늘 설치할 리.. 2021. 1. 15.
보일러플레이트(Boilerplate code)란? - 개념, 사용하는 이유 보일러플레이트란? 안녕하세요. 고코더 입니다. https://gocoder.tistory.com/1110 코딩을 하다 보면 의미 없는 노동을 할 때가 있습니다. 대표적인 코드가 바로 자바에서 사용하는 getter, setter입니다. 이 캡슐화를 위한 필수적이지만 IDE를 통해 자동으로 생성합니다. 한 번도 직접 코드를 작성한 적이 없는 거 같습니다. 이러한 단순한 노동을 없애주는 것을 일컬어 우린 보일러 플레이트라고 말합니다. 실제로 이 단어의 뜻은 보일러에서 온 단어입니다. 보일러의 기초 골격은 통을 찍어내는 플레이트를 말합니다. 다시 말해서 보일러 통은 항상 필요하므로 이것은 항상 그대로 찍어내고 나머지 부분을 업그레이드하는 방식입니다. 그래서 불필요한 통 제작에 시간을 버리지 않을 수 있는 것입니.. 2021. 1. 14.
용량 단위 - KB, MB, GB, TB, PB, EB, ZB, YB / 킬로, 메가, 기가, 테라, 페타, 엑사, 제타, 요타 용량 단위 알아보기 안녕하세요. 고코더 입니다. ● 1. 오늘은 용량의 대해 간단하게 알아보려고 합니다. 가장 익숙한 단위는 메가부터 테라바이트까지 사용하고 있는데요. 사실은 그 숫자는 매우 작은 숫자입니다. 실생활에 사용하지는 않지만 훨씬 많은 용량을 지칭하는 단위들이 있습니다. 그 단위들을 알아보겠습니다. 기호 용어 용량 KB 킬로바이트 0.000001GB MB 메가바이트 0.001GB GB 기가바이트 1GB TB 테라바이트 1,000GB PB 페타바이트 1,000,000GB EB 엑사바이트 1,000,000,000GB ZB 제타바이트 1,000,000,000,000GB YB 요타바이트 1,000,000,000,000,000GB 마무리 일주일 동안 한국에서 스팀을 다운로드하는 용량이 12PB라고 합니.. 2021. 1. 14.
cmder - "conemu binaries were marked as downloaded from internet" / 첫 실행 경고창 cmder 첫 실행 시 경고창 안녕하세요. 고코더 입니다. ● 1. cmder을 처음 실행하면 아래와 같은 경고창이 나타납니다. "conemu binaries were marked as downloaded from internet" "conemu binaries were marked as downloaded from internet" ● 2. 해당 경고 창의 뜻은 conemu라는 콘솔 에뮬레이터를 잠겨있고 이를 처리하는 방식을 묻고 있습니다. 첫 번째 선택지인"Unblock and Continue"를 클릭합니다. ● 3. 그럼 cmder을 실행할 때 아래처럼 최초의 설치가 진행되고 사용이 가능합니다. 마무리 특이한 경고가 많네요. 2021. 1. 13.
cmder - 업그레이드 된 명령 프롬프트 cmder 다운로드, 실행 / mini, full 버전 차이 / 첨부파일 cmder 다운로드 안녕하세요. 고코더 입니다. ● 1. 오늘은 cmder 이라는 프로그램을 다운로드하여 보는 시간을 가지려고 합니다. cmd는 개발자부터 일반인들까지 널리 쓰이는 커맨드 명령어 창입니다. 기존의 부족한 가독성이나 기능을 개선된 좋은 프로그램입니다. ● 2. 해당 프로그램은 마이크로 소프트가 아닌 일반 개발자가 만들었습니다. 이름은 "Samuel Vasko"입니다. 생각보다 팔로워 수가 적은 게 특징입니다. 그의 깃허브 주소는 https://github.com/samvasko입니다. ● 3. cmder을 받을 수 있는 해당 사이트에 접속합니다. 그럼 심플하고 잘 만들어진 사이트가 나타납니다. https://cmder.net/ ● 4. 사이트 중간에는 두 가지 버전의 cmder를 제공합니다.. 2021. 1. 13.
PWA - 프로그레시브 웹 앱(Progressive Web Apps)의 등장, 목표 차세대 "프로그레시브 웹 앱" 안녕하세요 고코더 입니다. ● 1. 웹 기술로 앱을 만드는 대표적인 방법인 "프로그레시브 웹 앱"에 대해 알아보려고 합니다. 기본적으로 웹과 앱은 받침 하나 차이지만 굉장한 차이가 있습니다. 카카오톡은 우리가 가장 많이 사용하는 앱 어플입니다. 그리고 웹은 운영되는 제 블로그부터가 웹의 형태로 되어 있습니다. 그런데 어느 순간 특이점 오기 시작했습니다. 웹을 앱처럼 사용하고 싶으 것입니다. 그렇게 생각한 후로 나온 것이 바로 오늘 배우고 있는 "PWA(Progressive Web Apps)입니다. 일명 PWA입니다. 오늘은 이 놀라운 언어에 대해 알아보려고 합니다. PWA 등장 ● 2. 2015년 크롬을 개발의 일원인 알렉서 러셀(Alex Russell)은 앱에 근접해가는 .. 2021. 1. 13.