본문 바로가기
카테고리 없음

TIL 12일차(2023-05-29)

by seungbeom35 2023. 5. 30.

이번 주 목표

개인 과제 제외하고도 프로젝트 1개 이상 해보기

코드 공부 열심히 해서 웹사이트에서 사용하는게 어떤 용도인지 다 이해하기

토,일 둘 다  코드 관련 영상들 1시간 이상씩 보기 


규칙

1. 억지로 쓰지 않기. 

 - 진짜 배운 게 있는 날만 쓰기!

2. 양 신경쓰지 않고 기록하기. 

 - 양이 적다고 글을 포기하지 말고 조금이라도, 그게 한두줄이더라도 배운 게 있다면 기록하기!

3. 꼭 내 것으로 만든 후 작성하기. 

 - 스스로 생각을 좀 정리해본 후 TIL 글 적기!

 - 남이 쓴 글 복붙 X , 내가 배우고 느낀 점 위주로. (일단은 그렇게 해보자)

밑의 내용들은 내가 수업중에 메모해가며 적은것들이고 이를 통해 다시한번 공부가 되어 올렸으며 적으면서 복습이 되기 때문에 그날 공부한 것들은 안 외우더라도 매번 적을 예정입니다.


 

<어제 한 프로젝트에서 추가한 점+오늘 한 것들>

어제 한 프로젝트

오늘 한 프로젝트

Git Hub 파일 올리기

<문제점>

1.오늘 작업을 하는데 계속 cards-box의 CSS가 안 들어갔었다.

card-box까지는 CSS가 잘 들어갔는데 문제가 발생해 작업에 대한 지장이 있었다.

2.그리고 div는 한 문단을 차지하는데 그것을 3개로 나누는것을 몰랐다.

3.alert을 적용시켜서 id값만 나오는게 아니라 영화 id:도 같이 나오게 하는법

<고민의 흔적들>

   //   const click= document.getElementById('movie-card');
   //   movie-card.addEventListener('click',()=>{console.log("클릭되었다.")})
   // const click = () => {alert("영화 id: " + movie.id); };

<해결한 부분들>

1번에 경우에는 CSS의 문단에 중괄호 뒤에 세미 콜로을 넣으면 안되는 것이다.

세미 콜론을 넣으면 거기서 마무리가 되어서 뒤에 있는 CSS가 작용을 안한다. 세미 콜론은 중괄호 안에 있는 내용까지만 넣어주면 된다.

2번에 경우 팀원이 도와줬다. 
    display: grid;
    grid-template-columns: repeat(3, 1fr);로 넣으면 됐다.

저것이 3개씩 또 나눠졌는데 그것은 class의 명칭을 같이해가지고 나눠진 것이었다.

3번은 onclick=click()가 되어서 click의 함수에 값들을 다양하게 넣는데 해결이 안되서 그리고 alert으로 감싸주면 그것은 alert이라는 함수명을 지닌 것밖에 안되서 alert의 기능을 실행하지 못한다. 

결국 alert("영화 id:"+${movie.id})로 감싸서 값을 내서

해결하기는 했지만  그러면 결국 click()은 아무기능도 안하는게 돼서 아쉬웠다.


<내일 할 부분들>

1.내일은 click의 기능이 alert의 기능을 넣어서 값을 더 깔끔하게 만들 것이다.

2.Back ground color 및 border의 크기들을 깔끔하게 해서 웹페이지를 더 잘 만들 것이다.

3.그리고 오늘은 비쥬얼 스튜디오의 일부와 git hub의 웹페이지를 이용해서 업로드 했지만

내일은 비쥬얼 스튜디오만 이용해서 git hub에 업로드 해볼 예정이다.

4.자바스크립트 입문 테스트 및 다양하게 문제를 풀면서 값들을 넣고 메소드를 사용하지 않고 간단한 코드 및 function을 사용해 문제들을 고생해서 풀어볼 예정이다.


<느낀점>
이런식으로 적어보니 많지만 결국 내가 챗gpt에 검색 기능은 검색해봣고 막상 결과를 보니 if문에 관한 값에 대한 차이가 있어서 이번주 프로젝트가 일찍 끝나던가 시간이 남으면 나혼자 웹페이지를 만들어서 검색 결과 값을 챗gpt에 검색 없이 내손으로 만들고 말거라는 생각을 가지게 되었다.

그리고 코드에 다양한 것들을 해볼려고 했지만 시간이 순식간에 가서 모자랐다고 느꼈다.