코드샌드박스 관련 질문

Question

코드샌드박스가 많이 바뀐것 같아요. create 샌드박스 눌러도 바닐라 자바스크립트가 뜨질 않습니다. 그리고 js 파일에서 console.log('test) 쓰고 실행은 어떻게하고 콘솔창은 어디에 있는건지 궁금해요.

잔재미코딩 DaveLee · Answer

안녕하세요. 답변 도우미입니다. 코드샌드박스는 외부 시스템이라서, 조금씩 메뉴 위치등은 변할 수 있습니다. 이 부분은 저희가 어떻게 할 수 없어서 죄송합니다. 하지만, 기본적으로는 메뉴 위치를 조금 바꾸더라도, 당연히 사용하라고 만들어놓은 메뉴라서, 당황하지만 않으시면 사용하시는데 큰 이슈는 없으실꺼예요. 저희가 금일 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 코드 디버깅에 아주 유용하게 사용됩니다. 감사합니다.