-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
코드샌드박스 관련 질문
23.12.18 01:36 작성 조회수 348
2
코드샌드박스가 많이 바뀐것 같아요.
create 샌드박스 눌러도 바닐라 자바스크립트가 뜨질 않습니다.
그리고 js 파일에서 console.log('test) 쓰고 실행은 어떻게하고 콘솔창은 어디에 있는건지 궁금해요.
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
모던 웹을 위한 최신 Javascript 문법 이해를 위한 기본 지식과 준비
강의실 바로가기
답변을 작성해보세요.
0
잔재미코딩 DaveLee
지식공유자2023.12.19
안녕하세요. 답변 도우미입니다.
코드샌드박스는 외부 시스템이라서, 조금씩 메뉴 위치등은 변할 수 있습니다. 이 부분은 저희가 어떻게 할 수 없어서 죄송합니다. 하지만, 기본적으로는 메뉴 위치를 조금 바꾸더라도, 당연히 사용하라고 만들어놓은 메뉴라서, 당황하지만 않으시면 사용하시는데 큰 이슈는 없으실꺼예요. 저희가 금일 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 코드 디버깅에 아주 유용하게 사용됩니다.
감사합니다.
답변 1