전체 글57 AWS S3로 배포한 사이트에 커스텀 도메인 연결하는 방법 AWS S3로 배포한 사이트에 커스텀 도메인을 연결하는 방법을 배워보겠습니다. 도메인은 AWS를 통해서 구입할 수도 있고, 다른 도메인 등록 업체에서 살 수도 있는데요. 구글에서 '도메인 구매'로 검색해서 마음에 드는 업체를 골라 구입하시면 됩니다. 아직 도메인이 없는데 AWS를 통해 등록 하시려면 1-a 단계와 2 단계를 따라하시면 되고, 만약 도메인을 이미 구입하신 분들이라면, 1-b 단계와 2 단계를 따라하시면 됩니다. 도메인 등록 비용과, AWS 서비스 이용료가 발생할 수 있으니 이점도 꼭 참고해주세요! 1-a. AWS에서 도메인 구입하기 도메인 구입은 문득 들으면 굉장히 어려워보이지만, 사실 인터넷으로 나이키 운동화를 사는 것처럼 쉽게 할 수 있습니다. 우선 AWS로 접속해서 'Route 53'.. 2023. 11. 23. 리액트에서 디자인 적용하는 방법과 팁 사실 CSS 파일을 불러오거나 이미지 파일을 불러오는 기능은 리액트 고유의 기능이 아니라 Create React App이라는 프로그램이 대신 설정해 준 기능입니다. (참고: Create React App 문서) 디자인을 적용하는 방법 이미지 불러오기 이미지 파일은 import 구문을 통해 불러오고, 불러온 이미지 주소를 src 속성으로 사용하면 됩니다. import diceImg from './assets/dice.png'; function Dice() { return ; } export default App; 인라인 스타일 리액트에서 인라인 스타일은 문자열이 아닌 객체형으로 사용합니다. 프로퍼티 이름은 CSS 속성 이름으로, 프로퍼티 값은 CSS 속성 값으로 쓰는데요, 이때 프로퍼티 이름은 아래의 bo.. 2023. 11. 23. 리액트 스테이트(State) 정리 State state는 리액트에서 화면을 그려내는 데 굉장히 중요한 역할을 합니다. State라는 단어는 한국어로 '상태'라는 뜻이 있는데요. 리액트에서의 state도 그 의미가 다르지 않습니다. 상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 하는 것이죠. 리액트에서 state를 만들고, state를 바꾸기 위해서는 일단 useState라는 함수를 활용해야 합니다. import { useState } from 'react'; // ... const [num, setNum] = useState(1); // ... 보통 이렇게 Destructuring 문법으로 작성하는데요. useState 함수가 초깃값을 아규먼트로 받고 그에 따른 실행 결과로 요소 2개를 가진 배열의 형태로 리턴을 하기 때문입.. 2023. 11. 22. 리액트 Props 정리 Props JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있는데요. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부릅니다. Props는 Properties의 약자인데요. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달됩니다. App.js import Dice from './Dice'; function App() { return ( ); } export default App; Dice.js import diceBlue01 from './assets/dice-blue-1.svg'; function Dice(props) { console.log(props) return ; } export default Dice;.. 2023. 11. 22. JSX 문법 설명 JSX란? JSX는 자바스크립트의 확장 문법인데요. 리액트로 코드를 작성할 때 HTML 문법과 비슷한 이 JSX 문법을 활용하면 훨씬 더 편리하게 화면에 나타낼 코드를 작성할 수가 있게 됩니다. import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 안녕 리액트! ); JSX 문법 JSX는 자바스크립트로 HTML과 같은 문법을 사용할 수 있도록 만들어주는 편리한 문법이지만, 그만큼 꼭 지켜야 할 규칙들도 있습니다. HTML과 다른 속성명 1. 속성명은 카멜 케이스로 작성하기! JSX 문법에서도 태그에 속성을 지정해 줄 수 있습니다. 단, 여러 단.. 2023. 11. 21. 비동기 실행 관련 3가지 문법 정리 비동기 실행의 정의는 아래와 같이 다양한 방식으로 표현될 수 있습니다. 특정 작업이 시작되고, 그 작업이 모두 완료되기 전에 바로 다음 코드가 실행되는 방식의 실행, 나머지 작업은 나중에 콜백을 통해 수행되는 방식의 실행 특정 처리를 나중으로 미루는 방식의 실행 콜백을 등록해두고, 추후에 특정 조건이 만족되면 그 콜백으로 나머지 작업을 수행하는 방식의 실행 이렇게 다양한 표현으로 그 정의를 써볼 수 있는데요. 특정 처리를 담당하는 존재(콜백)의 실행을 나중으로 미룬다는 점만 잘 기억하시면 딱히 어려울 게 없습니다. 비동기 실행 관련 문법 중 3가지 (1) 파라미터로 바로 콜백을 전달하는 형태의 전통적인 비동기 실행 함수 (2) Promise (3) async/await 에 대해 정리하겠습니다. 1. 파라.. 2023. 11. 16. 비동기 실행의 개념과 관련 함수들 비동기 실행의 개념에 대해 알아보겠습니다. console.log('Start!'); fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 지금 이 코드에는 다음과 같은 2개의 콜백이 있습니다. (1) (response) ⇒ response.text() (2) (result) ⇒ { console.log(result); } fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행되는데요. 이 사실을 바탕으로, 전체 코드의 실행 순서를 다시 정리하자면 console.log('Sta.. 2023. 11. 15. '0x80080005' 윈도우 업데이트 오류 코드 간단 해결 방법 우선 Window키 + R 버튼을 누르면 나오는 창에서 winver 라고 친다. 그러면 윈도우 정보창이 나오는데 버전이 22H1 인 경우 윈도우 업데이트를 수동으로 진행해 줘야 한다. Windows 10 다운로드 (microsoft.com) Windows 10 다운로드 Windows 10용 ISO 파일을 다운로드한 경우, 해당 파일은 선택한 위치에 로컬로 저장됩니다.컴퓨터에 타사 DVD 굽기 프로그램이 설치되어 있으며 해당 프로그램을 사용하여 설치 DVD를 만들려는 경우, www.microsoft.com 윈도우 다운로드 창으로 가서 업데이트 버튼을 누르면 문제 해결된다. 이거 업데이트 하면 윈도우 스토어 다운로드 안되는 문제도 다 해결된다. 2023. 11. 14. Content-Type 정의와 정보 1. Content-Type 헤더 Content-Type 헤더는 현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타냅니다. 실무 개발에서는 리퀘스트 또는 리스폰스의 바디에 정말 다양한 종류의 데이터들을 넣게 됩니다. 텍스트부터 시작해서 이미지, 영상까지 정말 많은 것들이 들어갈 수 있습니다. 바로 이런 데이터들의 타입 정보가 Content-Type 헤더에 담겨있는 겁니다. Content-Type 헤더의 값은 '주 타입(main type)/서브 타입(sub type)'의 형식으로 나타나는데요. 흔히 만나게 되는 Content-Type 헤더의 값으로는 다음과 같은 것들이 있습니다. 주 타입이 text인 경우(텍스트) 일반 텍스트 : text/plain CSS 코드 : text/cs.. 2023. 11. 14. 이전 1 2 3 4 5 ··· 7 다음
