기본 콘텐츠로 건너뛰기

2023의 게시물 표시

nginx.conf

user www-data ; worker_processes auto ; pid /run/nginx.pid ; include /etc/nginx/modules-enabled/ * .conf ; events { worker_connections 768 ; # multi_accept on; } http { ## # Basic Settings ## sendfile on ; tcp_nopush on ; types_hash_max_size 2048 ; client_max_body_size 10 M ; # Set client upload size = 10Mbyte # server_tokens off; # server_names_hash_bucket_size 64; # server_name_in_redirect off; include /etc/nginx/mime.types ; default_type application/octet-stream ; ## # SSL Settings ## ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3 ; # Dropping SSLv3, ref: POODLE ssl_prefer_server_ciphers on ; ## # Logging Settings ## access_log /var/log/nginx/access.log ; error_log /var/log/nginx/error.log ; ## # Gzip Settings ## gzip on ; # gzip_vary on

React, 상위 컴포넌트에서 하위 컴포넌트로 속성 전달하기

 start # 상위 컴포넌트 // 생략 // < ProductsName className ={ styles.submenu } /> // 생략 // # 하위 컴포넌트 // 생략 // interface ProductsNavProps { className ?: string ; } ProductsNav .defaultProps = { className: "" , }; function ProductsNav ( props : ProductsNavProps ) { const { className } = props ; return ( < ul className ={ className } > < li >제품</ li > </ ul > ); } // 생략 // end

Spring 파일 사용법

@Service public class FileService { @Autowired private ResourceLoader resourceLoader; private static final String PATH = "classpath:/static/files/catalogs/" ; public ResponseEntity<Resource> download ( HttpServletRequest request , String path , String filename ) { try { Resource resource = resourceLoader . getResource( PATH + path + "/" + filename); return ResponseEntity . ok() // .header(HttpHeaders.CONTENT_DISPOSITION, "attach; filename=\"" + filename + // "\"") .header( HttpHeaders . CONTENT_DISPOSITION , "inline; filename= \" " + filename + " \" " ) // .header(HttpHeaders.CONTENT_TYPE, // MediaType.APPLICATION_OCTET_STREAM.toString()) .header( HttpHeaders . CONTENT_TYPE , MediaType . APPLICATION_PDF . toSt

Github Pages 사용법

# gh-pages 설치 $ npm i -D gh-pagesad $ yarn add -D gh-pages 참고 사이트 :  https://www.jasonchoi.dev/posts/publish-nextjs-to-gh-pages end

Spring과 React 연동

  출처 :  https://velog.io/@sians0209/Spring-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%94%84%EB%A7%81-%EC%97%B0%EA%B2%B0

NextJS 사용법

  # Node 설치 $ brew install node # Next App 설치 $ npm install -g create-next-app # my-app 만들기 $ npx create-next-app@latest my-app # my-app 실행 $ npm run dev # TailwindCSS 설치 $ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest $ npx tailwindcss init -p $ yarn add @heroicons/react end

Vim 사용법

  # 한줄 지우기 dd # 문자 대치 :1,10s/Hello/World!/g 1 ~ 10열의 문자중에 Hello라는 문자를 World!로 바꾼다.

포트 사용법

  # 포트 활성화 $ sudo ufw enable # 포트 비활성화 $ sudo ufw disable # 포트 활성 상태확인 $ sudo ufw status verbos # 포트 80번 허용 $ sudo ufw allow 80 # 포트 80번 거부 $ sudo ufw deny 80 # 모든 포트 확인 $ netstat -tnlp # 특정 포트 확인 $ netstat -nap | grep 포트번호 # 특정 포트 열기 $ sudo iptables -I INPUT 1 -p tcp --dport 80 -j ACCEPT # 특정 포트 닫기 $ sudo iptables -D INPUT -p tcp -m tcp --dport 80 -j ACCEPT

Homebrew 사용법

  # 리눅스에 설치 $  https://brew.sh/index_ko $ (echo; echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"') >> /home/ubuntu/.profile $ eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"

React 사용법

# typescript로 된 react app 만들기 $ npx create-react-app my-app --template typescript # typescript 용 react dom 설치 $ npm i --save react react-dom typescript # typescript node 설치 $ npm i --save-dev @types/react @types/react-dom @types/node # typescript tsconfig.json 설정 { "compilerOptions" : { "target" : "es6" , "lib" : [ "dom" , "dom.iterable" , "esnext" ], "baseUrl" : "./src" , "allowJs" : true , "skipLibCheck" : true , "esModuleInterop" : true , "allowSyntheticDefaultImports" : true , "strict" : true , "forceConsistentCasingInFileNames" : true , "noFallthroughCasesInSwitch" : true , "module" : "esnext" , "moduleResolution" : "node" , "resolveJsonModule" : true , "isolatedModules" : true , &q

Spring Framework OAuth2 인증 사용법

  OAuth2 id, password 얻기 구글 클라우드 플랫폼(GCP) -> 사용자 인증 정보 -> OAuth2.0 클라이언트 ID 네이버 개발자센터 -> 애플리케이션 등록 -> 사용 API(네이버 로그인) 카카오 개발자센터 -> 애플리케이션 등록 -> 제품 설정 -> 카카오 로그인 출처:  https://wildeveloperetrain.tistory.com/252

Angular 사용법

  # 새로운 Component 만들기 ng generate component Home --standalone --inline-template --skip-tests

Angular 시작하기

  # Node.js가 설치되어 있어야함 npm -v # npm이 설치되어있는지 확인, npm의 버전이 출력됨 npm install -g @angular/cli # Angular 작업영역 생성 ng new my-app # my-app으로 이동 cd my-app # ng serve 명령 실행 ng serve --open 출처 :  https://angular.kr/guide/setup-local

Javascript Cookie

# Http Only Secure Cookie "Set-Cookie: refreshToken; path=/; httpOnly secure";  출처 :  https://wildeveloperetrain.tistory.com/146

Javascript insertAdjacentHTML

  div.insertAdjacentHTML("beforebegin | afterbegin | beforeend | afterend"); - beforebegin : 요소 이전에 삽입 - afterbegin : 요소 안에 첫번째 자식 이전에 삽입 - beforeend : 요소 안에 마지막 자식 이후에 삽입 - beforebegin : 요소 이후에 삽입

Javascript readyState 사용법

// 현재 창 준비 단계 확인 document. readyState // 'loading' : 문서를 불러오는 중 // 'interactive' : 문서가 완전히 불러와짐 // 'complete' : 문서외 리소스 전부 불러와짐 // 예제 document. onreadystatechange = () => { if (document. readyState === "interactive" ) { initApplication (); } }; 출처 :  https://ko.javascript.info/onload-ondomcontentloaded

Ubuntu 사용법

# 파일 삭제 $ sudo rm -f file1 # 폴더 삭제 $ sudo rm -rf dir1 # ubuntu 패스워드 설정 $ sudo passwd ubuntu # snap 설치 $ sudo apt install snapd -y

Maven 사용법

  # mvn test skip mvn clean install -DskipTests #  Problem creating jar: Execution exception: Java heap space -> [Help 1]  해결 export MAVEN_OPTS="-Xmx512m"

프로그래밍 설계

  Controller 요청 받은 링크로 연결시켜준다 Service 논리구조를 만든다 Repository 데이터베이스에서 정보를 가져온다 Entity 객체를 정의한다

Typescript 사용법

  // typescript 설치, npm 이 설치되어 있어야함 npm install -g typescript // sayHello.ts typescript파일 생성 function sayHello ( firstName : string ) { console . log ( 'Hello ' + firstName ); } let firstName : string = 'Hana' ; sayHello ( firstName ); // 엄격한 체크를 수행하는 트랜스 명령어 tsc --strictNullChecks sayHello.ts # 설치 $ npm install -g typescript # 타입스크립트 파일을 자바스크립트 파일로 변환 $ tsc --strictNullChecks sayHello.ts # 문자 안에 변수 넣기 `${key} : ${value}` // ' <- 이것과 이것 -> ` 은 다른 문자임에 주의하자! end

HTML Youtube 동영상 재생 넣기

  /* youtube video */ // 영상의 정보를 담을 video 전역 변수 선언 var section_5_video = "" ; // HTML 문서가 모두 준비되면 function loadScript () { if ( typeof (YT) == 'undefined' || typeof (YT.Player) == 'undefined' ) { var tag = document. createElement ( 'script' ); tag.src = "https://www.youtube.com/iframe_api" ; var firstScriptTag = document. getElementsByTagName ( 'script' )[ 0 ]; firstScriptTag. parentNode . insertBefore (tag, firstScriptTag); } } function loadPlayer () { window. onYouTubePlayerAPIReady = function () { onYouTubePlayer (); }; } $ ( function () { loadScript (); loadPlayer (); }) // 영상의 세부정보를 playser 변수에 담는다. function onYouTubePlayer () { section_5_video = new YT. Player ( 'section-5-video' , { height: '300' , width: '500' , videoId: 'EyPo1WZAcNk' , playerVars: { 'autopla

AWS Node.js 설치

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash . ~/.nvm/nvm.sh # Node.js 최신버전 깔기 nvm install node # Node.js 테스트 node -e "console.log('Running Node.js ' + process.version)"

Ubuntu SSL 인증서 받기

# SSL 발급을 위한 디렉토리 생성 sudo mkdir -p /var/www/letsencrypt/.well-known/acme-challenge # apt 업데이트 sudo apt update # nginx 설치 sudo apt install nginx-core # ubuntu 계정에 권한 및 파일 수정 권한을 부여 sudo touch /etc/nginx/snippets/letsencrypt.conf sudo chown root:ubuntu /etc/nginx/snippets/letsencrypt.conf sudo chmod 775 /etc/nginx/snippets/letsencrypt.conf # /etc/nginx/snippets/letsencrypt.conf 열기 sudo vi /etc/nginx/snippets/letsencrypt.conf # /etc/nginx/snippets/letsencrypt.conf 파일에 아래 텍스트 입력 후 저장 location ^~ /.well-known/acme-challenge/ { default_type "text/plain"; root /var/www/letsencrypt; } # /etc/nginx/sites-available/default 파일 수정 sudo vi /etc/nginx/sites-available/default # server_name _; # _를 xxxx.com으로 변경, xxxx는 구매한 도매인 # server_name xxxx.com; 추가 # include /etc/nginx/snippets/letsencrypt.conf; 추가 ## # You should look at the following URL's in order to grasp a solid understanding # of Nginx configuration files in order to fully unleash the power of Nginx. # https://www.nginx.co