네로개발일기

[React] package.json 명령어 npm start / npm run build 스크립트 차이점

web/React

2022. 2. 10. 22:17

package.json 파일에 실행 스크립트는 start, build, test, eject 4가지 명령어가 있습니다.

일반적으로 start는 개발모드, build는 배포용이라고 알려져있다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

1) npm run start

- 개발 모드로 프로그램을 실행하는 명령어이다.

- HMR(Hot Module Replacement)가 동작해 수정과 동시에 화면이 변경된다.

- 개발 모드에서 코드에 에러가 있을 경우 브라우저에 메시지를 출력한다.

- HTTPS 실행 옵션을 통해 https 인증서 없이 임시로 https 형태로 url을 만들 수 있다.

$ npm start
$ npm run start

> HTTPS 실행 옵션 사용해 실행

$ HTTPS=true npm start

2) npm run build

- 배포 환경에서 사용할 파일을 만들어준다.

- 압축 형태로 제공

$ npm build
$ npm run build

> 정적 파일 서비스 실행

serve 패키지는 노드(node.js) 환경에서 동작하는 웹 서버 애플리케이션

npx 로 실행하며 build 된 정적 파일을 서비스 할 때 간단하게 사용하기 편리하다.

$ npx serve -s build

3) npm test

- 테스트 코드를 실행합니다.

- create-react-app 에는 제스트(jest) 테스트 프레임워크가 기본 동작

> 테스트 대상

- __test__ 폴더에 밑에 있는 모든 자바스크립트 파일

- 파일 이름이 .test.js로 끝나는 파일

- 파일 이름이 .spec.js로 끝나는 파일

CI(continuous integration)와 같이 watch 모드가 필요 없는 환경에서는 다음 명령어로 테스트 코드를 실행

$ CI=true npm test

4) npm run eject

- 숨겨져 있던 create-react-app 내부 설정 파일의 노출한다.

- 바벨이나 웹팩 설정을 변경할 수 있다. (단점은 익숙해야 가능)

- npm run eject 외에도 방법이 존재한다.

방법 1: react-scripts 프로젝트를 포크(fork) 해서 나만의 스크립트를 만든다.
방법 2: react-app-rewired 패키지를 사용한다.

추천할 글 > Yarn이란?

https://frogand.tistory.com/82

[yarn] Yarn이란? 의존성 관리 / 패키지 매니저

❓ Yarn이란? yarn은 프로젝트의 의존성을 관리하는 javascript의 package manager이다. *Java의 gradle이나 Python의 pip와 같은 것. yarn은 npm과 마찬가지로 package.json을 통해 의존 패키지를 구분하고 프로..

frogand.tistory.com

728x90

저작자표시

'web > React' 카테고리의 다른 글

[React] JSX에서 {} 사용하기 (0)	2022.01.11
[React] DOM & Virtual DOM / What is DOM? (0)	2022.01.10
[React] JSX 이해하기 (0)	2022.01.06
[React] npm start 시 process out of memory ERROR 발생 / Apple Slicon m1 (0)	2021.12.06

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

[Linux] curl 명령어 / curl 사용법 / HTTP GET POST REST API 연계

programming language/Linux

2022. 2. 3. 22:29

curl이란?

Client URL

서버와 통신할 수 있는 커맨드 명령어 툴입니다. curl의 특징은 수많은 프로토콜을 지원합니다.

지원하는 프로토콜

DICT, FILE, FTP, FTPS, Gopher, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, POP3S, RTMP, RTSP, SCP, SFTP, SMB, SMBS, SMTP, SMTPS, Telnet, TFTP

SSL 인증방식 역시 가능하다.

curl 사용법

$ curl [options] [URL...]

-k	--insecure	https 사이트를 SSL certificate 검증없이 연결한다.	wget 의 --no-check-certificate 과 비슷한 역할 수행
-l	--head	HTTP header 만 보여주고 content 는 표시하지 않는다.
-D	--dump-header <file>	<file> 에 HTTP header 를 기록한다.
-L	--location	서버에서 HTTP 301 이나 HTTP 302 응답이 왔을 경우 redirection URL 로 따라간다. --max-redirs 뒤에 숫자로 redirection 을 몇 번 따라갈지 지정할 수 있다. 기본 값은 50이다	curl -v daum.net 을 실행하면 결과값으로 다음과 같이 HTTP 302 가 리턴된다. < HTTP/1.1 302 Object Moved < Location: http://www.daum.net/ -L 옵션을 추가하면 www.daum.net 으로 재접속하여 결과를 받아오게 된다.
-d	--data	HTTP Post data	FORM 을 POST 하는 HTTP나 JSON 으로 데이타를 주고받는 REST 기반의 웹서비스 디버깅시 유용한 옵션이다
-v	--verbose	동작하면서 자세한 옵션을 출력한다.
-J	--remote-header-name	어떤 웹서비스는 파일 다운로드시 Content-Disposition Header를 파싱해야 정확한 파일이름을 알 수 있을 경우가 있다. -J 옵션을 주면 헤더에 있는 파일 이름으로 저장한다.	curl 7.20 이상부터 추가된 옵션
-o	--output FILE	curl 은 remote 에서 받아온 데이타를 기본적으로는 콘솔에 출력한다. -o 옵션 뒤에 FILE 을 적어주면 해당 FILE 로 저장한다. (download 시 유용)
-O	--remote-name	file 저장시 remote 의 file 이름으로 저장한다. -o 옵션보다 편리하다.
-s	--silent	정숙 모드. 진행 내역이나 메시지등을 출력하지 않는다. -o 옵션으로 remote data 도 /dev/null 로 보내면 결과물도 출력되지 않는다	HTTP response code 만 가져오거나 할 경우 유리

> 옵션없이 호출할 경우 curl은 지정된 리소스를 표준 출력에 표시합니다.

예를 들어 example.com 홈페이지를 검색하려면 다음을 실행하고

$ curl example.com

이 명령어는 터미널창에 example.com 홈페이지의 소스코드를 출력합니다.

프로토콜을 지정하지 않은 경우, curl은 사용할 프로토콜을 추측하려고 시도하며 이 프로토콜은 HTTP로 기본

설치방법

Ubuntu 및 Debian에 curl 설치

$ sudo apt update
$ sudo apt install curl

CentOS 및 Fedora에 curl 설치

$ sudo yum install curl

출처

https://jjeongil.tistory.com/1313

Linux : Curl 명령어 예시, 예제, 방법

curl은 사용자 상호 작용 없이 작동하도록 설계된 서버에서 또는 서버로 데이터를 전송하기 위한 명령줄 유틸리티입니다. curl을 사용하면 HTTP, HTTPS, SCP , SFTP 및 FTP 등 지원되는 프로토콜 중 하나

jjeongil.tistory.com

728x90

저작자표시

'programming language > Linux' 카테고리의 다른 글

[Linux] scp 명령어 파일 전송 프로토콜 (0)	2022.03.28
[Linux] ps 명령어 / kill 명령어 / 프로세스 확인 및 죽이기 / 프로세스 일괄 종료 / kill process (0)	2021.10.30

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

[Spring Boot] 기본 포트 설정하는 방법

web/Spring

2022. 1. 26. 22:59

1. 속성 파일 사용

가장 빠르고 쉬운 방법은 기본 속성 값을 재정의하는 것이다.

서버 포트를 설정하는 속성은 server.port 이다. spring boot의 기본 내장 포트는 8080이다.

application.properties

server.port=8081

application.yml

server:
  port: 8081

2. 프로그래밍 방식 구성

@SpringbootApplication 클래스에서 속성을 설정하는 방법이다.

@SpringBootApplication
public class CustomApplication {
    public static void main(String[] args) {
        SpringApplication app = new SpringApplication(CustomApplication.class);
        app.setDefaultProperties(Collections
          .singletonMap("server.port", "8083"));
        app.run(args);
    }
}

서버 구성을 사용자 정의하려면 WebServerFactoryCustomizer 인터페이스 를 구현해야한다.

@Component
public class ServerPortCustomizer 
  implements WebServerFactoryCustomizer<ConfigurableWebServerFactory> {
 
    @Override
    public void customize(ConfigurableWebServerFactory factory) {
        factory.setPort(8086);
    }
}

Spring Boot 2.x 버전부터 적용된다.

3. 명령어 사용

애플리케이션을 jar로 패키징하고 실행할 때 java 명령으로 server.port 인수를 설정할 수 있다.

$ java -jar spring.jar --server.port=8081

또는

$ java -jar -Dserver.port=8081 spring.jar

출처

https://recordsoflife.tistory.com/325

Spring Boot에서 기본 포트를 변경하는 방법

If you have a few years of experience in the Java ecosystem, and you're interested in sharing that experience with the community (and getting paid for your work of course), have a look at the "Write..

recordsoflife.tistory.com

728x90

저작자표시

'web > Spring' 카테고리의 다른 글

[Spring] Apache POI 를 이용한 엑셀 파일 읽기 (0)	2022.02.28
[Spring Mybatis] resultMap (0)	2022.02.11
[Spring MVC] Thymeleaf 타임리프 기본 기능- 텍스트 text, utext (0)	2022.01.18
[Spring MVC] Thymeleaf 타임리프 기본 기능 (0)	2022.01.17
[Spring] UriComponentsBuilder / RestTemplate GET with parameters / RestTemplate 사용 시 Get 메서드로 파라미터 보내는 법 (0)	2022.01.13

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

[MySQL] SSH 이용해서 sql파일 import 또는 export 하기 / Import and Export (*.sql file) via SSH

programming language/Dev

2022. 1. 25. 22:29

1. Export MySQL Database

> mysqldump -u username -p database_name > dbname.sql

2. Import MySQL Database

> mysql -p -u username database_name < file.sql

출처

https://gesatech.net/knowledgebase/50/MySQL-Import-and-Export-.sql-file-via-SSH.html

MySQL Import and Export (.sql file) via SSH - Knowledgebase - Gesatech Solutions - Customer Centre

Please enter a number between 8 and 64 for the password length Generate new password Copy

gesatech.net

728x90

저작자표시

'programming language > Dev' 카테고리의 다른 글

Mac OS에 NTFS 읽고 쓰기 위한 Mounty 설치 (0)	2022.05.31
[SSH] SSH 접속정보 설정파일로 저장하여 접속하기 (0)	2022.02.15
[MySQL] MySQL Workbench에서 Table DDL create 스크립트 확인 / How to get a table creation script in MySQL Workbench? (0)	2022.01.07
[Nginx] Nginx 이해하기 (0)	2022.01.05
[python] 파이썬 스케쥴 수행 - python schedule, apscheduler (0)	2021.12.17

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

트랙백 개

댓글 개

[Spring MVC] Thymeleaf 타임리프 기본 기능- 텍스트 text, utext

web/Spring

2022. 1. 18. 22:20

[텍스트를 출력하는 기능 - text, utext]

타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다. HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이th:text를 사용한다.

<span th:text="${data}"></span>

HTML 태그의 속성이 아니라 HTML 콘텐츠 영역 안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]]를 사용하면 된다.

[[${data}]]

BasicController.java

@Controller
@RequestMapping("/basic")
public class BasicController {
    @GetMapping("/text-basic")
    public String textBasic(Model model) {
        model.addAttribute("data", "Hello Spring!");
        return "basic/text-basic";
    }
}

/resources/templates/basic/text-basic.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>데이터 출력</h1>
    <ul>
        <li>th:text 사용 <span th:text="${data}"></span></li>
        <li>직접 출력 [[${data}]]</li>
    </ul>
</body>
</html>

# Escape

HTML 문서는 <, > 같은 특수 문자를 기반으로 정의된다. 따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수문자가 있는 것을 주의해서 사용해야 한다.

BasicController에서 "Hello Spring!"을 "Hello Spring!"로 변경해보면

웹 브라우저에서 그대로 출력됨. => Hello Spring!

소스에서는 Hello Spring!

HTML 엔티티

웹 브라우저는 <를 HTML 태그의 시작으로 인식한다. 따라서 <를 태그의 시작이 아니라 문자로 표햔할 수 있는 방법이 필요하다. HTML에서 사용하는 특수문자로 HTML 엔티티로 변경하는 것을 이스케이프(escape)라고 한다. 타임리프가 제공하는 th:text, [[...]]는 기본적으로 이스케이프(escape)를 제공한다.

- < => <

- > => >

# Unescape

타임리프는 다음 두 기능을 제공한다.

- th:utext

- [(...)]

=> escape를 사용하지 않아서 HTML이 정상 렌더링이 되지 않는 문제가 발생할 수 있으므로 escape를 기본으로 하고 unescape는 필요할 때만 사용하는 것으로 !

728x90

저작자표시

'web > Spring' 카테고리의 다른 글

[Spring Mybatis] resultMap (0)	2022.02.11
[Spring Boot] 기본 포트 설정하는 방법 (0)	2022.01.26
[Spring MVC] Thymeleaf 타임리프 기본 기능 (0)	2022.01.17
[Spring] UriComponentsBuilder / RestTemplate GET with parameters / RestTemplate 사용 시 Get 메서드로 파라미터 보내는 법 (0)	2022.01.13
[Spring] @RequestBody, @RequestParam, @ModelAttribute의 차이 (0)	2022.01.12

Written by ner.o

개발자 네로의 개발 일기, 자바를 좋아합니다 !

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

'전체 글'에 해당되는 글 194건

'web > React' 카테고리의 다른 글

Written by ner.o

curl이란?

지원하는 프로토콜

curl 사용법

설치방법

'programming language > Linux' 카테고리의 다른 글

Written by ner.o

1. 속성 파일 사용

2. 프로그래밍 방식 구성

3. 명령어 사용

'web > Spring' 카테고리의 다른 글

Written by ner.o

'programming language > Dev' 카테고리의 다른 글

Written by ner.o

[텍스트를 출력하는 기능 - text, utext]

# Escape

# Unescape

=> escape를 사용하지 않아서 HTML이 정상 렌더링이 되지 않는 문제가 발생할 수 있으므로 escape를 기본으로 하고 unescape는 필요할 때만 사용하는 것으로 !

'web > Spring' 카테고리의 다른 글

Written by ner.o

NOTICE

RECENT POSTS

RECENT COMMENTS

SITE LINK

TAGS

COUNTER

CALENDAR

티스토리툴바