Dev 55

DevOps란 무엇인가?

DevOps란 무엇인가? DevOps는 개발과 운영(Operations) 사이의 협업과 통합을 강조하는 소프트웨어 개발 방법론 및 문화입니다. 기존의 전통적인 소프트웨어 개발 방식에서 개발팀과 운영팀이 독립적으로 업무를 수행하는 것과는 달리, DevOps는 개발과 운영 사이의 경계를 희석시키고, 개발자와 운영자 간의 협업을 강화하여 소프트웨어를 보다 신속하고 안정적으로 제공하는 것을 목표로 합니다. DevOps의 핵심 목표 - 소프트웨어 전달 속도 향상 DevOps는 지속적인 통합, 지속적인 제공, 자동화된 배포 등을 통해 개발에서 운영까지의 전체 과정을 자동화하고 가속화합니다. 이로 인해 소프트웨어 제품의 전달 속도가 향상되고 릴리즈 주기가 단축됩니다. - 안정성 및 신뢰성 강화 DevOps는 자동화된..

Dev 2023.06.13

[쇼핑몰] Adobe Fonts 적용 방법

- Adobe Fonts 적용방법 https://fonts.adobe.com/my_fonts#web_projects-section 위 링크에 접속한다. 본인 계정으로 로그인한다. 사용하고 싶은 폰트를 '웹프로젝트'에 담는다. head 태그에 아래와 같이 추가.(링크는 개인마다 다르게 제공한다.) 5. 사용하려는 폰트의 css 복사 기능을 이용하여 스타일에 추가한다. 예시 .example{ font-family: proxima-nova, sans-serif; font-weight: 400; font-style: normal; } - 주의사항 1개의 어도비 계정으로 관리하는 것이 좋다. 과도한 폰트 추가는 페이지 로딩 속도에 전반적인 영향을 끼칠 수 있음. 반드시 필요한 폰트만 웹프로젝트에 추..

Dev/Javascript, CSS 2022.11.14

애자일 개발이란? - (4) 스크럼 스프린트 사이클

애자일 개발이란? - (1) 기본 개념 정리 애자일 개발이란? - (2) 애자일 기법의 개념과 사용 애자일 개발이란? - (3) 익스트림 프로그래밍과 리팩토링, TDD 등 애자일 개발이란? - (4) 스크럼 스프린트 사이클 프로젝트 관리를 위해서는 프로젝트 매니저가 필요하다. 프로젝트 매니저는 전반적인 개발과정을 책임지고 한정된 자원 내로, 지정된 기간 내에, 프로덕트를 만들 수 있도록 관리하는 사람이다. 1. 스크럼(Scrum) 스크럼은 특정 애자일 방법이라기보다는 개발을 관리하는데 초점을 맞춰진 방식이다. 스크럼은 세 단계로 구성된다. Outline planning: 목표를 세우고 소프트웨어 구조를 설계함 Sprint cycles: 각각의 사이클이 시스템을 키움 Project closure: 프로젝트..

Dev/Methodology 2022.11.14

애자일 개발이란? - (3) 익스트림 프로그래밍과 리팩토링, TDD 등

애자일 개발이란? - (1) 기본 개념 정리 애자일 개발이란? - (2) 애자일 기법의 개념과 사용 애자일 개발이란? - (3) 익스트림 프로그래밍과 리팩토링, TDD 등 애자일 개발이란? - (4) 스크럼 스프린트 사이클 1. 익스트림 프로그래밍(XP) 익스트림 프로그래밍은 1990년대에 개발된 변화하는 소프트웨어 개발 문화를 다루는 가장 중요한 애자일 기법이다. 익스트림 프로그래밍(XP)은 정말 'extreme'하게 개발에 접근한다. 매일 새로운 버전을 만들어야 함 2주마다 증가분들이 고객에게 전달됨 모든 빌드가 테스트를 통과 헤야 허가됨 개발자가 코드를 작성하면서 테스트를 실행할 수 있고, 개발과정에서 문제점을 찾을 수 있음 시나리오를 통한 점증적 테스트 개발: 고객이야말로 어떤 테스트가 가장 필요..

Dev/Methodology 2022.11.14

애자일 개발이란? - (2) 애자일 기법의 개념과 사용

애자일 개발이란? - (1) 기본 개념 정리 애자일 개발이란? - (2) 애자일 기법의 개념과 사용 애자일 개발이란? - (3) 익스트림 프로그래밍과 리팩토링, TDD 등 애자일 개발이란? - (4) 스크럼 스프린트 사이클 예전의 소프트웨어 설계 방법에서 발생하는 오버헤드들에 대한 불만족으로 인하여 애자일 기법이 탄생하게 되었다. 1. 애자일 기법 설계보다 코드 짜기에 집중 상호 간의 접근에 기반한 소프트웨어 개발 빠른 전달과 빠른 진화를 통해 바뀌는 요구사항 만족 애자일 기법의 목표는 소프트웨어 프로세스의 오버헤드를 줄이는 것이다. 대표적으로 문서를 작성하는데 걸리는 시간을 대폭 줄임으로써 코드를 짤 시간을 확보하는 것이 있다. 그리고 변화하는 요구사항에 빠르게 발맞춰 대응하기 위한 방법이다. 2. 애..

Dev/Methodology 2022.11.14

애자일 개발이란? - (1) 기본 개념 정리

애자일 개발이란? - (1) 기본 개념 정리 애자일 개발이란? - (2) 애자일 기법의 개념과 사용 애자일 개발이란? - (3) 익스트림 프로그래밍과 리팩토링, TDD 등 애자일 개발이란? - (4) 스크럼 스프린트 사이클 1. 애자일이 등장하게 된 배경 예전과는 다르게, 빠르게 변화하는 요구사항들에 맞춰 빠르게 개발해야 될 필요성이 생겨 애자일이 등장하게 되었다. Plan-driven 개발은 특정한 종류의 개발에는 필수적이지만, 최근의 비즈니스적인 필요를 충족시키지 못했기 때문에 애자일이 등장하게 되었다. 2. 애자일 개발(Agile development)의 특징 프로그램의 명세화(specification), 설계(design), 구현(implementation)이 중첩(interleaved)됨 시스템..

Dev/Methodology 2022.11.14

var 와 let 의 차이 그리고 호이스팅

우선 호이스팅에 대해서 알자. 간단하게 말하면 자바스크립트는 선언되어 있는 모든 변수들을 먼저 다 위로 불러서 선언만 미리한다. 이것을 호이스팅이라고한다. JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코..

Dev/Javascript, CSS 2021.12.25

JavaScript(js) 숫자 가격 표시 천단위 콤마

JavaScript(js) 숫자 가격 표시 천단위 콤마(javascript(js) thousand separator) function numberWithCommas(x) { return x.toString().replace(/\B(?TEST function numberWithCommas(x) { return x.toString().replace(/\B(? ${result}`); return pass; } let failures = 0; failures += !test(0, "0"); failures += !test(100, "100"); failures += !test(1000, "1,000"); failures += !test(10000, "10,000"); failures += !test(100000..

Dev/Javascript, CSS 2021.08.21

fs.readdir & fs.readdirSync 동기방식(Syncronous)과 비동기방식(Asynchronous)

fs.readdir과 fs.readdirSync fs.readdir의 경우 비동기 방식으로 보다 빠르게 처리하고 callback으로 처리가 가능하다. fs.readdir('./data', function(error, filelist){ for(var i in filelist){ console.log(filelist[i]); } });fs.readdirSync 사용 시 동기방식으로 처리할 수 있다. let filelist = fs.readdirSync('./data'); for(var i in filelist){ console.log(filelist[i]); }동기방식(Syncronous)과 비동기방식(Asynchronous) 동기방식은 결과가 주어질 때까지 아무것도 못하고 대..

Dev/Node.js 2021.08.11

node.js 파일 읽기 / 동적 페이지 만들기(2) express.js 란 그리고 설치

이전 글 링크 node.js 파일 읽기 / 동적 페이지 만들기(1) express.js 란? Express.js, 또는 간단히 익스프레스는 Node.js를 위한 웹 프레임워크의 하나로, MIT 허가서로 라이선스되는 자유-오픈 소스 소프트웨어로 출시되었다. 웹 애플리케이션, API 개발을 위해 설계되었다. Node.js의 사실상의 표준 서버 프레임워크로 불리고 있다. 간단하게 node.js의 표준 서버 프레임워크로 이해하고 넘어가면 될 것 같다. express.js 설치 https://expressjs.com/ko/starter/installing.html (참조) nodejs가 설치가 되어 있으면 아래 커맨드로 설치 가능. $ npm install express --save Express를 임시로 설치하..

Dev/Node.js 2021.08.10

파일읽어서 nodejs 동적 페이지 만들기(1)

다음 글 링크 node.js 파일 읽기 / 동적 페이지 만들기(2) node.js 파일 읽기 / 동적 페이지 만들기 localhost:3000/?id='HTML', localhost:3000/?id='Javascript', localhost:3000/?id='CSS' node.js로 parameter를(id) 받고 해당 파라미터에 따라 data폴더에 만들어 놓은 HTML.txt, javascript.txt, css.txt를 읽어드려서 뿌려주는 학습 프로젝트. (생활코딩 내용 학습 중) 다음과 같이 쿼리스트링 값을 추출 가능하다. var url = require('url'); var app = http.createServer(function(requ..

Dev/Node.js 2021.08.10

미디어 쿼리(Media Query) 반응형 웹

미디어 쿼리(Media Query)CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용 시키는게 가능했습니다. 하지만 미디어 타입만으로는 해당 기기의 특성을 정확히 판단하기가 어려워 많이 사용되지 않았습니다. CSS3은 위 미디어 타입을 개선하여, 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 확장하였는데 이를 미디어 쿼리라고 합니다.자세한 사항은 하기 사이트를 참조 !너무나도 정리가 잘 되어 있네용 http://www.nextree.co.kr/p8622/

Dev/Javascript, CSS 2018.08.02

자바스크립트 비동기 처리/콜백 함수 , promise

자바스크립트 비동기 처리 / 콜백 함수 https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/#%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98%EB%A1%9C-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EC%8B%9D%EC%9D%98-%EB%AC%B8%EC%A0%9C%EC%A0%90-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0 자바스크립트 promise https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

Dev/Javascript, CSS 2018.07.24

Spring에서 Device별(desktop, mobile, tablet)로 접근 구분하는 방법

출처: http://yookeun.github.io/java/2014/09/26/spring-device/Spring에서 간단하게 접속하는 Device(desktop, mobile, tablet)를 구분하는 방법이 있다.1. 먼저 spring mobile 라이브러리를 받는다. pom.xml에 다음을 추가한다. org.springframework.mobile spring-mobile-device 1.1.0.RELEASE 2. action-servlet.xml에서 아래 내용을 추가한다. 3. web.xml에서 필터링부분을 추가한다. deviceResolverRequestFilter org.springframework.mobile.device.DeviceResolverRequestFilter deviceRes..

AJAX Method Put 사용시 데이터 전송

AJax에서 Method Put으로 데이터 전달 시 @ModelAttribute에서 값이 들어오지 않는다. request.getParameter()를 사용해도 마찬가지였다. 다음의 방법으로 해결할 수 있다. contentType: 'application/json; charset=utf-8', data: JSON.stringify(JSONObject),컨트롤러에서는 @ModelAttribute 대신 @RequestBody를 사용한다. 예시 $("#btn_cheering").on('click',function(){ var cnt= Number($("#cnt_cheering").text()); var send_nic = "${login.nicname}"; var send_num =..

Dev/Javascript, CSS 2018.07.05