1. 시맨틱 태그를 사용하는 이유 - html 코드를 작성할 때 웹 브라우저가 HTML의 소스코드만 보고도 어느 부분이 제목이고 어느 부분이 메뉴이고 본문인지를 쉽게 알 수 있게 하도록 하는 지표. - 검색 엔진이 검색을 수행할 때에는 HTML 태그 내에 있는 태그를 분석하는데 태그들의 의미가 분명하다면 검색 엔진 입장에서 구분하기가 쉬워진다. - 코드 가독성 및 유지보수가 쉬워진다. 모든 태그가 로 되어있으면 어느 영역(헤더,바디,푸터 등)인지 알기 힘든데 시맨틱 태그를 이용하면 해당 영역에 접근하기 쉬워진다. >> 결국은 코드를 쉽고 편하게 읽기 위해서 시맨틱 태그를 사용한다고 하자. 2. 시맨틱 태그의 종류 ,:웹페이지 메뉴 만들때 사용, :메인 콘텐츠를 나타내는데 사용(nav,aside,secti..

1. 리액트가 반환한 컴포넌트 renderFood()는 map() 함수가 반환한 리액트 컴포넌트를 출력하려고 사용해본 코드이다. function renderFood(dish){ return ; } // const renderFood = dish => ;도 같은 표현이다. function App() { console.log(foodILike.map(renderFood)); return( /*;*/ {/*{foodILike.map(dish=>())}*/} {/*위에서 food라는 컴포넌트를 만들고 여기서 사용*/} {foodILike.map(renderFood)} ); } 0번 인덱스에 대해서 구체적으로 보고 싶다면 다시 열어서 본다. 콘솔창을 보면 아래와 같은 에러가 발생하는데 key의 값이 실제로 없어서..

1. npx 표현1 : 1회성으로 최신 버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지 표현2 : (프로젝트 이름) 프로그램을 임시로 설치해서 딱 한 번만 실행시키고 지움 - 컴퓨터 공간을 낭비하지 않는다, 설치를 실행할 때마다 새로 다운로드 하기 때문에 항상 최신 상태 2. React에서의 index.html * 리액트 동작 원리 * 표현1 : 왜 사이가 비어 있었는지 알 수 있을거야. 리액트는 우리가 작성한(수정한) 프로젝트 폴더에 있는 코드를 자바스크립트를 이용해서 해석해. 그리고 해석한 결과물을 index.html로 끼워넣어. 우리가 App.js나 index.js와 같이 작성한 파일들을 리액트가 해석해서 index.html에 끼워 넣는거야 표현2 : public이라는 디렉터리에는 index..

1. 리액트에서 프로젝트 이름은 대문자가 포함되면 안되는 것 같다. 전부 소문자로 해야 create-react-app을 할 때 에러가 나지 않는다. 2. 명령 프롬프트에서 리액트 앱 실행 맨날 VSCode 터미널에서 npm start로 했었는데, CMD로는 처음 해보는데 신기했다. Local 주소는 3000번 포트를 이용하고(node.js) 내 네트워크에서는 192.168 ~ 로 시작되는걸 쓴다. 3. 리액트에서 웹팩과 바벨이 필요한 이유? 리액트는 비교적 최근에 나온 기술이라서 일부 브라우저는 이해할 수 없는 코드로 구성되어 있다. 그래서 웹팩과 바벨이라는 도구가 필요하고 이 도구로 리액트를 모든 브라우저가 이해할 수 있도록 컴파일 해야 한다. 4. package.lock.json이 무엇인가? npm을..

1. 각 태그들이 block 요소인지, inline 요소인지 구분하는 것 중요 Inline 속성 : 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향 태그 태그들이 줄을 넘기지 않고 한 줄에 나란히 붙는 결과 codepen으로 실행을 해보니 한 줄에 하나씩 태그로 링크를 작성하였는데 브라우저 결과는 나란히 링크가 4개 나온다. 도 inline 태그! > inline 요소를 가진 태그들이 서로 나열되었을 때 최소한 같은 줄에 같은 높이로 가지런히 위치 + 약간의 좌우 간격으로 서로를 분별할 수 있도록 하기 위한 웹 브라우저의 기본 설정 (나는 링크와 링크 사이에 간격을 설정하지 않았는데도 링크 링크 사이의 어느정도 간격이 웹 브라우저의 특성으로 인해 간격이 디폴트로 설정되어 있는 것이군) blo..

220321 모바일로배우는 JSP TIL 작성 1. 웹 문서를 스마트폰으로 보기 위해서는? 예를 들어 hello.html을 스마트폰의 웹브라우저에서 실행하면 콘텐츠가 작게 보이기 때문에 접속하는 디바이스에 최적화된 크기로 출력되도록 태그 내에 작성하고 적용 external style sheet -> 이 방법을 가장 많이 사용. 같은 디렉토리 내에서나 다른 디렉토리에서 해당 css 파일을 불러와서 연결하기만 하면 어디서든지 적용 가능(이것의 모듈화의 장점) 로 해당 css 파일 연결 -> 주로 밑 태그 위에 작성한다. 8. width 속성 %는 상대 단위를 나타낸다. 가용 너비가 있다면 그에 비례해서 커지거나 작아지게 하고 싶을 때 상대 단위인 %를 사용한다 ex) 가용 너비가 400px인 상황에서 wid..