유니의 개발일지

JSX의 장점 1) 간결한 코드 2) 가독성 향상 가독성은 코드 작성 뿐만 아니라 유지 보수 관점에서도 굉장히 중요한 부분 가독성이 높을수록 버그를 발견하기 쉬움! 3) Injection Attacks 방어 보완성이 올라감 Injection attack : 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스 코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 ReactDOM은 렌더링하기 전에 인베딩된 값을 모두 문자열로 변환 -> 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없음 JSX 사용법 : 모든 자바스크립트 문법을 지원함 + XML/HTML을 섞어서 사용 HTML 태그 중간에 JavaScript 사용하고 싶은 경우 XML/HTML을 사용하다가 중간에 JavaScript 코드를 사용하고 싶..

JS : JavaScript의 약어 JSX : A syntax extension to JavaScript 자바스크립트의 확장 문법 JavaScript + XML/HTML EX) JSX code const element = Hello, world! -> h1 태그로 둘러싸인 문자열을 element라는 변수에 저장하는 것 JSX 역할 JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치게 된다. React의 createElement 함수 : JSX 코드를 JavaScript 코드로 변환하는 역할 EX) # JSX를 사용한 코드 class Hello extends React.Component { render() { return Hello {this.props.toWhat}; ..

React로 웹사이트 개발할 때는 주로 Create React App이라는 것을 사용 Create React App (CRA) : React로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 되어 있는 상태로 프로젝트를 생성해주는 도구 : npx 명령어를 이용하여 실행 npx : npm 패키지를 설치한 이후에 곧바로 실행, 엑스큐트까지 해주는 명령어 : 패키지를 간편하게 한번에 처리하기 위해 사용함 #사용법 $ npx create-react-app 명령어들 $ cd my-app : 경로 변경 (change directory) / 현재 커맨드라인 도구가 위치한 경로를 변경하는 역할 ex) 맥의 파인더나 윈도우즈의 탐색기에 비유 -> 폴더를 더블클릭해서 안으로 들어가거나 뒤로가기 버튼을 눌러 폴더를 빠져나오..

index.html 파일 작성 : 내용은 없지만 기본적인 웹사이트의 뼈대는 완성 웹사이트의 제목 : head 태그 안에 title 태그를 이용해서 작성 화면에 보이는 콘텐츠 : body 태그 안에 작성 styles.css 코드 : h1 태그의 텍스트 색상을 초록색으로 변경 & 기울임꼴 스타일인 italic 스타일을 적용하는 코드 link 태그 : css를 적용하기 위해서는 먼저 html 파일에서 css 파일을 불러와야 함 : 현재 html 파일과 외부 리소스 사이의 관계를 정의할 때 사용 css 파일을 불러오거나 웹브라우저 탭에 나오는 아이콘인 favicon 같은 것을 넣기 위해 가장 많이 사용함 주의할 점!!!! -> index.html 파일과 styles.css 파일이 동일한 디렉터리에 위치해야 함!..

리액트의 장점 (1) 빠른 업데이트 & 렌더링 속도 업데이트란? 우리가 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것 리엑트에서는 빠른 업데이트를 위해 내부적으로 Virtual DOM을 사용함 Virtual Dom? 먼저, Dom이란, Document Object Model의 약자로 웹페이지를 정의하는 하나의 객체임 -> 하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇 virtual DOM은 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 하는 것 리액트는 DOM을 직접 수정하지 않고 업데이트해야 할 최소한의 부분만을 찾아서 업데이트함 (2) Component - Based 컴포넌트? 구성 요소라는 뜻 / 리액트에서는 모든 페이지가 컴포넌트로 구성되 있음 하나의 컴포넌트는 또 다른 여..

리액트 React : A JavaScript library for building user interfaces 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 : 대표적인 자바스크립트 UI 라이브러리 라이브러리 library : 자주 사용되는 기능들을 정리해 모아 놓은 것 특정 프로그래밍 언어에서 자주 사용되는 기능들을 잘 모아서 정리해 놓은 모음집 사용자 인터페이스 User Interface, UI : 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해주는 것 ex) 웹사이트에서 버튼 or 텍스트 입력창 UI 라이브러리 : 사용자 인터페이스를 만들기 위한 기능 모음집 -> 화면을 만들기 위한 기능들을 모아 놓은 것 대표적인 JavaScript UI 라이..

함수? : 입력을 받아서 정해진 출력을 하는 것 파라미터 parameters / 인자 arguments : 함수의 입력 (1) function statement 사용 function sum(a, b) { return a + b; } console.log(sum(10,20)); (2) arrow function expression 사용 const multiply = (a, b) => { return a * b;} console.log(multiply(10,20)); 연산자 Operator 대입 연산자 Assignment operator 변수의 값을 대입하기 위해 사용하는 연산자 / 기호 '=' 항상 오른쪽에서 왼쪽 방향으로 흐름이 흘러감 오른쪽의 값을 왼쪽의 값에 대입함 사칙 연산자 / 산술 연산자 덧셈 ..

HTML (Hypertext Markup Language) : 마크업 언어의 한 종류임 -> 웹사이트의 뼈대를 구성하기 위해서 사용하는 마크업 언어임 마크업 언어란 ? 마크업 : 문서나 데이터를 처리하기 위해 문서에 추가되는 정보를 의미 Tag(태그) 웹사이트의 구조를 만들고 웹스이트의 내용들을 채워 넣음 등 괄호 안에 태그 이름을 넣어서 사용 / : 닫는 역할 열었으면 반드시 닫아주어야 함!! 웹사이트의 뼈대를 구성하는 태그들 & : html의 시작과 끝을 알리는 태그임 : 머리와 몸통 : 웹사이트의 속성이 들어감 / 제목, 설명 등 여러가지 속성을 담고 있음 -> 이러한 속성들은 메타데이타 : 실제로 웹사이트에서 보이는 컨텐츠가 들어감 / 우리가 실제로 웹브라우저에서 보게 되는 내용이 들어감 각 페이..

JavaScript 사용자가 버튼을 누르거나 정보를 입력하는 등의 동적인 작업을 처리하기 위해서 사용함 HTML과는 전혀 다른 성격의 프로그래밍 언어임 -> HTML은 웹사이트의 뼈대를 구성 but, JavaScript는 웹사이트가 살아 움직이도록 생명을 불어넣는 역할을 함 스크립트 언어의 특징 : 프로그램이 실행되는 런타임에 코드가 해석된다는 점 JavaScript의 문법 자료형 Data Type 프로그래밍 언어에서 데이터를 다루기 위해 미리 정해놓은 데이터의 유형 자바스크립트에서는 변수를 선언할 때가 아닌 변수의 데이터가 대입되는 시점에 해당 변수의 자료형이 결정됨 --> 동적으로 자료형이 결정됨 -> 다이나믹 타이핑 Dynamic Typing var(variable)을 사용함 혹은 let을 사용하기..