웹공부(12)
-
220315 TIL
1. 비연결성 HTTP의 특징 - stateless (클라이언트의 이전 정보를 기억하지 않고, 클라이언트의 요청이 들어오면 그 요청에 대한 응다배주고 바로 연결을 끊어버림) 비연결성의 장점 - 클라이언트의 기존 정보를 포함하고 있지 않으니 서버 과부하가 걸리지 않는다. 서버 자원의 효율적 사용 비연결성의 단점 - 클라이언트가 웹 브라우저를 요청하면 서버는 HTML만 보내는게 아니라 CSS,JS,이미지파일 등 다양한 형식의 것들을 보내는데이 자원을 하나하나 받을때마다 연결하고 다시 끊고 하면 비효율적 => HTTP는 기본적으로 지속연결을 한다. 2. HTTP 메시지 위에서도 언급했듯이 HTTP는 텍스트,이미지,음성 파일 등 바이너리 형식의 데이터를 모두 다 보낸다. HTTP 요청 메시지와 HTTP 응답 메..
2022.03.15 -
220311 TIL
1. 리액트는 컴포넌트로 구성되어 있으며 컴포넌트는 UI를 독립적이고 재사용이 가능하도록 나눈 조각이다. 2. JSX 영역이 실제 화면에 그려지는 부분이며 return() 함수 안에 작성한다. html 처럼 생겼지만 자바스립트이다. JS 영역의 처음 시작은 태그로 감싸주거나 로 작성한다. 한 줄은 상관이 없지만 한 줄 이상은 그룹형(Fragment) 또는 Div로 묶어야 한다. Fragment에 큰 뜻은 없으며 단순히 태그 감싸기 용이다. 3. webpack은 html,css,js 등을 하나로 묶어 (파일들을 묶어) 한 번에 실행시켜주는 도구이다. 4. ex) let [추천,추천변경] = useState(0); 과 같은 경우는 맨 앞에 있는 값인 '추천'의 초기값을 0으로 셋팅하겠다는 의미이다. 5. 리..
2022.03.11 -
220308 TIL
1. React에서 Node.js를 사용하는 이유? Node.js를 설치하게 되면 npm(Node Package Manger)이 설치된다. Node.js와 React가 직접적인 관련은 없지만, React 프로젝트 개발 시 필요한 주요 도구들(바벨,웹팩 등)을 Node.js의 npm이 설치해주는 것이다. 2. 리액트 프로젝트를 VSCode에서 쉽게 생성하는 방법 Terminal에 npx create-react-app 프로젝트 이름 npx는 npm의 아들이며 npm@5.2.0 버전부터 새로 추가되었다고 한다. npx가 없을 당시에는 npm을 통해 React app을 생성했는데 npm install -g create-react-app ~ 을 했었는데 문제점이 있었다. CRA(Create React App:리액..
2022.03.08 -
JavaScript의 내부동작원리는?
안녕하세요. brandy 입니다. Javascript를 공부하던 도중 Call stack의 개념에 대해서 알게 되었고, Event Loop 등 관련한 개념들을 정리해보고자 합니다. 이전에는 학교에서 자바스크립트는 HTML 페이지와 어떤 방식으로 상호작용 하는지만 알았다면, 내부 동작 원리를 이해하고자 합니다. 이제는 어떤 엔진으로 돌아가고 자바 시간에 배운 스레드와 맞물려 이해해보고자 합니다. * Single Thread : 일하는 주체가 1개 > 하나의 작업만 처리 가능 그런데 자바스크립트는 동시에 많은 작업을 처리하는 '것처럼 보인다' 왜 그럴까요? 바로 Event Loop 에 의 의해 가능한 일입니다. 출처 : https://joshua1988.github.io/web-development/tran..
2022.01.12 -
21.12월 모각코) Javascript 3일차 - HTML+JS
안녕하세요. brandy 입니다. 이번 모각코 Javascript 3차시에서는 HTML과 Javascript를 연결하는 방법에 대해 학습하였습니다. 1222.html click me
2021.12.22 -
21.12월 모각코) Javascript 2일차 - DOM 구조 학습
안녕하세요. brandy 입니다. 오늘은 모각코 Javascript 2일차 DOM 구조에 대해 학습하였습니다. 웹 페이지는 일종의 문서 = document입니다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 합니다. 즉, 동일한 문서를 사용하였는데도 다른 형태로 나타날 수 있다는 겁니다(웹 브라우저 화면에 나타나거나 or HTML 소스 자체로 나타나거나) 그중에서도 DOM은 Javascript에서 사용하는 개념으로, 웹 페이지의 객체 지향 표현입니다. Javascript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다. * 문서 객체란? 이나 같은 html 문서 태그들을 Javascript가 이용할 수 있는 object(객체)..
2021.12.22