전체 글 422

Chapter 03. 자바스크립트 개발 환경과 실행 방법

3.1 자바스크립트 실행 환경 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. Node.js도 자바스크립트 엔진을 내장한다. 브라우저와 Node.js의 용도가 다르다. 브라우저는 HTML, CSS, 자바스크립트를 실행해서 화면에 렌더링하는 것이 목적이다. Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 게 목적이다. 웹 크롤링(Web Crawling) 서버에서 웹 사이트의 콘텐츠를 수집하기 위해서 HTML 문서를 가져와서 필요한 데이터만 추출하는 것을 말한다. 3.2 웹 브라우저 개발자 도구 개발자 도구는 웹 브라우저에 기본적으로 내장되어 있다. Elements: 로딩된 웹 페이지의 DOM, CSS 를 편집해서 렌더링된 뷰를 확인할 수 있다...

Chapter 01. 프로그래밍 Chapter 02.자바스크립트란?

1장 프로그래밍이란? 프로그래밍이란 0과 1 밖에 모르는 기계가 실행할 수 있도록 정확하고 상세하게 요구사항을 설명하는 작업이다. 그 작업의 결과물이 코드에 해당하다. 컴퓨터가 명령어를 수행하도록 하려면 컴퓨터가 이해할 수 있는 언어(기계어, machine code)로 컴퓨터에 명령어를 전달해야 한다. 개발자가 프로그래밍 언어를 사용해서 프로그램을 작성한 다음, 그걸 컴퓨터가 이해할 수 있는 기계어로 변환하는 번역기를 이용하는 방법이 있다. 이 번역기를 컴파일러(compiler) 또는 인터프리터(interpreter)라고 한다. 2장 자바스크립트란? 자바스크립트의 탄생 1995년 넷스케이프 커뮤니케이션즈가 웹 브라우저 시장을 90% 점유했다. 웹 브라우저에서 동작하는 경량 프로그래밍 언어 도입을 결정하다..

원격 서버(ubuntu)에 Java 설치, MySQL 서버 구축

가비아를 통해서 서버를 빌렸다. 지난 달쯤 가비아의 컨테이너 호스팅 서비스를 이용했는데 여기에는 MySQL, Java가 모두 깔려있는 상태였다. 이번에는 IaaS 특성을 제대로 활용하기 위해 클라우드 서버를 임대했다. 전에 사용해본 AWS EC2 와 비슷한데 관리 콘솔이 한글로 되어 있고, 실시간으로 요금을 확인하는 것도 훨씬 편리했다. 초보자에게 추천! 그리고 문의를 남기면 당일 날 답변을 받을 수 있어서 좋았다. 작년에도 EC2 서버에 DB를 구축해서 사용해본 경험이 있다. 이번에는 가비아를 통해 빌린 서버에 DB, Spring 애플리케이션을 모두 띄우려고 한다. 이번 포스팅에서는 ubuntu 연결 및 초기 세팅에 대해 다룬다. Java 설치 가비아에서 준 pem 파일을 이용해서 ppk파일을 만들고 ..

[09월 1주차] 캐시와 스프링 AOP, @Cacheable

캐시(cache) 캐시란? 반복적으로 요청되는 데이터를 임시로 메모리 저장했다가 다음 요청이 왔을 때, DB에 접근하지 않고 메모리에서 읽어오는 것을 말한다. 최초 요청 시에만 DB 에 접근하므로 시간적으로 효율적이고 성능도 좋아진다. Spring 캐시 사용 방법 - @CacheEvict, @Cacheable @Cacheable(cacheNames = "model", key = "#modelNm", unless = "#result == null") public ModelVo getModel(String modelNm) { // 모델 조회 return model; } @CacheEvict(cacheNames = "model", key = "#modelNm") public void removeModel(St..

[08월 4주] MyBatis(string_agg, unnest), element plus를 이용한 스위치 버튼 만들기

PostgreSQL에서 unnest()를 사용하면 정렬이 되지 않는 이유? postgre에서는 string_agg() 를 이용해서 구분자를 기준으로 어떤 값들을 이어 붙일 수 있다. 또는 반대로 unnest()를 사용해서 구분자로 이어붙여진 값들을 펼칠 수도 있다. 그런데 여기서 unnest() 사용해서 펼친 경우, 해당 데이터들은 정렬이 되지 않는다. 원인: ? 해결 방법: ? MyBatis PostgreSQL의 string_agg()를 이용하면 특정 데이터를 구분자로 구분해서 문자열 형태로 이어붙일 수 있다. ex) ['a', 'p', 'p', 'l', 'e'] => 'apple' 검색 쿼리를 만드는 중이다. 'searchKeyword' 에 대해서 searchKeyword 가 포함된 model_id_..

도커(docker) 와 컨테이너 및 기본 명령어

서비스 배포 먼저, 인텔리제이에서 코드를 구현한다. 지금까지는 콘솔에 결과를 출력하거나 API를 호출해서 확인했다. 그런데 사용자들이 서비스를 사용하려면 서비스를 배포해야한다. 서버 컴퓨터를 구매해서 사용하거나 클라우드 서비스를 이용하는 방법이 있다. 온 프레미스(on premise) 방식으로 서버를 직접 구매해서 운영하려면 비용 부담이 크게 발생한다. 온 프레미스 클라우드 서비스: ex) AWS 가상화(virtualization) 하나의 물리 시스템에서 분리된 여러 환경을 구성하는 기술 서버의 물리적인 자원을 최대한 효율적으로 활용하기 위한 기술이다. 가상화는 기술 개념이고 클라우드는 서비스 개념이다. 가상 머신(virtual machine)과 컨테이너의 차이점 컨테이너와 VM은 유사하다. 하드웨어에서..

Infra 2023.09.04

Vue.js 3 프로젝트 세팅, VO / Entity / DTO 차이점

Vue.js 3 프로젝트 설정 및 세팅 vue 설치 npm install vue node.js 설치 npm install -g @vue/cli npm을 사용하기 위해 node 설치가 필수적이다. pc 환경 전역에 vue cli를 설치하는 명령이다. vue 설치 확인 vue --version을 통해 확인 이 때, power shell 을 이용하면 vue 명령어를 인식하지 못한다. 따라서, cmd로 작업한다. (vue 명령이 시스템 변수에 등록되어 있지 않기 때문이다. power shell과 cmd 각각에 대한 환경 변수는 따로 설정한다.) vue 2, 3 중 선택한다. 백엔드와 겹치지 않도록 port 번호를 설정한다. vue.config.js 파일 const { defineConfig } = require..

ERD, querydsl 세팅

ERD ERD는 추후 수정될 부분이 많다. 멘토링도 학생당 여러 개 신청하는 경우도 있도록 테이블이 분리될 것이다. 최악의 경우 회원 관련 테이블이 모두 삭제될 수 있음.. querydsl 설정 Spring boot 2.6.0 이상 & querydsl 5.0.0 버전 buildscript { ext { queryDslVersion = "5.0.0" } } plugins { id 'org.springframework.boot' version '2.7.14' id 'io.spring.dependency-management' version '1.0.15.RELEASE' id 'com.ewerk.gradle.plugins.querydsl' version "1.0.10" // Querydsl Gradle 플러그인..

가비아 컨테이너 호스팅, PuTTY 설치, Spring 프로젝트 초기 설정

프롤로그 게임 강의(C, C++, Unreal, DirectX) 관련된 강의 자료 홈페이지를 만들려고 한다. 인프런과 유튜브에서 활동 중인 얄코 강사님처럼 동영상 강의는 인프런에 올리고 강의 자료를 별도로 올릴 수 있는 웹 페이지를 기획하고 있다. gabia로 몇 달 운영해보고 AWS로 바꿀 예정이다. 이번 포스팅에서는 가비아 호스팅 서비스 구독, DB 연결, spring 프로젝트 셋업 등을 다루려고 한다. 들어가기에 앞서 호스팅 관련 기본 개념(SSH, SFTP 같은 프로토콜)을 알아봤다. SFTP(Secure File Transfer Protocal) 파일 전송을 위해 사용되는 프로토콜 중 하나이다. 클라이언트와 서버 간 안전한 파일 전송을 가능하게 해주는 프로토콜이다. 클라이언트가 SFTP 클라이언..

[08월 1주차] MyBatis bacth 처리 방법(INSERT, DELETE), Vue.js 3 폼 유효성 검증

MyBatis 일괄 INSERT, DELETE 여러 엔티티의 정보를 List 형태로 받아서 일괄적으로 DB에 INSERT 쿼리를 실행하려고한다. 관련된 내용을 정리해보려한다. 프론트 다음과 같이 배열 list에 각 object를 담아서 이 데이터를 POST 요청과 함께 보낸다. 그러면 백엔드에서 @RequestBody List 형태로 데이터를 받을 수 있다. cf) DELETE 요청에는 requestbody 를 보내는게 권장되지 않는다. HTTP 프로토콜의 표준 사양에 따르면 DELETE 요청에 requestbody를 포함하지 않는 게 원칙이다. 보안/캐싱에 관한 문제가 있기 때문이다. 따라서, 선택 삭제 같은 기능을 구현하는 경우, URL에 "id=model3&id=model9" 와 같은 방식으로 이어..