[SeSAC X 코딩온] 웹개발자 풀스택 과정 4주차 회고 | JS, jQuery, 반응형, 부트스트랩

옹잉·2024년 1월 22일

SeSAC 코딩온

[SeSAC X 코딩온 도봉 1기] 웹개발자 풀스택 과정 회고

목록 보기

4/19

💡 1/15 - JS(DOM - addEventListener), jQuery

[막혔던 것]

실습하면서 막혔던 것들을 정리했다.

댓글 등록하기 실습 중
<input>태그를 통해 사용자 ID와 comment 입력값을 받아서 <ul> 자식으로 사용자 ID는 bold로 <li>태그 추가하는 과제였다.
이 때, userid.setAttribute("style", "font-weight: bold")로 적용하려고 했는데

~ is not a function 에러가 발생했다.
출력값에 css를 줄 수 있는 다른 방법을 찾아보다 innerHTML을 이용해서 해결할 수 있었다.

let btn = document.querySelector("button");
      let userid = document.querySelector("#userid");
      let comment = document.querySelector("#comment");
      let ul = document.querySelector("ul");

      btn.addEventListener("click", (e) => {
        event.preventDefault(); // 새로고침 막아주는 메소드
        let li = document.createElement("li");
        li.innerHTML = `<strong>${userid.value}</strong> - ${comment.value}`;  <<<= innerHtml 적용
        ul.appendChild(li);
        userid.value = "";
        comment.value = "";
      });

방명록 만들기 실습 중
코드를 다음과 같이 작성했는데

<body>
    <h1>여기는 방명록!!</h1>
    <form>
      <label for="writer">작성자</label>
      <input type="text" id="writer" autocomplete="off" />
      <br />
      <br />

      <label for="content">내용</label>
      <input type="text" id="content" style="width: 500px" autocomplete="off" />
      <br />
      <br />

      <button type="button" onclick="writeNote();">등록</button>
    </form>

    <br />
    <br />

    <table id="table" border="1" cellpadding="10" cellspacing="1">
      <tr>
        <th>작성자</th>
        <th>내용</th>
        <th>작성일</th>
      </tr>
      <!-- 
        코드 추가 예시
        <tr>
          <td>홍길동</td>
          <td>하이</td>
          <td>2022-10-05 12:34</td>
        </tr>
      -->
    </table>

    <script>
      // TODO: practice14_설명.png 이미지의 조건을 만족하는 js 코드 작성
      // writeNote() 함수를 미리 정의해두었습니다.

      // [등록] 버튼 클릭시 writeNote() 함수가 실행되도록 인라인 방식으로 미리 설정해 두었습니다.
      function writeNote() {
        let writer = document.querySelector("#writer");
        let content = document.querySelector("#content");
        let tr = document.querySelector("tr");
        let tdWriter = document.createElement("td");
        let tdContent = document.createElement("td");
        let tdDate = document.createElement("td");

        tdWriter.textContent = writer.value;
        tdContent.textContent = content.value;
        tdDate = new Date();

        let newTr = document.createElement("tr");
        newTr.appendChild(tdWriter);
        newTr.appendChild(tdContent);
        newTr.appendChild(tdDate); // <--- 63번째 line

        writer.value = "";
        content.value = "";
      }
    </script>

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. 에러가 발생했다.
두 가지 문제가 있었다.

Date 객체를 format하지 않았다. format 후 tdDate 변수의 textContent로 넣어주기
id="table"인 table 태그를 불러와서 그 자식 요소로 newTr과 td들을 추가해야 한다.

변경 후

<script>
      // TODO: practice14_설명.png 이미지의 조건을 만족하는 js 코드 작성
      // writeNote() 함수를 미리 정의해두었습니다.

      // [등록] 버튼 클릭시 writeNote() 함수가 실행되도록 인라인 방식으로 미리 설정해 두었습니다.
      function writeNote() {
        let writer = document.querySelector("#writer");
        let content = document.querySelector("#content");
        let table = document.querySelector("#table");

        let newTr = document.createElement("tr");
        let tdWriter = document.createElement("td");
        let tdContent = document.createElement("td");
        let tdDate = document.createElement("td");

        tdWriter.textContent = writer.value;
        tdContent.textContent = content.value;
        date = new Date();
				// date formating
        tdDate.textContent = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;

        newTr.appendChild(tdWriter);
        newTr.appendChild(tdContent);
        newTr.appendChild(tdDate);

				// table 태그 자식요소로 newTr 추가
        table.appendChild(newTr);

        writer.value = "";
        content.value = "";
      }
    </script>

📍 jQuery

JS를 간편하게 사용할 수 있도록 단순화 시킨 오픈소스 기반 자바스크립트 라이브러리이다.

다운로드 방식과 CDN(Content Delivery Network) 방식으로 사용할 수 있다.

jQuery 문법

$(선택자).동작함수();

: $는 jQuery() 함수의 축약 형태로, 식별자 역할을 한다.

💡 1/17 - jQuery2(클래스 조작, 이벤트 리스너), 반응형

지난 시간에 이어 계속해서 jQuery 문법에 대해 학습했다.

colors 배열에 담긴 css를 작성해 놓고, 다음과 같은 실습을 했는데 이번 시간에 배운 클래스 조작 방식으로 사용하고 싶어서 좀 오래 걸렸다. 그리고 아직 조건문 위치와 초기화 위치 정하는 것도 헤매서 한줄씩 읽어나가는 것을 잘 인지하면서 코드를 작성해야겠다.
	let colors = ["red", "orange", "yellow", "green", "blue", "purple"];
	    
	let i = 0;
    function changeColor() {
      if ($("div").hasClass(`${colors[i]}`)) {
        $("div").removeClass(`${colors[i]}`);
        i++;
        if (i === colors.length) i = 0;  // 만약 배열 끝까지 확인했다면 다시 0번째로 초기화
// colors 배열은 맨 끝에 undefined를 포함하고 있어서

        $("div").addClass(`${colors[i]}`);
      }
   }

반응형 - @media(미디어 쿼리)
@mdia 미디어유형(all, print, screen) and 크기규칙(min- || max-) {}

@media screen and (max-width: 480px) {
	// 화면 넓이가 480px <이하>일 때 화면에 적용할 코드 작성
}

@media print and (min-width: 481px) { // 숫자 주의!!
	// 화면 널이가 480px <이상>일 때 인쇄에 적용할 코드 작성
}

💡 1/19 - 반응형(mediaQuery), 부트스트랩

이 날은 진도 나가기 보단 실습 위주로 진행되었다.
반응형 실습 후 부트스트랩에 대해 소개해주신 다음 직접 웹 페이지를 만드는 실습을 진행했다.
부트스트랩(프레임워크)과 추가적으로 다른 자바스크립트 라이브러리도 활용한 웹 페이지를 만들어야해서 어떤걸 할까 하다가.
AOS를 사용해서 해리포터 등장인물들을 기숙사별로 나눈 웹 페이지를 만들었다.

사실 아직 미완성.

옹잉

틀리더라도 🌸🌈🌷예쁘게 지적해주세요💕❣️

이전 포스트