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

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

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

1. 비연결성 HTTP의 특징 - stateless (클라이언트의 이전 정보를 기억하지 않고, 클라이언트의 요청이 들어오면 그 요청에 대한 응다배주고 바로 연결을 끊어버림) 비연결성의 장점 - 클라이언트의 기존 정보를 포함하고 있지 않으니 서버 과부하가 걸리지 않는다. 서버 자원의 효율적 사용 비연결성의 단점 - 클라이언트가 웹 브라우저를 요청하면 서버는 HTML만 보내는게 아니라 CSS,JS,이미지파일 등 다양한 형식의 것들을 보내는데이 자원을 하나하나 받을때마다 연결하고 다시 끊고 하면 비효율적 => HTTP는 기본적으로 지속연결을 한다. 2. HTTP 메시지 위에서도 언급했듯이 HTTP는 텍스트,이미지,음성 파일 등 바이너리 형식의 데이터를 모두 다 보낸다. HTTP 요청 메시지와 HTTP 응답 메..

1. 리액트는 컴포넌트로 구성되어 있으며 컴포넌트는 UI를 독립적이고 재사용이 가능하도록 나눈 조각이다. 2. JSX 영역이 실제 화면에 그려지는 부분이며 return() 함수 안에 작성한다. html 처럼 생겼지만 자바스립트이다. JS 영역의 처음 시작은 태그로 감싸주거나 로 작성한다. 한 줄은 상관이 없지만 한 줄 이상은 그룹형(Fragment) 또는 Div로 묶어야 한다. Fragment에 큰 뜻은 없으며 단순히 태그 감싸기 용이다. 3. webpack은 html,css,js 등을 하나로 묶어 (파일들을 묶어) 한 번에 실행시켜주는 도구이다. 4. ex) let [추천,추천변경] = useState(0); 과 같은 경우는 맨 앞에 있는 값인 '추천'의 초기값을 0으로 셋팅하겠다는 의미이다. 5. 리..