본문 바로가기

IT_Developers1149

PWA - 프로그레시브 웹 앱(Progressive Web Apps)의 등장, 목표 차세대 "프로그레시브 웹 앱" 안녕하세요 고코더 입니다. ● 1. 웹 기술로 앱을 만드는 대표적인 방법인 "프로그레시브 웹 앱"에 대해 알아보려고 합니다. 기본적으로 웹과 앱은 받침 하나 차이지만 굉장한 차이가 있습니다. 카카오톡은 우리가 가장 많이 사용하는 앱 어플입니다. 그리고 웹은 운영되는 제 블로그부터가 웹의 형태로 되어 있습니다. 그런데 어느 순간 특이점 오기 시작했습니다. 웹을 앱처럼 사용하고 싶으 것입니다. 그렇게 생각한 후로 나온 것이 바로 오늘 배우고 있는 "PWA(Progressive Web Apps)입니다. 일명 PWA입니다. 오늘은 이 놀라운 언어에 대해 알아보려고 합니다. PWA 등장 ● 2. 2015년 크롬을 개발의 일원인 알렉서 러셀(Alex Russell)은 앱에 근접해가는 .. 2021. 1. 13.
React.js - 리액트는 Node의 버전이 10 이상이어야 합니다. / Node 10 or Higher Node.js 버전은 10 이상이어야 리액트를 사용할 수 있습니다. 안녕하세요. 고코더 입니다. ● 1. 리액트를 설치해서 사용하기 위해 즉 create-react-app를 사용하기 위해서는 노드가 필요로 합니다. 그런데 최소 노드 10버전 이상의 Node.js가 필요로 합니다. 만약에 그 이하에 버전에서 리액트 설치를 시도한다면 아래와 같은 경고 메세지가 나타납니다. " Create React App requires Node 10 or higher. Please update your version of Node. " ● 2. 방법은 아주 간단합니다. 최신 버전의 노드 버전을 설치하면 됩니다. 마무리 최신 버전만 설치하면 됩니다. 2021. 1. 12.
npx 란? - 일회성 npm 실행 도구 npx는 편리한 실행 도구 안녕하세요. 고코더 입니다. ● 1. npm은 많이 들어봤지만 npx라고 하면 개발자분들도 헷갈려하시는 경우가 있습니다. 혹은 오타로 생각하기도 합니다. 하지만 npx는 npx v5.2.0 버전부터 제공하는 명령어입니다. 그러므로 실수도 아니고 우리가 사용 가능한 명령어 입니다. https://github.com/npm/npm/releases/tag/v5.2.0 npx는 1회성 실행 도구입니다. ● 2. 아주 간단하게 설명하면 일회성 도구입니다. 더 나아가 npm을 편하게 사용할 수 있게 만들어주는 도구입니다. npm으로 패키지를 설치하면 특히 글로벌 전역으로 인스톨 시에는 상당히 많은 잔여 파일들이 컴퓨터에 설치되게 합니다. 이 도구는 한번 실행된 후에 깨끗하게 청소를 하고 .. 2021. 1. 12.
npmjs.com - Npm(패키지 관리 프로그램) 관리 사이트 npm 패키지 정보 사이트 안녕하세요. 고코더 입니다. ● 1. Node.js 를 사용하면 항상 따라다니는 용어가 바로 Npm입니다. 약자는 "Node Packaged Manager" 패키지는 프로그램보다 작은 단위의 기능을 말합니다. 이런 패키지들을 노드를 사용할 때 관리하고 보급해주는 걸 NPM 서비스라고 합니다. ● 2. 그런데 이 npm를 관리하는 주체가 사이트를 운영하고 있습니다. 그래서 이 사이트를 방문하면 좀 더 쉽게 어떤 패키지들이 있는지 서핑할 수 있습니다. 어떤 npm을 다운로드하기 전에 다른 개발자의 평가나 설명서를 읽어 볼 수 있습니다. 아래 URL로 접속하면 해당 페이지가 나타납니다. https://www.npmjs.com/ ● 3. 자신이 사용하고 싶은 npm을 검색하면 연관 패.. 2021. 1. 12.
Node.js - 노드 최신버전으로 업데이트 하기 node 최신으로 업그레이드 안녕하세요. 고코더 입니다. ● 1. 오늘은 Node.js 버전을 최신으로 업데이트하는 방법을 알아보겠습니다. 크게 방법은 두 가지입니다. 윈도 일 경우 그저 Node 홈페이지에 가서 다운로드 후에 프로그램을 다시 설치하는 것만으로도 최신으로 노드를 업그레이드할 수 있습니다. 하지만 이번 시간에는 기존 설치한 노트를 커맨드 명령어를 통해 업데이트해보겠습니다. 커맨드로 업데이트 하기 ● 2. 우선 명령 프롬프트를 실행 한 다음 버전을 확인합니다. 저는 정말 예전부터 설치해놓아서 8 버전이네요. node -v ● 3. 그다음은 npm에 남아있는 캐시를 삭제합니다. 이 명령어를 실행하지 않으면 최신 버전 업데이트 할때 오류를 발생할 수 있습니다. npm cache clean -f .. 2021. 1. 12.
비주얼 스튜디오 코드 - 공식 메뉴얼 사이트 / code.visualstudio.com/docs VSCode 설명서 안녕하세요. 고코더 입니다. ● 1. VSCode는 가장 많이 사용하는 에디터입니다. 신입 시절에는 비주얼 스튜디오를 사용해왔고, 닷넷 개발 이후에는 이 코드를 사용하면서 MS가 만든 개발 툴에 대해 애착이 남다른 거 같습니다. 사용자를 위한 아주 편리한 기능들은 언제나 봐도 감탄입니다. 비주얼 스튜디오 코드는 따로 설명서를 읽지 않아도 직관적으로 개발되어 있지만 MS는 해당 공식 매뉴얼을 제공하는 사이트를 제공하고 있습니다. 주소는 바로 code.visualstudio.com/docs 입니다. ● 2. 사이트에 접속하면 Docs 카테고리에 매뉴얼을 확인할 수 있습니다. 시작부터 언어별 설정까지 상세하게 기록해놓았습니다. ● 3. 설명하기 어려운 개념들은 동영상으로 친절하게 설명을 해.. 2021. 1. 12.
비주얼 스튜디오 코드 - 자동 업데이트 사용하지 않기 / VSCode VSCode update 하지 않기 안녕하세요. 고코더 입니다. ● 1. 비주얼 스튜디오 코드는 기본적으로 자동 업데이트가 기본 설정입니다. 하지만 프로젝트 설정을 할 때 모두가 같은 버전의 개발 프로그램을 사용하거나 자주 바뀌는 게 싫은 분들은 이 설정을 꺼놓는 게 더 유리할 수도 있습니다. (물론 최신 버전의 기능과 안전성은 만나 볼 수 없게 됩니다) ● 2. VSCode를 실행하고 단축키 Ctrl + , 을 키보드로 입력합니다. 이 단축키는 아주 자주 사용할 예정입니다. ● 3. 그리고 환경 설정창에서 "update mode"를 검색합니다. 그러면 업데이트 모드가 나타나고 이는 default로 되어 있습니다. ● 4. 그리고 셀렉트 박스에서 "none"을 선택합니다. 이 옵션은 앞으로 업데이트를 하.. 2021. 1. 12.
비주얼 스튜디오 코드 - 테마(theme) 변경하기 / Color Theme / VSCode VSCode 밝은 테마 선택하기 안녕하세요. 고코더 입니다. ● 1. 비주얼 스튜디오 코드는 기본적으로 다크 테마를 제공합니다. 요즘 출시되는 개발 관련 프로그램은 모두 이렇게 어두운 테마를 기본으로 제공합니다. 그리고 다크 테마 장인은 역시 MS입니다. 그래서 기본 그대로 사용하는 걸 추천하지만 밝은 테마를 선호하는 분들이 있어 오늘은 VSCode의 테마를 변경하는 방법을 알아보겠습니다. ● 2. 비주얼 스튜디오 코드를 실행하고 File > Preferences > Settings를 클릭합니다. 단축키 Ctrl + , 을 누르면 더 쉽게 접근이 가능합니다. ● 3. 그다음 나타나는 창에서 "theme"라고 검색을 합니다. 그리고 메뉴는 Workbench를 클릭합니다. 그러면 오른쪽 화면에 Color T.. 2021. 1. 12.
비주얼 스튜디오 코드 - 32비트 다운로드 / VSCode x86 / 첨부파일 32bit 내려받기 안녕하세요. 고코더 입니다. ● 1. 개발자 PC는 대부분 64비트 입니다. 일반 사무용 컴퓨터를 사도 이제는 32비트는 구하기 어렵습니다. 하지만 상황에 따라 32비트 컴퓨터를 사용하는 프로그래머도 있기 마련입니다. VSCode는 윈도우를 만든 마이크로 소프트가 개발한 에디터이기에 당연히 32비트 프로그램도 잘 마련되어 있습니다. ● 2. 그런데 다운로드 사이트에 가면 기본적으로 64비트 프로그램이 나타나 있는데요. 여기서 "Other downloads" 를 클릭합니다. https://code.visualstudio.com/# ● 3. 그럼 다운로드 목록에서 32비트 프로그램 인스톨 버전의 차이는 이전 블로그를 참고해주시기 바랍니다. ● 4. User Installer 32비트 ● .. 2021. 1. 12.

티스토리툴바