작성
·
640
2
코드샌드박스가 많이 바뀐것 같아요.
create 샌드박스 눌러도 바닐라 자바스크립트가 뜨질 않습니다.
그리고 js 파일에서 console.log('test) 쓰고 실행은 어떻게하고 콘솔창은 어디에 있는건지 궁금해요.
답변 1
0
안녕하세요. 답변 도우미입니다.
코드샌드박스는 외부 시스템이라서, 조금씩 메뉴 위치등은 변할 수 있습니다. 이 부분은 저희가 어떻게 할 수 없어서 죄송합니다. 하지만, 기본적으로는 메뉴 위치를 조금 바꾸더라도, 당연히 사용하라고 만들어놓은 메뉴라서, 당황하지만 않으시면 사용하시는데 큰 이슈는 없으실꺼예요. 저희가 금일 create 를 눌러봤는데요 그러면 다음과 같이 뜨고, 여기서 create a sandbox 를 통해 HTML + CSS 로 이동해서, 나만의 샌드박스를만들 수 있음을 확인하였습니다.
또 처음 만드실 때는 다음과 같이 진행하시면 바로 유사한 환경을 확인하실 수 있습니다. 이 부분은 공유드린 01_html정리.pdf 자료에 바로 업데이트해놓았습니다.
https://codesandbox.io/ 접속 -> 로그인 후, Create a Sandbox 선택 -> HTML + CSS 선택
다음으로 js 파일에서 console 사용법은 사실 영상에서 시연을 해드려서, 이전 영상을 한번 찾아보셔도 좋거든요. 가볍게 이를 글로 작성하면 다음과 같습니다.
콘솔 창 사용하기
1. 개발자 도구 열기: 크롬 브라우저에서 HTML 파일을 연 후, F12
키를 누르거나, 오른쪽 상단의 세 점 메뉴(⋮) → 도구 더보기
→ 개발자 도구
를 선택하여 개발자 도구를 엽니다.
2. 콘솔 탭 이동: 개발자 도구에서 상단의 탭 중에서 Console
을 선택합니다. 이곳이 바로 콘솔 창이에요.
3. 콘솔 메시지 확인: 여기에서 console.log
로 출력된 메시지를 확인할 수 있습니다. 위 예시대로라면, 콘솔에 test
라는 메시지가 보일 거예요.
이렇게 하면 JavaScript 파일에서 console.log
로 쓴 메시지를 크롬 브라우저의 콘솔 창에서 볼 수 있어요. 개발자 도구의 콘솔 창은 JavaScript 코드 디버깅에 아주 유용하게 사용됩니다.
감사합니다.
답변 감사합니다! 콘솔창에서 잘 나옵니다.