본문 바로가기

개발공부일지/React32

React - React 를 사용하기 위해 되짚어보는 JavaScript 기초 (6) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 JavaScript 객체와 배열에 관련된 기본적인 개념을 학습해보도록 하겠습니다. 그럼 바로 시작해보겠습니다. 1. 객체 생성 객체는 두가지 방법으로 생성이 가능합니다. 기본적인 개념은 알고 있어야 하므로, 간단하게 소개하겠습니다. // 객체 생성자 let A = new Object(); // 객체 리터럴 let B = {}; 일반적으로 위의 생성자 방식보다는 객체 생성에서는 객체 리터럴방식을 선호합니다. new 키워드를 사용하여 생성하는 방식은 class 와 같은 생성자함수에서 주로 사용되므로, 이후에 따로 다룰 예정입니다. 기본적으로 이 객체는, "원시형" 데이터 타입이 아니므로 다양한 데이터를 넣을 수 있습니다. 하지만 객체에서도, 데이터를 사용할때,.. 2023. 8. 4.
React - React 를 사용하기 위해 되짚어보는 JavaScript 기초 (4) 안녕하세요. Hynn 입니다. 4편 시작해보도록 하겠습니다 :) 이번 포스팅에서는 조건문의 기본 사용법을 알아보도록 하겠습니다. 1. 조건문 (If) 사용하기 조건문은 영어 단어 그대로, If 를 사용하여 작성합니다. 이 If 문은 정말 많이 사용하게 되고, 이를 간결하게 작성하는 switch/case 문도 있습니다. 이를 기초적으로 작성해보면 아래와 같이 작성해보도록 하겠습니다. let a = 3 if(a >= 4) { console.log("Over 4") }else { console.log("under 4") } 가장 기초적인 작성입니다. 첫번째 If문에는 조건을 만족할 때 실행되는 CodeBlock 이 결정되고, 조건을 만족하지 않을 경우 else 구문의 CodeBlock이 실행됩니다. 이를 중첩.. 2023. 8. 4.
React - React 를 사용하기 위해 되짚어보는 JavaScript 기초 (3) 안녕하세요. Hynn 입니다. 이번 포스팅에서도 React 를 사용하기 위해 되짚는 기초 개념 몇가지를 다루도록 하겠습니다. 시작해보겠습니다. 1 . 연산자 JavaScript 에는 연산자라고 하는, 부등호가 존재합니다. 예를 들어, 우리가 일반적으로 사용하는 계산기에서 사용하는 사칙연산이나, 대입등을 하는 연산자들을 총칭합니다. 이는 생각보다 다양하게 많이 쓰이므로, 한번 간단하게 작성해보도록 하겠습니다. 1) 대입 연산자 let a = 1 여기서 말하는 대입연산자는 a 라는 변수에 1이라는 값을 대입하므로 " = " 이 대입연산자가 됩니다. 2) 사칙연산자 let a = 1 let b = 2 console.log(a+b) console.log(a-b) console.log(a/b) console.lo.. 2023. 8. 1.
React - React 를 사용하기 위해 되짚어보는 JavaScript 기초 (2) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 사용을 위해 JavaScript 기초를 되짚는 글을 이어서 작성해보려고 합니다. 본 포스팅에서는 간단한 사항 위주로 요약한 포스팅이며, 자세한 사항은 JavaScript 섹션에서 따로 정리할 예정입니다. 자세한 사항을 보시기 위해서는 JavaScript 탭을 참고하시면 더 좋을거 같습니다. 1. 변수와 상수 변수와 상수는 단어 그대로 이해해야 합니다. 변수는 "변하는 값" 이고, 상수는 "변하지 않는 값" 입니다. ES6 기준으로 설명을 드리자면, 변수와 상수를 선언하는 방법은 3개의 키워드가 존재합니다. let const var 위 3가지는 각각 기능의 차이가 존재합니다. 일반적으로 먼저 다루는 "변수"를 선언하기 위해서는 "let" 키워드를 .. 2023. 7. 29.
React - React 를 사용하기 위해 되짚는 JavaScript 기초 (1) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 이전 포스팅에 이어서, React 에 대한 작성을 해보려고 합니다. React 를 비롯해서 JavaScript 언어 위에서 구동되는 Library, Framework 가 존재합니다. 이 JavaScript 는 Web을 개발하는 3개의 구성요소이기도 합니다. 이를 살펴보고, 기본부터 돌아보도록 합시다. 1. 웹사이트를 구성하는 3개의 요소 HTML 요소의(Element) 의 배치 및 내용을 기술하는 언어 색이나 크기같은 디자인을 수행하지 않고, 요소(Element) 의 배치와 내용만을 기술할 수 있음. CSS 색, 크기, 애니메이션등을 정의하는 "Styling" 언어 JavaScript 웹 사이트에 동적요소를 구현하는 언어 2. JavaScript 가 실행되.. 2023. 7. 29.
React - 왜 React 입니까? 안녕하세요. Hynn 입니다. 이번 포스팅에서는 10개월에 걸친 학원 수강 이후에, 제가 가지고 있는 두가지 궁금증을 풀어보고, 이를 풀어보면서, JavaScript 의 기초, 그리고 대중적으로 가장 널리 사용되는 라이브러리(라고 저는 확신합니다) 중 하나인 React 에 대해서 풀어보려고 합니다. 몇가지 개인적인 사견이 강하게 들어가 있을 수 있으므로, 생각이 다른 경우에 댓글로 알려주시면 다시한번 고찰을 가질 수 있을거 같아서 많은 의견 주시면 감사하겠습니다. 시작해보도록 하겠습니다. 1. Why React ? React는 Facebook 으로 잘 알려진 Meta 에서 주도하는 오픈소스 입니다. 단, 공식 홈 페이지에서 React 를 소개하는 요약글은 " 사용자 인터페이스를 만들기 위한 JavaScr.. 2023. 7. 28.