<aside> 💡 클로저, 프로미스 , 비동기 프로그래밍 ,이벤트 루프, 프로토타입 등 Javascript에 대한 사용 경험으로 문제를 분석하고 해결해내갔습니다.

</aside>

비동기 프로그래밍 ( async/await )

Javascript는 싱글 스레드 즉, 동기언어이다. 동기식으로 작동하기때문에 직렬적으로 진행하게된다. 직렬성은 순차적으로 진행된다는 뜻이고, 현재 어떤 함수가 실행 중이라면 다음 작업은 동기로인해 기다리게된다. 여기서 JS의 async/await 을 사용하요 비동기처리를 하게되면 직렬성이 병렬성으로 바뀌게된다. 코드들은 결과값에 맞게 다른 작업과 상관없이 동작할 수 있다. 이런 점을 기반으로 진행했던 프로젝트 중 미터리움의 비동기 처리에대해서 간략하게 설명해보자.

try {
        await loginHashAction(values).then(async (res) => {
          if (res) {
            await loginAlert(res.name)
            saveAuth(res)
            await getUserByToken(res?.token)
            await loginCookieAction(res?.token)
            setCurrentUser(res)
            dispatch(await userAction('request', res))
            dispatch(await officeAction('request', res))
            dispatch(await cooperAction('request', res))
						....
					}
				}
...

이 코드에서는 **res**라는 응답을 기다린 후, 그 결과에 따라 여러 작업을 순차적으로 실행합니다. 각 단계는 이전 단계가 완료될 때까지 기다렸다가 차례로 진행되며, 이를 통해 복잡한 비동기 로그인 프로세스를 명확하고 관리하기 쉬운 방식으로 처리합니다.

프로미스 ( Promise )

Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환한다.

const applyBrightnessAndContrast = (
    imageData: string,
    brightness: number,
    contrast: number | string,
    rotate: number
  ) => {
    const canvas = document.createElement('canvas')
    const context: any = canvas.getContext('2d')
    const image = new Image()

    return new Promise((resolve, reject) => {
      image.onload = () => {
        canvas.width = image.width
        canvas.height = image.height
        context.translate(canvas.width / 2, canvas.height / 2)

        // 회전 각도 설정 (단위는 라디안이므로 각도를 라디안으로 변환)
        context.rotate((rotate * Math.PI) / 180)

        // 원래 위치로 다시 이동
        context.translate(-canvas.width / 2, -canvas.height / 2)

        context.drawImage(image, 0, 0)
        resolve(canvas.toDataURL('image/jpeg'))
      }

      image.onerror = reject
      image.src = imageData
    })
  }

이 코드는 이미지 데이터를 받아서 새로운 Promise 객체를 생성하고 반환합니다. 이미지는 주어진 밝기, 대비, 회전 값에 따라 처리됩니다. **Promise**는 비동기 작업이 성공적으로 완료되었을 때 결과를 반환하거나, 오류가 발생했을 때 오류를 반환하는 객체입니다.

분석과 솔루션

실무 프로젝트 및 개인프로젝트를 하면서 부딪히는 문제들을 팀원들과 분석하여 효율적이고 가독성있게 작성하는 작업에 집중하였습니다. 팀원들과 서로 소통하며 서로의 의견을 나누며 문제를 해결해나가 더욱 성장하는 경험을 느꼈습니다.