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항목(버튼,텍스트 등) ..

* 해당 강의는 Udemy의 React 완벽 가이드를 수강하고 작성한 TIL 입니다. 외국 강의이지만, 자막 설명은 물론 설명이 너무 잘 되어있어서 복기하기에 좋은 강의입니다 :) 1. let과 const의 차이점 let은 값을 수정할 수 있지만 const는 값을 수정할 수 없다. 그리고 JS에서는 대부분 const를 사용한다 const는 값이 변하지 않는 상수 변수이다. var을 사용하면 값이 바뀐 그대로 나온다. var 부분을 let 으로 변경하여도 brandy 그리고 jeonghoon이 출력된다. 그런데 여기서 let > const로 변경하면 어떻게 될까? TypeError가 발생한다. 상수 변수에다 값을 재할당(brandy > jeonghoon)하려고 했기 때문이다. 즉, const는 새로운 값을..

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 를 추가하라고 한다. 그대로 따라해보니 리액트에서 오류메시지는 뜨지 않았다.

요즘 리액트를 공부하면서 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..