마탁이의 개발 블로그

1. 색상 속성 설정 - color 속성은 요소의 텍스트 색상 (일반적으로 전경색)을 정의한다. - 아래의 예에서는 body에 color 속성을 지정하면, 전체 페이지의 기본 텍스트 색상을 지정한다. body { color: #ff5722; } - 색상은 다음의 형식들로 지정할 수 있다. 1) 키워드 - "Red", "Blue", "transparent" (투명), .... - 가장 쉽게 색상을 지정할 수 있는 방법- 대/소문자를 구분하지 않는다. - 최신 웹 브라우저는 CSS표준에 정의된 것보다 많은 색상 키워드를 지원하지만, 더 안전한 쪽을 유지하기 위해서 16진수 값을 사용하는 것이 좋다. 2) 16진수 - "#ff0000", "#00ff00", ... - 웹에서 가장 일반적으로 색상을 정의하는 방..

www.tutorialrepublic.com/css-tutorial/ CSS3 Tutorial - An Ultimate Guide for Beginners CSS Tutorial CSS is the key presentational technology that is used in website design. CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for describing the presentation (i.e. the layout and formatting) of the web pages. Prio www.tutorialrepublic.com 1. CSS를 HTML에 포함시키는 방법 인라인 스타..

www.npmjs.com/ - npm 공식 페이지 npm | build amazing things Build amazing things We're npm, Inc., the company behind Node package manager, the npm Registry, and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you. Take your JavaScript devel www.npmjs.com nomadcoders.co/react-hooks-introduction/lectures/1714 - React Hook 관련 강의..

1. npm과 npx - 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 도구. - npm을 조금 더 편하게 사용하기 위해서 npm에서 제공. - npx는 npm 레지스트리에 올라가있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI 도구. npm = Package Manager npx = Package Runner 2. package-lock.json - npm을 이용해서 node_mudles 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일이다. 또한 당시의존성에 대한 정보를 모두 가지고 있다. 따라서 package-lock.json 파일은 소스 저장소에 커밋해야한다. (node_modules 없이 배포하..

www.acmicpc.net/problem/11004 11004번: K번째 수 수 N개 A1, A2, ..., AN이 주어진다. A를 오름차순 정렬했을 때, 앞에서부터 K번째 있는 수를 구하는 프로그램을 작성하시오. www.acmicpc.net 단순한 정렬 문제 같지만 채점 시간을 보니 데이터량이 엄청나다. (물론 입력범위도 -10^9 ~ 10^9) 따라서 최소 힙정렬을 이용하기로 생각하고 코드를 구현하였다 채점현황에 보니 algorith 라이브러리에 nth_element(), sort()를 쓰는 것보다 직접 구현해보는 게 도움이 될 것 같다. 코드 더보기 #include #include #include #include // debug #define debug_m 0 // define #define MI..

blueshw.github.io/2017/07/01/arrow-function/ [ES6, react] 리액트에서 화살표 함수(arrow function)는 선택이 아닌 필수 리액트를 개발하다보면 이런 코드를 본적 있을것입니다. this(아마도 react 클래스 객체)에 속한 어떤 메서드를 다시 this 에 bind 한다라?? 굳이 왜 이런짓을 해야하는지 의문이 들만합니다. 리액트 blueshw.github.io - 위 페이지가 정리 및 이해가 잘되어 참조하여 학습하였다. 1. this - 객체지향 언어에서의 일반적인 this의 의미 : 현재 객체를 지칭 JavaScript의 this : 실행시의 context - 아래의 예에서는 'undefined' 가 콘솔에 출력된다. Hello()가 출력될 때 co..

1. React Event - HTML과 마찬가지로 React는 사용자 이벤트를 기반으로 작업을 수행할 수 있다. - React는 HTML과 동일한 이벤트를 가지고 있다. (e.g : click, change, mouseover 등) 2. Event 추가 - React 이벤트는 camelCase 로 작성된다. (Upper Camel Case : 각 합성어의 첫 글자만 대문자로 표기하는 코딩 룰) - React 이벤트 핸들러는 중괄호 안에 작성된다. // React import React from 'react'; import ReactDOM from 'react-dom'; function shoot() { alert("Great Shot!"); } const myElement = ( Take the sho..

1. 컴포넌트의 수명주기 - React의 컴포넌트에는 세 가지 주요 단게에서 모니터링하고 조작할 수 있는 수명주기가 있다. 마운트 (Mounting) 업데이트 (Updating) 마운트 해제 (UnMounting) 2. 마운트 (Mounting) - 마운트는 컴포넌트를 DOM에 넣는 것을 말한다. - React에는 컴포넌트를 마운트할 때 순서대로 호출되는 4개의 내장 함수가 있다. constructor() getDerivedStateFromProps() render() componentDidMount() - render() : 필수적이고 항상 호출된다. (HTML을 DOM에 출력하는 함수) 다른 함수는 선택사항이고 정의할 경우 호출된다. - constructor() : 컴포넌트가 초기화될 때 다른 것보다..

1. React State - React 구성 요소에는 기본으로 제공되는 state 개체가 있다. - state 객체는 컴포넌트에 속하는 속성 값을 저장하는 곳. - state 객체가 변경될 때, 컴포넌트는 리-렌더링 한다. - 아래와 같이 state 객체를 사용할 수 있다. import React from 'react'; import ReactDOM from 'react-dom'; class Car extends React.Component { constructor(props) { super(props); this.state = { brand: "Ford", model: "Mustang", color: "red", year: 1994, }; } render() { return ( My {this.sta..

1. 컴포넌트 Prop - React Props는 JavaScript의 함수 매개변수와 HTML의 attributes와 같다. - React Prop는 읽기 전용이다. 값을 변경할 수 없다. - 아래의 예제와 같이 사용한다. // Car.js import React from 'react'; import ReactDOM from 'react-dom'; class Car extends React.Component { render(){ return Hi, I am a {this.props.brand} ! } } export default Car; // index.js import React from 'react'; import ReactDOM from 'react-dom'; import Car from './..