Korean subtitles

← 01-05 Finding Diffs Between Larger Files

Get Embed Code
5 Languages

Showing Revision 4 created 05/29/2017 by 금성 고.

  1. 직접 두 파일의 차이를 찾고
    문제가 해결됐습니다
  2. 하지만 무척 지루한 작업이고
    파일의 크기도 작았죠
  3. 만약 파일의 크기가
    수백, 수천 줄이 넘으면 어떨까요?
  4. 그런 경우에 어떻게 해야 할지
    알아보겠습니다
  5. 좀 더 많은 코드가 필요한
    프로그램을 살펴보겠습니다
  6. 이 Asteroids 라는 게임은
    읽기에 조금 힘들지만
  7. 시작하려면 스페이스 버튼을
    누르라고 하네요
  8. 이 고전 아케이드 게임은
    브라우저에서
  9. 플레이할 수 있습니다
  10. 좌우 화살표로 우주선을 회전하고
  11. 위 화살표로 전진할 수 있으며
    스페이스 버튼이 발사입니다
  12. 개발자 Doug McGuiness
    존경을 표합니다
  13. 직접 플레이하고 싶다면
  14. 강의 노트에 Doug 블로그의
    링크가 있습니다
  15. 하지만 일단은 이 코드의
    버그를 잡는데 집중해보죠
  16. 이 게임은 JavaScript로
    짜여 있습니다
  17. 하지만 JavaScript를 몰라도
    상관없으니 걱정 마세요
  18. 우주선이 전진하는데 화살표보다
    스페이스 키를 사용하는 것이
  19. 더 나을 것 같아서
    한번 바꿔보겠습니다
  20. 그러면 발사를 위한 버튼도
    새로 정해야겠네요
  21. 발사 버튼은 엔터키로
    바꾸겠습니다
  22. 게임을 다시 해보려고 하니
  23. 우주선이 전혀 전진하지 않네요
    움직일 수 없어요
  24. 아마 오타가 난 것 같은데
    확신은 못하겠네요
  25. 조작 키를 설정하는 코드는
  26. game.js 파일에
    포함되어 있습니다
  27. 이 파일에는 천 줄이 넘는
    코드가 있네요
  28. 예전 버전과 새로운 버전의
    코드 전체를 비교하는 것은
  29. 시간을 너무 많이
    소비할 것 같네요
  30. 다행히도, 파일 간에 다른 점을
    자동으로 찾아주는
  31. 툴이 많이 있습니다
  32. 윈도우 운영체제를
    사용한다면
  33. 명령 프롬프트의 FC 툴을 사용해
    파일을 비교할 수 있습니다
  34. Mac 이나 Linux 를 사용한다면
    FC는 사용할 수 없습니다
  35. 대신에 Diff 라는 내장 기능을
    사용할 수 있습니다
  36. 이전 예제에서 일일이 비교했던
    HTML을 비교하는데
  37. 이 툴을 사용해서
    비교해 보겠습니다
  38. 그런 다음 game.js 파일에서
    다른 점을 찾는 과정을
  39. 직접 해 보겠습니다
  40. 윈도우에서는 먼저
    명령 프롬프트를 열어줍니다
  41. 만약 git bash 를 사용해서
    이 문제를 해결하려고 한다면
  42. 이 뒤에 나오는
    Mac 과 Linux 사용자를 위한
  43. 과정을 따라 해 주세요
  44. 하지만 일단은
  45. 명령 프롬프트를 사용해서
    문제를 해결해 보겠습니다
  46. 가장 먼저, 파일이 있는 디렉터리로
    경로를 바꿔줘야 합니다
  47. 저는 Downloads 폴더에
    파일을 다운로드했으니
  48. cd Downloads 를
    입력해 줍니다
  49. FC favorite-app-old.html favorite-app.html
    명령을 입력합니다
  50. FC (File Compare) 에게
    비교하고 싶은
  51. 두 파일을 넘겨줍니다
  52. 엔터키를 누르면
  53. 두 파일을 비교하고 있는 것을
    확인할 수 있습니다
  54. 이 두 섹션은 파일의
    다른 부분을 보여주고 있습니다
  55. favorite-app-old.html 에서
    href = "style-1.css" 이고
  56. FAVORITE-APP.HTML 에서
    href = "style-!.css" 입니다
  57. 아래 세션을 보면
    서술 부분의 다른점을
  58. 볼 수 있습니다
  59. 재미있는 내용으로
    변한 부분이 있네요
  60. - 체르노빌 사태의 연못에서
    독성을 제거하기 위해
  61. - 해바라기가 사용되는 것을
    아시나요?
  62. 변하지 않은 섹션은
    결과에 보이지 않기 때문에
  63. 차이가 있는 부분에 대해서
    집중을 할 수 있습니다
  64. Mac 이나 Linux 환경에서는
    터미널에서 파일의 위치를 찾아서
  65. diff -u favorite-app-old.html
    favorite-app.html 을 입력합니다
  66. -u 옵션은 통일된 diff 의
    약자이고
  67. 그 결과를 읽기 좋게
    표시해 줍니다
  68. 이제 엔터 키를
    입력합니다
  69. 이 결과는 FC 와 조금 다른
    형식이네요
  70. 스크롤을 위로 올려 보겠습니다
  71. 먼저, 맨 위 쪽에
    있는 이 줄들은
  72. 깊이 생각하지 않아도 됩니다
  73. 앞의 줄 들은 단순히
    favorite-app-old.html 과
  74. favorite-app.html 을
    비교한다는 것을 보여줍니다
  75. 문장 앞에 + 나 - 가 없는
    문장은 변화가 없는 것입니다
  76. 예전 버전과 새로운 버전에
    모두 존재하는 부분이죠
  77. - 부호가 있는 문장은
    삭제된 문장입니다
  78. 예전 버전에는 존재하지만
    새로운 버전에는 없는 문장이죠
  79. + 부호가 있는 문장은
    새롭게 추가된 문장입니다
  80. 이제 아래로 내려보겠습니다
  81. 이 부분이 전에도 봤던
    스타일 시트가 변한 문장이고
  82. 이 부분은 설명 문장이
    변한 것입니다
  83. 자 이제, gameold.js 와
    gamenew.js 파일을
  84. 다운로드 섹션에서 받아서
    두 파일을 비교해 봅시다
  85. 파일은 아마 downloads 폴더에
    다운로드 될 것이므로
  86. downloads 폴더의 경로를
    찾아가 보세요
  87. 새로운 버전의 game.js 파일에서
    어떤 단어에서 오타가 났나요?
  88. 오타를 찾아서 이 박스에
    입력하세요
  89. 오타를 난 단어의
    올바른 형태를 적어주세요