민희의 코딩일지

1- transition (전환효과) css 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 만들어줄 수 있다. a. transition-property 어떤 property에 transition을 적용할 것 인지를 지정한다. transition-property: color, transform b. transition-duration transition에 걸리는 시간을 지정한다. transition-duration: 0.2s transition에 걸리는 시간을 지정한다. duration은 s 혹은 ms 단위로 지정이 가능하다. c. transition-timing-function transition의 속도 패턴을 지정한다. transition의 변화가 일정한 속도로 일어날 것..

1- background a. background-color 요소의 배경에 색상을 지정한다. background-color: #f12db0 | rgb(122,122,123); b. background-image 요소의 배경 이미지를 한 개, 혹은 여러개 지정한다. background-image: url("이미지 경로"); 이미지 중첩하기 background-image: url(”이미지 경로”), url(”이미지 경로”); 백그라운드 이미지는 한개만 지정할 수도 있지만, 여러개의 이미지를 중첩시키는 것도 가능하다. 앞에 있는 것이 가장 위에 깔리고, 뒤에 있는 것이 아래에 깔리게 된다. 그라데이션 배경 만들기 (linear-gradient, radial-gradient, conic-gradient) /* ..

소스코드: https://github.com/heehminh/23-React-JS-ToDo GitHub - heehminh/23-React-JS-ToDo Contribute to heehminh/23-React-JS-ToDo development by creating an account on GitHub. github.com 만들고자 하는 앱의 UI: 1- 할 일 목록 타이틀 만들기 App.js import React, {Component} from "react"; import "./App.css"; export default class App extends Component { // 클래스형 컴포넌트 안에서는 render 안에 UI를 작성 render() { return( 할 일 목록 ) } } App..

1- CRA로 실행된 리액트의 기본 구조 이름이 수정되면 안되는 파일들 public/index.html → 페이지 템플릿 src/index.js → 자바스크립트 시작점 public/ 여기안에 쓰인 파일들은 오직 public/index.html 만 쓰일 수 있다. src/ 여기안에 JS 파일과 CSS 파일을 넣으면 된다. Webpack은 여기에 있는 파일만 본다. 그래서 이 폴더 이외에 넣는것은 webpack에 의해 처리되지 않는다. (대부분 리액트 소스 코드들은 이곳에 작성한다.) package.json 해당 프로젝트에 대한 정보들이 들어있다. 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어 있다. package.json에 명시된 라이브러리를 한번에 다운받으려면 npm insta..

1- 리액트는 프레임워크가 아닌 라이브러리이다! React 는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다. Angular, vue는 프레임워크이며 React는 라이브러리이다. 라이브러리와 프레임워크 프레임워크: 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 라이브러리: 어떠한 특정 기능을 모듈화 해놓은 것 프레임워크는 라이브러리를 포함하고 개발자가 작성한 소스 코드를 호출한다. 소스코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출한다. 호출관계: 프레임워크 → 소스코드 → 라이브러리 리액트는 전적으로 UI를 렌더링하는 데 관여한다. 그러나 웹 앱을 만들기위해서는 UI를 제외한 다른 요소들도 라우팅(페이지전환), 상태관리, 테스팅 또한 관리해야 한다. 라우팅: react-r..

https://www.acmicpc.net/problem/14247 14247번: 나무 자르기 영선이는 나무꾼으로 나무를 구하러 오전에 산에 오른다. 산에는 n개의 나무가 있는데, 영선이는 하루에 한 나무씩 n일 산에 오르며 나무를 잘라갈 것이다. 하지만 이 산은 영험한 기운이 있어 www.acmicpc.net 이 문제는 그리디 알고리즘으로 풀 수 있다. 성장속도가 제일 더딘 나무부터 빠른 나무순으로 정렬 후 베면 된다. 모든 나무를 1번씩만 베는 것이 최적이다. 처음 시도한 방식 import sys N = int(sys.stdin.readline()) heights = list(map(int, sys.stdin.readline().split())) speeds = list(map(int, sys.std..

필자는 그동안 Rest-API만 사용해봤는데 Graphql-API란 존재를 알게된 후 백엔드에서 다르게 생성해줘야 하는지와 Graphql-API의 개념과 사용법에 대해 궁금해 포스팅을 작성한다. 1. HTTP 통신 HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길이다. (참고) FTP: 파일, SMTP: 간단한 메일 HTTP 라는 길로 요청 request 와 응답 response 2가지를 서로 주고 받을 수 있다. - 200: 성공 - 4xx: 프론트엔드 에러 - 5xx: 백엔드 에러응답 상태코드자주 볼 수 있는 응답 상태코드 HTTP 상태 코드 - HTTP | MDN 백엔드는 응답할 때 응답 상태코드를 함께 보내준다. 응답 상태코드는 100~599 까지의 숫자로 구성되어 있다. 2. API API..

SQL Data Type *SQL은 대, 소문자 구별하지 않는다! pure relational algebra - removes all duplicates multiple relational algebra, SQL - ratains duplicates relation algebra to SQL select A1, A2, .., An from r1, r2, .., rm where P sql to relation algebra → π A1, A2, .., An ( σ p ( r1 x r2 x .. x rm ) ) // select엔 group by에 쓴 애트리뷰트 + aggregation만 쓸 수 있음 select A1, A2, sum(A3) from r1, r2, .., rm where p group by ..