인프런 커뮤니티 질문&답변

안녕하세요. 답변 도우미입니다.

코드샌드박스는 외부 시스템이라서, 조금씩 메뉴 위치등은 변할 수 있습니다. 이 부분은 저희가 어떻게 할 수 없어서 죄송합니다. 하지만, 기본적으로는 메뉴 위치를 조금 바꾸더라도, 당연히 사용하라고 만들어놓은 메뉴라서, 당황하지만 않으시면 사용하시는데 큰 이슈는 없으실꺼예요. 저희가 금일 create 를 눌러봤는데요 그러면 다음과 같이 뜨고, 여기서 create a sandbox 를 통해 HTML + CSS 로 이동해서, 나만의 샌드박스를만들 수 있음을 확인하였습니다.

또 처음 만드실 때는 다음과 같이 진행하시면 바로 유사한 환경을 확인하실 수 있습니다. 이 부분은 공유드린 01_html정리.pdf 자료에 바로 업데이트해놓았습니다.

0. 준비

https://codesandbox.io/ 접속 -> 로그인 후, Create a Sandbox 선택 -> HTML + CSS 선택

다음으로 js 파일에서 console 사용법은 사실 영상에서 시연을 해드려서, 이전 영상을 한번 찾아보셔도 좋거든요. 가볍게 이를 글로 작성하면 다음과 같습니다.

콘솔 창 사용하기

1. 개발자 도구 열기: 크롬 브라우저에서 HTML 파일을 연 후, F12 키를 누르거나, 오른쪽 상단의 세 점 메뉴(⋮) → 도구 더보기 → 개발자 도구를 선택하여 개발자 도구를 엽니다.

2. 콘솔 탭 이동: 개발자 도구에서 상단의 탭 중에서 Console을 선택합니다. 이곳이 바로 콘솔 창이에요.

3. 콘솔 메시지 확인: 여기에서 console.log로 출력된 메시지를 확인할 수 있습니다. 위 예시대로라면, 콘솔에 test라는 메시지가 보일 거예요.

이렇게 하면 JavaScript 파일에서 console.log로 쓴 메시지를 크롬 브라우저의 콘솔 창에서 볼 수 있어요. 개발자 도구의 콘솔 창은 JavaScript 코드 디버깅에 아주 유용하게 사용됩니다.

감사합니다.