전체 글
-
React JSXComputer Science/React 2022. 8. 16. 13:32
react의 컴포넌트를 만드는데 유용한 문법이다. 태그를 사용하든 component를 사용가능하다. import MyHeader from './MyHeader.js' 를 하였다면 를 사용할 수 있다. 1. 닫침 규칙 반드시 모든 태그를 닫아줘야한다. 로 열자마자 닫을수 있다. (self closing) 2. 반환은 반드시 하나의 부모를 가져야한다. 반드시 최상위 태그로 묶어서 보내줘야한다. 없이 보내고 싶다면 import React from "react"; 로 감싸줄수 있다. 혹은 도 가능하다. inline style 방식 const style = { App:{ backgruondColor : "black" } } 를 통해 내부에서도 style을 만들어서 사용가능하다.
-
module을 통해 css 파일 나누기.Computer Science/React 2022. 8. 15. 22:12
import './index.css'; 하나만 import 하였고 분명히 import 하지도 않는 css 파일을 적용이 되는 것을 볼수 있다. 이는 상위 js에서 import가 되었을 가능성이 높다. module 화를 통해서 css를 분리해보자. 간단하다. css 파일 명에 module을 붙여준다. Main.css -> Main.module.css module을 안붙여주면 적용이 되지 않는다. 그 후에 import를 해준다. import style from './css/Main.module.css'; className은 다음과 같이 style. 으로 진행하면된다. LOLDUO 여러개의 className을 적용시키고 싶다면 className={s.now === selected ? `${style.Champ..
-
React Router를 통해 페이지 전환하기.Computer Science/React 2022. 8. 15. 21:59
npm install react-router-dom 를 통해 react-router를 설치해준다. index.js 예시이다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import style from './css/Main.module.css'; import './css/App.css'; import App from './App'; import Detatil from './Detail'; import { BrowserRouter, Routes, Route } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElem..
-
github action 및 github 변동 내역 slack에 알림주기.Computer Science/Slack 2022. 8. 11. 20:29
github 변동사항을 slack에 알려주는 것은 쉽다. slack에서 app 추가 -> github 앱을 등록해준다. 해당 app을 원하는 채널에 추가해준뒤, /github subscribe owner/repo 를 통해 해당 repo의 변경점을 추적하도록 해준다. https://slack.com/intl/ko-kr/help/articles/232289568-Slack%EC%9A%A9-GitHub Slack용 GitHub GitHub는 소프트웨어 개발자 팀이 협업하여 코드를 작성하고 프로젝트를 관리할 수 있도록 지원합니다. GitHub를 Slack과 연결할 경우 선택하는 Slack 채널... slack.com github action이 종료 되면 해당 정보를 slack에 알려줄려고 한다. github a..
-
AWS codeDeploy error log 확인Computer Science/Aws 2022. 8. 9. 03:56
aws codeDeploy error 는 /var/log/aws/codedeploy-agent 아래에 파일들로 로그가 남는다. The overall deployment failed because too many individual instances failed deployment, too few healthy instances are available for deployment, or some instances in your deployment group are experiencing problems. 라는 오류가 aws deploy에서 나올 때가 있는데, 혹 ec2 iam을 deploy-agent가 적용이 안되어 있을 수 있다. sudo service codedeploy-agent restart 를 통..
-
spring boot datadog json으로 log 남기기.Computer Science/Spring boot 2022. 8. 5. 16:31
datadog.yaml에서 log 기능을 우선 enable 해준다. /etc/datadog-agent/datadog.yaml 에 대부분 위치해 있다. logs_enabled: true 로 변경 해준뒤 저장하고, datadog-agent/con.d 에 java.yaml 파일을 만들어준다. #Log section logs: - type: file path: "/path/to/your/java/log.log" service: java source: java sourcecategory: sourcecode # For multiline logs, if they start by the date with the format yyyy-mm-dd uncomment the following processing rule #..
-
Server 기동 여부 등 slack에 알리기.Computer Science/Slack 2022. 8. 5. 01:44
slack api 사이트에 들어가서 your app에 들어간다. https://api.slack.com/apps create new app을 해주어 해당 app이 작동할 workspace를 선택해준다. OAuth & Permissions Scopes를 먼저 설정해주어야 한다. Bot Token - bot의 접근 권한. - chat:write를 추가해 chat을 할 수 있는 권한을 주고, - channels:read 를 추가해 무슨 채널이 있는지 읽을 권한 을 준다. //User Token - user의 데이터에 bot이 접근 할 수 있는 권한. 그런뒤 install workspace를 진행해준다. token 값이 나온다. 해당 값은 github등에 보여지게 되면 재발급 받아야하니 주의하자. 그런뒤 sla..
-
AWS Secrets Manager를 이용하여 DB 비밀번호 등 암호화하기.Computer Science/Aws 2022. 8. 2. 21:48
//amazon secret management implementation 'org.springframework.cloud:spring-cloud-starter-bootstrap:3.1.3' implementation 'org.springframework.cloud:spring-cloud-starter-aws-secrets-manager-config:2.2.6.RELEASE' boot strap을 먼저 실행한 후 aws secrets manager에 접속하여 가져오는 방식이다. 고로 우선 위에 2가지를 implement해준다. secrets manager에 secret들을 저장해준다. 기본이 secret 아래로 되어 있기에 prefix를 /secret/으로 하고 프로젝트에 쓰일 명을 입력해준다. 그 다음..