Javascript는 웹 브라우저에서 작동하는 스크립트 언어로, 동적인 웹 페이지를 만들기 위해 필수적이다. 이 글에서는 Javascript의 기본 개념과 실무에서 자주 사용되는 활용 사례를 소개한다.

Javascript는 클라이언트 사이드에서 기본적으로 HTML과 CSS와 함께 사용되며, 웹 개발에서 많은 기능을 수행할 수 있다. 브라우저에서 직접 실행되며, 서버와의 상호작용을 통해 매우 다양한 응용 프로그램을 구현할 수 있다.

• Javascript는 동적 웹 페이지를 생성하는 데 사용되며, 사용자 인터랙션을 처리할 수 있는 기능을 제공한다.
• AJAX를 통해 비동기 요청을 보내고, JSON 데이터를 쉽게 처리할 수 있어 데이터 전송에 유리하다.
• 다양한 라이브러리와 프레임워크(예: React, Vue.js 등)를 지원하여 개발 생산성을 높인다.

Javascript의 주요 기능

Javascript는 다양한 기능을 제공하여 웹 개발에 많은 이점을 가져다준다. 몇 가지 주요 기능은 다음과 같다.

• DOM 조작: Javascript를 사용하여 HTML 요소를 동적으로 추가하거나 수정할 수 있다.
• 이벤트 처리: 사용자 입력, 버튼 클릭 등의 이벤트를 감지하고 처리할 수 있다.
• 비동기 처리: AJAX를 활용해 서버와의 비동기 통신을 가능하게 하며, Promise 및 async/await 구문을 통해 더욱 간편하게 비동기 작업을 처리할 수 있다.

실무 예시 1: DOM 조작을 통한 사용자 인터페이스 개선

아래 코드는 버튼 클릭 시 새로운 항목을 리스트에 추가하는 기능을 구현한 예시이다.

const button = document.getElementById('addItem');
const input = document.getElementById('itemInput');
const list = document.getElementById('itemList');

button.addEventListener('click', () => {
    const newItem = document.createElement('li');
    newItem.textContent = input.value;
    list.appendChild(newItem);
    input.value = '';
});

이 코드는 사용자가 입력한 항목을 리스트에 추가하여 실시간으로 UI를 업데이트 할 수 있는 기능을 제공한다.

실무 예시 2: AJAX를 통한 서버 데이터 처리

다음 코드는 Fetch API를 사용하여 서버에서 데이터를 가져오는 예시이다. 이 경우 JSONPlaceholder라는 테스트 API를 사용한다.

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => {
        data.forEach(post => {
            console.log(post.title);
        });
    })
    .catch(error => console.error('Error:', error));

이 코드는 서버에서 게시글 목록을 가져와 각 게시글의 제목을 콘솔에 출력한다. 비동기 통신을 통해 사용자 경험을 개선할 수 있다.

Javascript의 활용 분야

Javascript는 단순한 웹 페이지에서부터 복잡한 웹 애플리케이션까지 다양한 분야에서 활용된다. 다음은 그 주요 활용 분야이다.

• 웹 애플리케이션 개발: React, Angular, Vue.js와 같은 프레임워크를 사용하여 대규모 웹 애플리케이션을 개발할 수 있다.
• 게임 개발: HTML5와 함께 사용하여 브라우저 기반의 게임을 개발하는 데 사용된다.
• 서버 사이드 개발: Node.js를 통해 서버 측에서도 Javascript를 사용할 수 있어, 전체 스택 개발이 가능하다.

자주 묻는 질문

Javascript와 다른 언어의 차이점은 무엇인가요?

Javascript는 주로 웹 브라우저에서 실행되는 스크립트 언어로, 동적 웹 페이지 제작에 특화되어 있다. 반면, Java는 플랫폼 독립적인 객체 지향 언어로, 주로 서버나 데스크탑 애플리케이션에 사용된다.

Javascript는 어디에 사용할 수 있나요?

Javascript는 웹 프론트엔드, 서버 사이드(Node.js), 게임 개발, 모바일 앱 개발(React Native) 등 다양한 분야에서 활용된다.

Javascript의 최신 버전은 무엇인가요?

Javascript는 ECMAScript라는 표준을 기반으로 발전하고 있으며, 최신 버전은 ECMAScript 2022(ES13)이다. 이는 새로운 문법과 기능들을 포함한다.

결론 및 다음 단계

• Javascript는 웹 개발의 핵심 언어로서 다양한 기능과 활용 가능성을 가지고 있다.
• 실무에서의 적용 사례를 통해 더욱 깊이 있는 이해가 필요하다.
• 공식 문서와 관련 자료를 통해 지속적으로 학습하고 최신 동향을 파악하는 것이 중요하다.

Javascript의 공식 문서는 MDN 웹 문서에서 확인할 수 있다.

JavaScript에서 비동기 처리를 위해 사용되는 Async/Await는 비동기 코드를 동기적으로 작성할 수 있는 아주 유용한 방법이다. Async/Await를 사용하면 복잡한 비동기 코드 흐름을 간단하게 작성할 수 있으며, 가독성과 유지보수성을 크게 향상시킬 수 있다.

이 글에서는 Async/Await의 기본 개념과 함께 실무에서 자주 사용되는 예시를 통해 비동기 처리를 효과적으로 구현하는 방법을 알아보겠다.

Async/Await의 기본 개념

Async 함수는 항상 Promise를 반환하며, Await 키워드는 Promise가 이행될 때까지 기다린다. 이는 비동기 작업을 동기적으로 처리하는 것처럼 보이게 하기 때문에 코드의 흐름을 이해하기 쉽게 한다.

예를 들어, 다음 코드는 두 개의 비동기 작업을 순차적으로 처리하는 방법을 보여준다:

async function fetchData() {
    const user = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const userData = await user.json();
    console.log(userData);
}

fetchData();

위 코드에서 fetch 함수는 Promise를 반환하고, Await를 사용하여 결과가 반환될 때까지 기다린다. 이렇게 하면 코드가 비동기적으로 실행되지만, 마치 동기 코드처럼 쉽게 읽을 수 있다.

실무 예시 1: API 호출

실제 애플리케이션에서 외부 API를 호출할 때 Async/Await를 사용하는 것이 일반적이다. 다음은 사용자 정보를 가져오는 API 호출 예시이다:

async function getUserInfo() {
    try {
        const response = await fetch('https://api.example.com/user');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const userInfo = await response.json();
        console.log(userInfo);
    } catch (error) {
        console.error('There was a problem with your fetch operation:', error);
    }
}

getUserInfo();

여기서 try/catch 블록을 사용하여 에러를 처리하고, response.ok를 통해 HTTP 응답 상태를 검사한다. 이 방식은 비동기 코드를 보다 안전하게 만들어 준다.

실무 예시 2: 여러 비동기 작업 처리하기

여러 개의 비동기 작업을 동시에 처리할 때는 Promise.all과 함께 Async/Await를 활용할 수 있다. 다음은 여러 API 호출을 동시에 처리하는 코드 예시이다:

async function getMultipleData() {
    try {
        const [posts, comments] = await Promise.all([
            fetch('https://jsonplaceholder.typicode.com/posts'),
            fetch('https://jsonplaceholder.typicode.com/comments')
        ]);

        const postsData = await posts.json();
        const commentsData = await comments.json();

        console.log('Posts:', postsData);
        console.log('Comments:', commentsData);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

getMultipleData();

위 코드에서는 Promise.all을 사용하여 두 개의 API 호출을 동시에 진행한다. 이렇게 하면 각각의 Promise가 이행될 때까지 기다린 후, 결과를 한 번에 처리할 수 있다.

Async/Await 사용 시 주의사항

• Avoid Blocking: Async/Await를 사용할 때는 await를 너무 많이 사용하여 코드 실행을 차단하지 않도록 주의해야 한다.
• Handle Errors: try/catch 문을 통해 에러를 적절히 처리하는 것이 중요하다.
• Returning Promises: Async 함수는 항상 Promise를 반환하므로, 반환 값을 적절히 관리해야 한다.

이처럼 Async/Await를 활용하면 비동기 코드를 보다 간결하고 이해하기 쉽게 작성할 수 있다. 자세한 사항은 공식 문서에서 추가 정보를 확인할 수 있다.

더불어, 비동기 처리와 관련된 다양한 주제를 다룬 Jest를 이용한 React 컴포넌트 테스트 방법과 실무 예시와 같은 글도 참고하면 좋다.

자주 묻는 질문

Async/Await의 장점은 무엇인가요?

Async/Await는 비동기 코드를 동기 코드처럼 작성할 수 있게 해주며, 코드 가독성을 향상시킨다. 또한, 에러 처리가 용이하고, 복잡한 비동기 작업을 관리하기 쉽게 만들어준다.

Promise와 Async/Await의 차이점은 무엇인가요?

Promise는 비동기 작업의 완료를 나타내는 객체이며, Async/Await는 이러한 Promise를 더 간결하게 다룰 수 있게 해주는 문법이다. Async/Await는 코드의 흐름을 더 직관적으로 만들어준다.

Async/Await를 사용하면 성능이 저하되나요?

Async/Await 자체가 성능을 저하시키지는 않지만, await 사용 시 다른 비동기 작업들이 차단될 수 있다. 따라서, 필요에 따라 적절하게 사용해야 한다.

Async/Await를 지원하지 않는 브라우저는 어떤 것이 있나요?

대부분의 최신 브라우저는 Async/Await를 지원하지만, 구버전의 브라우저에서는 지원하지 않을 수 있다. 따라서, 필요한 경우 Babel과 같은 트랜스파일러를 사용하여 호환성을 확보해야 한다.

Async/Await를 사용할 때 메모리 누수에 주의해야 하나요?

비동기 작업이 중첩될 경우 메모리 누수가 발생할 수 있으므로, 사용하지 않는 리소스를 해제하거나 적절한 범위 내에서 변수를 사용해야 한다.

정리 및 다음 단계

• Async/Await는 비동기 코드를 동기적으로 작성할 수 있게 해준다.
• 실무에서 API 호출 및 여러 비동기 작업을 동시에 처리하는 데 유용하다.
• 적절한 에러 처리가 중요하며, 공식 문서를 참고하여 최신 정보를 확인하자.

다음 단계로는 본인의 프로젝트에서 Async/Await를 적용해보며 직접 실습해보는 것을 추천한다.

젠킨스로 롤백 파이프라인을 만들 때 가장 먼저 넣어야 할 것은 백업 목록 조회가 아니라, 롤백 직전 상태를 저장하는 스냅샷이다. 이 단계가 없으면 되돌린 결과가 더 나빠졌을 때 돌아갈 곳이 사라진다. 파일을 덮어쓰기 전에 현재 배포본을 백업 폴더에 먼저 넣는 것만으로 위험이 크게 줄어든다.

배포 파이프라인은 대부분 새 산출물을 올리기 전에 기존 산출물을 백업한다. 그런데 롤백 파이프라인 자체는 그 백업을 만들지 않는 경우가 많다. 롤백은 한 번만 한다고 가정하기 때문이다.

젠킨스 파이프라인 통합 3부작의 마지막 글이다. 실제로 검증까지 마친 구성을 기준으로 정리했고, 서버 정보는 가명으로 바꿨다.

되돌릴 수 없는 롤백이 만들어지는 지점

일반적인 롤백 로직은 배포 디렉터리를 비우고 선택한 백업을 풀어 넣는다. 이 순간 직전까지 돌던 산출물은 사라진다. 배포 이력에 남아 있으니 다시 배포하면 된다고 생각하기 쉽지만, 급한 장애 상황에서 소스를 다시 빌드하는 것과 파일을 되돌리는 것은 걸리는 시간이 다르다.

더 흔한 상황은 롤백 대상을 잘못 고르는 경우다. 백업 파일명만 보고 고르는데, 이름과 내용의 관계가 직관적이지 않으면 한 칸 위아래를 착각한다. 배포 백업은 보통 새 커밋 정보로 이름을 짓지만 내용은 그 커밋을 올리기 직전 상태다. 이름과 내용이 한 세대 어긋나 있는 셈이다.

그래서 롤백 실행 직전에 현재 상태를 한 번 더 백업하도록 했다. 잘못 골랐다는 걸 알아차렸을 때 그 스냅샷을 다시 고르면 원래대로 돌아온다.

롤백 직전 스냅샷을 남기는 방법

스냅샷은 일반 배포 백업과 같은 형식과 같은 경로로 저장하는 것이 중요하다. 그래야 다음 롤백의 선택 목록에 자연스럽게 나타난다. 형식만 다르게 저장하면 목록 필터에 걸리지 않아 정작 필요할 때 고를 수 없다.

def name = "${appName}_${timestamp}_prerollback.${ext}"

// 배포된 내용이 없으면 백업할 대상도 없다
def hasContent = sshCommand(remote: remote,
    command: "[ -d ${sourceDir} ] && [ -n \"\$(ls -A ${sourceDir})\" ] && echo yes || echo no")
if (!hasContent.contains('yes')) { return null }

파일명에 prerollback 표시를 넣으면 목록에서 바로 구분된다. 이 이름은 다른 백업과 달리 생성 시각이 곧 그 상태의 시점이라 해석에 혼동이 없다는 장점도 있다.

배포된 내용이 없을 때 빈 압축 파일을 만들지 않도록 확인 단계를 두었다. 신규 프로젝트나 배포 실패 직후에는 디렉터리가 비어 있을 수 있다. 스냅샷 파일명은 빌드 설명에 남겨두면 나중에 이력을 따라가기 쉽다.

Tomcat처럼 압축이 풀린 채 배포되는 경우

Spring Boot 실행형 WAR이나 정적 파일 배포는 디렉터리를 그대로 압축하면 되지만, Tomcat 방식은 사정이 다르다. 배포 시점에 WAR을 webapp/에 풀어놓기 때문에 서버에는 압축이 해제된 디렉터리만 남는다.

여기서 선택지가 갈린다. 디렉터리를 tar.gz로 묶으면 만들기는 쉽지만 확장자가 달라져서 롤백 목록에 나타나지 않는다. 그래서 해제된 디렉터리를 다시 WAR로 묶는 쪽을 택했다.

cd ${webRoot}
jar -cf ${backupDir}/${name} . || zip -qr ${backupDir}/${name} .

jar 명령이 없는 환경을 대비해 zip으로 대체하도록 했다. 이렇게 만든 파일은 일반 배포 백업과 구분되지 않으므로 기존 복원 로직을 그대로 태울 수 있다. 복원 경로를 따로 만들지 않아도 되는 점이 이 방식의 실질적 이득이다.

검증할 때는 이 경로를 반드시 두 번 확인해야 한다. 스냅샷이 만들어지는 것과 그 스냅샷으로 실제 복원이 되는 것은 다른 문제다. 재패키징한 WAR로 복원해 정상 기동까지 확인해야 안전장치가 동작한다고 말할 수 있다.

백업 선택을 빌드 중간이 아니라 시작 화면에서

초기 구성에서는 파이프라인 중간에 input 스텝으로 백업 파일을 골랐다. 서버에서 목록을 조회한 뒤 선택지를 띄우는 방식이라 구현이 간단하다. 문제는 선택하기 전까지 빌드가 실행 중 상태로 남아 있다는 점이다.

실행 슬롯을 계속 점유하고, 화면상으로는 멈춘 것처럼 보인다. 선택을 잊으면 며칠씩 대기하는 빌드가 쌓인다. 두 가지를 바꿨다. 하나는 input에 timeout을 거는 것이고, 다른 하나는 선택 시점을 빌드 시작 전으로 옮기는 것이다.

파라미터 방식으로 옮기려면 잡 설정 스크립트가 배포 서버에 접속해 백업 목록을 읽어야 한다. 이 스크립트는 파이프라인이 아니라 컨트롤러에서 실행되므로 sshCommand 같은 파이프라인 스텝을 쓸 수 없다. 대신 JSch 라이브러리로 직접 접속했다. 에이전트 구성이 컨트롤러 하나뿐이라면 이미 배포 서버와 통신이 되는 환경이므로 추가 설정 없이 동작한다.

두 방식 중 하나만 고를 필요는 없다. 목록 조회에 실패하면 안내 문구가 파라미터 값으로 넘어오는데, 이 값이 유효한 파일명이 아니면 기존 input 방식으로 넘어가도록 했다. 새 방식이 동작하지 않아도 롤백은 가능한 상태가 유지된다.

자주 묻는 질문

스냅샷을 계속 만들면 디스크가 부족해지지 않나요

보존 정책이 없으면 실제로 문제가 됩니다. 백업 하나가 수십 MB를 넘는 경우가 흔해서 몇 달치가 쌓이면 무시하기 어려운 용량이 됩니다. 개수 기준이나 기간 기준으로 오래된 백업을 정리하는 단계를 파이프라인 끝에 두는 것이 좋습니다.

롤백 후에 정상 동작했는지 어떻게 확인하나요

프로세스 존재 여부만 확인하면 기동 도중 실패한 경우를 놓칩니다. 애플리케이션 포트가 실제로 리스닝 상태인지 함께 확인하면 검증 정확도가 올라갑니다. 두 조건 중 하나라도 만족하면 통과시키는 방식이 재기동 지연에도 견딥니다.

배포 잡에서 롤백까지 처리하면 안 되나요

분리하는 편이 낫습니다. 롤백은 장애 상황에서 실행되는데, 배포 잡에 섞여 있으면 빌드 단계를 거치느라 시간이 걸리고 파라미터도 복잡해집니다. 소스를 다시 빌드하지 않고 파일만 되돌리는 것이 롤백의 목적입니다.

운영 롤백에도 같은 잡을 쓰면 되나요

환경 선택을 파라미터로 두면 잘못 고를 여지가 생기므로 개발용과 운영용 잡을 나누는 편이 안전합니다. 운영 잡에는 대상과 파일명을 표시하는 확인 단계를 한 번 더 두면 실행 직전에 검토할 기회가 생깁니다.

정리와 점검 순서

• 롤백 파이프라인의 첫 단계는 롤백 직전 스냅샷이다
• 스냅샷은 기존 백업과 같은 형식으로 저장해 같은 복원 경로를 타게 한다
• 선택 대기는 빌드 시작 전으로 옮기고, 남겨둘 때는 timeout을 건다

검증은 배포 방식별로 각각 두 번씩 해보는 것을 권한다. 백업으로 되돌린 뒤, 그때 생성된 스냅샷으로 다시 되돌려 원래 상태가 복구되는지 확인하면 안전장치가 실제로 동작하는지 알 수 있다. 파이프라인 스텝 문법은 Jenkins 공식 문서에서 확인할 수 있다.

Vue Router의 동적 라우팅은 URL에 따라 동적으로 컴포넌트를 렌더링하는 기능으로, 사용자 경험을 개선하는 데 유용하다. 이 기능을 활용하면 프로그래밍적으로 라우트를 정의하고, 다양한 매개변수를 통해 페이지를 동적으로 생성할 수 있다. 이 글에서는 Vue Router의 동적 라우팅 설정 방법과 실무에서의 활용 예제를 살펴본다.

동적 라우팅을 구현하기 위해서는 먼저 Vue 프로젝트에 Vue Router를 설치하고 기본적인 라우터 설정을 해야 한다. 이후 동적 라우트를 설정하고, 해당 라우트에서 데이터를 가져오는 방법을 알아보겠다.

Vue Router 설치 및 기본 설정

Vue Router를 설치하려면 다음 명령어를 터미널에 입력한다:

npm install vue-router

설치가 완료되면, main.js 파일을 다음과 같이 수정하여 Vue Router를 사용하도록 설정한다:

import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

createApp(App).use(router).mount('#app');

동적 라우팅 설정하기

동적 라우팅을 설정하기 위해서는 URL 경로의 일부를 변수로 정의해야 한다. 예를 들어, 사용자 프로필 페이지를 동적으로 생성하고 싶다면 다음과 같이 설정할 수 있다:

const routes = [
    { path: '/user/:id', component: UserProfile }
];

위의 코드에서 :id는 URL 매개변수로, 사용자의 ID를 동적으로 받아오는 역할을 한다.

동적 라우팅의 실무 활용 예제

실무에서 동적 라우팅을 활용하는 예제 두 가지를 살펴보자.

예제 1: 사용자 프로필 페이지

사용자 프로필 페이지에서는 사용자의 ID에 따라 다른 데이터를 표시해야 한다. 다음은 사용자 데이터를 가져오는 방법을 보여주는 코드이다:

import { ref } from 'vue';
import { useRoute } from 'vue-router';

export default {
    setup() {
        const route = useRoute();
        const userId = route.params.id;
        const userData = ref({});

        fetch(`https://api.example.com/users/${userId}`)
            .then(response => response.json())
            .then(data => {
                userData.value = data;
            });

        return { userData };
    }
};

이 예제에서는 useRoute 훅을 사용하여 현재 라우트의 매개변수를 가져온다. 이를 통해 API에서 사용자 데이터를 동적으로 가져와 화면에 표시할 수 있다.

예제 2: 블로그 포스트 페이지

또 다른 예제로는 블로그 포스트를 보여주는 페이지를 들 수 있다. 블로그 포스트의 ID에 따라 내용을 다르게 렌더링할 수 있다:

const routes = [
    { path: '/post/:postId', component: BlogPost }
];

export default {
    setup() {
        const route = useRoute();
        const postId = route.params.postId;
        const post = ref({});

        fetch(`https://api.example.com/posts/${postId}`)
            .then(response => response.json())
            .then(data => {
                post.value = data;
            });

        return { post };
    }
};

이와 같이 동적 라우팅을 활용하면, 매번 새로운 컴포넌트를 생성할 필요 없이 유연하게 페이지를 관리할 수 있다.

주의사항

동적 라우트를 사용할 때는 항상 매개변수의 유효성을 검증하는 것이 중요하다. 잘못된 ID로 API 요청을 보낼 경우 오류가 발생할 수 있으므로, 예외 처리를 적절히 구현해야 한다.

자주 묻는 질문

동적 라우팅을 설정할 때 주의해야 할 점은 무엇인가요?

동적 라우팅을 설정할 때는 매개변수의 유효성을 항상 검증해야 합니다. 잘못된 값을 사용할 경우, API 요청에 실패할 수 있습니다.

Vue Router의 동적 라우팅은 어떤 상황에서 유용한가요?

동적 라우팅은 사용자 프로필, 블로그 포스트, 상품 상세 페이지 등 URL에 따라 다른 데이터를 보여줘야 하는 상황에서 매우 유용합니다.

동적 라우팅을 사용할 때 성능상 고려해야 할 점은 무엇인가요?

동적 라우팅을 사용할 때는 필요한 데이터만 가져오고, 불필요한 리로딩을 방지하는 것이 중요합니다. 또한, 데이터 요청을 최적화하여 성능을 향상시킬 수 있습니다.

마무리

• Vue Router의 동적 라우팅을 통해 유연한 URL 처리와 컴포넌트 렌더링이 가능하다.
• 실무에서 사용자 프로필이나 블로그 포스트와 같은 다양한 페이지를 동적으로 생성할 수 있다.
• 항상 매개변수의 유효성을 검증하고 예외 처리를 통해 안정성을 높여야 한다.

이제 Vue Router의 동적 라우팅에 대해 구체적인 예제를 통해 이해했으니, 실무에서 직접 적용해보면 좋겠다.