스터디기록일지

아직 리액트를 본격적으로 내가 하고 있는 클론코딩 에어비앤비에 바로 적용하기 감이 잡히지 않아 간단하게 영화앱을 먼저 만들어 보았다. 그래도 이렇게 준비를 하니 리액트로 바꾸는 작업 시작이 어렵지는 않을 듯 하다. Movie.jsx라는 컴포넌트를 만들어 놓고 import React from "react" const IMG_BASE_URL ="https://image.tmdb.org/t/p/w1280/"; export default function Movie({title, poster_path, vote_average}) { return ( {title} {vote_average} ) } 더미데이터를 불러오기 위해 App.js를 수정한다. function App() { return ( { dummy.res..

3주차 피드백 export default function Header(){ return ( 토익 영단어(고급) 단어추가 Day 추가 ); } react 배우기. 프로그램 안에서 내가 웹을 배우고 있지만 사실 거의 자발적으로 공부해야하는 수준이다. 진짜 뼈대 중에 뼈대만 알려주고 나머지는 스스로 공부해야 한다. 이것저것 모르는 것을 직접 찾고 유튜브 강의도 찾아 듣고 개인적으로 타의적?으로 행해지는 자발적 공부에 맞는 편이라 그래도 잘 진행되고 있는 것 같다. 하지만 스스로 공부의 단점은 바로 내가 지금 옳게 틀리지 않게 배우고 습득하고 있느냐다. 계속 나는 한가지 레퍼런스만이 아닌 여러 레퍼런스를 보고 배우려 해 이 점을 채우려 노력 하고 있다. create-react-app으로 프로젝트 생성 터미널에서..

Virtual DOM 란? Virtual DOM이 무엇인지 그리고 기존 웹이 사용하는 DOM과의 차이점 DOM DOM은 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(object)로 변환하는 것이다. DOM은 내가 작성한 HTML로 부터 생성되지만, 브라우저가 알아서 필요한 노드들을 붙여준다. 예를 들어, 나 없이 안에 어떠한 내용을 작성을 하더라도, 브라우저로 열어보면 자동으로 생성되어 있다. 그리고 자바스크립트로 인해 새로운 노드를 추가할 수도 있다. const newTextDiv = document.createElement('div') const helloWorld = document.createTextNode('Hello world!') ..

2주차 피드백 이제 react를 활용해야하는데 아무래도 html, css적으로 두 화면은 제대로 구성한 채 시작하고 싶어 조금 시간을 끌었다. 현재까지 완성된 화면 그리고 실제 에어비앤비 화면 헤더에 디테일이 조금 부족하지만 제법 비슷하게 만들어졌다. 그리고 아래는 상세 페이지! 아직 js는 시작하지 않은 단계라 달력부분은 빠져있다. 아래는 내가 개발한 화면 아래는 실제 에어비앤비 상세 페이지이다. 내가 개발한 화면 에어비앤비 실제 화면 내가 개발한 화면 실제 에어비앤비 화면 이밖에도 같은 페이지 속 내가 클론코딩한 것들이다,

진행상황 room 페이지를 완성중이다. 아직 자바스크립트를 활용하지 못한 점이 아쉽지만 html, css 적으로도 아직 부족하다보니 아직 자바스크립트까지 갈 단계가 못 되었다. 오늘 꺼는 메인 페이지와 비슷한 부분들이 많아서 issue들이 발생하지 않았다. 아마 html, css단계가 조금 더 완성되고 자바스크립트 단계로 나갈 쯤 생기지 않을 까 싶다. 메인 페이지와 이 룸페이지 2개를 얼른 완성하고 자바스크립트 단계로 나가야 겠다.

Issue Grid를 사용하여 반복되는 행과 열을 만들어야 한다. Problem Grid를 주었는데 화면이 보이지 않는다. css적으로 문제가 생긴 것. Solve. 해결됐다! 요소가 아닌 전체에 해당하는 코드를 요소에 넣어 되지 않았던 것이다. CSS적으로! /* 동적으로 바꾸는 법 연구 */ .main_ctt_mdl { background-color: aqua; display: grid; margin-block: 8px 32px ; grid-template-columns: repeat(4, 321.8px); grid-template-rows: repeat(7, 405.7px); column-gap: 24px; row-gap: 40px; grid-auto-rows: minmax(0, 1fr); } .m..

Issue, Problem, Solve, What I Learn Issue 수직 가운데 정렬은 어떻게 할까 Problem 위와 아래를 세로로 중앙에 배치하고 싶은데 padding이나 margin값을 두는 것이 아니라 다른 속성을 사용해 문제를 해결하고 싶다. Solve 찾아보니 div에 line-height를 추가하라고 한다. 그렇다면 line-height는 어떤 속성일까. line-height 속성은 line-box 의 높이를 지정한다. 주로 텍스트간의 줄 간격을 조절할 때 사용한다. 아래의 그림을 보고 바로 이해했다. 출처: https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%..

Issue, Problem, Solve, What I Learn 1주차 미흡한 부분 보완 - question이라 표시 된 것들 Question? aria-label은 어떤 역할을 하는가? Answer 우리 눈에 보이지 않더라도 브라우저에게는 전달이 되면 좋은 정보, 혹은 스크린 리더를 통해 웹을 사용하는 사용자들에게 전달해야 하는 정보를 제공하고 싶을 때 사용하는 게 aria-label이다. 해당 링크가 어떤 것을 의미하는지 정확하게 알려주고 & 웹에 더 정확한 정보를 전달하기 위해서 사용하는 속성 Application Question? 피드백 - "header, main, footer 등 div와 역할을 같지만 이름이 다른 다양한 시맨틱 태그들을 사용합니다" 시맨틱 태그들이란? Answer & Appl..

html의 DOM 이란 무엇인가 ? DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공하며 웹 페이지의 객체 지향 표현이다. 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다. DOM 은 nodes와 objects로 문서를 표현하는데 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 int..