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

아직 React의 key-props 그리고 컴포넌트들이 헷갈린다. 이참에 이 둘의 개념들에 대해 한 번 정리해보자. Warning: Each child in an array or iterator should have a unique "key" prop ... 리액트를 개발하다 보면 자주 나오는 Error.. 이전 포스팅에서도 이 에러에 대해 다뤘다. 왜 React의 Element에 key prop이 필요하고, key prop을 사용하면서 주의해야 할 점? - 재조정 (Reconcilation) key prop을 이해하기에 앞서 React가 화면을 어떻게 업데이트 하는지 알 필요가 있다. React는 새로운 엘리먼트를 그리기 위해 비교 알고리즘 (Diffing Algorithm)을 이용해서 효율성을 최대화..

요즘 리액트를 공부하면서 map() 함수가 눈에 많이 보인다. 그리고 이전에 파이썬 알고리즘을 공부할 때도 map() 함수를 썼었는데 이참에 map() 함수에 대해 좀 더 자세히 공부해보고자 한다. 아직까지는 개념이 헷갈리는 것 같다. map() - '자바스크립트' '배열' '객체 내장 함수'인 map 함수를 사용하면 반복되는 컴포넌트를 렌더링 할 수 있다. - map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱 한 후 그 결과로 새로운 배열을 생성한다 const numbers = [1,2,3,4,5]; let processed = numbers.map(function(num) { return num*nu }); ---화살표 함수로 정의시 const result = numbers..

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..

1. React에서 CKEditor 사용하기(짱 신기) VSCode에 npm install ~ 해서 ckeditor 설치해주고 아래 코드 내용 import 해주고 render() 함수 안에 붙여넣어주면 된다. CKEditor은 콘텐츠를 웹 페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 위지위그 리치 텍스트 에디터 핵심 코드는 JS코드로 작성되어 있다. 이지윅이란 WYSIWYG What You See Is What You Get 2. React 프로젝트 내의 public > index.js 파일에 있는 태그이다. 지워도 아무런 에러가 생기지 않는다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다.Fragment와 같이 UI를 렌더링하지 않으며 자손들에 대한 부가적..