홍준혁

오늘은 CSS에서 마우스가 호버 될 시, 간단한 애니메이션과 함께 멋있는 버튼을 디자인해볼 것이다. 어떤 방식으로 버튼을 만들 거냐면 이런 식으로 구성이 되어있고, 버튼에 호버가 될 때, span의 콘텐츠에 애니메이션을 주는 효과를 줄 것이다. 우선, className이랑 class랑 같다고 생각하자. (리액트로 예제를 해서 그렇다. 차이는 없다) 그렇게 하면 이런 버튼이 생길 것이다. 이제 간단한 버튼 디자인을 해보자. 이런 식으로 해주었다. button안에 span값은 마우스가 올라갔을 때 pointer속성을 주었고, display : inline-block을 주게 되면 :after가상 클래스가 span값 옆에 생기게 된다. position: relative는 위치 조정을 위해서, transition..

웹팩의 장점 1.웹 개발작업 자동화 2.웹 애플리케이션의 빠른 로딩,성능 HTTP요청 숫자의 제약 :웹 앱의 성능을 높혀줌. Node.js란 브라우저 밖에서도 JS를 실행할 수 있는 환경 즉,Node.js가 나오기 전에는 브라우저 내에서 실행되는 언어임에 한정되었는데 Node.js가 나오고 난 이후로 브라우저 밖에서도 JS를 실행할 수 있게되었다. NPM이란 명령어로 자바스크립트 라이브러리를 설치하고 관리할수 있는 패키지 메니저이다. NPM명령어 npm install library == npm i library npm install명령어로 라이브러리를 설치하면 node_module이라는 폴더가 생긴다 그 폴더 내에는 각종 라이브러리가 위치해있는것을 알 수 있다. npm install library --g..

타입 스크립트는 자바스크립트의 슈퍼셋이다. 타입 스크립트를 사용하면 개발자 입장에서 좋은 코드를 작성할 수 있게 된다. (바보 같은 오류를 방지해준다.) 그래서 리액트에서 타입 스크립트를 사용해보자. 먼저 디렉터리를 만들고 CRA를 해준다. 이렇게 해주면 자동으로 타입 스크립트가 설정된 리액트가 프로젝트가 만들어진다. 기본적으로 만들어진 프로젝트에 App과 index를 남기고 다 지워도 무방하다. - 이렇게 파일 구조를 생성해주자. 그다음에 APP에서 styled-components를 이용해서, import styled, { createGlobalStyle } from 'styled-components'; styled와 createGlobalStyle을 선언해주자. 이렇게 되면 GlobalStyle컴포넌..

타입 스크립트는 자바스크립트의 확장된 개념이다. 타입 스크립트에서 가장 중요한 개념은 바로 '타입'인데, 바로 타입스크립트에서 타입을 지정하는 방법을 배워보도록 하자. 자바스크립트 형식대로 sayHello라는 함수를 만들었다. 하지만 우리는 name이라는 파라미터에 타입을 지정해주지 않아서 빨간 줄이 떴다. (실행은 된다.) 그러면 이제 name에 파라미터를 전달해 줘서 저 빨간줄을 없애보겠다. 이렇게, :string을 붙여서 name에 문자 타입을 주었다. 이렇게 간단하게 타입을 지정해줄 수 있다. 예를들어 숫자 타입을 주고 싶으면 :number 불리안 타입을 주고 싶으면 :boolean을 주면 된다. 이 타입은 배열 타입도 줄 수 있다. 이런식으로 type + [] 하면 된다. 그다음 interfac..

이제 수정&삭제 기능을 만들어보겠다. 파이어 베이스에서 수정&삭제는 진짜 정말 굉장히 쉽다. 참고할 공식 docs는 firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference#update DocumentReference | JavaScript SDK | Firebase Reference for DocumentReference firebase.google.com firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference#delete DocumentReference | JavaScript SDK | Firebase Reference for DocumentRef..

오늘은 파이어 베이스에서 CRUD를 구현해볼 것이다. 먼저, 클라우드 파이어스토어라는 것을 만들어줘야 한다. 이것이 우리가 사용할 데이터베이스이다. test모드로 데이터베이스를 생성해주면 이제 리액트에서 파이어 베이스를 사용할 준비가 되었다. import 'firebase/firestore'; 모듈을 불러와주고, export const dbService = firebase.firestore(); 다른 컴포넌트에서 접근할 수 있게 export를 해준다. 그러면 이제 우리가 의지해야하는것은 공식 docs인데, 공식 Docs에 데이터 추가 및 관리 부분에서 데이터 추가 부분을 보도록 하겠다. 그러면 이렇게 예제코드가 나온다. 위 코드를 해석해보자면, cities 하는 컬렉션을 만들고 그 안에 LA라는 doc을..