코딩 어캐하는거야

@Transactional REQUIRES_NEW 그냥 써도 되나?

졸커댕 — Tue, 3 Dec 2024 03:31:50 +0900

문제 상황

[ERROR] [main] [o.h.e.jdbc.spi.SqlExceptionHelper] - Lock wait timeout exceeded; try restarting transaction

org.springframework.dao.PessimisticLockingFailureException:
could not execute statement [Lock wait timeout exceeded; try restarting transaction]

NHN 아카데미에서 프로젝트를 진행하던 중, 회원가입 포인트 적립 기능을 구현하며 발생한 문제이다.

상황은 이렇다.

회원가입 로직이 마무리되고 포인트가 적립이 된다.

만약 회원가입은 성공적으로 마쳤지만 포인트 적립 로직에서 에러가 발생한다면? 현재 Transaction을 Rollback 해야 할까?

팀원들과 함께 회의를 통해 '회원가입', '포인트 적립' 두 가지 로직을 각각 다른 트랜잭션으로 분리하고자 하였다.

이를 통해 적립이 실패해도 회원가입 Transaction이 commit 될 수 있도록 하고 싶었다.

@Transactional 어노테이션의 Propagation type 중, 부모 트랜잭션으로부터 새로운 트랜잭션을 만드는 Requires_new를 적용하여 구현해 보았다.

이론상 완벽했다.

그러나 웬걸 말로만 들어보던 Lock wait timeout이 발생해 버렸다. 그 이유를 알아보자!

문제 상황을 간단하게 구현해 보았다.

// MemberService.java
@Service
@RequiredArgsConstructor
public class MemberService {
    private final MemberRepository memberRepository;
    private final PointService pointService;

    @Transactional
    public Member createMember(){
            // 회원 가입으로 인한 생성.
        Member member = memberRepository.save(new Member());
            // 회원 가입 성공 후 포인트 적립 함수 호출
        pointService.createPointRequiresNew(member);
        return member;
    }
}

// PointService.java
@Service
@RequiredArgsConstructor
public class PointService {
    private final PointRepository pointRepository;

    @Transactional(propagation = Propagation.REQUIRES_NEW)
    public void createPointRequiresNew(Member member){
            // 방금 생성된 따끈따끈한 멤버를 받아서 500포인트를 적립해준다.
        pointRepository.save(new Point(500, member));
    }
}

// MemberServiceTest.java
@SpringBootTest
class MemberServiceTest {
    @Autowired
    private MemberService memberService;

    @Test
    void createMember_timeOutFailed(){
            // 회원가입 서비스 호출
        memberService.createMember();
    }
}

해결 방법

본론부터 말하자면 2가지 해결 방법이 있다.(사실 더 있을 수도 있따..)

1. Point Transaction(자식 Transaction)에 @Async 어노테이션을 붙여 비동기 동작을 하도록 한다.

자식 Thread에서는 부모 Thread의 작업이 끝나 Pessimistic Lock(비관적 Lock)으로 인한 DeadLock이 풀렸을 때 해당 entity에 접근할 수 있다.

@Async
@Transactional(propagation = Propagation.REQUIRES_NEW)
public void createPoint(Member member){
    pointRepository.save(new Point(500, member));
}

2. @TransactionalEventListner(phase = TransactionPhase.AFTER_COMMIT) 어노테이션을 이용한다.

부모로부터 호출된 Event를 EventHandler가 잡아 자식 Transaction의 로직을 실행해준다. 부모 Transaction이 Commit된 후 자식 Transaction이 실행되어 DeadLock을 피할 수 있다. EventHandler Bean을 새로 구현해주어야 한다.

※ 주의 - 자식 Transaction은 REQUIRES_NEW 선언을 해주어야 한다! 아직 정확한 이유는 모르겠지만 Default Propagation 타입으로 진행한다면 자식 Transaction은 Commit이 되지 않는다..! 이유는 알아볼 예정!

@TransactionalEventListener(phase = TransactionPhase.AFTER_COMMIT)
public void createPoint(CreatedEvent event) {
    Member member = event.getMember();
    pointService.createPoint(member);
}

문제 원인

흔히 CS 공부할 때 배우는 DeadLock 문제이다.

1. 부모 Transaction에서 새로운 데이터 생성을 위해 Member Table Lock을 건다.

2. 해당 Transaction이 끝나지 않아 Lock이 걸려있는 채로 자식 Transaction이 새로 생긴 Member 정보를 가져오기 위해 Member Table에 접근한다.

3. 그렇게 서로의 작업이 끝나기만을 기다리며 DeadLock 상태로 빠지게 된다.

이를 해결해주기 위해 부모 Transaction의 작업이 끝나길 기다려준 후 자식 Transaction의 작업이 실행되어야한다.

끝나길 기다리기 위해 비동기 방식을 적용하거나 TransactionalEventListner 어노테이션의 AfterCommit phase를 이용하여야한다.

회고

Transaction을 공부하던 중 발생한 문제였다.

공부를 하며 ThreadPool 문제로도 TimeWait이 걸렸다는 글을 보았고 에러를 읽지 않고 당연히 해당 문제라고 단정 지었다.

그렇게 삽질을 하고 나니 하나씩 에러 문구가 보이기 시작했다.

다행히 EventLister나 비동기 처리 방식도 고민하고 있던 터라 바로 적용하여 문제를 해결할 수 있었다.

덕분에 아는 문제여도 에러 메시지를 무조건 읽어야겠다는 다짐을 다시 하게 만들어주었다.

그리고 말로만 듣던 DeadLock 상황을 직접 만들어 보니 뭔가 뿌듯했다.

공부 더 해야겠다...

Github action + spring boot CI/CD 구축하기

졸커댕 — Sun, 3 Nov 2024 19:08:36 +0900

계기

8명의 팀원과 함께 팀 프로젝트 진행 중 번거로움을 해결하기 위해 CI/CD를 구축하기로 함.

Why CI? develop 브랜치로 PR이 굉장히 많이 생성됨. 기존 코드와 합치기 위한 build, test 과정을 local 환경에서 일일이 수행하기 번거로움.

Why CD? 패키징, 추가 테스트, 파일 업로드, 실행 등 반복되고 번거로운 배포 작업을 자동화하기 위해.

Why Github Action? CI/CD 작업을 위한 다양한 툴 존재. on Premise 환경의 툴을 설정하기보다 클라우드 환경의 툴로 결정하여 빠른 구축하기 위함.

Github action?

https://docs.github.com/en/actions/about-github-actions/understanding-github-actions

유저가 설정한 이벤트 발생(특정 일시마다, github push 및 PR 등 다양한 trigger 존재)
이벤트에 따라 Runner 생성 후 Job 실행. Job에 설정된 step들 실행.
- Runner? Job이 실행될 환경 ex) linux, windows 등. 기본적으로 Cloud환경에서 실행됨. 유저의 on Premise 환경에서도 실행 가능.
- Job? 해당 Runner에서 실행될 작업. Step들의 묶음. ex) 빌드, 테스트, 배포, 이슈 생성 등
  기본적으로 병렬적으로 실행. 설정을 통해 순차적 실행 가능.
- Step? Job으로 묶여 해당 작업 필요한 명령어들. ex) mvn clean, mvn test 등

적용하기

Maven 환경의 Spring boot 프로젝트에 CI/CD를 적용하였습니다. action에서 다양한 action syntax를 제공합니다. 현재 글에선 spring boot의 빌드, 테스트, 배포에 사용될 구문만 사용하였습니다.

Github Action을 사용하기 위해선 Project의 root 경로에 .github/workflows 폴더를 생성해야합니다. 해당 폴더의 yml 파일을 분석하여 자동으로 Action을 실행해줍니다.

CI/CD 파일 만들기

ci-actions.yml

name: dev-ci-phase # Action 이름
on: 
  # Action이 실행될 event
  pull_request:
    types: [ opened, reopened ]
  push:
    branches-ignore:
      - main

jobs:
  # 빌드 자동화. 빌드 과정 중 오류가 있는지 확인
  build:
    # ubuntu 환경에서 실행. runner 설정 과정.
    runs-on: ubuntu-latest
    # 현재 job에서 실행될 명령어들
    # '-'로 나뉘어진 부분들이 하나의 step!
    steps:
      - uses: actions/checkout@v4

      - name: Set up JDK 21
        uses: actions/setup-java@v4
        with:
          java-version: '21'
          distribution: 'temurin'
          cache: maven

      - name: Build with Maven
        run: mvn -B compile --file pom.xml

  # test 자동화. test 후 커버리지 결과를 action bot을 이용하여 확인 가능
  test:
  	# build가 성공적으로 완료되었을 때 실행.
    needs: build
    # ubuntu 환경에서 실행
    runs-on: ubuntu-latest
    # 현재 job에서 실행될 명령어
    steps:
      - uses: actions/checkout@v4

      - name: Set up JDK 21
        uses: actions/setup-java@v4
        with:
          java-version: '21'
          distribution: 'temurin'
          cache: maven

      - name: test with Maven
        run: mvn -B test jacoco:report --file pom.xml

	  # test 결과 파일 업로드
      - name: Upload coverage report
        uses: actions/upload-artifact@v3
        with:
          name: jacoco-report
          path: |
            ${{ github.workspace }}/target/site/jacoco/jacoco.xml
            ${{ github.workspace }}/target/site/jacoco/index.html

	  # test coverage 확인할 수 있도록 bot 사용. GITHUB_TOKEN은 action에서 제공하는 default env variable.
      - name: Add coverage to PR
        id: jacoco
        uses: madrapps/jacoco-report@v1.6.1
        with:
          paths: ${{ github.workspace }}/target/site/jacoco/jacoco.xml
          token: ${{ secrets.GITHUB_TOKEN }}
          min-coverage-overall: 60
          min-coverage-changed-files: 80
          title: '# :recycle: Coverage Report'
          update-comment: true
          pass-emoji: ':green_circle:'
          fail-emoji: ':red_circle:'

use? 반복되는 action 설정이 많음. ex) java 설정, 파일 upload 설정. 반복되는 명령들을 많은 사람들이 사용할 수 있도록 라이브러리처럼 만들어서 제공합니다. use는 이런 라이브러리들을 import하여 사용할 수 있도록 하는 syntax입니다. 라이브러리 확인하기

cd-actions.yml

name: prod-deploy-actions # action 이름
on:
  # action trigger
  push:
    branches:
      - main

jobs:
  # 배포 job
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Set up JDK 21
        uses: actions/setup-java@v3
        with:
          java-version: '21'
          distribution: 'temurin'
          cache: maven

      - name: Build with Maven
        run: mvn -B package --file pom.xml

	  # scp를 이용하여 jar 파일 업로드.
      - name: upload file
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SSH_IP }}
          username: ${{ secrets.SSH_ID }}
          key: ${{ secrets.SSH_KEY }}
          port: ${{ secrets.SSH_PORT }}
          source: "target/*.jar"
          target: "~/"
          rm: false

	  # jar가 실행될 서버에 이미 작성된 startup.sh 스크립트 파일 실행
      - name: execute shell script
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_IP }}
          username: ${{ secrets.SSH_ID }}
          key: ${{ secrets.SSH_KEY }}
          port: ${{ secrets.SSH_PORT }}
          script_stop: true
          script: "./startup.sh 8080"

Secret 환경 변수 설정하기

Github -> 내 Repository -> Settings -> security -> Secrets and variables -> Actions

실행 환경에 따라 secret을 설정할 수 있습니다. Settings -> Code and automation -> Environments에서 설정한 실행 환경에 맞게 secret을 적용할 수 있습니다.

현재 글에서는 Repository 전체에 적용될 Secret을 생성하고자 합니다.

New repository secret -> key값과 value 설정하기

SSH_ID={server_user_name} ex) ubuntu

SSH_IP={your.IP.address.plz} ex) 127.0.0.1

SSH_PORT={ssh_port} ex) 22

SSH_KEY={.pem이나 .key 파일 내용 넣기} ex) -----start뭐시기----- ~~~~~ -----end뭐시기-----

./startup.sh 파일 만들기

서버에 파일을 만들기 위해 ssh로 서버에 접속한다.

ssh -i {your_pem_file_path} {your_user_name}@{your_ip_address}

startup.sh 파일 만들기!

cd ~
vi startup.sh

vim에서 입력을 위해서는 'i' 키를 누르면 쓰기 모드로 변경할 수 있고 'esc'를 누르면 읽기 모드로 변경 가능하다.

startup.sh

port=$1
pid=$(netstat -tulpn | grep $port | awk '{split($7,arr,"/"); print arr[1]}')

# 현재 열려있는 서버 닫기
if [ -n "$pid" ]
then
	kill -9 $pid
	echo server is stopped
fi

echo server is excuting...

# 서버 실행
/usr/local/java/java21/bin/java -Dserver.port=$port -Dfile.encoding=UTF-8 -Dspring.profiles.active=prod -jar ~/target/*.jar > ~/log 2>&1 &

echo server is started...

작성 완료 후 'esc' -> :wq 입력.

실행 시 권한 오류가 발생했을 때 'chmod' 명령어를 이용해 권한을 변경해주세요.

!!Java 설치가 필요합니다! Java 버전에 맞게 변경해주세요!!

끝!

이제 github에 push하거나 pr을 생성하면 ci 작업이, main에 push 될 경우(merge 포함) cd 작업이 실행됩니다!

어려움

scp로 jar 파일을 업로드하는 과정에 rm:true 옵션을 줬다.target 옵션의 값의 파일들을 모두 지우고 새로 업로드해주는 기능이어서 사용했다.

하지만 target directory가 '~' 였기에 ~ 경로 안에 들어있던 서버의 user 정보(ubuntu)가 삭제되어 서버 접속 권한을 모두 잃고 서버에 접속하지 못하는 오류가 생겼다. 결국 서버를 새로 생성해야했다. 조심해야겠다...

rm:true 옵션을 사용할 땐 target을 잘 확인하고 사용하자!

마무리

Gitlab Runner를 이용한 cicd만 이용해봤는데 이번 경험을 통해 다시 한 번 리눅스와 클라우드에 대해 학습할 수 있었던 것 같다.

참고: https://docs.github.com/ko/actions

Rust Rocket 예제코드로 응용 공부하기(1)

졸커댕 — Mon, 7 Aug 2023 03:13:14 +0900

우연히 회사에서 Rust로 서버를 개발할 수 있는 기회를 얻게되었다. 먼저 그 어렵다는 Rust 문법을 공부하기 위해 Rustlings라는 github repository를 이용해 공부했다. 원래 JS를 이용해 공부할 때는 메모리는 무슨 그냥 변수타입도 신경 안 쓰고 막 짰다면 Rust는 변수의 소유권을 잘 관리해가며 코딩을 해야하니 여간 까다로운게 아니었다. 게다가 Rustlings를 이용해서 공부를 해도 실제 응용을 하며 사용하기엔 실제 몸에 익숙한 코드도 아니고 어렵기만 해서 Rocket이라는 서버 프레임워크의 예제를 통해 어떻게 통신하고 어떻게 언어를 사용하는지 공부해보려고 한다.

Rocket 시작하기.

git clone https://github.com/SergioBenitez/Rocket
cd Rocket
git checkout v0.5-rc
# 각 폴더마다 cargo run을 통해 빌드하여 서버를 킬 수 있음.
cd examples/hello
cargo run

Cargo란?
- Node.js의 NPM과 같은 Rust 패키지 관리 툴로써 패키지 종속성을 쉽게 관리하고 프로젝트 빌드를 도와주는 친구!
- Rust를 설치하는 과정에서 따라서 설치가 되니 cargo가 설치되지 않았다면 Cargo installation따라 설치해주세요!
- 더 많은 내용은 이 블로그에서 잘 알려주심! 좋은 정보 감사합니다!

그럼 먼저 example/hello에 있는 코드를 분석해보자!

#[macro_use] extern crate rocket;

extern crate rocket 부분부터 알아보자!

crate? 하나의 binary나 library 파일들의 트리이다. 해당 트리의 노드들이 모여있는 폴더가 보통 src 폴더가 되고 추상적으로 생각하면 src 내의 폴더가 crate tree를 만든다고 생각하면 될 것 같다., 그 안의 main.rs나 lib.rs 파일이 그 crate의 root가 된다. 더 알아보기 요 링크가 되게 확 와닿았다. 요 링크도 요링크도!
extern? extern 키워드는 외부 라이브러리나 패키지의 함수나 모듈을 가져오는 느낌이다! 보통 cargo.toml파일에 등록된 다른 crate트리를 불러오거나 다른 언어로 빌드된 .so/.dll 파일을 c api를 통한 방식으로 안전성을 유지하며 사용할 수 있도록 해준다! JS의 require이나 import와 같이 사용되나 빌드된 파일의 함수도 사용할 수 있다는 점이 있다! 더 알아보기
그래서 현재 main.rs라는 crate root를 가진 crate에서 rocket이라는 다른 crate 트리를 호출하는 문장이다!

#[macro_use] attribute는 extern crate를 통해 불려온 모듈 내의 macro 형태로 선언된 rust macro들을 이미 현재 crate에서 선언된 매크로처럼 사용할 수 있도록 해주는 attribute이다!

JS에서도 require과 import가 있다면 Rust에서도 이 방식과 use crate::rocket::*의 방식으로 호출할 수 있따. 같은 기능을 하지만 어떤 방식으로 진행되는지는 차이를 확인하지 못해 성능의 차이는 확인하지 못했다! 혹시 아시는 분 댓글 부탁드립니다....

#[cfg(test)] mod tests;

다음 내용은.. 추가 블로그로 하나씩 따로 분석해서 작성할 예정!

거누의 일기 - 2월

졸커댕 — Sun, 19 Feb 2023 07:27:16 +0900

벌써 2월달이 되었따... 진짜 아무거도 한게 없는데 2월달이따.... 큰일났따.... 1주일만 남았따ㅏ.... 그래도 2월달 일기를 써본따..

내가 찍은 야경~이따... 그냥 처음 야근하고 k스퀘어 나옸는데 야경이 너무 이뻐서 찍었따...

발표가 끝나고 먹은 삼겹살이따... 삼겹살 구워먹는데 맛있어따... 옆 테이블에서 이렇게 찍길래 영우기요미형이 우리도 하자해서 이렇게 찍었따... 맛있게 먹긴 했는데 불판에 너무 달라붙어서 별로여따.... 그러고 좀 지난 다음 날 파이브가이즈를 머거따... 아닌가? 기억이 사실 안 난따.. 맛있었따.... 진짜 맛있었따... 와서 먹은 버거 중에 제일 맛있었던거 같따... 그리고 감튀를 미디움으로 했는데 감튀 컵을 오버해서 그냥 봉투에다가 감튀를 부어줬따.. 결국 배불러서 남겨따... 괜히 미디움... 미움...

퍼듀 농구 선수들이 열심히 해줘서 39프로 세일을 바다따... 옷을 180달러치인가 샀따... 너무 많이 샀따.... 그래도 후회하지 않지 않는따... 난 울지 않는따... 에반데... 세일은 pmu 옆의 북스토어만 세일을 햇어따... 다른 덴 신상이 많아서 그런 거 같았따...

너무 피곤한 날이었나보따... 그냥 길 가다가 k스퀘어 옆에서 걸스카우트 가족이 브라우니를 팔고있길래 하나 사버려따... 그냥 샀는데 6달라라고 한따... 그래도 한국인 체면을 지키려고 돈을 내버렸따... 당했따.... 미국 사기 조심...

우리 프로젝트 얘기도 해야할 거 같따... 마냥 놀지만은 않는따.. 아마..? 쨌든 프로젝트 테스트를 위해 여기저기 학교의 넓은 데를 많이 돌아다녔따... 날씨 좋은 날은 진짜 너무 좋아서 기분이 날아갈거 같았따... 그래서 진짜 날아따... 이번 겨울은 날씨도 좋고 해서 학교의 여러군데를 돌 수 있는 아웃도어 주제도 나쁘지 않아떤거가따..

테스트하고 엄청 피곤한 날 영화를 보러가따... 이걸 보지는 않았는데 그냥 사진이 이거바께 없어서 이거를 올린따.... 이 때 진짜 피곤했나보따... 사진도 안찍어따... 그러고 아바타를 봐따.. 한국에서 봤지만 여기서 볼만한 영화가 그거뿐이라 그냥 봐따.. 이미 봤던거라 영어가 들린다기보다는 내용을 알아서 더 지루해따.. 그래도 꾹 참고 봐따... 꾹 참고 있따가 눈을 떴는데 영화가 끝났따... 역시 잠은 참는게 아니따... 꿀잠자니까 너무 조아따 ㅎㅎ. 그러고 우버타고 돌아와따...

그러고 잡페어에 가따와따... 사람들 얼굴은 내가 편집해따.. 잘해따... 신세대 다돼따... 잡페어에서 돌아다니면서 부스를 가면 기업 설명을 들을 수 이따... 사실 기업 설명보다 선물을 주는거 때문에 돌아다녀따... ㅎㅎ. 그래서 티셔츠를 3개나 바다따...ㅎ. 조타... 근데 미국에서는 잡페어가 활성화된거 같이 보여서 뭔가 신기함도 이써따...

대망의 시카고여따.. 하나도 기대를 안해써따... 근데 진짜 괜찮았따.... 야경을 보려고 윌리스 타워에 갔는데 예약을 못해서 못 본 거 빼면 다 괜차나따... 밤이 진짜 이뻐따... 821이랑 우리 방이랑 같이 가서 콩에서 사진을 찌거따... 그러고 재즈바도 다 같이 가따... 난 개인적으로 뉴욕보다 괜찮아떤거 같따... 근데 좀 겁을 줘서 그런가 무섭긴 해따...ㅎ.

가서 맛있는거도 많이 머거따.. 시카고 간 주에 급성 위염이었어서 금식하려고 햇는데 매일 실패했따... 그러고 시카고에 와서 기름지고 짠거를 머거따.. 역시 기름지고 짠게 최고긴 해따... 맛이어따... 첫번째 사진은 고든램지 버거였따... 근데 나쁘지않은 마시어따.. 맛있어따.. 전 세계에 딱 4개라고 한따... 저기 고구마 튀김이 진짜 마시서따... 중간에 치즈 갈릭 브레드는 지오다노라는 옆에 사진에 시카고 피자를 파는 곳에서 주문 실수를 해서 서비스를 받아서 공짜로 머거땅ㅎㅎ. 진짜 공짜라 그런게 아니라 진짜 맛있어따... 그러고 시카고 피자는 짜따.. 기름져따.. 그래도 맛있긴 했따... 배가 엄청 불렀따ㅏ..

디저트도 머거따.... 커피랑 시카고 유명한 팝콘을 머거따... 나 팝콘 엄청 좋따... 조아따.. 그러고 누텔라가서 초코 덩어리들 먹고 옆에 드나쓰 집에 가서 드나쓰를 반다스 사서 나와따... 맛있긴해따.. 전부다..

발렌타인 데이라 엄호정씨가 초콜릿을 줘따.. 감사합니따...

인디폴로 가따ㅏ... k스퀘어 사람들 다 같이 가따.. 진짜 재미써따.... 앞에 아울렛은 힘드렀지만 농구가 진짜 재미써따.. 1쿼터에 엄청 지다가 3,4쿼터에 역전승을 해따... 진짜 잼써따... 농구가... 하고싶어요... 에릭 교수님이 모자도 사주셔따..

그래서 다음 날 농구도 연습해따..ㅎ 코렉 농구장 좋아따.. 배드민턴 치러갔는데 누가 채를 다 부숴먹어서 더이상 못 친다고 해따.. 채 사조...

비어퍼데이 팀이랑 술을 마셔따... 외국인 친구들도 불러서 한식 대접해조따... 내가 한건 아니긴한데 계란말이는 내가 해땅ㅎ. 영어로만 말해야돼서 걱정했는디 생각보다 더 재밌는 술자리 식사자리여따.. 기회가 된다면 또 하고 싶은 정도따...! 꿀쨈띠

마지막은 외국인 친구들의 불닭쇼이따... 맛이께따...

이제 2달이 거의 다 지나갔다. 뭔가 기억에 남는 일은 많은데 시간은 슉슉지나서 뭔가 기분이 묘하다... 하고 싶었던 거는 많지만 체력이 안돼서 못 했던 게 마지막에 와서 조금 아쉽기는 하다. 요즘은 한국에 돌아가서 먹을거 뭐 먹을지 생각하고 있는데 진짜 다시 미국에 오라하면 진짜 고민될거 같다... 썩 좋진 않은거 같기도....? 그래도 안전하게 아프지않고 다들 좋은 사람들이랑 좋은 경험을 했따고 생각한다. 복학하고 나서부터 여행정도는 꽤 다녔지만 뭔가 계속 무언가를 했다. 그런데 여기 와서 개발에 도움이 될만한 일은 하지 않아서 기분이 좀 묘한 거 같다. 그래도 진짜 조금 더 사람도 많이 만나고 미국 사람들의 생활도 적응해보고 하는 경험이 정말 좋은 경험이 되었던 거 같다. 나중에 누군가가 이 프로그램을 신청하고자 하면 난 꼭 추천할 거 같다! 그래도 조금의 조언을 곁들여서,,ㅎ

거누의 일기 - 1월

졸커댕 — Mon, 30 Jan 2023 10:15:13 +0900

1월이다. 운이 좋게도 글로벌 인재트랙에 선발이 되어서 미국 인디애나주의 퍼듀 대학교로 체험학습을 오게되어따.

처음 인천공항에서 비행기를 타봤따. 공항이 커서 신기해따. 가니까 춘식씨랑 라이언씨랑 나를 반겨줘따.

그러고 긴 14시간의 비행을 해따. 이렇게 길게 비행기 타는 건 처음이었는데 타보니까 이게 마지막 장거리 비행이었으면 해따... 다행히 옆 자리에 같이 참여하는 같은 학교 친구가 있어서 재밌게 왔따. 옆자리 외국인도 정말 착했따. 재밌는 비행이었지만 그래도 힘들었따..

비행기

2달 동안 살 곳인 Lark에 도착해서 근처 큰 마트인 meijer에 가따. 너무 멀었따... 걸어서 가는 길도 근데 나쁘지 않아따.

다음 날 바로 k-square로 출근을 해야해따.. 아직 학기가 시작하지 않아 우리 숙소에서 가까운 곳으로 오는 버스가 운행하지 않아 멀리까지 가서 버스를 타야해따.. 근데 가는 길에 아침에 구름이 없고 해가 뜨는 풍경이 이뻐서 좋아따..

끝나고 집에 돌아가는 길에 학교도 왔겠다 이곳 저곳 돌아다녀야겠따 싶어서 돌아다녀따... 추어따...

이 동네는 구름없이 해가 뜨는 날이 드물어서 아쉬워따... 근데 해가 보일 때마다 이쁜 풍경을 보여줘서 좋아따...

맑은 하늘 노을지는 Lark영상이따... 어제 찍어따...

퍼듀 id 카드가 나오기 전 교수님이 계속 점심을 사주신따... 그래서 병아리반 친구들이랑 2줄 맞춰서 점심을 먹으러 가따... 조금 부끄럽긴 해따...ㅎ

이 곳은 생각보다 날씨가 괜찮아따.. 눈도 많이 온다고했고 춥다했는데 막 춥지도 않고 눈도 많이 안와따.

그런 날들을 지내며 3주가 지나따.. 온 후로 첫 번째 눈보라가 온다고 했던 날이어따. 생각보다 많이 오지는 않았지만 꽤 쌓여서 기분이 좋아져따.. 그래서 눈사람도 만들어따

우리 팀 포스터도 그려따... 외국인 친구들이 포스터를 보고 우리 팀에 대해 궁금해지도록 하라했따... 내가 다람쥐를 그렸따... 살면서 그린 그림 중에 제일 잘 그린거 같아서 사진을 넣어본따....ㅎ :)

첫 번째 두 번째 주에는 항상 친구들과 술자리를 가졋따... 시차적응을 핑계로 위스키가 싸서 자주 마셨던 것 같따.. 근데 다들 잘 마셔서 응애 알코올에게는 힘든 사람들이었따.... 병아리반 모임...맞나..? 오른쪽 사진은 뉴욕에서 피터루거 가서 찍은 사진이다... 그냥 넣어봤따...

이 프로그램에 온 이유. 놀러가려고이따...ㅎ 그래서 바로 뉴욕행 비행기를 끊고 여행계획 컨펌받고 두근두근하진 않지만 도근도근하게 출발했따... 인디애나 폴리스 공항에서 출발해서 뉴욕으로 여행을 가따.. 4명 기준으로 우버를 타는게 싸서 우버를 타고 가따...

뉴욕에 도착해따!!! 아침 일찍 비행기라 엄청 피곤해서 오던 길이 기억이 안 난따... 그래도 자연사 박물관, 센트럴파크, 타임스퀘어를 가따.. 숙소를 타임스퀘어 근처로 잡아서 타임스퀘어 가기 편해따... 조아따...

브로드웨이 근처의 스타더스트라는 술집이따.. 뮤지컬 공연하기엔 실력이 부족하지만 연습을 하고있는 연습생들이 알바하는 가게이따... 가면 직원들이 노래를 불러준따... 뉴욕에서 갔던 곳 중 인상 깊었던 곳 중 하나여따...

다음 날이돠... 월스트리트랑 vessel을 가따... vessel이 진짜 이뻐따...

셋째날은 브루클린 브릿지에 갔따... 그 옆에 덤보에 가따... 추워따... 그러고 노을과 야경을 보러 록펠러 센터 전망대에 가따... 추어따ㅣ... 근데 진짜 기억에 남을 야경이었다. 뉴욕을 가서 평소 생각하고 기대한거에 비해 뭔가 임팩트가 없었는데 야경 하나만큼은 아직 기억에 남는다. 진짜 뉴욕에 간다면 꼭 갔으면 좋겠다.

뉴뇩 야경 영상이따... 이쁘따...

귀여운 피카츄도 샀다...

뉴욕에 온 김에 먹은 비싼 음식들이다... 여기는 컵라면도 비싸서 못 먹는데... 다이닝 코트는 공짜니까 다이닝 코트만 가는 삶을 살고 이따... 3번째 사진은 라피엣에 있는 텍사스 로드하우스이따... 그냥 넣었따...

그냥 있는 사진 설명 글이 된 거 같지만 사소한 하나하나가 새롭고 신기하고 즐거운 경험이었다. 한국과는 다르게 높은 건물과 높은 산들이 없어서 대부분의 풍경들이 정말 인상깊게 다가온다. 원래 길거리 돌아다니고 산책하며 주변 풍경 보는 것을 좋아하는 나에게는 정말 좋은 점 중 하나였다. 하지만 밤에 돌아다니기엔 거리가 많이 어둡고 건물도 많이 없어서 조금 아쉽다.

와서 거의 4주가 지나간다. 생각보다 한게 없다고 생각했는데 꽤 이것저것 많이 한 거 같다. 프로젝트는 그래도 색다른 경험이라 재미있었고 이곳저곳 많이 꽤 다녀와서 좋은 기억들이 많은 거 같다. 하지만 여러 제약도 많아서 학교를 제대로 느껴보지 못 한 것 같다. 평일은 너무 단조로운 일상을 사는 거 같다. 조금 더 힘내서 많이 돌아다녀봐야겠다. 조금 더 즐거운 내용을 가지고 돌아오게따...

다들 화이팅~~~~~~~

겨울 모각코 6주차 결과

졸커댕 — Fri, 11 Feb 2022 21:50:23 +0900

Ajax

ajax?

기존 동기형으로 진행되던 모델
- 브라우저와 서버가 계속 연결이 되어있어 요청을 보낸 후 처리가 완료되어 끝날 때까지 기다리는 형식으로 실행되었음.
Ajax 비동기형 모델
- 브라우저에서 서버로 요청을 보낸 후 연결을 끊는다. 그 동안 브라우저는 다시 할 일을 하고, 서버에서는 여러 상태를 거쳐 처리상태인 4단계 상태가 되었을 경우 브라우저와 연결되어 브라우저가 처리된 요청을 가져온다.

XMLHttpRequest

XMLHttpRequest?

동기 비동기 통신을 지원하는 오브젝트. 오브젝트를 사용해 데이터 송수신
XML이 이름에 들어가있지만 XML형태만 통신되는게 아님.
Object로 Resource를 fetch하기 위한 API.
SOP 제약이 있음.(같은 source(protocol,port,host 세개 다 같아야 함)의 URL에만 접근 가능)
CORS는 가능. 출처를 두 개 이상으로 줌으로써 다른 source에 접근할 수 있도록 브라우저에게 알려주는 방식.
XHR flow
1. 브라우저에서 Request 발생하면 XHR 인스턴스 생성 후 서버 상태에 대한 이벤트 핸들러를 만들어준다. 서버와 연결되어 통신 방법과 전송 방법, URL을 지정해준 후 데이터를 전송해준다.
2. 서버에서 상태가 바뀔 때마다 상태를 브라우저로 전송해준다. 그리고 마지막 단계의 상태에서 처리가 완료된 데이터를 전송해준다.
3. 브라우저에서 Response를 받을 때 서버에서 받는 상태들에 대해 이벤트 핸들러에서 처리해준다.

통신 Respose 상태 코드

101~199: 정보
200~299: 성공
300~305: 리다이렉션
400~499: Request 에러
500~599: 서버 응답 에러
response 타입도 설정 가능.

느낀점: 어느덧 마지막 모각코가 끝이 났다. 코로나만 아니었따면 여행을 갔을 방학이지만, 코로나 규제가 심해 어디 가서 마음 편하게 놀지도 못하고 그렇다고 집에서 무언가 대단한걸 하지 못한 어영부영한 방학을 지나는 중인 것 같다. 남은 2월달동안 다음 봄학기를 위해 다시 마음 잡고 준비하는 시간을 가져야겠따.

겨울 모각코 6주차 목표

졸커댕 — Fri, 11 Feb 2022 18:50:37 +0900

ajax 통신에 대해 알아보자!

어느덧 마지막이다! 화이팅!!

겨울 모각코 5주차 결과

졸커댕 — Fri, 28 Jan 2022 22:19:23 +0900

TypedArray는 일반 배열과는 차이가 있는 유사 배열 객체이다.

타입 배열은 일반 배열에 비해 실행시간과 메모리 사용측면에서 더욱 효율적인 모습을 보여준다.

타입 배열의 원소는 모두 숫자다. 생성자에 숫자의 타입과 크기를 사용하여 타입 배열을 생성한다. 이 과정에서 크기가 고정된다.

자바스크립트 타입 배열은 `buffer`와 `view`로 나뉘어 구현되어 있다.

느낀점: 오늘 처음 들어보는 typedarray 공부를 햇다. 뭔 말인지 모르겠다. 잘 쓰일 것 같지는 않다.

벌써 방학이 반틈이 지나갔다. 뭔가를 해야겠다는 생각이 든다. 뭐를 할지 계획부터 짜야겠다.

겨울 모각코 5주차 목표

졸커댕 — Fri, 28 Jan 2022 18:50:20 +0900

typedarray 공부하기.

처음 들어보는 용어다 어떤 내용일지 궁금하다 한번 공부해보자.

겨울 모각코 4주차 결과

졸커댕 — Fri, 21 Jan 2022 21:50:51 +0900

promise와 async/await 에 대해 알아보자.

promise란

promise?

비동기 - 연속으로 처리하지 않고 중간에 끊어졌다가 연결된 코드를 처리할 수 있는 환경이 될 때 실행

let instance = new promise((resolve,reject) => {
    resolve(param1,param2,...);
    reject(param1,param2,...);
});

then?

then(성공 시 실행될 핸들러 함수, 실패시 실행될 핸들러 함수) 핸들러 함수에서 받을 매개변수에 resolve,reject 함수 중 호출된 함수의 매개변수의 가장 첫 번째값부터 들어간다.
return 값은 [[PromiseValue]]값에 저장이 된다. then의 return 값은 promise 인스턴스 형태라 연속해서 then을 호출 가능하다. [[PromiseValue]] 값에 저장된 값이 return되므로 다음 then에서 매개변수로 받아 값 사용 가능.

let obj = new promise((resolve) => {
    resolve(100);
});
obj.then((value) => {
    return value + 50;
    // 150이 반환되는 것이 아니라 [[PromiseValue]]에 150을 저장시킴.
}).then((param) =>{
    console.log(param);
});
// 150 출력.

catch?

then에서 두 번째 param을 작성하지 않고 reject의 경우 catch를 이용해서 에러를 잡아 실행.

finaly?

then과 catch와 달리 성공 여부와 상관없이 finally()에 인자로 받은 핸들러 함수를 실행시킨다. 성공 여부가 확실하지 않으므로 앞에서 return한 값에 대해 상태를 모르기 때문에 param으로 넘어오지 않는다.

obj.then((value) => {return 200;}).catch((param) => {
    // 앞에서 실패하지 않았으므로 실행 안됨.
    return 100;
}).finally((param) => {
    //여기서 param은 then에서 return 해준 값이 들어가지 않는 undefined. finally는 어떤 값도 현재 param의 위치에 받지 않기 때문.
    //평소엔 그냥 매개변수 없이 사용.
    console.log(param);
})

all?

promise.all 형태로 사용하며 all함수의 파라미터 안의 모든 promise 처리를 기다려서 모두 성공했을 때 넘어갈 수 있도록. 만약 실패한다면, 바로 넘어간다.

race?

promise.race 형태로 받은 인스턴스형태의 매개변수들 중 제일 먼저 끝난 promise에 대해 then을 실행하고 더 이상 then을 실행하지 않음.

-----------------------------------------------------------------------------------------------------------------------------------

async/await

async?

async는 키워드가 아니며 async function이 한 묶음.
비동기 환경에서 실행하지만 await를 이용하여 실행이 끝나야 다음을 실행하도록 함.
Promise에서 reject()가 발생했을 때 에러 대처 형태.

try-catch 사용 형태

async function func1(param){
    try{
        await func2(param); // promise 함수
    }catch(error){
        log(error);
    };
};

catch 사용 형태

async function func1(param){
    await func2(param).catch(error){
        return 200;
    }.then((param) => {
        console.log(param);
    })
}
// 200 출력. catch문에서 return은 [[promiseValue]] 인스턴스 형태로 반환해주므로 then 한 번 더 사용 가능.

Promise가 아닌 value 자체를 반환하는 형태

async function func1(param){
    const value = await func2(param).catch(error){
        return 200;
    }
    console.log(value);   
}
// 200 출력. value에 그냥 [[PromiseValue]]값을 넣어서 설정

느낀점:

통신을 위해 많이 사용하는 promise async await에 대해 알아보았따. 확실히 내용이 어려운 거 같다. 오늘 배운 내용을 토대로 프론트 엔드와 백엔드에서 통신하는 방법도 알아보아야겠따.

모각코 4주차가 지났는데 방학동안 한게 없다. 재밌는게 뭐가 있을까?