이안의 평일코딩

리액트 초기 셋팅 최근 Vue를 계속 사용하다보니 리액트 초기 설정을 까먹어서 다시 기억하기 위해 써본다. 분명히 업로드한 것 같은데 블로깅이 안되어 있어서 다시 씀. 먼저, Nodejs 최신버전이 필요하다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 그리고 터미널(Mac) 또는 명령 프롬프트(Windows)에 아래와 같이 입력한다. npx create-react-app 프로젝트명 그리고 IDE에서(나는 vscode) 프로젝트명으로 만든 폴더를 open한 뒤 아래와 같이 입력하면 실행된다. npm run start 또는 yarn start (vue에서는 주구..

IAM(Identity and Access Management) AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스. 리소스(Resource): 자원. AWS에서는 컴퓨팅, 스토리지, 네트워크, ... 접근(Access): 리소스를 조작 및 제어하는 것. CRUD(쓰기, 읽기, 변경, 삭제) 사용자가 리소스를 사용하려고 할 때 권한을 세부적으로 조정하는 서비스 https://www.aws.training/Details/Video?id=54773 AWS training and certification www.aws.training AWS의 인증(자신이 누구라고 주장할 때 이를 확인하는 절차)을 담당하는 것은? IAM User, IAM Role AWS의 권한부여(사용자가 원하는 리소스에 접근하..

1. 먼저 data에 scrollPosition을 null값으로 넣어준다. 2. updateScroll()이라는 메소드를 통해 현재 윈도우의 스크롤 위치를 scrollPosition에 저장한다. 3. mounted를 통해 위의 updateScroll()이 발생하도록 한다. 4. 해당하는 div에 2가지 조건을 넣는다. 5.

ajax란? GET 또는 POST 요청하면 브라우저가 새로고침하게 된다. ajax를 쓰면 새로고침 없이도 요청이 가능하다. axios 설치 axios 라이브러리를 쓰든가 기본 fetch 함수를 쓰면 된다. fetch API는 브라우저 비교적 최신 기능이지만 호환성 문제때문에 axios를 이용한다.

props로 받아온 이미지 넣기 `${}` 문자를 만들 때 "따옴표"쓰지만 `백틱`기호를 쓰면 글자 중간에 변수 넣기가 편리하다. '문자' + 변수 + '문자" 또는 `문자 ${변수} 문자` 둘 중 하나를 선택해서 사용하면 된다. {{instaData.name}} {{instaData.likes}} Likes {{instaData.name}} {{instaData.content}} {{instaData.date}}

:파라미터 URL 파라미터를 만들기 위해 router의 path안에 "/detail/:id"과 같이 /:작명을 하면 된다. (그럼 /detail/0, 1, 2... 가능) 그럼 가져올 때 Detail.vue에서 {{blog[해당하는 id번호].title}} 에서 []안에 $route.params.id를 넣는다. 현재 URL 정보는 $route에 담겨있음. $route.params는 파라미터자리에 기입된 것을 알려준다. $route.params.id는 router의 path안에 :파라미터 작명한 것을 넣어주면 URL의 파라미터를 가져온다. src/router.js import { createWebHistory, createRouter } from "vue-router"; import List from '...

Bootstrap getbootstrap.com/docs/5.0/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com 첫 번째 방법은 CSS와 JS를 index.html 에 아래와 같이 넣어주는 것이다. 하지만 항상 받아와야 되기 때문에 사이트가 느려질 수 있다. 그러므로 두 번째, 아예 설치하는 방법이다. getbootstrap.com/docs/5.0/getting-started/do..

sort() sort()는 문자정렬이 된다. priceSort(){ var array = [3,5,2]; array.sort(); console.log(array); // [2, 3, 5] } 숫자정렬을 하려면 function(a,b)를 넣어 만든다. a - b가 음수면 a가 왼쪽으로 가면서 숫자 정렬이 된다. array.sort(function(a,b){ return a - b }); spread operator sort() 함수는 원본이 변형되므로 기존 데이터를 보존하기 위해서 spread operator [... 데이터]를 사용한다. 그러면 array/object 데이터의 각각 별개의 사본을 만들 수 있다. [...array자료] spread operator를 사용하지 않으면 같은 값을 공유한다. ..