해나아부지 개발일지

[패스트캠퍼스] 재직자교육 InnerCircle AI 마스터 코스 OT 후기

__APPA — Mon, 23 Dec 2024 11:39:59 +0900

INNER CIRCLE AI 마스터 코스 합격!

프로젝트 중심 역량 강화의 첫걸음 평소 인공지능, 특히 생성형 AI 분야에 관심이 많았던 저는 최근 패스트캠퍼스에서 진행된 재직자 대상 InnerCircle : AI Master Course 1기에 참여하게 되었습니다. 정부 지원으로 진행되는 이 과정은 K-Digital 트레이닝의 한 과정으로 재직자라면 전액무료로 진행됩니다.(출석, 프로젝트 등 조건이 존재함) 프로젝트 중심의 역량 강화에 초점을 맞추고 있다는 점에서 큰 기대를 안고 참석했습니다. 이번 OT는 과정 전반에 대한 소개는 물론, LLM(Large Language Model)의 발전 과정과 주요 모델들을 심도 있게 다루어 매우 유익한 시간이었습니다.

OT는 먼저 과정의 전반적인 소개로 시작되었습니다. 교육 목표, 커리큘럼 구성, 프로젝트 진행 방식 등 앞으로 진행될 과정에 대한 상세한 안내가 이루어졌습니다. 특히 프로젝트 중심의 학습이라는 점이 강조되었는데, 이론적인 지식 습득뿐만 아니라 실제 프로젝트를 통해 실무 역량을 키울 수 있다는 점이 매력적으로 다가왔습니다. 또한 출결 관리 및 학습 지원 시스템에 대한 안내도 꼼꼼하게 진행되어 앞으로의 학습 과정에 대한 명확한 그림을 그릴 수 있었습니다.

이어서 LLM의 발달 과정에 대한 흥미로운 강의가 진행되었습니다. 초기 모델부터 현재의 거대 모델에 이르기까지, LLM의 역사를 한눈에 조망할 수 있었습니다. 각 모델의 특징과 장단점, 그리고 기술적인 발전 과정을 명확하게 설명해 주어 LLM에 대한 이해를 한층 높일 수 있었습니다. 특히 GPT-3, BERT 등 주요 모델들에 대한 심도 있는 분석은 매우 인상적이었습니다. 단순히 이론적인 설명에 그치지 않고, 각 모델이 가진 의미와 한계점을 명확히 짚어주어 더욱 깊이 있는 학습이 가능했습니다.

OT의 하이라이트는 Colab 환경에서 진행된 RAG(Retrieval Augmented Generation) 실습이었습니다. RAG는 외부 지식 소스를 활용하여 생성 모델의 답변 정확도를 높이는 기술로, 최근 생성형 AI 분야에서 매우 중요한 기술로 여겨지고 있습니다. 강사님의 친절한 안내에 따라 직접 코드를 실행해 보고 결과를 확인하는 과정을 통해 RAG의 작동 원리를 쉽게 이해할 수 있었습니다. 특히 OpenAI / Upstage API를 활용하여 실제 웹페이지에 있는 데이터를 활용한 실습을 통해 이론으로만 접했던 내용을 실제 현장에서 어떻게 적용할 수 있는지 가볍게 경험할 수 있었던 점이 좋았습니다.

이번 OT를 통해 앞으로 진행될 AI Master Course에 대한 기대감이 더욱 커졌습니다. 프로젝트 중심의 교육 방식과 실무 중심의 커리큘럼, 그리고 LLM에 대한 프로젝트 중심 학습은 제가 AI 분야의 전문가로 성장하는 데 큰 도움이 될 것이라고 확신합니다. 정부 지원으로 이러한 양질의 교육을 받을 수 있게 된 것에 감사하며, 앞으로의 과정에 적극적으로 참여하여 제 역량을 최대한으로 끌어올릴 계획입니다.

해당 분야에 대한 경험과 열정이 있는 사람들 위주로 선발하기 때문에(경쟁률이 높다고 합니다!) 여러 분야의 열정적인 분들과 협업 및 네트워킹의 기회 또한 될 것으로 생각됩니다. 생성형 AI 분야에 관심 있는 재직자라면 이 과정을 한 번 신청해봐도 좋을 것 같습니다.

패스트캠퍼스 이너서클 : AI 마스터 코스 OT 후기 끝!

#1 We need to streamline our operations

__APPA — Mon, 8 Apr 2024 16:18:18 +0900

"We need to streamline our operations to improve efficiency and reduce costs."

**Dialog

Mark: Hey Sarah, have you seen the latest financial report?

Sarah: Yes, I have. It seems like our expenses are higher than expected.

Mark: Exactly. That's why I think we need to streamline our operations.

Sarah: I agree. We could look into automating some processes to cut down on manual work.

Mark: That's a good idea. We also need to assess our current resources and see if we can reallocate them more effectively.

Sarah: Absolutely. Maybe we should schedule a meeting with the department heads to discuss potential strategies.

Mark: Yes, let's do that. I'll draft an agenda and circulate it to everyone.

Sarah: Sounds like a plan. We need to take proactive steps to improve efficiency and reduce costs.

Mark: Agreed. Let's aim to implement these changes within the next quarter to see tangible results.

Sarah: Definitely. I'll start gathering relevant data to support our proposals for the meeting.

Mark: Great. Thanks for your input, Sarah. Together, I'm confident we can make a positive impact on our company's performance.

#0 Can I have/get ~

__APPA — Fri, 5 Apr 2024 10:43:32 +0900

Here are 10 examples including "Can I have/get ~":

1. Can I have a glass of water, please?
2. Can I get the bill, please?
3. Can I have your attention for a moment?
4. Can I get a refill on my coffee, please?
5. Can I have some more information about the product?
6. Can I get your opinion on this matter?
7. Can I have a piece of cake, please?
8. Can I get a ticket for tonight's show?
9. Can I have a moment to think about it?
10. Can I get your assistance with this task?

Docker 자주쓰는 명령어 모음

__APPA — Tue, 28 Mar 2023 14:15:54 +0900

# 버전 체크
docker -v or docker --version

# 이미지 리스트
docker images

# 스테이터스 체크
docker ps

# 빌드
docker build -t [name] .

# 실행
docker run -dp 3000:3000 [name or id]

# 태깅 SOURCE_IMAGE[:TAG] TARGET_IMAGE[:TAG]
docker tag [source:latest] [target:1.0]

# 도커 허브 업로드 
docker push jimyeongsong/image:1.0

※ docker hub 업로드 시 이미지 이름에 계정명을 넣어줘야 push가 되기 때문에 이미지 태깅을 할 때 이미지명에

'계정명/이미지이름:태그' 식으로 target image 를 변경해준다.

docker push command

* advanced

# 멀티플랫폼 빌드환경 셋 m1 mac to ubuntu(linux) 64비트 예시
docker buildx create --platform linux/amd64,linux/arm64

# 많은 이미지와 컨테이너를 만들다보면 지웠는데도 불구하고 용량이 꽉차는 경험을 하게 된다.
# 미사용 컨테이너와 이미지를 지워주자
docker system prune -a -f

미사용 도커파일 삭제

14기가나 차지하고 있었....

Docker로 NextJS 앱 배포하기

__APPA — Thu, 23 Mar 2023 18:27:50 +0900

docker build 시 Image size가 GB 단위로 올라가고, m1 맥북에서 build 시 ubuntu에서 호환이 안되기 때문에 추가 옵션을 줘야하는 등 약간의 이슈가 있어서 git 코드 공유로 ubuntu server 자체에서 build하는 식으로 해서 사용중이다.

1. Docker 설치 (local & server)

- local : 공식 홈페이지에서 본인의 운영체제에 맞는 Docker 설치

- server(ec2 ubuntu 22.04): 공식 홈페이지 install docker on ubuntu 만 따라하면 끝!

1. Dockerfile 생성

- code editor에서 app 최상단 폴더에 Dockerfile 생성 혹은 터미널 touch Dockerfile

FROM node:18-alpine

RUN mkdir -p /usr/app
WORKDIR /usr/app

# Install dependencies based on the preferred package manager
COPY ./ ./

RUN yarn install 
RUN yarn build

EXPOSE 3000

CMD ["yarn", "start"]

2. docker build -t [name] ./

여기서 t는 생성되는 docker image 에 태그를 붙이는 옵션이다

docker build 완료 이미지

3. docker images 로 도커 이미지들을 확인할 수 있다

docker image list

4. 컨테이너 실행

- d : detach 백그라운드에서 컨테이너가 실행되도록 하는 옵션

- p : port 포트 포워딩 [호스트 포트]:[내부 포트] 외부포트를 내부포트로 연결시켜주는 역할을 하는 옵션

docker run -dp 3000:3000 [image name]

5. 컨테이너 상태 확인 - 현재 동작중인 컨테이너 리스트를 보여준다

docker ps

# CONTAINER ID   IMAGE      COMMAND                  CREATED         STATUS        PORTS                                       NAMES
# fe91138dce66   coral   "docker-entrypoint.s…"   3 seconds ago   Up 1 second   0.0.0.0:3000->3000/tcp, :::3000->3000/tcp   vigorous_pascal

docker hub를 사용하여 local과 ec2 ubuntu 서버간 이미지 공유는 다음 포스트에서!

display: flex 가 렌더링에 미치는 영향에 대해

__APPA — Thu, 16 Mar 2023 15:37:03 +0900

display: flex는 레이아웃을 구성하기 위한 유용한 CSS 속성 중 하나입니다.

그러나 많은 flex 속성을 사용하는 것은 렌더링 속도에 영향을 미칠 수 있습니다.

display: flex를 사용하면 브라우저는 레이아웃을 계산하기 위해 추가 작업을 수행해야 합니다.

이 작업은 브라우저의 처리 속도와 요소의 수 및 복잡도에 따라 렌더링 속도에 영향을 미칩니다.

따라서, display: flex는 꼭 필요할 때만 사용하는 것이 좋다는 말씀.

렌더링 속도를 향상시키기 위해 flex 속성 대신에 grid 레이아웃 등 다른 CSS 속성을 사용하는 것이 좋다.

리소스 우선순위를 제어하는 link 태그의 설정값

__APPA — Tue, 14 Mar 2023 10:07:49 +0900

rel 속성: 리소스의 관계를 지정하는 속성입니다. 우선순위를 제어하기 위해서는 rel 속성 값으로 preload를 사용해야 합니다.
as 속성: 가져올 리소스의 유형을 지정하는 속성입니다. 가능한 값으로는 image, style, script, font, document, audio, video, fetch 등이 있습니다. 이 중 fetch를 사용하면 특정 URL을 가져와서 캐시에 저장할 수 있습니다.
type 속성: 가져올 리소스의 MIME 유형을 지정하는 속성입니다. 예를 들어, type="text/css"는 CSS 파일을 가져올 때 사용합니다.
media 속성: 리소스를 가져오는 미디어 유형을 지정하는 속성입니다. 예를 들어, media="print"를 사용하면 인쇄할 때 사용하는 스타일 시트를 가져올 수 있습니다.
asynchronous 속성: 리소스를 비동기적으로 가져올 것인지를 지정하는 속성입니다. asynchronous="true"로 설정하면 다른 작업을 처리하면서 리소스를 가져올 수 있습니다.
defer 속성: 리소스를 지연해서 가져올 것인지를 지정하는 속성입니다. defer="true"로 설정하면 문서 파싱이 완료되면 리소스를 가져옵니다.
crossorigin 속성: 리소스를 다른 도메인에서 가져올 때 CORS(Cross-Origin Resource Sharing)를 지정하는 속성입니다. crossorigin="anonymous"로 설정하면 CORS 요청을 보내지 않습니다.
integrity 속성: 가져온 리소스의 무결성을 검증하는 속성입니다. integrity 속성 값으로는 SHA-256 또는 SHA-384 등의 암호화 해시 함수를 사용합니다.

<link rel="stylesheet" href="style.css" media="print" title="Print Styles">
<link rel="stylesheet" href="style.css" media="screen and (min-width: 768px)">
<link rel="preload" href="script.js" as="script" importance="high">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous" importance="low">

첫 번째 예제는 media 속성을 사용하여 프린트 스타일에 대한 우선순위를 설정합니다.
두 번째 예제는 media 속성과 미디어 쿼리를 사용하여 스크린 크기에 따라 우선순위를 설정합니다.
세 번째 예제는 rel 속성을 preload로 설정하여 페이지 로딩시 우선적으로 리소스를 불러옵니다. as 속성을 사용하여 리소스 유형을 설정하며, importance 속성을 사용하여 우선순위를 설정합니다.
네 번째 예제는 rel 속성을 preload로 설정하여 페이지 로딩시 리소스를 미리 불러옵니다. as 속성을 사용하여 리소스 유형을 설정하며, type 속성을 사용하여 폰트 파일의 MIME 유형을 명시하고, crossorigin 속성을 사용하여 CORS (Cross-Origin Resource Sharing) 정책을 준수합니다. importance 속성을 사용하여 우선순위를 설정합니다.

TCP/IP three-way handshake란?

__APPA — Fri, 10 Mar 2023 17:04:41 +0900

TCP/IP 세 개의 요소로 구성되어 있으며, 전송 계층에서 사용되는 TCP (Transmission Control Protocol) 프로토콜에서 연결을 설정하는 방법(establishing a connection in the TCP (Transmission Control Protocol)입니다.

다음과 같은 단계로 작동한다.

1. 클라이언트에서 서버로 SYN(Synchronize Sequence Number) 패킷을 보낸다.

- SYN : 두 기기(클라이언트 & 서버)의 초기 연결 수립을 위한 패킷

- 패킷: 네트워크에서 전송을 위한 데이터 단위(unit of data that is transmitted over a network)

2. 서버는 SYN 패킷을 받고, 클라이언트에게 ACK (Acknowlegement)와 SYN 패킷을 보낸다.

- ACK : SYN을 보낸 디바이스에게 데이터를 받았다고 전달하는 패킷, 송신 장치(클라이언트)는 ACK 패킷을 사용하여 성공적으로

전달된 패킷과 전송 중에 손실되거나 손상된 경우 재전송해야 하는 패킷을 추적한다.

3. 클라이언트는 ACK 패킷을 다시 서버에게 보내고, 연결이 설정된다.

연결이 설정되면 데이터 전송이 가능해지고 데이터를 보내기 전에 클라이언트와 서버는 데이터 전송에 사용할 시퀀스 번호와 확인 응답 번호를 교환한다.

이렇게 세가지 요소로 구성된 데이터 통신은 신뢰성과 안정성을 보장한다.

HTTP 통신에서 캐싱 활용

__APPA — Wed, 8 Mar 2023 18:18:11 +0900

HTTP 캐싱을 활용하기 위해 다음과 같은 값들을 설정할 수 있습니다:

캐시 제어 헤더 (Cache-Control header): 이 헤더를 사용하여 캐시 동작을 제어할 수 있습니다. 예를 들어, max-age 값을 설정하여 캐시가 유효한 시간을 정할 수 있습니다. 또한, no-cache, no-store, must-revalidate 등의 값을 설정하여 캐시를 사용하지 않거나 갱신해야 하는지 여부를 제어할 수 있습니다.
ETag: 이 값은 캐시된 리소스가 원본과 같은지 확인하는 데 사용됩니다. 원본이 변경되면 ETag 값도 변경되므로, 캐시된 리소스가 더 이상 유효하지 않은 경우 서버로부터 새로운 리소스를 가져와야 합니다.
Last-Modified: 이 값은 리소스가 마지막으로 수정된 시간을 나타냅니다. 캐시된 리소스가 원본보다 오래된 경우, 서버로부터 새로운 리소스를 가져와야 합니다.
Expires: 이 값은 캐시된 리소스가 만료되는 시간을 나타냅니다. Expires 헤더는 캐시된 리소스의 만료 시간을 정확하게 나타내지 않으므로, 보통 Cache-Control 헤더의 max-age 값을 함께 사용합니다.

이러한 값들을 적절하게 설정하여 캐싱을 활용하면, 웹 페이지의 로딩 속도를 개선할 수 있습니다. 캐시된 리소스를 다시 다운로드하지 않고도 웹 페이지를 빠르게 로딩할 수 있기 때문입니다.

JavaScript에서 HTTP 통신을 할 때도 캐싱을 활용할 수 있습니다. 브라우저는 HTTP 캐시를 자동으로 관리하며, 캐시된 리소스를 다시 다운로드하지 않고 사용할 수 있습니다.

아래는 JavaScript에서 HTTP 캐싱을 활용하는 간단한 예제입니다:

// 캐시된 리소스 사용
fetch('/example.json', {cache: 'default'})
  .then(response => response.json())
  .then(data => console.log(data));

// 캐시된 리소스 갱신
fetch('/example.json', {cache: 'reload'})
  .then(response => response.json())
  .then(data => console.log(data));

위 예제에서, fetch 함수의 두 번째 인자로 cache 옵션을 설정하여 캐싱 동작을 제어할 수 있습니다. cache 옵션은 다음과 같은 값을 가질 수 있습니다:

default: 캐시된 리소스를 사용하고, 캐시가 없는 경우 서버로부터 다운로드합니다. 이 옵션이 기본값입니다.
no-store: 캐시를 사용하지 않고, 서버로부터 항상 다운로드합니다.
reload: 캐시를 무시하고, 서버로부터 다운로드합니다.
no-cache: 캐시를 사용하지만, 캐시된 리소스가 유효한지 서버에 확인하고 갱신합니다.
force-cache: 캐시된 리소스를 사용하고, 캐시가 없는 경우 서버로부터 다운로드하지 않습니다.

위 예제에서는 cache 옵션으로 default 값을 설정하여 캐시된 리소스를 사용합니다. 또한, cache 옵션으로 reload 값을 설정하여 캐시된 리소스를 무시하고 서버로부터 갱신된 리소스를 다운로드합니다. 이렇게 캐싱을 활용하여 HTTP 통신을 최적화할 수 있습니다.

출처 - mdn http 통신

네트워크 환경에서 데이터가 오가는 과정을 이해하는 것과 프론트엔드 업무 연관성

__APPA — Tue, 7 Mar 2023 11:14:00 +0900

프론트엔드 업무에서는 사용자 인터페이스(UI)와 관련된 웹 페이지를 개발합니다. UI는 주로 웹 브라우저에서 실행되며, 웹 브라우저는 인터넷을 통해 서버에서 데이터를 가져와 UI에 표시합니다. 따라서 네트워크 환경에서 데이터가 오가는 과정을 이해하는 것은 프론트엔드 업무에서 매우 중요합니다.

데이터 가져오기: 프론트엔드 개발자는 데이터를 가져와서 UI에 표시해야 합니다. 이 데이터는 서버에서 가져와야 할 수도 있으며, 이를 위해서는 데이터 전송 프로토콜, HTTP 요청 및 응답, CORS 등에 대한 이해가 필요합니다.
데이터 전송 방법: 데이터를 가져오는 방법은 매우 중요합니다. 일부 데이터는 실시간으로 업데이트되어야 하며, 이를 위해서는 WebSocket과 같은 실시간 통신 프로토콜을 사용해야 할 수도 있습니다. 또한 대용량 데이터의 경우, AJAX를 사용하여 데이터를 비동기적으로 가져올 수 있습니다.
성능 최적화: 프론트엔드 업무에서는 성능 최적화가 매우 중요합니다. 데이터 전송 과정에서 대역폭, 지연 시간, 캐싱, 렌더링 등 다양한 요소가 성능에 영향을 미칩니다. 이러한 요소를 고려하여 UI의 로딩 시간을 최소화하고 빠른 사용자 경험을 제공하는 것이 필요합니다.
보안: 프론트엔드 업무에서는 사용자 데이터와 관련된 보안 문제도 고려해야 합니다. 데이터 전송 중에는 인증, 암호화, CORS 및 CSRF 공격 등 보안 문제가 발생할 수 있습니다. 따라서 프론트엔드 개발자는 이러한 보안 문제를 방지하기 위한 대처 방법을 알아야 합니다.