Programming/Javascript23

• 

  nvm : 여러 버전의 nodejs를 설치하고 관리하기 보통은 nodejs 를 설치하려면 공식사이트(https://nodejs.org/)에서 설치파일을 다운로드하여 설치하면 된다. 그런데, 여러 프로젝트를 다루고 있는 상황에서 각 프로젝트마다 다른 버전의 Node를 사용해야 한다면, 문제가 생긴다. 이럴때 nodejs 버전 관리 프로그램을 활용하면 좋을 것이다. node의 버전관리할 수 있는 프로그램은 여러가지가 있는데, 그 중에서 nvm 을 알아보도록 하자. nvm 은 기본적으로 Linux/Mac 등에서 쓸 수 있도록 제작되었다. 그래서, windows를 위해서는 별도의 nvm-windows 라는 것을 찾아서 설치해주어야 한다. https://github.com/coreybutler/nvm-windows 에서 설치파일을 다운로드 할 수 있다. 그렇지만, 이.. Programming/Javascript 2024. 9. 9.

• 

  개발환경 구성과 프로젝트 생성 (Hello World) : Vue.js 3 강좌 (with Bootstrap, script-setup) 전체목차 : https://gauryan.tistory.com/214 이제, 본격적으로 시작해봅시다. 우선, https://code.visualstudio.com/ 에서 Visual Studio Code를 다운로드하여 설치합니다. 에디터는 자신이 원하는 다른 것(IntelliJ IDEA, Atom, Eclipse 등)으로 하셔도 괜찮습니다. Vue.js 3에 관련된 확장프로그램은 아래와 같이 설치하였습니다. https://nodejs.org/ 에서 Node.js를 다운로드하여 설치한다. node.js 설치를 마치고 다음처럼 설치가 잘 되었는지 확인해보자~! 저는 LTS버전을 설치했는데, 아무거나 설치하셔도 됩니다. Vue 3 프로젝트를 생성합니다. > npm init vue@latest Vue Route.. Programming/Javascript 2022. 3. 8.

• 

  Vue.js 3 강좌 (with Bootstrap, script-setup) Vue.js 3 의 기본적인 사용법을 설명합니다. Vue2 에서 Options API를 통해 개발했다면, Vue3 에서는 Composion API로 개발을 하게 됩니다. 보통, Composion API로 만들게 되면, Setup() 함수에 구현을 하는데요, 여기서는 Setup()함수를 사용하지 않습니다. 대신, script 태그 선언시에 setup 옵션을 추가합니다. 이렇게 하면 코드를 더욱 간결하게 작성할 수 있습니다. 개발환경 구성과 프로젝트 생성 (Hello World) 폴더와 파일에 대한 설명 뷰 데이터와 함수 데이터 바인딩 이벤트 데이터 양방향 바인딩 Computed 속성 Watch 속성 클래스&스타일 바인딩 v-if와 v-show v-for 리스트렌더링 여러개의 Vue 인스턴스 사용하기 Vue.. Programming/Javascript 2022. 2. 4.

• Vue3 에서 같은 path (같은 컴포넌트) 를 호출할때 리로드하기 놀자코딩#Programming #Coding #Development #API #Server #python #golang #java #nodejs #javascript #프로그래밍 #코딩 #개발 #서버 #파이썬 #Go언어 #자바 #노드 #자바스크립트www.youtube.com  path 를 "/abc/:id" 와 같은 식으로 정의하고, "/abc/1" 페이지에서 "/abc/2" 페이지를 호출하려는 경우에 페이지가 리로드되지 않는다. 이런 경우, 아래와 같이 해주면 해결될 것이다. Programming/Javascript 2022. 2. 4.

• Vite + Vue3 + Javascript + Electron 를 이용한 데스크탑 앱 개발 환경 놀자코딩#Programming #Coding #Development #API #Server #python #golang #java #nodejs #javascript #프로그래밍 #코딩 #개발 #서버 #파이썬 #Go언어 #자바 #노드 #자바스크립트www.youtube.com Vite + Vue3 + Javascript + Electron 를 이용하여 데스크탑앱 개발 환경을 설정해보자. 참고했던 문서에서는 Typescript 로 되어 있었는데, 필자는 아직 Javascript를 쓰고 싶다. ^^;Step 1. Vite 프로젝트 생성하기> yarn create viteyarn create v1.22.17[1/4] Resolving packages...[2/4] Fetching packages...[3/4] .. Programming/Javascript 2022. 1. 25.

• 

  폴더와 파일에 대한 설명 : Vue.js 3 강좌 (with Bootstrap, script-setup) 전체목차 : https://gauryan.tistory.com/214 이제 생성한 프로젝트의 구조에 대해 간단하게 알아볼 시간입니다. 먼저, VSCode 의 왼쪽에서 프로젝트 폴더를 봅시다. 이렇게 생겼어요. node_modules 폴더가 먼저 보이네요. 이 폴더에는 내가 설치한 node 모듈들이 있는 장소입니다. 처음 용량이 거의 160MB로 꽤 큽니다. package.json 에 필요한 패키지 목록을 가지고 있어서, node_modules 폴더가 없더라도, 다시 만들수가 있습니다. 그래서, git에는 저장하지 않도록 설정되어 있어요. public 폴더의 index.html 도 봅시다. 여기에서 눈여겨 볼 곳은 app 으로 id를 설정한 부분입니다. 이 곳에 우리가 작성한 코드들이 자동으로 들어가게 되.. Programming/Javascript 2022. 1. 23.

• 

  개발환경 구성과 프로젝트 생성 (Hello World) : Svelte 3 강좌 이제, 본격적으로 시작해봅시다. 우선, https://code.visualstudio.com/ 에서 Visual Studio Code를 다운로드하여 설치합니다. 에디터는 자신이 원하는 다른 것(IntelliJ IDEA, Atom, Eclipse 등)으로 하셔도 괜찮습니다. Svelte에 관련된 확장프로그램은 아래와 같이 설치하였습니다. https://nodejs.org/ 에서 Node.js를 다운로드하여 설치한다. node.js 설치를 마치고 다음처럼 설치가 잘 되었는지 확인해보자~! 저는 LTS버전을 설치했는데, 아무거나 설치하셔도 됩니다. yarn도 설치해봅시다. npm 보다 설치속도가 더 빠르다고 하네요. 전역(-g 옵션)으로 설치하는 패키지는 npm을 사용하고, 그 외에는 yarn을 설치하는 것이.. Programming/Javascript 2021. 12. 24.

• ESLint 에서 세미콜론 사용하기 설정 놀자코딩#Programming #Coding #Development #API #Server #python #golang #java #nodejs #javascript #프로그래밍 #코딩 #개발 #서버 #파이썬 #Go언어 #자바 #노드 #자바스크립트www.youtube.com .eslintrc.js 파일의 rules 항목에 semi를 추가해준다. rules: { ... 'semi': [2, 'always'], // or // 'semi': 'off', ... } 이렇게 설정하면, 미리 만들어진 다른 파일에서 세미콜론이 추가되어 있지 않은 경우, 에러를 낼 것이다. 이 에러를 무시하려면 해당 파일에 아래 주석을 넣어주면 된다./* eslint-disable */// 위의 주석은 파일 .. Programming/Javascript 2021. 12. 17.

• 

  AdonisJs 4.0 Tutorial 본 튜토리얼에서는 대부분의 사이트에 기본적으로 필요한 기능을 익히는데 목적이 있습니다. 예제에서는 관리자로 로그인/로그아웃하고, 관리자를 등록/수정/삭제 등을 할 수 있는 기본적인 기능을 포함하는 예제를 만들어봅니다. 그리고, 비밀번호의 단방향 암호화(SHA-256)를 해보고, 개인정보(이름,전화번호,이메일 등)을 AES-256 로 암호화하여 DBMS에 저장/관리하는 기능도 포함됩니다. 1. 시작 2. 첫페이지 만들어보기 3. 모델 생성 4. 관리자 목록 보여주기 5. 관리자 추가하기 6. 관리자 비밀번호 변경하기 7. 관리자 수정하기 8. 관리자 삭제하기 9. 비밀번호 단방향암호화(SHA256) 하기 10. 개인정보 양방향암호화(AES256) 하기 11. 로그인/로그아웃 처리하기 Programming/Javascript 2017. 10. 26.

• (AdonisJs 4.0 Tutorial) 로그인/로그아웃 처리하기 명색이 관리자 화면인데, 아무나 들어와서 조작하면 안되겠지요? 이제는 마지막으로 로그인/로그아웃 처리를 해보겠습니다. 로그인/로그아웃은 세션을 이용해서 구현합니다. 로그인 화면을 구성합니다. xyz/resources/views/mgmt/index.edge 을 작성합니다. {{ csrfField() }} 아이디 비밀번호 xyz/app/Controllers/Http/Mgmt/MainController.js 를 생성합니다. 'use strict' class MainController { index ({view}) { return view.render('mgmt/index') } } module.exports = MainController xyz/start/routes.js 다음을 추가합니다. Route.get.. Programming/Javascript 2017. 10. 25.

• (AdonisJs 4.0 Tutorial) 개인정보 양방향암호화(AES256) 하기 이 예제에는 개인정보 데이터가 없긴 하지만, 별명(Nick)을 개인정보라 간주하고 암호화를 진행해보겠습니다. Adonis 에서는 데이터 암호화를 위해서 Encryption 모듈을 제공하고 있습니다. 데이터를 암호화하고 다시 풀려면, Key 가 있어야 합니다. 이 Key 를 .env 파일에 APP_KEY 로 이미 정의되어 있습니다. xyz/app/Models/Admin.js 에 다음을 추가한다. const Encryption = use('Encryption') ... getNick(nick) { return Encryption.decrypt(nick) } setNick(nick) { return Encryption.encrypt(nick) } ... DB의 내용을 모두 삭제한 후에, 관리자를 추가해봅니다... Programming/Javascript 2017. 10. 24.

• (AdonisJs 4.0 Tutorial) 비밀번호 단방향암호화(SHA256) 하기 정보통신망법, 개인정보보호법 등에 의하면 비밀번호는 단방향암호화(SHA256 등), 개인정보는 양방향암호화(AES256 등)를 하도록 되어 있습니다. 지금까지 작성한 예제는 이런 법에 맞지 않아서 서비스할 수 없겠네요. 여기에서는 비밀번호의 단방향 암호화를 구현해보도록 하겠습니다. Adonis 에서는 비밀번호 암호화에 더 좋다고 하는 bctypt를 제공하고 있지만, 이것이 법에 명시되어 있지는 않아서, SHA256 을 사용하겠습니다. 먼저, 기존 DB에 들어있던 사용자 정보를 모두 삭제합시다. $ cd database $ sqlite development.sqlite SQLite version 3.15.0 2016-10-14 10:20:30 Enter ".help" for instructions Ente.. Programming/Javascript 2017. 10. 23.