⚠️ How to tackle problems
프렙 코스 11기 Office Hour..
위의 영상은 바닐라코딩의 프렙 코스 11기의 오피스아워 영상입니다.
모두 어디선가 한 번쯤은 해보셨을 Tick Tack Toe 라는 게임을 만드는 과제가 주어졌는데요.
켄님과 함께 차근차근 문제를 해결하기 위해 접근하는 방법을 고민해볼까요?
여러분들에게 어떤 문제가 주어졌을 때, 그 문제를 잘 해결하기 위해서 필요한 것은 무엇일까요?
사전학습가이드를 마치고, 프렙 코스를 수강하고 이어 부트캠프까지 수강을 고민하는 여러분들에게는 앞으로 많은 과제가 주어지게 됩니다. 이는 회사에 가서도 마찬가지입니다. 매주 주어지는 다양한 문제와 태스크들을 해결하기 위해 필요한 것은 바로 작은 단위로 나누어 보는 것입니다.
특히, 이제 막 프로그래밍 학습을 시작 한 여러분들은 하나의 과제를 해결할 때, 여러 태스크를 한 번에 고민하려 하지 말고 작은 단위로 나누어 하나씩 하나씩 차근차근 해결하는 습관을 들이는 것이 좋습니다.
물론, 앞으로 코딩에 어느정도 익숙해지고나면 하나씩 해결할 수 있는 단위와 범위가 지금보다 늘어나겠지만 나중에도 작은 단위로 쪼개는 것은 문제를 해결하는 데 있어 좋은 습관이 될 수 있습니다.
위의 영상을 통해 Tick Tack Toe 라는 게임을 만들라는 과제가 주어졌을 때, 맨 처음 우리는 어떻게 문제에 접근할 수 있을지를 켄님과 함께 차근차근 확인해보세요. 그리고 그렇게 배운 접근 방법을 항상 기억하고 이용해보세요.
자, 여기 10줄짜리 코드를 작성한 다음 제대로 작동하는지 테스트하는 사람과 2줄짜리 코드를 작성한 뒤에 테스트를 하는 사람이 있습니다. 그런데 두 사람 모두 오류가 발생했네요. 이 상황에서 어디에서 오류가 났는지 쉽게 찾을 수 있는 사람은 누구일까요?
네, 당연히 2줄 짜리 코드를 작성하고 테스트하는 사람이겠죠. 2줄 중에 오류의 원인이 있을 것이니.. 내가 확인할 범위를 줄이는 것은 전체적인 작업 속도를 높이는 데에도 효과적입니다.
초보자일 때는 더더욱 자주 내가 작성한 코드가 잘 작동하는지 테스트하는 습관을 들여보세요. 한 번에 전체 코드를 작성한 뒤에 에러의 원인을 찾는 건 너무 힘들 수 있습니다.
처음부터 완벽하고 예쁜 코 드를 작성하기 위해 고민을 하다보면 결국 한 줄도 작성하지 못 할 때가 많아요. 반복이 예상되는 모든 코드를 하나의 반복문으로 작성하기 위해 고민하기보단 우선 작동하도록 코드를 작성한 뒤에 개선하는 방향이 오히려 정확하고 빠른 작업에 도움이 될 수 있습니다.
앞으로 개발을 하면서 가장 많이 보게 될 문서인 MDN. MDN에서는 자바스크립트와 관련된 여러 함수들의 정의와 사용법을 확인할 수 있는데요. 너무 어렵게 생각하지 말고 차근차근 읽어볼까요?
출처: MDN
출처: MDN
출처: MDN
먼저, 찾고 있는 함수이름의 바로 아래에 나오는 설명은 아주 꼼꼼히 읽는 것을 권장합니다. 바로 이 부분에 이 함수가 무엇인지 정확히 설명해주기 때문입니다.
위의 예시로 든
addEventListener 함수의 경우 어떤 타겟에 특정 이벤트가 실행될 경우 다른 함수를 호출한다고 되어있습니다. 그럼 그 아래를 좀 더 살펴보면 이 함수에 파라미터, 즉 인자로 들어올 수 있는 리스트도 확인할 수 있습니다. 이런 내용을 바탕으로 실제 이 함수가 이용되는 예시들도 확인하실 수 있습니다.앞으로 MDN 문서를 확인할 때는 이런 내용들을 참고해서 꼼꼼히 보는 습관을 들여보세요!
+ 한글로 잘 번역이 되어있는 문서도 있지만 영어로 보는 연습을 해보세요. 대부분의 문서는 영어로 써있기 때문입니다.
어느정도 코드를 작성하였다면 내가 작성한 코드를 한 번 살펴보세요. 현재 단계에서 제일 빠르게 가독성을 높이고 개선하는 방법은 반복되는 코드를 반복문으로 처리하는 것일거예요.
앞서 배운 for문과 if문을 활용해 반복되고 있는 코드들을 하나로 묶어보세요.
내가 원하는 대로 코드가 작동하고 있는지를 점검하기 위해 우리는 앞으로
console.log 를 많이 활용하게 될 것입니다. 확인이 필요한 코드 위치에 console.log를 이용해 내가 원하는대로 작동하고 있는지를 체크해보세요. 함수가 잘 실행되고 있는지, 원하는대로 변수는 바뀌었는지 꼼꼼히 확인해보세요.Last modified 10mo ago