분류 전체보기57 VSCode에서 자주 사용하는 기능 소개 자동완성 예를들어 handleIconClick 이라는 단어를 입력할 때 단어의 앞 부분인 hand 만 입력하거나 단어의 이니셜인 hic 만 입력하면 VSCode는 툴팁으로 단어를 추천해주는데요. 여기서 원하는 단어를 선택한 다음 Enter나 Tab 키를 눌러 단어를 완성할 수 있습니다. 단축키 멀티 커서 선택하기 텍스트 커서를 단어로 옮겨 놓으면 해당하는 변수나 함수가 하이라이팅되고, 텍스트를 선택하면 대소문자 구분없이 같은 단어가 하이라이팅되는데요. 이 상태에서 멀티 커서 선택을 하면 여러 군데를 한 번에 수정할 수 있습니다. 윈도우즈 맥 Ctrl + Shift + L Cmd + Shift + L 직접 멀티 커서 만들기 원하는 위치에 텍스트 커서를 만들 수 있습니다. 윈도우즈 맥 Alt + 클릭 Opt.. 2023. 11. 24. 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. 이전 1 2 3 4 5 6 ··· 15 다음
