처음 자바스크립트를 사용하는 입문자가 처음으로 오류를 맞닥뜨렸다!
아래와 같이 아주 간단하게 해결해보자.
1. 문제 발생
가운데 기록하는 입력화면에서 "앨범 내용"과 "앨범 날짜" 사이에 간격이 없어 붙어서 보인다.
"앨범 이미지"와 "앨범 제목" 과 같이 간격을 맞춰야한다.
문제를 발견했는데 어떻게 수정하지?
문제점으로 보이는 부분에 커서를 가져다 대고 오른쪽 마우스를 클릭! (Window 기준)
(maxOS는 두손가락이 오른쪽 마우스 클릭과 동일)
2. 오류 발견하기
이때 발생한 문제의 종류가 어디인지 알아야한다. (Html / CSS / Javascript)
<input type="email" ...> 이건 html에 해당하는 내용이다.
(만약 내용 입력에 문제가 있으면 <input>에서 오류를 수정.)
내용 입력에는 문제가 없으므로,
상위 박스의 <div></div>에 속한 내용을 확인한다.
.
코드가 길어서 잘 안 보일 수 있다.
그럴 땐 코드 가장 앞쪽 삼각형을 눌러주면 코드를 접었다가 펼 수 있다.
같은 모양의 <div></div> 끼리 접어준다.
그러면 같은 종류의 코드인 경우 다르게 작성된 코드를 한 눈에 파악할 수 있다.
나머지 3개가
<div class="form-floating mb-3">
여기서 mb는 margin* botton의 약자
*border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
border를 기준으로 botton의 여백을 지정한다고 보면 된다.
문제의 부분이
<div class="form-floating"> 라고 작성된 것을 확인할 수 있다.
각자의 코드에서 오류를 발견해보자.
1. 같은 코드끼리 비교하고 다르게 작성된 부분 확인하기
2. 코드 자체를 분석하고 오류를 확인하기 ex) <script></script> 함수 확인
3. 오탈자를 확인하기 / 마지막에 ' ; '
...etc
3. 오류 수정 후 미리보기
문제의 코드에 더블 클릭하면 코드 입력이 가능하다.
mb-3을 입력한 후, 코드를 벗어난 곳에 한 번 클릭 혹은 Enter를 입력한다.
오류가 있는 코드를 수정하고 수정이 반영된 화면을 바로 확인해보자.
그러면 오류 수정이 적용된 화면을 확인할 수 있다.
다만, 오류 수정이 반영된 것은 아니다. (브라우저의 특성상 보여주기에 불과함. 미리보기)
4. 오류 수정된 코드를 입력하고, 저장하기
이제 본격적으로 코드를 수정하기 위해, Visual Studio Code 창을 띄운다.
각자 입력한 코드 창을 띄우기.
<div class="mypostingbox" id="postingbox"> 코드에 포함된
<div class="form-floating">라고 적힌 코드 수정
동일하게 왼쪽에서 같은 코드끼리 접어서 확인이 가능하다.
수정해야하는 오류를 입력하고 반드시 저장한다.
저장하지 않으면 오류 수정이 반영되지 않는 점. 유의하자.
5. 오류 수정 확인, 오류 해결 완료
띄워두었던 창을 새로 고침하거나 Visual Studio Code에서 단축키 option+B (window 사용자는 Alt+B)
간단한 예시였지만, 복잡한 오류가 발생하여도 같은 방법으로 오류를 찾아낼 수 있으니,
당황하지말고, 위 과정을 따라해보면서 오류를 해결해보자!
ＴＩＬ 10월 3일