Forms Demo Enter a Username: Enter a Password Enter a color Enter a number 검색 쿼리 구조 쿼리 구조는 회사마다 다르다. //유튜브 https://www.youtube.com/results?search_query=dog // 네이버 https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EC%9E%94%EB%82%98%EB%B9%84 //Reddit https://www.reddit.com/search/?q=rabbit : 그동안 태그에 대해서 거의 잊다시피 했는데 웹부캠 강의를 들으면서 다시 한 번 상기할 수 있었다. 은 UI항목(버튼,텍스트 등) ..

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

1. 페이지 이동을 위해 npm install react-router-dom을 설치하고 코드도 계속해서 보았는데 설정한 path대로 URL이 출력되지 않고 빈 화면만 나왔다. 구글로 서치하던 중에 기존에 설치했던 react-router-dom을 uninstall하고 npm install react-router-dom@5 로 했더니 원하던 결과가 출력되었다. 2. Unexpected use of 'location' no-restricted-globals 의 경우 스택오버플로우를 참고해보니 location 변수를 사용하는 곳 위에 // eslint-disable-next-line no-restricted-globals 를 추가하라고 한다. 그대로 따라해보니 리액트에서 오류메시지는 뜨지 않았다.

아직 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)을 이용해서 효율성을 최대화..

1. key props 값은 유일해야 한다 key={movie.id} Movie 컴포넌트에 위와 같이 key props를 추가해주면 된다. 2. HTML에서는 class라고 쓰지만, 리액트에서는 className을 사용한다. 3. PropType propTypes 전부 PropTypes 라고 써줬는데 리액트 화면에서 에러가 났다. propTypes로 쓰라고. 그런데 고치다보니 어떤건 propTypes를 써야 하고 어떤 속성은 PropTypes라고 쓰라고 하고 어떤 것은 ProtoTypes 라고 이건 무슨..? Quick Fix를 하니 결과는 잘 나왔다. 그런데 왜 어떤건 propTypes라고 써줘야 하고 어떤 것은 PropTypes라고 써줘야 하는 걸까 구글링을 해보았는데 이런 케이스를 찾지 못했다.. ..

1. state 리마인드 다시 한번 주의하자 리액트는 state가 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력한다. 그런데 state를 직접 변경하는 경우에는 render() 함수를 다시 실행하지 않는다. 즉 어떤 동작이 업데이트가 되면(+ 버튼을 누른다거나, - 버튼을 누른다거나.. 하면) render() 함수가 다시 실행되어 그 결과를 화면에 출력해주는 것이다. 2. 리액트 생명주기 큼직큼직한것만 보자면 constructor() 함수 실행 > render() 함수 실행 > componentDidMount() 함수 실행 1.Add또는 Minus 버튼을 누르면 setState() 함수가 실행되고 2. 버튼이 눌렸으므로 화면의 변화가 생긴다. render() 함수가 다시 ..