공부기록용

JSX란 JavaScript를 확장한 문법으로 JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법이다. 기본적으로 return문 안에 존재하며 JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다. (-> 우리가 실질적으로 코드를 작성하는 App.js를 index.js에서 createRoot를 한 다음에 render한다. 만들어 놓은 App.js를 React에서 render를 하면서 화면에 그려나가는 것이다._render하면서 DOM에 렌더링을 시키는 것이다.) HTML을 품은 JS ⇒ JSX 아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다. 안녕하세요! 시작이 반이다! ​ ▼ 자바스크립트 안에서 html 태그같은 마크업을..

React Component Component 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. “props”라고 하는 임의의 입력_input을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환_output한다. 클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { re..

React.js ‘React.js’는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다. 비슷한 프레임워크인 AngularJS, VueJS보다 선호도가 좋다. SPA(Single Page Application) 아키텍쳐 Single Page Application, 한 개의 페이지로 이루어진 애플리케이션이라는 의미로 MPA(Multi Page Application)과는 상반된 개념이다. 기존 MPA의 문제점(super easy version)으로 리렌더링(re-rendering) 즉, 페이지가 갱신되는 상황이 엄-청나게 많기 때문에 사용감에 불편함이 있을 수 있는데 이를 보완하는 방안으로써 SPA를 사용할 수 있다.(부분적인 요소만 살짝 ..

https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 🔴getElementById( ) 🔴querySelector() 🔴addEventListener() 🔴Element.classList 🔴toggle( String [, force] ) javascript로 html불러오기 // HTML Grab me > javascript로 id = "title"을 가진 태그를 불러 이 처럼 js에서 html을 가져올 수도 있고, 이런 것들을 활용해서 값을 변경 시킬 수 도 있다. .getElementById( ) 함수 getElemen..

🔴HTTP란 🔻IP, TCP/UDP, PORT 🔻HTTP메세지 🔴HTTPS란 🔻HTTP와 HTTPS의 차이 🔻HTTPS 암호화 방식 HTTP HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 데이터를 주고 받는 통신 규칙 또는 프로토콜이다. 풀어서 설명하면 하이퍼텍스트(HyperText)를 전송(Transfer)하기 위해 사용되는 통신 규약(Protocol)이다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었으며, 전통적인 클라이언트-서버 아키텍처 모델에서 클라이언트가 HTTP 메시지 양식에 맞춰 요청을 보내면, 이에 서버는 HTTP 메시지 양식에 맞춰 응답을 한다. HTTP는 특정 상태를 유지하지 않는 무상태성(Stateless)이 특징이다. ..

https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 변수 const a = 5; const b = 2; // 변수 생성 let myName = "minhee" console.log('hello ' + myName) // hello minhee // 변수 값 변경(재할당) myName = "kimminhee" console.log("your new name is " + myName) // your new name is kimminhee const 그냥 다 안바뀜_대게 많이 사용 let는 재할당만 가능_변해야 하는 경우 사용..