이 내용은 nginx를 쓰고 있는 가상서버에서는 공통적으로 가능한 ssl 세팅입니다.

1. SSL 인증서 파일 준비하기

일반적인 웹사이트의 경우, SSL 인증서를 구매하거나 Let's Encrypt 같은 무료 서비스에서 발급받아 다음과 같은 파일들을 준비합니다:

  • ssl.crt 또는 certificate.crt: SSL 인증서 파일
  • ssl.key 또는 private.key: 프라이빗 키 파일

 

2. 필요한 디렉토리 생성하기

# 해당하는 폴더를 만듭니다.
sudo mkdir -p /etc/ssl/certs
sudo mkdir -p /etc/ssl/private

 

3. 인증서와 키 파일 복사 및 권한 설정

# 준비된 crt와 key 파일에 대한 권한을 설정합니다.
# 보통 filezilla를 통해 파일을 업로드한 뒤 작업합니다.
sudo chmod 644 /etc/ssl/certs/ssl.crt
sudo chmod 600 /etc/ssl/private/ssl.key

 

4. 암호화된 키 파일 처리하기

키 파일에 암호가 설정되어 있다면, 서버 재시작시 자동으로 SSL이 적용되도록 암호를 제거합니다:

# 원본 키 파일 백업
cp /etc/ssl/private/ssl.key /etc/ssl/private/ssl.key.orig

# 암호 없는 키 파일로 변환
openssl rsa -in /etc/ssl/private/ssl.key.orig -out /etc/ssl/private/ssl.key

# 적절한 권한 다시 설정
chmod 600 /etc/ssl/private/ssl.key

 

5. Nginx 설정 파일 수정하기

웹사이트의 설정 파일을 수정합니다:

# nginx의 경우 sites-available 에서 http, https 등의 블록을 위해 파일을 손봐야합니다.
# 파일의 경로가 꼭 이렇진 않습니다. sites-available만 참고해주세요
vim /etc/nginx/sites-available/{YOUR-WEBSITE}

- 일반적인 웹사이트의 Nginx 설정 예시:

# HTTP 설정 - HTTPS로 리다이렉트
server {
    listen 80;
    server_name example.com www.example.com;
    
    # HTTPS로 리다이렉트
    location / {
        return 301 https://$host$request_uri;
    }
}

# HTTPS 설정
server {
    listen 443 ssl;
    server_name example.com www.example.com;

    # SSL 인증서 설정
    ssl_certificate /etc/ssl/certs/ssl.crt;
    ssl_certificate_key /etc/ssl/private/ssl.key;

    # SSL 프로토콜 설정
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384;
    
    # 정적 파일이 있는 루트 디렉토리 설정
    root /var/www/html;
    index index.html index.htm index.php;
    
    # 기본 위치 설정
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    # PHP 처리 설정 (PHP 사용 시)
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock; # PHP 버전에 맞게 수정
    }
    
    # 접근 로그와 에러 로그 위치
    access_log /var/log/nginx/example.com-access.log;
    error_log /var/log/nginx/example.com-error.log;
}

 

6. Nginx 설정 테스트 및 재시작

# 설정이 올바른지 테스트
nginx -t

# 설정이 올바르면 Nginx 재시작
systemctl restart nginx

 

7. 방화벽 설정 확인 (필요한 경우)

# UFW 방화벽 사용 시, HTTPS 포트 개방
sudo ufw allow 443/tcp

 

8. 확인 및 문제 해결

웹 브라우저에서 https://example.com으로 접속하여 SSL이 제대로 적용되었는지 확인합니다. 주소 표시줄에 자물쇠 아이콘이 표시되면 성공적으로 적용된 것입니다.

문제가 발생한 경우 다음 로그 파일을 확인합니다:

# Nginx 오류 로그 확인
tail -n 100 /var/log/nginx/error.log

 

이런 과정으로 가상서버에서 호스팅하는 웹사이트에 SSL을 적용하는 과정이 완료되었습니다.

가비아나 AWS에서는 간편하게 설정할 수 있었고, 자동으로 적용이 되었던 부분인데

SSL을 신청 받고 /.well-known/pki-validation/ 에 http 인증용 파일을 올렸는데도 발급이 안돼서 무슨 문제인가 했어요

다른 분들에게도 도움이 되었으면 좋겠습니다

 들어가며

최근 프로젝트에서 특정 텍스트를 블러 처리해야 하는 요구사항이 있었습니다. 처음에는 단순히 모자이크 효과만 생각했는데, CSS만으로도 여러 가지 흥미로운 방법이 있다는 걸 알게 되었습니다. 이전에는 텍스트를 감싸는 div를 relative로 만들고 그 안에 absolute, z-index 등을 조정한 반투명한 레이어를 올리는 식으로 구현했었는데 다른 방법이 없나 찾아보다가 공부하게 되었습니다.

 text-shadow로 블러 효과 구현하기

가장 먼저 시도해본 방법은 text-shadow와 color: transparent를 조합하는 것이었습니다:

<style>
.blur-text {
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</syle>

...

<div class="blur-text">이 텍스트는 블러 처리됩니다.</div>

...

이 방식의 특징은:

  1. 텍스트 자체는 투명하게 처리하고
  2. 그림자 효과로 블러된 모양을 만듭니다
  3. text-shadow의 세 번째 값(blur-radius)을 조절해서 블러 강도를 조절할 수 있습니다

 

 text-shadow의 응용

다른 활용방법은 없나 찾아보다가 예제를 만들어보게 되었습니다.

/* 네온 사인 효과 */
.neon-text {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #0ff,
    0 0 40px #0ff;
}

/* 텍스트 외곽선 효과 */
.outline-text {
  color: white;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

text-shadow의 값들을 여러 번 지정하면 레이어처럼 쌓이는 효과를 만들 수 있습니다.

네온 사인 효과의 경우:
1. 가장 안쪽부터 바깥쪽으로 점점 커지는 흰색 그림자(0 0 5px #fff, 0 0 10px #fff)로 빛나는 듯한 느낌을 주고
2. 그 위에 하늘색 그림자(0 0 20px #0ff, 0 0 40px #0ff)를 더해 네온 특유의 번짐 효과를 만듭니다

외곽선 효과는 좀 더 재미있는 접근인데요:
1. 텍스트의 상하좌우 네 방향에 1px 크기의 검정 그림자를 배치해서
2. 마치 텍스트에 외곽선을 그린 것처럼 보이게 만듭니다

 

 

 filter: blur 활용하기

/* 기본 블러 */
.blur-element {
  filter: blur(5px);
}

/* 블러와 밝기 조절 */
.blur-and-dark {
  filter: blur(3px) brightness(80%);
}

/* 여러 필터 조합하기 */
.filter-combo {
  filter: blur(2px) brightness(150%) grayscale(50%);
}

filter 속성은 포토샵의 필터처럼 다양한 시각적 효과를 줄 수 있습니다:

기본 블러의 경우:
- blur(5px)는 요소를 마치 핀트가 안 맞는 사진처럼 흐릿하게 만듭니다
- 픽셀값이 클수록 더 흐릿해집니다 블러와 밝기를 조절한 경우:
- blur(3px)로 약간의 흐림 효과를 주고
- brightness(80%)로 전체적인 밝기를 20% 낮춰서
- 마치 서리유리를 통해 보는 것 같은 효과를 만듭니다

필터 조합의 경우:
- blur(2px)로 살짝 흐리게 하고
- brightness(150%)로 밝기를 50% 높이고
- grayscale(50%)로 컬러를 절반만 남겨서
- 마치 빛에 바랜 듯한 효과를 만들어냅니다 이렇게 여러 필터를 조합하면 단순한 블러 이상의 다양한 효과를 만들 수 있습니다.

 예제 통합

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
    }
    
    .demo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin: 20px 0;
    }
    
    .demo-item {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }
    
    .demo-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }
    
    .blur-text {
      color: transparent;
      text-shadow: 0 0 5px rgba(0,0,0,0.5);
      font-size: 20px;
    }
    
    .neon-text {
      color: #fff;
      text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #0ff,
        0 0 40px #0ff;
      font-size: 20px;
      background: #333;
      padding: 10px;
    }
    
    .outline-text {
      color: white;
      text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
      font-size: 20px;
      background: #f0f0f0;
    }
    
    .blur-element {
      filter: blur(5px);
      font-size: 20px;
    }
    
    .blur-and-dark {
      filter: blur(3px) brightness(80%);
      font-size: 20px;
    }
    
    .filter-combo {
      filter: blur(2px) brightness(150%) grayscale(50%);
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h2>CSS 블러 효과 데모</h2>
  
  <div class="demo-grid">
    <div class="demo-item">
      <div class="demo-label">text-shadow 블러</div>
      <div class="blur-text">안녕하세요</div>
    </div>
    
    <div class="demo-item">
      <div class="demo-label">네온 효과</div>
      <div class="neon-text">네온사인</div>
    </div>
    
    <div class="demo-item">
      <div class="demo-label">외곽선 효과</div>
      <div class="outline-text">외곽선</div>
    </div>
    
    <div class="demo-item">
      <div class="demo-label">filter: blur()</div>
      <div class="blur-element">블러 필터</div>
    </div>
    
    <div class="demo-item">
      <div class="demo-label">blur + brightness</div>
      <div class="blur-and-dark">블러 + 어둡게</div>
    </div>
    
    <div class="demo-item">
      <div class="demo-label">여러 필터 조합</div>
      <div class="filter-combo">필터 조합</div>
    </div>
  </div>
</body>
</html>

 

 실제 구현 결과

생각보다 네온사인은 적절히 사용하면 꽤 괜찮은 상황이 있을 것 같고

개인적인 저의 취향에는 text-shadow 블러를 가볍게 사용하거나 filter blur를 쓸 때는 brightness를 같이 사용하고 싶네요

 

각 효과의 특징과 활용법

실제로 구현해보니 각각의 방식이 장단점이 있었습니다

  1. text-shadow 방식:
    • 텍스트만 블러 처리가 필요할 때 좋습니다
    • 투명도와 그림자 강도를 조절해 다양한 효과를 낼 수 있습니다
    • 네온사인이나 외곽선 같은 특수한 효과도 만들 수 있습니다
  2. filter: blur 방식:
    • 요소 전체에 블러를 주고 싶을 때 좋습니다
      • 이미지에 대한 블러라던지 페이지 자체에 대한 블러처리에선 더 간편하게 줄 수 있습니다.
    • brightness, grayscale 등 다른 필터와 조합이 가능합니다
    • 블러 정도를 픽셀 단위로 정확하게 조절할 수 있습니다

※ 본 포스팅은 개인 기록용으로 반응형 웹에서 이미지나 요소의 비율을 유지하는 방법에 대해 고민하다가 알게된 내용을 정리한 것입니다. 혹시나 저와 비슷한 고민을 하시는 분이 계실까봐 기록으로 남깁니다.

 aspect-ratio로 반응형 웹에서 요소의 비율 유지하기

 

 들어가며

최근 캐러셀(슬라이더) 컴포넌트를 만들면서 이미지의 비율을 어떻게 유지할지 고민이 많았습니다. 처음에는 단순히 width와 height를 픽셀로 고정하거나 퍼센트(%)로 지정했는데, 이게 생각보다 쉽지 않더라구요. 고정 픽셀을 사용하면 모바일에서 깨지고, 퍼센트만 사용하면 부모 요소의 크기에 따라 이미지가 찌그러지는 문제가 있었습니다. div를 여러 개 중첩해서 해결할 수도 있겠지만, 성능 이슈가 걱정되었죠. 그러다 발견한 게 바로 `aspect-ratio` CSS 속성입니다. 

 

 aspect-ratio란?

`aspect-ratio`는 요소의 가로세로 비율을 설정하는 CSS 속성입니다. 예를 들어 16:9 비율을 유지하고 싶다면 다음과 같이 작성할 수 있습니다: 

element { aspect-ratio: 16/9; }

 

실제 사용 예시 - 기존 제가 했던 캐러셀 구현 방식의 문제점

처음에는 이런 식으로 구현했습니다

.carousel-wrapper {
  width: 100%;
  position: relative;
}

.carousel-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 비율을 위한 padding hack */
  position: relative;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
...

<div class="carousel-wrapper">
  <div class="carousel-container">
    <div class="carousel-item">
      <div class="carousel-image-wrapper">
        <img src="image1.jpg" class="carousel-image" alt="" />
      </div>
    </div>
    <!-- 추가 슬라이드 아이템들... -->
  </div>
</div>

...

여기에서 저는 처음에는 구현이 일단 됐기 때문에 다른 작업을 하다가

실제로 api 연결을 하고 사진이 많아졌을 때 컴포넌트가 버벅거리는 경험을 하게 되었습니다.

그래서 코드를 점검해보고 고민해보는 시간을 갖게 되었고 제가 내렸던 이 방식의 문제점은

  1. div가 너무 많이 중첩됩니다 (wrapper -> container -> item -> image-wrapper -> image)
  2. position: absolute를 사용해야 하는 등 복잡한 position 설정이 필요합니다
  3. padding hack(padding-bottom: 56.25%)을 사용해야 해서 코드가 직관적이지 않습니다
  4. DOM 요소가 많아져서 성능에 영향을 줄 수 있습니다

였고 어떤 식으로 최적화 및 html 요소를 줄일 수 있을지 찾아보았습니다.

 

 aspect-ratio를 활용한 개선된 구현

이걸 aspect-ratio를 사용하면 훨씬 단순화할 수 있었습니다:

.carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  width: 100%;
  aspect-ratio: 16/9;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="carousel">
  <div class="carousel-item">
    <img src="image1.jpg" class="carousel-image" alt="" />
  </div>
  <!-- 추가 슬라이드 아이템들... -->
</div>

 

단순히 계산해도 원래는
캐러셀 랩퍼 > 컨테이너 > 아이템 > 아이템 랩퍼 순으로 4뎁스나 필요했었는데

개선된 코드에서는 랩퍼 없이 캐러셀, 캐러셀 아이템 만으로 엄청 간소화되었습니다.

더 좋은 방법이 있지 않을까 고민하지 않고 아는 지식만으로 구현하려 했었기 때문에

무지에서 발생한 성능저하였고, 지금 구현은 된다고 하더라도 내가 하는게 최선인지 의심해보던 초심을 몇개월동안 잃어버렸던 것 같은데 포스팅할 좋은 경험이 되었습니다.

본 포스팅은 제가 참여한 세션에 대한 정리 및 생성형 ai 테스팅을 위한 포스팅입니다.

생성형 ai로는 클로드 3.5 를 사용했고 원본 필기 내용은 포스팅하지 않았습니다.

 

# 2024 IF 카카오 컨퍼런스 리뷰: AI 혁신과 안전성의 균형

카카오가 2024년 IF 카카오 컨퍼런스를 통해 자사의 AI 전략과 새로운 서비스들을 공개했습니다. 이번 컨퍼런스의 핵심은 AI 기술 혁신과 안전성 확보의 균형이었습니다. 주요 발표 내용을 세션별로 정리해보았습니다.

## 1. 오프닝 키노트: 카카오의 AI 생태계 전략

### 관계 기반의 서비스 확장
- 카카오는 '나 > 친구 > 지인 > 비지인 > 비즈니스'로 이어지는 관계 생태계를 구축
- 카카오로그인, 카카오싱크 API를 통한 연결성 강화
- 대체 불가능한 사용자 경험 제공에 중점

### 새로운 AI 어시스턴트, Kanana(카나나)
- 모델 오케스트레이션 방식 채택: 내부 모델, 오픈소스 모델, 비공개 모델 통합 운영
- 질문 분석을 통한 최적 AI 모델 선택으로 비용 효율성 확보
- 개인화된 AI 메이트 기능 제공
  - 개인 메이트 '나나'와 그룹 메이트 '카나' 구분
  - 그룹 대화방에서 문맥을 파악하고 자연스러운 대화 참여
  - 음성 기반 대화 및 핸즈프리 모드 지원
  - PDF 등 각종 문서 분석 기능
  - 음악 플레이리스트 추천 기능
- 연말 사내 테스트 버전 출시 예정

### 주요 기술 혁신
- "페이크 시그널" 탑재로 안티어뷰징 시스템 고도화
- IP 기반 음성 생성 AI 도입
- 감정 기반 목소리 생성 기능 구현
- AI 커머스 MD 기능으로 관계 기반 커머스 강화

### 카나나 앱의 특별한 기능
- 핸즈프리 모드: 음성으로 모든 메시지 확인 및 응답 가능
- 디바이스 간 완벽한 동기화로 대화 백업 제공
- 초대 링크 기반의 그룹 커뮤니케이션 시스템
- 메시지별 의미있는 기억 보존 기능

## 2. AI Safety: 안전한 AI를 향한 노력

### AI Safety Initiative
- 3대 핵심 가치: 안전, 혁신, 포용
- AI 윤리원칙 및 리스크 관리 사이클 운영
- AI Action Summit 및 국가 인공지능위원회 출범과 연계
- AI Seoul Summit 참여를 통한 국제 협력 강화

### 책임있는 AI를 위한 8대 가이드라인
1. 사회윤리
2. 비차별과 비편향
3. 포용성
4. 투명성
   - AI 기술 활용 목적 명시
   - AI 사용 영역 명확한 알림
   - 위험 요소 사전 고지
5. 보안과 안전
6. 인권
7. 프라이버시
8. 이용자보호

### AI 리스크 유형 분류
- AI 주체 리스크
  - 기술적 리스크: 모델 불완전성
  - 장기적 리스크: 통제 불가능성, 자가발전 위험
- 인간 주체 리스크
  - 윤리적 리스크
  - 적극적 악용 및 수동적 부주의 사례 관리

## 3. Personalized 모델: KOLLAGE

### 이미지 생성 기술 혁신
- 텍스트-이미지 변환(Text to Image) 기술 적용
- 디퓨저 모델 기반의 점진적 이미지 생성
- FLUX.1.PRO 모델 도입으로 고품질 이미지 생성
- ControlNet과 LoRA 활용한 다양한 스타일 구현

### 기술적 특징
- 인스턴트부스 기반 아이덴티티 정보 학습
- 글로벌 임베딩과 패치 임베딩 결합
- SISI 데이터셋과 SIMI 데이터셋 활용
  - SISI: 단일 인물 이미지 데이터셋
  - SIMI: 다양한 각도/표정의 동일인물 데이터셋
- 영상 기반 데이터셋 구축으로 학습 데이터 확보

### 안전성 확보 방안
- 비가시성 워터마크 적용
- 얼굴 위변조 탐지 기술 도입
- 부적절 콘텐츠 필터링 시스템 구축
- 불법촬영물 신고 및 모니터링 시스템 구축

## 4. 사내 AI 봇 개발 사례

### RAG 아키텍처 활용
- 위키 기반 정보 관리 시스템
- 정보 처리 프로세스
  1. 정보수집
  2. 정보가공
  3. 정보생성
  4. 정보검토
- 하이브리드 검색 방식 도입
  - 렉시컬 서치: 키워드 기반 검색
  - 시멘틱 서치: NLP 기반 문맥 고려 검색
  - 상위 3개 응답 제공 시스템

### LLM 개발 전략
- Task별 전문 모델 구축
  - 테이블 위치/설명
  - SQL 생성
  - 일상 질문 응답
- LoRA Adaptor 활용으로 메모리 효율화
- 대화 히스토리 최적화 관리
  - 맥락 기반 히스토리 관리
  - 새로운 맥락 시 과거 히스토리 삭제
  - 연속된 맥락 시 히스토리 참조

### 실제 활용 사례
- 개발자, 기획자, 디자이너 간 업무 시간대 차이 극복
- 부재중에도 데이터 기반 응답 제공
- 과거 작업물에 대한 즉각적인 질의응답 지원

## 마치며

2024 IF 카카오 컨퍼런스는 AI 기술의 혁신과 안전성 확보라는 두 가지 목표를 동시에 추구하는 카카오의 방향성을 잘 보여주었습니다. 특히 개인화된 AI 서비스인 Kanana의 출시 준비와 함께, AI Safety Initiative를 통한 책임있는 AI 개발 노력이 돋보였습니다. 

"미래를 예측하는 가장 좋은 방법은 미래를 창조하는 것"이라는 컨퍼런스의 메시지처럼, 카카오는 안전하고 혁신적인 AI 서비스로 새로운 미래를 만들어가고 있습니다. 앞으로 카카오가 이러한 비전을 어떻게 실현해 나갈지 주목됩니다.

 

생각보다 두서 없이 내용들을 적은 것들도 최근 모델들은 맥락을 파악해서 재배치하는 능력이 우수한 것으로 보이네요

정리할 때 많이 유용할 것 같다는 생각이 듭니다.

다만, 내용을 숙지하지 못한 상태에서 너무 의존하게 되면 글은 생성을 했지만 내가 이해하지 못할 수도 있겠다는 경각심도 드는 하루였습니다.

안녕하세요! 오늘은 JavaScript를 사용하여 달력을 구현하는 방법을 알아보겠습니다. 달력은 웹 개발에서 흔히 사용되는 UI 요소이며, 다양한 기능을 구현하는 데 활용될 수 있습니다.

1. 요일 계산

달력을 만들기 위해서는 먼저 각 달의 1일이 어느 요일인지 알아야 합니다. 이를 위해 getFirstDayIndex 함수를 정의합니다.

const getFirstDayIndex = (year, month) => {
  return (new Date(year, month, 1).getDay() + 6) % 7;
};

이 함수는 다음과 같이 작동합니다.

  1. new Date(year, month, 1): 해당 년, 월의 1일을 나타내는 Date 객체를 생성합니다.
  2. .getDay(): Date 객체의 요일을 가져옵니다. (0: 일요일, 1: 월요일, ..., 6: 토요일)
  3. + 6: 요일 값을 0부터 시작하도록 변환합니다.
  4. % 7: 7로 나눈 나머지를 계산하여 0부터 6 사이의 값을 얻습니다.

예를 들어, 2024년 3월 1일은 수요일입니다. 따라서 getFirstDayIndex(2024, 2) 함수는 3을 반환합니다.

 

2. 날짜 수 계산

다음으로 각 달의 날짜 수를 계산해야 합니다. 이를 위해 getDaysInMonth 함수를 정의합니다.

export const getDaysInMonth = (year, month) => {
  return new Date(year, month + 1, 0).getDate();
};

이 함수는 다음과 같이 작동합니다.

  1. new Date(year, month + 1, 0): 해당 년, 월의 다음 달의 0일을 나타내는 Date 객체를 생성합니다.
  2. .getDate(): Date 객체의 날짜를 가져옵니다.

예를 들어, 2024년 3월은 31일입니다. 따라서 getDaysInMonth(2024, 2) 함수는 31을 반환합니다.


달력도 고도화할 수 있는 여지가 많으며 구현 방법도 가지각색입니다. 다음 포스팅에서는 완성된 달력의 예시를 가져오면서 어떤 코드가 추가로 들어가는지 서술하겠습니다.

분석 용으로 받은 프로젝트가 5년 전의 레거시인 탓에 ubuntu의 버전이 상당히 낮은 버전이었고,
14, 16 버전으로는 테스팅이 되었지만 18 버전 이후로는 테스트가 된적이 없었다.
현재 microsoft shop 을 통해 다운 받을 수 있는 우분투는 18 20 22 등이 쉬운 편인데, 
그 밑으로 다운 그레이드는 생각보다 많은 시간이 소요될 것 같아 18 환경에서 돌려보기로 결정했고
프로젝트 분석을 하던 와중에... 예기치 못한 문제에 마주치게 되었다. 

>>> /etc/sudoers: syntax error near line 30 <<<

sudo: parse error in /etc/sudoers near line 30
sudo: no valid sudoers sources found, quitting
sudo: unable to initialize policy plugin

이 문제가 정말 사람 골때리게 만든다...
이 문제를 아직 close 하지는 못했지만 wsl로 설치한 우분투이기에 윈도우에서 root에 접속해서 비밀번호를 바꾸고

su

이 명령을 사용해서 작업할 수 있게 만들어서 작업은 진행할 수 있었다.

처음엔 다중 리눅스 운영 체제 환경 속에서 default만 수정 되는 줄 알았는데 다음의 명령어를 치니 18.04 LTS에 접근할 수 있었다.

wsl -d Ubuntu-18.04
// 윈도우의 cmd에서 실행, 설치된 ubuntu의 18.04 환경으로 진입합니다.

여기까지 왔다면 다음에 올 명령들은 간단하다.

sudo -i
// 루트 권한으로 실행 중인 셀을 시작하기 위한 명령어

// 루트 권한으로 접속

passwd
// 비밀번호를 바꿉니다.

pkexec visudo 명령으로도

etc/sudoers 를 다시 수정할 수 없는 문제를 close 하지는 못했지만, 이 방식으로

스크립트에서 실행될 mkdir 이 문제 없어지니 컴파일 및 실행도 문제 없이 잘 되었다.

chmod 777로 sudoers의 권한을 바꿔버렸을 경우 pkexec visudo 명령으로도 해결되지 않을 때의 해결법은 

close하는대로 추가 포스팅할 예정입니다.

+ Recent posts