전체 글82 네이버 클라우드에 대한 이해 1. 네이버 클라우드는 어떤 회사인가요? 기업용으로 컴퓨터를 빌려주는 구독형 사업을 하는 회사이다. 저장 공간 뿐만 아니라 서버나 네트워크처럼 서비스르 하는데 필요한 IT 인프라를 빌려주기도 하고, AI나 IoT, 블록체인처럼 각 기업들이 스스로 개발하기 어려운 첨단 기술들도 플랫폼 형태로 빌려주는 서비스를 하는 회사이다. 2. 클라우드의 장점은? 클라우드를 쓰지 않으면 트래픽이 몰 때마다 서버를 사서 구축해야 하는데 시간이 오래 걸림. 클라우드를 이용하면 바로 그때 용량을 늘릴 수 있어 안정적으로 서비스 운영이 가능함. 오토 스케일링 기능으로 특정 용량 이상의 트래픽이 몰릴 경우 클라우드가 알아서 자기 서버를 늘림. 3. 네이버 클라우드 사례 BTS가 웹블리에서 공연했을 때 전 세계 14만 명이 온라인.. 2023. 11. 25. AWS 과금 방지 서비스 해지 방법 사건의 발단 국비 과정때 네이버 클라우드 서비스 이용했다가.. 무료체험 3개월이 끝나고 AWS를 이용해보기로 했다.. 근데 서비스 해지가 비교도 안되게 찾기 어려웠음; ; ; 일단 나같은 경우에는 탄력IP 서비스가 이용중이라 과금이 된 케이스; 그래서 해지 잘하고 포스팅을 해보자고 결심하게 되었다. 서비스 해지 방법 1. 로그인 후 설정 > 청구서 2. 결제되고 있는 지역과 서비스명 확인 3. 콘솔창에서 해당 지역으로 이동 및 결제 서비스 확인 - 나같은 경우는 EC2 대시보드로 이동해 탄력적IP가 1로 되어있음을 확인하고 삭제했다. - 탄력적 IP 삭제 방법은 탄력적 IP 클릭 > 작업 > 탄력적 IP 주소 릴리스를 누르면 된다. (자세한 내용은 아래 블로그를 참고하면 좋을 듯) aws 탄력 ip (p.. 2023. 6. 14. react onkeydown에서 preventDefault 에러 사용자가 enter 입력했을 때 form submit하는 함수를 호출하는데 preventDefault 부분에서 계속 에러 발생... 해결책을 생각해보았다. 1. 로그인 버튼을 클릭했을 때는 오류 없음, 엔터 눌렀을 때만 오류 발생 2. 엔터 누르고 console.log 이벤트 찍어봄 -> undefined 3. 넘어오는 이벤트가 없는 것으로 추정.. -> 함수호출 할 때 이벤트도 같이 넘겨준다면..? 4. 해결 !!!!!!! const onSubmitHandler = (e) => { e.preventDefault() axios({ method: "POST", url: "http://115.85.180.7:8000/auth/login/", data: { username: id, userpass: pw, }.. 2023. 2. 1. 6. input 상태 관리 input 태그의 value 값도 설정해주는 것이 중요 -> 상태가 바뀌었을 때 input 내용도 업데이트 InputSample.js import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } export default InputSample; 여러개의 input 상태 관리하기 - 여러개의 useState와 onChange로 구현하는 것보다 input에 name 설정.. 2023. 1. 18. 5. useState 함수형 컴포넌트에서 Hooks 기능을 통해 상태를 관리할 수 있음 함수형 업데이트 - setNumber를 사용할 때 값을 업데이트 하는 함수를 파라미터로 넣어줌 - 최적화로 어떤 관련이 있는지 다음 시간에.. Counter.js import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const onDecrease = () => { setNumber(prevNumber => prevNumber - 1); } return ( {number} +1 -1 ); .. 2023. 1. 18. 4. 조건부 렌더링 특정 조건에 따라 다른 결과물을 렌더링 가장 기본적인 방법은 삼항연산자 사용하는 것 단순히 특정 조건이 true이면 보여주고 그렇지 않다면 숨겨줄 때는 && 연산자를 사용하는 것이 더 간편함 App.js - props 이름만 작성하고 값 설정을 생략한다면 true로 설정한 것으로 간주 isSpecial={true}와 isSpecial은 같 import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; Hello.js - isSpecial값이 true이면 *를 그렇지 않다면 *null을 보여주도록 함 *JSX에서 null,.. 2023. 1. 18. 이전 1 2 3 4 ··· 14 다음
