분류 전체보기214

• 

  ( ) vscode extention : v-analyzer 사용하기 * 참고 : https://github.com/v-analyzer/v-analyzer 1. Powershell 에서 다음을 실행한다.curl -o install.vsh https://raw.githubusercontent.com/v-analyzer/v-analyzer/main/install.vsh; v run install.vsh; del install.vsh 2. v-analyzer extention 을 설치한 후에 `V-analyzer: Server Path` 항목에 v-analyzer 가 설치된 위치를 적어준다.C:\Users\아이디\.config\v-analyzer\bin\v-analyzer 프로그래밍 2024. 3. 27.

• 

  (Windows) Linux스러운 Windows 개발환경 구성해보기 놀자코딩#Programming #Coding #Development #API #Server #python #golang #java #nodejs #javascript #프로그래밍 #코딩 #개발 #서버 #파이썬 #Go언어 #자바 #노드 #자바스크립트www.youtube.com I. 설치일단, 필요한 프로그램을 다운로드받아서 설치부터 합니다.1. Windows Terminal 을 설치한다.2. 유사 Linux 환경인 MSYS2 를 설치한다.3. Visual Studio Code 를 설치한다.3. 윈도우용 프로그램을 쉽게 설치/관리할 수 있는 Chocolatey 를 설치한다.4. 내가 좋아하는 텍스트에디터 neovim 도 설치하자. Chocolatey를 이용한다.> choco install neovim II... ETC (IT) 2022. 6. 3.

• 

  (PHP) Windows 에 PHP 설치하기 브라우저에서 https://windows.php.net/download/ 에 접속합니다. 오른쪽에서 원하는 버전의 ZIP 파일을 다운로드 받습니다. 그리고, 화면 왼쪽 VC15 & VS16 항목에서 "Visual C++ Redistributable for Visual Studio 2015-2019" VC_redist.x64.exe 도 다운로드받아서 설치합니다. 이미 설치되어 있으면 설치하지 않아도 됩니다. 그리고, PHP ZIP 파일을 적당한 곳에 풀어서 폴더명도 정해봅니다. 저는 D:\bin\php-8.1.6 에 풀었습니다. 환경설정을 위해서 설정 > 정보 > 고급 시스템 설정 을 선택합니다. 시스템 속성 창에서 "환경 변수..." 버튼을 클릭한다. 환경 변수 창에서 Path를 찾아서 "편집..." 버.. 프로그래밍 2022. 5. 13.

• 

  개발환경 구성과 프로젝트 생성 (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.. 프로그래밍/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.. 프로그래밍/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" 페이지를 호출하려는 경우에 페이지가 리로드되지 않는다. 이런 경우, 아래와 같이 해주면 해결될 것이다. 프로그래밍/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] .. 프로그래밍/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를 설정한 부분입니다. 이 곳에 우리가 작성한 코드들이 자동으로 들어가게 되.. 프로그래밍/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을 설치하는 것이.. 프로그래밍/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 */// 위의 주석은 파일 .. 프로그래밍/Javascript 2021. 12. 17.

• 

  (SpringBoot) 로그인/로그아웃 처리하기 : Spring Boot 2.x.x Web Tutorial 튜토리얼의 마지막 과정인 로그인/로그아웃 처리를 해보겠습니다. 보통 다른 프레임워크의 경우에는 미들웨어라는 개념의 레이어가 존재하고, 컨트롤러가 동작하기 전에 먼저 실행이 됩니다. 그래서, 인증에 관련된 미들웨어에서 보안코드를 작성하여 내부URL의 접근여부를 결정합니다. 그런데, Spring Boot는 미들웨어라는 것이 없고, Spring Securify 모듈을 따로 제공하고 있습니다. 이 Security 모듈의 사용법을 익혀서 적용하면 쉽게(?) 로그인/로그아웃을 처리할 수 있습니다. build.gradle 에 Spring Security 모듈에 대한 의존성을 추가합니다.implementation 'org.springframework.boot:spring-boot-starter-security' 위의 .. 프로그래밍/Java 2021. 11. 29.

• 

  Spring Boot 2.x.x Web Tutorial : Thymeleaf + MyBatis + MySQL(MariaDB) 이번에는 Spring Boot 웹 프로젝트 튜토리얼을 제작해보겠습니다. 프레임워크 중에서도 가장 어렵고 하기 싫었던 녀석이었는데, 이번에 Spring을 알아야 할 일이 생겨서 공부를 시작했어요. 이 과정을 마치면 다음에는 Spring Boot 로 Restful API 서버 튜토리얼도 만들어보겠습니다. HTML 템플릿으로는 Thymeleaf 를 사용합니다. Spring에서 강력하게 추천하는 템플릿입니다. 그만큼 가장 좋습니다. DB 접근은 MyBatis를 사용하고 일반 SQL이 아닌 Procedure를 사용할 것입니다. 설치할 DBMS는 MriaDB 인데, MySQL을 대신하셔도 되겠습니다. 그리고, 이 튜토리얼의 소스는  https://github.com/gauryan/springboot2-tutoria.. 프로그래밍/Java 2021. 11. 22.