Dev : What I've Learn

리액트 컴포넌트 사용하는 방법 컴포넌트 가져오는 방법 : 내보낸 컴포넌트는 import를 통해 가져와 사용할 수 있습니다.import React from 'react' // 기본 가져오기import { name } from ... // 명명 컴포넌트 가져오기 컴포넌트 내보내는 방법export default React // 기본 내보내기 (함수명 그대로 컴포넌트명이 됩니다.)export {name} // 명명 컴포넌트 내보내기 (함수명 대신 name이 컴포넌트명이 됩니다.)  조건부로 렌더링하는 방법// 첫 번째 방법fuction MyComponent(props) { const isLoggedin = props.isLoggedin; if(isLoggedin) { return ( ..

리액트의 정체리액트는 사용자에게 보여지는 것을 개발하기 위한 자바스크립트 라이브러리입니다. 여기서 '사용자에게 보여지는 것'이라면 UI를 말하는 것이고, 자바스크립트 라이브러리라 함은 자바스크립트 언어를 기반으로 만들어진 코드 무더기라는 의미로 간단히 이해할 수 있습니다. 여기서 우리는 알 수 있습니다. 아, 리액트를 알려면 자바스크립트를 잘 알아야겠구나! 제 리액트 시리즈에서는 당연히 자바스크립트에 대해서도 공부합니다. 다만 리액트를 다루기 위해 자바스크립트의 모든 것을 알 필요는 없기 때문에 아주 기초적인 것에 더해, 리액트를 위한  자바스크립트를 학습할 예정입니다. 자바스크립트를 학습함으로써 리액트을 어떻게 사용할 것인가를 알아보기 앞서, 일단 리액트의 특징부터 살펴보면서 느낌만 잡고갑시다. 리액트..

JSX의 개념과 스타일링JSX는 자바스크립트를 위한 확장 문법으로 리액트에 필수는 아니지만 개발을 쉽게 만들어줍니다. 말했듯 필수는 아니니 JSX 문법을 사용하지 않겠다는 분은 이번 글은 넘어가시면 됩니다. 저 또한 이번 리액트 시리즈 초반에는 JSX 문법을 사용하지 않을 예정이지만, 후반에는 반드시 다룰 예정입니다. 왜냐하면 JSX 문법은 리액트의 핵심 문법이라 할 수 있으며, 이를 사용하여 리액트 컴포넌트를 작성하는 것이 보다 일반적이고 권장되어지기 때문입니다. 아무튼 지금은 알아만둡시다.  ✅ JSX 적용 방식 : JSX 문법으로 작성된 코드 보기//하나의 요소로 구성된 가장 단순한 형태const ComponentA = 안녕하세요.//자식 없이 SelfClosingTag로 닫혀있는 형태const C..

➡️ MUI 컴포넌트 라이브러리MUI(https://mui.com)은 구글의 머티리얼 디자인을 구현하는 리액트 컴포넌트로, 레이아웃 컴포넌트와 이 외의 유용한 컴포넌트(버튼, 목록, 표, 카드 등)가 많이 포함되어 있는 라이브러리이다.    ✅ MUI 컴포넌트 라이브러리 설치 순서1) 리액트 앱 생성2) 프로젝트 루트 폴더에 MUI 설치 : 프로젝트 루트 폴더로 cd 명령어를 통해 이동한 후 MUI 설치 명령어 입력npx create-react-app 프로젝트명cd 프로젝트명npm install @mui/material @emotion/react @emotion/styled//package.json{ "name": "myapp", "version": "0.1.0", "private": true, ..

➡️ 구조 분해 할당(Destructuring Assignment)배열 또는 객체의 값을 말 그대로 분해해서 개발 변수에 즉시 할당하는 것을 의미한다. 주로 어떠한 객체나 배열에서 선언문이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용한다. 이는 ES6부터 도입되기 시작했으며 종류는 배열 구조 분해 할당과 객체 구조 분해 할당이 있다.   ✅  배열 구조 분해 할당   : 배열 구조 분해 할당은 리액트 useState 함수에서 자주 쓰인다. 배열의 구조 분해 할당은 쉼표(,)의 위치에 따라 결정된다. 즉, 쉼표에 의해 생략되는 배열의 요소는 구조 분해 할당되지 않는 것이다. const array = [1, 2, 3, 4, 5] //valueconst [first, second, third, ... ..

➡️ 리액트 시작하기이번 글은 node,js, npm, visual studio 등의 설치는 완료되었다는 가정 하에 작성하였습니다.  ✅ node.js와 npm 설치 여부 및 버전 확인하는 방법node -vnpm -v  ✅ 비주얼 스튜디오 터미널 창 보는 방법 : [메뉴(삼선)-보기-터미널] 선택  ✅ 비주얼 스튜디오 추천 확장 VS Code React.js with Flow snippets : 리액트를 위한 여러 예제 코드를 제공하여 개발 속도를 높여준다.ESLint : 오타와 구문 오류를 빠르게 찾고 소스코드의 형식을 쉽게 지정할 수 있게 해준다.Prettier : 자동으로 코드 형식을 지정할 수 있는 코드 포맷털, 코드를 저장한 후 자동으로 코드 형식을 적용하도록  VS Code 설정에서 지정할 수..

➡️ 템플릿 엔진스프링 서버에서 데이터를 받아서, 우리가 보는 웹 페이지(HTML)에 넣어 보여주는 도구다. 템플릿 엔진을 위한 문법을  HTML과 함께 혼용하여 사용해야 하는 특징이 있다.   ✅ 템플릿 엔진의 역할 : 예를 들어, 서버에서 아래와 같은 데이터(JSON 형식)를 보내주었다고 해보자. 그러면 템플릿 엔진은 이름, 나이라는 키(key)로 데이터를 넘겨 받아, HTML에 값을 적용하는 역할을 한다.{ 이름: "홍길동", 나이: 11}  ✅ 템플릿 엔진의 HTML에 값을 적용하는 방식 1) HTML의 h1 태그에 text 어트리뷰트로 ${이름}을 할당한다.2) HTML에 템플릿 엔진 문법을 적용해두면, 서버에서 '이름'라는 키로 데이터를 템플릿 엔진에 넘겨준다.3) 템플릿 엔진은 넘겨 받은 데..

➡️ 외부 연결 및 전송 관련 태그 ✅  태그 : 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용한다. 이러한 태그에서 가장 중요한 속성은 바로 링크(link)의 목적지를 가리키는 href 속성이다. 따라서 href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없다. 링크된 페이지는 보통 브라우저의 현재 윈도우에 표시되며, 이것은 target 속성으로 변경할 수 있다. 링크는 모든 브라우저에서 다음과 같은 기본 스타일을 가지게 된다.티씨피스쿨 사이트로 이동! 태그의 특징아직 방문하지 않은 링크(unvisited link) : 밑줄, 파란색(blue..

➡️ 첨부 태그 - 이미지/표 ✅  태그 프리마켓 신청자 모집 축제의 새로운 장 프리마켓 신청자를 모집합니다!! 신청기간 1차 : 5.15(화) 자정까지 2차 : 5.20(일) 자정까지 심사기간 1차 : 5.16(수) 2차 : 5.21(월) 선별대상 : OO 대학교 학생이면 누구나! 운영기간 : 5.23(수) ~ 5.25(금) 주의사항 심사는 대동제 기획단 회의에서 이루어집니다. ..

➡️ 기본 태그CF. 태그(Tag)란?: 꼬리표라는 뜻으로 HTML에서는 웹 문서에 정보를 정의해주는 형식이다. 좀더 구체적으로 말하자면, 비주얼 스튜디오나 노트패드와 같은 웹 편집기에서 마크업 형식으로 표를 작성하고 이를 웹 브라우저가 인식할 때, 어느 부분이 제목, 텍스트, 표인지 구별할 수 있도록 꼬리표를 붙이는데, 이를 태그라고 한다.  ✅ 태그: 웹 문서의 유형(document type)을 지정하는 선언문 태그로, 대소문자를 가리지 않는다. 은 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻이다.  ✅ 태그: 웹 문서의 시작과 끝을 나타내는 태그로, 웹 브라우저가 태그를 만나면 까지 소스를 읽어 화면에 표시한다. 다시 말해, 웹 문서 소스를 태그 사이에 작성해야 하며, 뒤에는 아무..