행복을 담는 블로그

1. 초기 세팅 : 최상위 div 안에 id input, password input, 로그인 button을 만든다. import React, { useState } from "react"; function App() { }; return ( 아이디 : 비밀번호 : 로그인 ); } export default App; 2. id와 password에 각각 state를 만들어준다. const [id, setId] = useState(""); const [password, setPassword] = useState(""); ▶️ 초기값은 빈 문자열로 만들어준다. 입력을 할 것이므로. 3. input 태그 안에 value와 onChange 넣어주자. 아이디 : 비밀번호 : 🚨 비밀번호 숨기고 싶으면, type="p..

📌 JSX 란?? : JavaScript를 확장한 문법으로, React element를 생성한다. 즉, 쉽게 말해 HTML을 품은 JS 문법이라고 생각하자. ▶️ UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장하고 있습니다. const element = Hello, world!; JSX 소개 링크 참고 ✅ 컴포넌트에서 반환 할 수 있는 element는 단 1개!! = 즉, 모든 요소들을 묶어 줄 수 있는 최상위 요소가 무조건 필요하다!! /* 최상위 element가 없는 경우, ERROR*/ return ( 안녕하세요! 리액트 반입니다 :) ); /* 최상위 요소 로 하나로 묶어줘야만 한다. */ return ( 안녕하세요! 리액트 반입니다 :) ); 🚨 ...는 DOM 요..

CRA로 초기 프로젝트 생성 시, 오류 발생 React 강의를 듣다가 CRA로 프로젝트 생성을 하려고 하는데 오류가 발생했다. npm, node, yarn 버전도 다 확인했는데, 설치가 잘 되어 있다고 뜨는데 왜 문제가 생긴거지 싶어서 바로 질문하러 감.. 처음에는 잘 설치가 되나 했는데, 이런 오류가 떴다. Aborting installation. npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed. 1. npm cache clear --force 구글링을 좀 해보니 npm cache clear --force 이 코드를 작성하면 해결이 된다는 말도 있었..

React 개발을 하기 위해서 꼭 필요한 JS 문법 중 ES6 문법에 대해 알아보자. 📕 Javascript ES6 문법 1.상수와 변수 상수 : const(constant : 변함없는 수) 변수 : let const a = 1; let b = 3; a = 3; // 상수는 한 번 선언한 값을 다시 할당할 수 없다. b = 2; // 변수는 값을 재할당 가능 console.log("a :", a); // Error console.log("b :", b); // b : 2 var는 그냥 쓰지마쓰지마...!! : Block level scope를 따르지 않기 때문에 종종 다른 언어와 오해가 발생한다. if (1 === 1) { // 항상 이 안으로 들어온다 var c = 3; console.log("c :"..

📌 React 란 무엇인가? : A Javascript library for building user interfaces ▶️ React를 통해 UI(User Interface)를 building 한다. = 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(화면)을 구축한다는 의미 = 프론트엔드 영역 웹 개발 안에서도 여러 가지 역할이 나뉜다. 프론트 , 백엔드 등 ✔️ React.js : SPA 기반의 프론트엔드 개발 프레임워크 중 하나. 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용 비슷한 프레임워크 : AngularJS, VueJS 1. SPA란 무엇인가? Single Page Application : 하나의 페이지로 이루어진 application이라는 말. MPA(Multi Page ..

📕 [Javascript] parseInt( ) 함수 📌parseInt ( ) 함수 : 문자열 인자를 파싱하여 특정 진수의 정수를 반환한다. 1. 기본구조 parseInt(string); parseInt(string, radix); 매개변수 string : 파싱하는 값. 숫자로 반환할 문자열 입력 radix : 문자열의 진수를 나타내는 정수. 2 ~ 36까지의 정수. 반환 값 주어진 string에서 파싱한 정수를 반환한다. **주의** radix가 2보다 작거나, 36보다 큰 경우, 공백이 아닌 문자열의 첫 문자가 숫자가 아닌 경우, 위 경우 NaN(Not a Number)을 반환 ex) // 1. 숫자 -> 숫자 console.log(parseInt(123)); // 123 // 2. 문자열 -> 숫자..

📌 함수 = function(기능) : input과 output이 존재한다. // 선언과 호출 input : 함수의 input = 매게변수 (매개체가 되는 변수!) output : return 문 뒤에 오는 값 : 반환값 ✅ 기본 골격 function (){} 1. 함수 선언 1) 함수 선언문 function 함수이름 (매게변수=input) { // 함수 내부에서 실행할 메인 로직 } ex) // 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수 function add(x,y){ return x + y; // return이 있어야 실행 한 후에 값을 받을 수 있다. } 2) 함수 표현식 //왼쪽에 함수의 이름을 add2라고 썼기 때문에, function 뒤에 함수 이름을 안 써도 된다! let a..

CSS로 중앙 배치를 하고 싶을떄, 주로 display : flex;를 이용하는 것을 알 수 있다. CSS 기초에서도 배웠듯이 주로 가운데 정렬을 하기 위해서는 다음과 같이 작성을 하면 된다. display: flex; flex-direction: row; align-items: center; justify-content: center; 이떄 flex-direction 은 크게는 row와 colume으로 나뉜다. 크게는 메인축(main axis)와 교차축(cross axis)가 존재하는데, row와 colume은 두 축이 서로 반대이다. column (세로 정렬) 메인축(main axis) : y축 교차축(cross axis) : x축 row (가로 정렬) 메인축 : x출 교차축 : y축 📌 flex :..