정규식으로 해당 문자가 들어있는지 검사하고 싶을 때

/[a-z]/.test('abcde');
// a부터 z까지 글자가 들어있는지?
// 하나만 찾아줌!🙃

/a+/.test('aaaaaaaaaaaaa');
// a가 여러개 있는지?

/[A-Z]/.test('abcde');
// 대문자 A부터 Z까지 글자가 있는지?

/[ㄱ-ㅎ가-힣]/.test('abcdeA');
// 한국어가 들어있는지?

/\S/.test('abcde');
// 아무 문자 하나, 특수기호 포함

/^a/.test('abcd');
// a로 시작하는지

/a$/.test('abcd');
// a로 끝나는지

/a|b/.test('abcd');
// a또는b

 

// 이메일 정규식
/\S+@\S+\.\S+/.test('이메일주소');

// \S+ 는 문자 여러개(몇개인지는 상관없음)
// .은 정규식 안에서 특수한 문법이기 때문에 앞에 \를 추가해줌

'개발 > js & jquery' 카테고리의 다른 글

[Javascript] scroll  (0) 2022.10.25
[Javascript] return  (0) 2022.10.25
[Javascript] setTImeout, setInterval 쓰는 법  (0) 2022.10.25
[Javascript] 값이 숫자인지 확인하기  (0) 2022.10.25

setTimeout 기본 문법

setTimeout(function(){
    
}, 1000);
// 1000은 1초뒤에 실행하라는 뜻



// 이렇게도 사용 가능
setTimeout(text, 1000);
function text(){
	console.log('안녕하세요');
}

 

 

 

setInterval 기본 문법

setInterval(function(){
    
}, 5000);
// 5초 간격으로 계속 실행

 

let count = 0;

const timer = setInterval(function(){
	count++;
    if(count === 10){
    	clearInterval(timer);
        // count가 10이 됐을 때 clearInterval 메소드로 timer 멈춤
    }
}, 1000);

'개발 > js & jquery' 카테고리의 다른 글

[Javascript] return  (0) 2022.10.25
[Javascript] 정규식(regular expression)  (0) 2022.10.25
[Javascript] 값이 숫자인지 확인하기  (0) 2022.10.25
[Javascript] padStart, padEnd  (0) 2022.10.10

isNaN 함수 사용!

const number = 123;
const text = '123';
// isNaN 사용

isNaN(number) // false
isNaN(text) // true

number 값이 아닐 때 true출력

one-way 애니메이션(a상태에서 b상태로 이동하는 애니메이션)

one-way 애니메이션 만들 때 시작스타일과 최종스타일을 css로 만들어놓으면 됨

예를 들어 모달창을 부드럽게 띄우고 싶을 때

 

 

html 파일

<div class="modal-bg">
    <div class="modal">
        <div class="modal-title">modal Title
            <a href="#" id="modal-close">닫기</a>
        </div>
        <div class="modal-content">modal Content</div>
    </div>
</div>

 

css 파일

/* modal */
.modal-bg{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 5;
    visibility: hidden;
    opacity: 0;
    transition: .5s;
}
.modal{
    position: absolute;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 500px;
    background: white;
    border-radius: 20px;
    z-index: 10;
}
.modal .modal-title{
    display: flex;
    height: 60px;
    border-bottom: 1px solid lightgray;
    align-items: center;
    padding: 0 10px;
}
.modal .modal-content{
    padding: 10px;
}
.modal-open{
    visibility: visible;
    opacity: 1;
}

*참고*

애니메이션 줄 때 display: none; 보다 visibility: hidden; 이 더 잘 먹음!기본 값에 transition 및 visibility 추가

웹서버에서 리액트를 가져다 쓰고 싶을 때

웹 서버란 -> 유저가 웹 문서를 요청했을 때 웹 문서를 보내주는 것
서버 -> 유저가 데이터 요청했을 때 데이터 보내주는 것
등.. 데이터 주는 곳이라고 생각하면 됨

리액트란 html을 예쁘게 만들어주는 툴

리액트연동
예를 들어,
유저가 내가 만든 포트폴리오 주소를 주소창에 침

유저 : 서버야 주소 입력 했으니 주소 html 줘
서버 : 리액트로 만든 html 파일 보내줌

서버 만드는 법
- node.js 검색해서 설치
- 작업 폴더 만들고 에디터로 오픈
- server.js 만들어서 코드 붙여넣기

// server.js

const express = require('express');
const app = express();
const path = require('path');

app.listen(8080, function(){
	console.log('listening on 8080');
});

- 터미널 열어서 npm init -y (default 값으로 설정된 package.js 를 만듬, y..? —> Yes)
- npm install express

이러면 서버가 만들어짐
리액트 프로젝트 열어서 빌드 함 --> 빌드하는 법 (npm run build)
https://min-ji07.tistory.com/entry/Github-github%EC%97%90-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%98%AC%EB%A6%AC%EA%B8%B0

빌드 폴더 생성하면 서버에서 가져다 쓸 수 있음
리액트 프로젝트를 서버 프로젝트 안에 넣음(node_modules) 파일과 같이 있으면 됨
누가 메인 페이지를 접속 했을 때 내가 만든 index.html 파일을 보여주고 싶을 때 입력 코드

메인 페이지 접속했을 때 초록색으로 보이는 파일 보여주세요

// server.js 파일 밑에 입력해주면 됨
app.get('/', function(요청, 응답){
	응답.sendFile(path.join(__dirname, '리액트로 만든 html 파일 경로(index.html)'));
    					// react-project/build/index.html 
});

저렇게 코드를 짜주고 해당 코드 위에 아래 코드를 추가해줌
해당 폴더 안에 있는 static 코드를 가져다 쓰겠다는 뜻임

app.use(express.static(path.join(__dirname, 'react-project/build')));


리액트 라우터 사용시 추가 해 줄 코드
최하단 작성

app.get('*', function(요청, 응답){
	응답.sendFile(path.join(__dirname, 'react-project/build/index.html'));
});

유저가 주소창에 없는 경로를 입력했을 때 index 페이지로 이동


디비에 있던 데이터를 리액트에서 보여주고 싶을 때
서버에서 디비 데이터를 뽑아 그대로 프론트엔드로 보냄

유저가 상품 페이지 접속했을 때 데이터 베이스에 있던 상품을 보여주려면

app.use(express.json());
// 유저가 보낸 array/object 데이터 출력할 때 필요
let cors = require('cors');
// cors 사용시 npm install cors 입력
app.use(cors());
// cors는 다른 도메인주소끼리 ajax 요청 주고 받을 때 필요함
// 해당 코드 추가해야 ajax 잘 된다고 함

app.get('/product', function(요청, 응답){
	응답.json(필요한 데이터)
    // 서버 /product 주소에 데이터 요청함
    // 리액트는 해당 주소에 GET 요청 하면 됨
});




완성 된 server.js 파일

// server.js

const express = require('express');
const app = express();
const path = require('path');

app.listen(8080, function(){
	console.log('listening on 8080');
});

app.use(express.json());
let cors = require('cors');
app.use(cors());

app.use(express.static(path.join(__dirname, 'react-project/build')));

app.get('/', function(요청, 응답){
	응답.sendFile(path.join(__dirname, 'react-project/build/index.html '));
});

app.get('/product', function(요청, 응답){
	응답.json(필요한 데이터)
});

app.get('*', function(요청, 응답){
	응답.sendFile(path.join(__dirname, 'react-project/build/index.html'));
});

작성 후 서버 실행 코드 입력

node server.js
localhost:8080에서 서버 확인

 

 

에러 검색하다 찾았는데 참고 할 것!

https://xiubindev.tistory.com/115

 

나를 너무나 힘들게 했던 CORS 에러 해결하기 😂

🔥 사건의 발단 : 외부 API 호출 때는 바야흐로 2020년 3월. 프론트엔드 공부를 시작한 지 얼마 되지 않은 채 홀로 토이 프로젝트를 진행하던 중이었다. 코로나 바이러스 관련 웹서비스를 만들고자

xiubindev.tistory.com

 

'개발 > React' 카테고리의 다른 글

[React] gh-pages route 오류  (0) 2022.11.07
[React] 이벤트 버블링 막기  (0) 2022.11.02
[React] input 상태 관리  (0) 2022.05.16
[React] props(Propeties)  (0) 2022.05.12

+ Recent posts