Development/React, JavaScript7 [css]애니메이션 적용하기 css를 이용하여 애니메이션을 적용해보았다. 전공 수업 때 애니메이션을 적용해본 적이 없어서 구글링을 통해 쉽게 적용해볼 수 있었다! 1. 적용할 div 혹은 p 등 태그에 클래스 or 아이디명 붙여주기 2. css 파일에서 해당 태그에 애니메이션 속성을 달아주기 3. " @keyframe 애니메이션 이름 " 을 통해 애니메이션 시작부터 종료까지의 세부 속성 지정하기 //@keyframe 문법은 애니메이션 시작~종료까지의 세부 동작을 지정하는 css 문법이다! ex) //css파일에서 .content { border-width: medium; border-top: 3px solid #364f6b; border-bottom: 3px solid #364f6b; margin-top: 10em; margin-l.. 2021. 1. 26. [JS] == / != / === / !=== 여러 사람들의 오픈 소스를 보면서 ==은 ==이지 왜 ===일까 하며 쳐봤다.자바스크립트에는 좀 더 엄격한 연산자가 있다고 한다...! == 는 값이 같다. (ex : 1 == '1' : 같다라고 봄. / 1 == 1 : 같다라고 봄. / '1' == '1' 같다라고 봄 ) != 는 값이 같지 않다. === 는 값도, 타입도 같다. (ex : 1 == '1' : 같지않다라고 봄. / 1 == 1 : 같다라고 봄. / '1' == '1' 같다라고 봄 ) !===는 값도, 타입도 다르다. (ex : 1 == '1' : 같지않다라고 봄. / 1 == 1 : 같다라고 봄. / '1' == '1' 같다라고 봄 ) 2020. 8. 13. [npm] npm이란? * npm 이란?n : 노드(node) / p : 패키지(package) / m : 매니저(managemer)- npm은 node.js 를 설치시 함께 설치됨!- node.js를 사용하여 만들어진 소프트웨어이지만 타 소프트웨어를 사용할 수 있는 모듈! 소프트웨어 관리자 같은 * npm 명령어 // 잘 정리되어 있음!https://www.zerocho.com/category/NodeJS/post/58285e4840a6d700184ebd87 2020. 7. 28. [자바스크립트]window.localStorage.setItem() window.localStorage 는 브라우저에서 지원하는 쿠키 같은 거!사용하는 경우 - 글 작성 중간 잃어버리지 않기 위한 임시 저장 용도 - 콘텐츠가 수시로 변경되는 경우 - 방문자의 이동 경로를 저장했다가 이동하는 경우 - 서버에 저장할 필욘느 없지만 사용될 경우데이터 저장 : .setItem(별명, 값)출처 : https://webisfree.com/2016-06-24/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-localstorage-sessionstorage-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%EC%97%90-%EC%A0%95%EB%B3%B4-%EC%A0%80%EC%9E%A5 2020. 7. 24. fetch란? * fetch 란? API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나 비동기 방식으로 요청하기 때문에 API 호출하는 과정이 끝나지 않더라도 자동적으로 다음 코드로 넘어감. 호출 과정에서 필요한 정보를 사용할 땐 .then() 함수 이용 - method (통신 방식) : GET(**default**) / POST 등이 있음. 1) GET : 어떠한 정보를 백엔드 서버에서 가져올 때 이용 2) POST : 어떠한 정보를 백엔드 서버에 보낼 때 이용 3) DELETE : 단어 그대로 삭제할 때 사용 - headers : API 응답에 대한 헤더 정보를 담음 Http Header와 대응 - body : 전달하고자 하는 응답 내용. 백엔드 서버와 통신할 때, 객체를 이용하여 통신하므로 !!!객체.. 2020. 7. 24. [리액트]페이지 이동하기 html에서 페이지를 이동할 때에는 태그에 href를 통해서 이동이 가능하다. 리액트는 JSX언어를 이용하기 때문에 html과 조금 다르다. 고로 href로 이동이 불가하다! * Link 컴포넌트 - html의 태그와 유사한 기능을 하는 컴포넌트이다. - 태그는 href속성으로 이동 경로를 지정한다면 는 to속성으로 prop을 통해 이동할 경로를 지정한다. 태그를 사용하기 위해 reack-router-dom에서 Link를 import 해준다. 이 과정 없으면 현 문서(.js)에서 Link 태그를 사용할 수 없음. //import를 해줬다는 건 당연히 npm install 을 했다는 것이겠지요?! import { Link } from 'react-router-dom' //**** 태그를 이용한다. 태그 안.. 2020. 7. 24. 이전 1 2 다음