앱 업데이트Update the app

작은 기능 요청으로, todo 목록 항목이 없는 경우의 “빈 텍스트”를 변경하라는 요청을 제품 팀에서 받았습니다.As a small feature request, you've been asked by the product team to change the "empty text" when you don't have any todo list items. 제품 팀은 다음과 같이 전환되기를 바랍니다.They would like to transition it to the following:

아직 todo 항목이 없습니다.You have no todo items yet! 위에서 항목을 하나 추가하세요.Add one above!

매우 간단하죠?Pretty simple, right? 이제 변경해 봅시다.Let's make the change.

소스 코드 업데이트Update the source code

  1. src/static/js/app.js 파일에서 새로운 빈 텍스트를 사용하도록 줄 56을 업데이트합니다.In the src/static/js/app.js file, update line 56 to use the new empty text.

    -                <p className="text-center">No items yet! Add one above!</p>
    +                <p className="text-center">You have no todo items yet! Add one above!</p>
    
  2. 이전에 사용한 것과 동일한 명령을 사용하여 업데이트된 이미지 버전을 빌드합니다.Build the updated version of the image, using the same command you used before.

    docker build -t getting-started .
    
  3. 업데이트된 코드를 사용하여 새 컨테이너를 시작합니다.Start a new container using the updated code.

    docker run -dp 3000:3000 getting-started
    

그런데Uh oh! 다음과 같은 오류가 표시됩니다(ID는 다름).You probably saw an error like this (the IDs will be different):

docker: Error response from daemon: driver failed programming external connectivity on endpoint laughing_burnell 
(bb242b2ca4d67eba76e79474fb36bb5125708ebdabd7f45c8eaf16caaabde9dd): Bind for 0.0.0.0:3000 failed: port is already allocated.

어떻게 된 것일까요?So, what happened? 이전 컨테이너가 여전히 실행되고 있으므로 새 컨테이너를 시작할 수 없습니다.The new container couldn't start, because your old container is still running. 이 동작이 문제가 되는 이유는 해당 컨테이너가 호스트의 포트 3000을 사용하고 있으며, 머신(컨테이너 포함)에서 하나의 프로세스만 특정 포트를 수신 대기할 수 있기 때문입니다.The reason this is a problem is because that container is using the host's port 3000 and only one process on the machine (containers included) can listen to a specific port. 이 문제를 해결하려면 이전 컨테이너를 제거합니다.To fix this, remove the old container.

이전 컨테이너 바꾸기Replace the old container

컨테이너를 제거하려면 먼저 중지해야 합니다.To remove a container, it first needs to be stopped. 컨테이너가 중지되면 제거할 수 있습니다.Once it has stopped, it can be removed. 이전 컨테이너를 제거하는 방법에는 두 가지가 있습니다.You have two ways that you can remove the old container. 편리한 경로를 자유롭게 선택할 수 있습니다.Feel free to choose the path that you're most comfortable with.

CLI를 사용하여 컨테이너 제거Remove a container using the CLI

  1. docker ps 명령을 사용하여 컨테이너 ID를 가져옵니다.Get the ID of the container by using the docker ps command.

    docker ps
    
  2. docker stop 명령을 사용하여 컨테이너를 중지합니다.Use the docker stop command to stop the container.

    # Swap out <the-container-id> with the ID from docker ps
    docker stop <the-container-id>
    
  3. 컨테이너가 중지되면 docker rm 명령을 사용하여 제거할 수 있습니다.Once the container has stopped, you can remove it by using the docker rm command.

    docker rm <the-container-id>
    

docker rm 명령에 “force” 플래그를 추가하면 단일 명령으로 컨테이너를 중지하고 제거할 수 있습니다.You can stop and remove a container in a single command by adding the "force" flag to the docker rm command. 예: docker rm -f <the-container-id>For example: docker rm -f <the-container-id>

Docker 뷰를 사용해 컨테이너 제거Remove a container using the Docker view

VS Code 확장을 여는 경우 두 번만 클릭하면 컨테이너를 제거할 수 있습니다.If you open the VS Code Extension, you can remove a container with two clicks! 컨테이너 ID를 조회하고 제거하는 것보다 훨씬 간편합니다.It's certainly much easier than having to look up the container ID and remove it.

  1. 확장을 연 후 컨테이너로 이동하여 마우스 오른쪽 단추를 클릭합니다.With the extension opened, navigate to the container and right-click.

  2. 제거 옵션을 클릭합니다.Click on the Remove option.

  3. 제거를 확인하면 작업이 완료됩니다.Confirm the removal and you're done!

Docker 뷰 - 컨테이너 제거

업데이트된 앱 컨테이너 시작Start the updated app container

  1. 이제 업데이트된 앱을 시작합니다.Now, start your updated app.

    docker run -dp 3000:3000 getting-started
    
  2. 브라우저에서 http://localhost:3000을 새로 고치면 업데이트된 도움말 텍스트가 표시됩니다.Refresh your browser on http://localhost:3000 and you should see your updated help text!

업데이트된 빈 텍스트가 있는 업데이트된 애플리케이션

요약Recap

업데이트를 빌드할 수 있었던 동시에 다음 두 가지 사항을 발견했을 수 있습니다.While you were able to build an update, there were two things you might have noticed:

  • todo 목록의 기존 항목이 모두 사라졌습니다.All of the existing items in your todo list are gone! 매우 좋은 앱은 아닙니다.That's not a very good app! 이 내용은 잠시 후에 살펴보겠습니다.We'll talk about that shortly.
  • 이처럼 사소한 변경에도 ‘많은’ 단계가 필요했습니다.There were a lot of steps involved for such a small change. 이후 섹션에서는 변경할 때마다 새 컨테이너를 다시 빌드하고 시작하지 않고도 코드 업데이트를 확인하는 방법을 알아보겠습니다.In an upcoming section, you'll learn about how to see code updates without needing to rebuild and start a new container every time you make a change.

지속성에 대해 배우기 전에 해당 이미지를 다른 사용자와 공유하는 방법을 빠르게 살펴보겠습니다.Before learning about persistence, you'll quickly see how to share these images with others.

다음 단계Next steps

자습서를 계속 진행합니다.Continue with the tutorial!