CI/CD CI/CD는 CI와 CD를 합친 용어로, 지속적인 통합과 지속적인 배포를 뜻한다. CI (Continuous Integration) CI는 Continuous Integration의 약자로 지속적인 통합이라는 의미를 가진다. 개발이 진행됨에 따라 소스 코드에 대해 업데이트가 생기면 지속적으로 통합을 해준다. 지속적으로 코드를 왜 통합하나요? 해당 프로젝트에 개발자가 여러 명 일시 코드 충돌이 일어날 수도 있다. CI를 진행하게 되면 이러한 문제점을 해결할 수 있다. CD (Continuous Deployment) CD는 Continuous Deployment의 약자로 지속적인 배포라는 의미를 가진다. CI 빌드를 통과한 소스 코드에 대해 서버 배포가 가능하다면 진행된다. 지속적으로 배포를 왜 ..
타입스크립트 타입스크립트는 자바스크립트에 타입이 추가된 언어다. 타입스크립트는 자바스크립트의 슈퍼셋으로 ECMA 스크립트의 최신 표준을 지원한다. 타입스크립트를 사용하는 가장 큰 이유로는 강력한 타입을 제공하는 것도 있지만, 컴파일 시간에 검사를 통해 오류를 검출함으로써 개발 시간을 줄일 수 있다. 그러면 TS로 HelloWorld를 출력해보자. TypeScript 컴파일러 설치 VSC를 사용한다면 설치하지 않아도 된다. VSC는 TS 언어를 지원한다. 그렇지만 TS를 JS로 변환하고 싶다면 다음과 같이 설치를 진행하자. npm install -g typescript HelloWorld.ts 파일 생성 코드 작성 HelloWorld.ts 파일에 아래 코드를 작성해준다. let message: string..
WEBPACK 웹팩은 모듈 번들러다. 모듈(module)이란? 모듈은 특정 기능을 가지는 작은 코드 단위를 말한다. const sum = (a,b) => a+b; 번들러(bundler)란? 기술의 발전으로 복잡한 코드도 많이 개발되어 자연스럽게 코드 줄은 기하급수적으로 늘기 시작했다. 코드가 길어짐에 따라 여러 문제가 발생하였다. 코드 양이 많아 로딩이 느려짐 중복되는 코드 이름 (에러 발생) 스코프 문제 번들러는 여러 개의 파일을 하나로 묶어주는 역할을 수행함으로써 위 문제들을 해결해준다. 여러 개의 번들러가 존재하고 그중 하나가 웹팩(webpack)이다. 다시 한번 정리하자면 웹팩은 모듈 번들러다. 🤨 모듈 번들러인 웹팩은 장점만 존재할까? 웹팩(webpack)의 단점으로는 러닝 커브가 높다. 또한 ..
BABEL BABEL은 ES6+ 코드를 이전 JavaScript 엔진에서 실행할 수 있게 도와주는 컴파일러다. ❓ BABEL이 필요한 이유 현재 JavaScript는 브라우저에서 돌아가는데 너무 빠르게 바뀌고 있다. 그래서 최신 브라우저가 그 속도를 못 따라가는 경우가 종종 발생한다. babel은 이러한 문제를 해결해준다. 최신 JavaScript 언어를 해석하여 이전 버전을 가진 브라우저에서도 돌아갈 수 있게 문법을 변경해준다. 🔧 BABEL 빌드 진행 과정 파싱 (Parsing) 변환 (Transforming) 출력 (Printing) 파싱 -> 변환 -> 출력 과정을 거쳐 BABEL 빌드가 이루어진다. BABEL 빌드에서 가장 중요한 부분은 변환 과정이다. 변환은 플러그인을 통해 이루어진다. 🎈 플..
크로스 브라우징 크로스 브라우징은 표준 웹 기술을 사용하여 다양한 브라우저에서 작동 가능한지를 말한다. Chrome부터 시작해서 Edge, Firefox, IE Safari 등 브라우저는 굉장히 다양하다. 브라우저가 다양한만큼 렌더링 엔진도 그만큼 다양하다. 브라우저마다 렌더링 엔진이 다르기 때문이다. 🤨 렌더링 엔진 렌더링 엔진은 브라우저의 핵심이 되는 소프트웨어 구성 요소로, 요청한 데이터를 시각적으로 변환시켜준다. 📗 다양한 브라우저에서 해당 기술이 작동되는지 확인하는 방법 모질라(MDN) https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies ..
타이머 함수 타이머 함수는 일정 시간이 지난 후 특정 코드를 실행해주는 함수를 말한다. 타이머 함수 종류 setTimeout setInterval setTimeout setTimeout은 코드를 설정한 시간이 지난 후 실행시켜준다. 문법 setTimeout( 코드, 지연 시간, 함수에 전달할 인수 ); setTimeout을 사용하여 5초 뒤에 console log에 특정 문장을 찍어보자. 예제 코드 1 setTimeout(function () { console.log('개발자 퉁이리'); }, 5000); 예제 코드 2 setTimeout(() => {console.log('개발자 퉁이리')}, 5000); 여기서 지연시간은 밀리세컨드 단위로 설정, 만약 5초로 설정하고 싶다면 지연시간은 5000. 5초..
화살표 함수 화살표 함수는 function 키워드 대신 화살표 =>를 사용해 함수를 간략히 정의한다. const arrow = (x,y) => { ... }; 😃 기존 함수 정의 const arrow = function() { ... }; 😄 화살표 함수 정의 const arrow = () => { ... }; 위 비교만으로도 왜 화살표 함수가 ES6에 추가되어 많은 개발자에게 사용되는지 알 수 있다. function이 =>로 변경되었다. 바꿔 말하면 타이핑 8이 타이핑 2로 변경되었다. 함수는 가장 많이 사용하는 기능인데, 이를 1/4로 줄인 것만으로도 개발자들에게 환호받을만하다. ❗ 이뿐만이 아니다. 조건에 한해 return 생략까지 가능해졌다. 조건 : return이 한 줄인 경우 let sum =..
XML XML은 eXtensible Markup Language의 약자로 HTML과 매우 유사한 마크업 언어다. 🤔 어느 부분에서 HTML과 유사한가요? 같은 Markup Language이다. Markup Language는 사람과 기계가 동시에 읽기 편한 구조로 되어 있다. XML은 데이터를 저장하고 전송하도록 설계되었다. 기존 HTML의 한계를 극복하기 위해 탄생되었다. HTML은 데이터를 어떻게 보여주는지에 포커스가 맞추어져 있다면, XML은 데이터가 무엇인지가 포커스다. XML 특징 1️⃣ 정해진 태그를 사용하지 않아도 된다 XML 언어는 미리 정의된 태그가 전혀 존재하지 않는다. 따라서 새로운 태그를 만들어서 의미 있는 데이터를 계속해서 확장할 수 있다. 2️⃣ 웹 국제표준 W3C의 권장 사항이다..
javascript:void(0) javascript:void(0)은 undefined를 반환해주는 함수다. undefined를 반환해주는 함수, javascript:void(0)를 왜 사용할까? 대부분 javascript:void(0)를 검색해서 들어온 분들이라면 앵커 태그 안에서 왜 사용되는지가 궁금할 거다. 개발자 퉁이리 다음과 같은 하이퍼링크를 WEB에서 클릭하면 어떻게 될까? 결론부터 말하면 아무일도 일어나지 않는다. 🤔 아무일도 일어나지 않는 javascript:void(0)를 왜 사용할까? 1️⃣ 개발자 퉁이리 2️⃣ 개발자 퉁이리 위 1️⃣과 2️⃣ 코드의 차이점이 무엇일까? 당연히 생긴 것부터 다르다. 그거 빼고. 1️⃣번은 하이퍼링크 클릭 이벤트 발생 시 해당 페이지의 최상단으로 스크롤..
가상 요소(의사 요소) 가상 요소 ::before, ::after는 CSS만으로 특정 부분에 스타일을 지정할 수 있게 도와주는 키워드다. 가상요소 중 ::before, ::after가 대표적이다. 해당 가상 요소(::before, ::after)를 사용하면 요소의 시작부분이나 끝 부분에 스타일을 추가할 수 있다. 티스토리 블로그 개발자 퉁이리 위의 HTML 코드를 예시로, 화면엔 위와 같이 출력된다. 😁 ::before 여기에 가상요소 ::before를 이용해 CSS를 추가해보자. 티스토리 블로그 개발자 퉁이리 위 코드와 같이 추가했다. li 앞에 "👿"가 추가되어야 한다. 화면을 보면 정상적으로 적용되었다. 😁 ::after 추가적으로 가상 요소 ::after도 추가해보자. 티스토리 블로그 개발자 퉁이..
- Total
- Today
- Yesterday
- 알고리즘
- 문자열
- 백준
- JS
- 자바스크립트
- 정답
- 쉽게배우는자바프로그래밍
- 구현
- 정렬
- 쉽게 배우는 자바 프로그래밍
- CPP
- 풀이
- 해답
- 정리
- BFS
- Web
- java
- 그리디
- 자바
- Python
- 운영체제
- py
- 연습문제
- 우종정
- C++
- 프로그래머스
- 파이썬
- OS
- 쉽게배우는
- 답
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |