본문 바로가기
반응형

Archive188

express 서버에 https 적용하기(SSL인증) certbot 설치 및 pem 키 생성 # certbot 설치 sudo add-apt-repository ppa:certbot/certbot sudo apt-get update sudo apt-get install certbot # 실행 sudo certbot certonly --manual 위 명령어를 실행하면 메뉴얼대로 입력을 해야하는데 잘읽어보고 1. 이메일 2. 적용할 도메인 3. public 파일 생성 을 잘 따라하면 성공적으로 생성된다는 메세지가 아래와같이 나온다. Successfully received certificate. Certificate is saved at: /etc/letsencrypt/live/입력한도메인/fullchain.pem Key is saved at: /etc/lets.. 2022. 6. 7.
Ubuntu 포트 포워딩 설정 iptables -I INPUT -p tcp --dport 80 -j ACCEPT # 80 포트 열기 # 80 포트를 3000 포트로 포워딩 추가 sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 3000 # 80 포트에서 3000 포트로 포워딩 된 규칙을 삭제 iptables -t nat -D PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080 iptables 리스트 확인 iptables -t nat -L --line-numbers # 인덱싱과 함께 확인 ❗ EC2와 같은 서버에서는 포트개방 규칙이 있으니, 반드시 인바운드 규칙에서 80번 포트 혹은 원하는 포트를 개방해야.. 2022. 6. 7.
EC2에 도메인 입히기 & DNS 에 대해서 도메인 구입 우선 적나란 IP를 한번 감싸주기 위해서 도메인을 구입해야한다. AWS Route53에서도 구매가능하고, 무료로 기간제 도메인을 구할 수 있다 https://www.freenom.com/ Freenom - A Name for Everyone Cost Price Free Special www.freenom.com 위 사이트에서 무료로 12개월 구매가 가능하다. AWS에 호스팅 영역 생성하기 단순히 구매한 도메인을 입력하고, 나머지는 건들게 없다. 호스팅 영역을 생성하면 아래와 같이 생성되어있다. 눌러서 들어가보면, 유형이 NS와 SOA 두개가 있을텐데 여기서 NS는 Name Server 를 말한다. 네임서버라는 것은 IP와 도메인을 상호변환해주는 서버를 말한다. EC2의 IP는 AWS에서 제공.. 2022. 6. 7.
React Custom Hook return Array vs Object 차이 커스텀 훅을 만들 때 보면 아래와 같은 두 가지 경우가 있음을 볼 수 있다. const [like,setLiked] = useState(false); const {like,setLiked} = useState(false); 이 두가지의 차이점은 배열이냐 객체냐이다. (엄밀히 배열도 객체인점은 명심하자) 기능적으로 차이는 없지만 비구조화 할당을 해서 사용할 때 차이가 발생한다. 배열같은 경우 배열의 순서를 정확히 맞추어서 꺼내야하지만, 반대로 Object의 경우에는 자유롭게, property 이름만 가져오면된다. 그래서 어떤 방식을 사용해도 상관없지만, 관습적으로 사용되는 방식은 hook이 return 하는 값이 2개일 경우에, 또한 그것이 state 값과 그 state를 변경하는 함수일 때 배열을 사용한.. 2022. 6. 7.
React 조건부 렌더링(falsy에서 유의하자) 조건부 렌더링 조건부 렌더링은 상태에 따라서 원하는 컴포넌트만 렌더링 하는 것을 말한다. 일반적으로 if 문이나 && 논리연산자, 3항 연산자로 표현한다. 혹은 return 구분 자체를 구분해서 정의하기도 한다. // return 으로 구분한 경우 function User({login}){ if(login){ return 로그인 후 화면 }else{ return 로그인이 필요합니다 } } // 3항 연산자 or && 연산자 사용 function User({login}){ return ( {login ? 로그인 후 화면 :로그인이 필요합니다} ) } export default function App(){ return ( ) } ❗ 주의해야할 점으로는 && 연산자를 사용할 때 앞의 조건이 falsy 한 값이.. 2022. 6. 6.
React 합성 이벤트 & Class Component의 this & 함수 바인딩 Dom Element 에서 이벤트는 합성 이벤트 이다. form 의 경우 preventDefault() 를 명시적으로 호출 해야한다 브라우저 고유의 event 와 정확히 동일하게 동작하지는 않는다. 하지만 이가 브라우저의 호환성을 맞춰준다. Class Component 를 사용할 때의 this 일반적인 이벤트 핸들링 패턴은, 핸들러를 메서드로 만드는 것이다. 하지만 이때 javascript 의 바인딩 문제를 해결 해 주어야한다. class App extends React.Component { constructor(props) { super(props); this.state = { a: 0 }; this.handleClick = this.handleClick.bind(this); } handleClick(.. 2022. 6. 6.
반응형

티스토리툴바