[HTML] HTML 기본 구조 분석하기

개발/HTML 2019. 2. 18. 17:57

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
</html>


이것이 html 생성하면 나오는 기본 구조인가보다.


1. 먼저, <!DOCTYPE html> 는 해당 html 파일이 HTML5 형식으로 작성된다는 것을 명시하는 선언이다.


2. html파일은 모두 <html> 태그 안에 작성해야하며, <head>와 <body> 둘로 구성된다.


3. <head> 안에는 직접적으로 눈에 보이지 않는, 숨겨진 HTML 관련 정보들이 들어간다. 종류는 아래와 같다.


<title>

<meta>

<link>

<style>

<script>


4. <body> 안에는 직접적으로 눈에  보이는, 실제 화면을 구성하는 HTML 태그들이 들어간다.



'개발 > HTML' 카테고리의 다른 글

[HTML] display 속성 : inline과 inline-block 그리고 block의 차이점.  (0) 2019.09.07
div 태그 빠르게 만드는 방법  (0) 2019.09.07
[HTML] Visual Studio Code 툴에서 Live Server 설치하기  (1) 2019.02.18
CSS 속성) text-rendering란 무엇인가?  (0) 2018.12.24
[HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성.  (0) 2018.12.04
Posted by sungho88
,

[HTML] Visual Studio Code 툴에서 Live Server 설치하기

개발/HTML 2019. 2. 18. 17:37

물론, html 파일이 있는 디렉토리로 이동해서 더블클릭해서 브라우저로 확인할 수 있다.


그럴경우, 주소창에는 


file:///Users/jangseongho/Documents/htmlTest/index.html


이런식으로 나오게 된다.


하지만, vs code를 사용한다면 라이브 서버를 설치하여 바로 띄울 수도 있고, 코드 수정 시 리로드없이 적용이 가능하다.


아래 패키지를 설치하면 된다.




주소창에서는


http://127.0.0.1:5500/01_basic_layout.html


이렇게 바뀐다.


참고로, 127.0.0.1는 자기 자신의 로컬호스트이다.


즉, 로컬로 서버를 띄우고, 포트를 5500으로 지정된 것이다.(자동으로)


그리고, 접속을 안 할시, 금방 서버가 종료되므로 다시 접속해서 사용해야한다.

'개발 > HTML' 카테고리의 다른 글

div 태그 빠르게 만드는 방법  (0) 2019.09.07
[HTML] HTML 기본 구조 분석하기  (0) 2019.02.18
CSS 속성) text-rendering란 무엇인가?  (0) 2018.12.24
[HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성.  (0) 2018.12.04
WEBn : 웹 어플리케이션 서비스 만들기가 개편되었네요  (0) 2018.11.17
Posted by sungho88
,

[React] 리액트에서 컴포넌트 간 데이터의 전달 방법은 어떻게 될까?

개발/React 2019. 2. 17. 23:40

일단, React의 데이터 흐름은 단방향이다.


단방향 = 한 방향 = 위에서 아래로 내려간다 


즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는게 일반적이다.


부모 컴포넌트는(상위 컴포넌트)는 컴포넌트들을 사용하는 컨테이너 개념이다.


즉, A 컴포넌트가 B컴포넌트와 C컴포넌트를 import하여 브라우저에 보여준다면,


A 컴포넌트가 부모, B와 C가 자식 컴포넌트라고 할 수 있다.


1. 부모 컴포넌트에서 자식 컴포넌트에 값(데이터) 넘기기. 


이것이 가장 일반적인 방법이다.


create-react-app으로 리액트 프로젝트를 생성했다면, App.js가 최상위 컴포넌트라는 것을 알고 있을 것이다.


그리고, Todos.js라는 컴포넌트를 생성을 했다고 가정하면,


부모인 App.js 에 있는 데이터(state 뿐만 아니라 함수도...)를 


자식인 Todos로 보낼 수 있다. 


HTML에서 속성(Attribute)을 선언하는 식으로 "props"를 전달한다.


import React, { Component } from "react";
import "./App.css";
import Todos from "./components/Todos";

class App extends Component {
state = {
name: "JANG"
};
render() {
return (
<div className="App">
<h1>App Page</h1>
<Todos name={this.state.name} />
</div>
);
}
}

export default App;


위 예제에서, <Todos name={this.state.name} /> 이렇게 하면, Todos로 문자열 JANG을 보낸 것이다.


이런식으로 여러개의 데이터 값들을 줄줄히 보낼 수 있다.


참고로, 이 전달된 값을 받아서 사용하기 위해서는 


Todos 컴포넌트에서 this.props.name을 사용하면 해당 데이터를 가져올 수 있다.


 




'개발 > React' 카테고리의 다른 글

[React] 아무 이미지나 넣고 테스트할때 필용한 npm 패키지...  (0) 2020.07.17
[React] 리액트 JSX에서 HTML 자동완성(emmet) 적용하기  (1) 2019.09.21
[React] prop-types 적용 시 에러 발생 - TypeError: Cannot call a class as a function  (1) 2019.02.17
[React] 리액트 배열을 map할 때 key 생략 시 에러 발생!  (0) 2019.02.16
[React] You should not use <Link> outside a <Router> 에러  (0) 2019.01.31
Posted by sungho88
,

[React] prop-types 적용 시 에러 발생 - TypeError: Cannot call a class as a function

개발/React 2019. 2. 17. 22:33


prop-types을 통해 props의 타입을 체크하려고 했는데 에러가 발생했다.



클래스를 함수로 부를 수 없다? 뭔말인지 한참 찾다가 발견했다.



Todos.prototype = {
todos: PropTypes.array.isRequired
};


이렇게 작성했다. 


자동생성이 아니라 하드코딩으로...


그런데, prototype으로 잘못 작성했다.


es6 이전 클래스 대신 사용하던 keyword이기 때문에 에러가 발생했다.



Todos.propTypes = {
todos: PropTypes.array.isRequired
};


이와같이 propTypes로 작성해야한다.


또 주의할 점! 대문자가 아니라, 소문자  propTypes 이다.


static으로 선언된 무엇인가보다.


그리고, 타입 체크시에는 설치했던 prop-types를 사용한다.



import PropTypes from "prop-types";


이렇게 props의 타입을 체크하게 되면,


잘못된 형식의 props가 들어오게 되면, 


즉, 위에는 array인데 string이나 number 형태의 값이 넘겨지면,

(prop에 유효하지 않은 값이 전달되면)


자바스크립트 콘솔에 경고(Error)가 발생된다. 

'개발 > React' 카테고리의 다른 글

[React] 리액트 JSX에서 HTML 자동완성(emmet) 적용하기  (1) 2019.09.21
[React] 리액트에서 컴포넌트 간 데이터의 전달 방법은 어떻게 될까?  (0) 2019.02.17
[React] 리액트 배열을 map할 때 key 생략 시 에러 발생!  (0) 2019.02.16
[React] You should not use <Link> outside a <Router> 에러  (0) 2019.01.31
[React] material ui로 TextField 사용 중, 유효성(validation) 체크하는 방법  (0) 2019.01.03
Posted by sungho88
,

[Javascript] 자바스크립트 화살표 함수에서 리턴 생략하기

개발/자바스크립트 2019. 2. 17. 08:06


화살표 함수는 


const func = () => console.log("리턴 생략"); (O) --> 정상


const func = () => return console.log("리턴 생략해야함"); (X) --> 에러


이렇게 중괄호 { }를 사용하지 않으면,


return을 포함한다는 암묵적인 규칙이 적용되므로 return을 작성하지 않는다.


만약, 함수의 코드가 길어져서 뒤에서 return을 해야한다면, 중괄호와 함께 return을 반드시 적어주어야한다.


const func = () => {

....

....

return number;

} (O) --> 정상


기억하자.





'개발 > 자바스크립트' 카테고리의 다른 글

[자바스크립트] Object.freeze()를 통해 변경할 수 없는 객체를 만들어요  (0) 2020.07.27
[자바스크립트] 객체에서 키(key) 또는 값(value)만 따로 배열로 뽑기?!  (0) 2020.07.27
[Javascript] moment.js를 이용하여 특정 날짜로부터 몇 일 후 구하기  (0) 2019.01.30
[자바스크립트] Date()객체로 날짜 구하기 & moment() 객체로 날짜 구하기  (0) 2018.12.19
자바스크립트로 문자열에 특정 문자열이 존재하는지 체크하는 방법 : indexOf()  (0) 2018.10.15
Posted by sungho88
,

[React] 리액트 배열을 map할 때 key 생략 시 에러 발생!

개발/React 2019. 2. 16. 22:50


배열(array)에 있는 child는 반드시 고유한 key props를 갖어야한다.


리액트에서는 엘리먼트가 많을 경우 key를 설정해주어야한다. 



'개발 > React' 카테고리의 다른 글

[React] 리액트에서 컴포넌트 간 데이터의 전달 방법은 어떻게 될까?  (0) 2019.02.17
[React] prop-types 적용 시 에러 발생 - TypeError: Cannot call a class as a function  (1) 2019.02.17
[React] You should not use <Link> outside a <Router> 에러  (0) 2019.01.31
[React] material ui로 TextField 사용 중, 유효성(validation) 체크하는 방법  (0) 2019.01.03
[React] 리액트에서 달력(Calendar) 사용하기  (0) 2018.12.28
Posted by sungho88
,

TypeError: Router.use() requires a middleware function but got a Object

서버/Node.js 2019. 2. 6. 22:37

routes.js라는 파일에 라우터를 정의해두고, 


app.js에서  import routes from './routes.js'로 사용했다


그런데 다음과 같은 에러가 발생했다.


typeerror: router.use() requires a middleware function but got a object


음 ..


router.use()는 미들웨어 기능이 필요하지만(요구되지만) Object가 있습니다?


뭔 말인가 찾아보다가..


export defalut routes;


가 없는 것을 발견했다. 이런;


추가해줬더니 에러 해결!


이런!






로 라우터를 

'서버 > Node.js' 카테고리의 다른 글

SyntaxError: await is only valid in async function 에러 해결하기  (0) 2021.04.12
Router.use() requires a middleware function but got a Object  (0) 2021.04.08
nodemon 설치 후 사용할 때 에러 발생 : command not found && nodemon이란 무엇인가?  (0) 2018.07.19
Node.js에 기본적으로 내장된 모듈  (0) 2016.08.17
node.js 전역 객체 & 전역 변수  (0) 2016.08.13
Posted by sungho88
,

[React] You should not use <Link> outside a <Router> 에러

개발/React 2019. 1. 31. 10:04

Link를 Router 밖에서 사용할 수 없다.


Link는 react-router-dom에서 가져와 쓸 수 있기 떄문에, Router에 의존적이다.


따라서, Link가 포함된 컴포넌트를 Router 안에 들어가 있어야 사용이 가능하다.

'개발 > React' 카테고리의 다른 글

[React] prop-types 적용 시 에러 발생 - TypeError: Cannot call a class as a function  (1) 2019.02.17
[React] 리액트 배열을 map할 때 key 생략 시 에러 발생!  (0) 2019.02.16
[React] material ui로 TextField 사용 중, 유효성(validation) 체크하는 방법  (0) 2019.01.03
[React] 리액트에서 달력(Calendar) 사용하기  (0) 2018.12.28
React에서 component 안에서 div의 height를 최대(100%)로 지정하는 방법  (1) 2018.12.04
Posted by sungho88
,

[Javascript] moment.js를 이용하여 특정 날짜로부터 몇 일 후 구하기

개발/자바스크립트 2019. 1. 30. 10:08

date를 받아서, 그 날짜를 기준으로 특정 날짜로부터 며칠 지났는지 확인하는 방법은 다음과 같다.


moment(date).add(-30,"days").format("YYYY-MM-DD")


만약, 오늘 날짜를 기준으로 50일 후를 구하고 싶다면?


moment().add(50,"days").format("YYYY-MM-DD") 으로 하면 된다.


format()에서 () 안에 아무것도 작성하지 않다도 된다.


하지만, 



이렇게 쓸데없이 긴 날짜+시간이 나오게 된다.


따라서, 원하는대로 변환할 수 있다.


YYYY-MM-DD도 되고

YY-M-D도 되고

YYYY년MM월DD일 도 된다.


원하는대로 format()안에 넣어 만들면 된다.


'개발 > 자바스크립트' 카테고리의 다른 글

[자바스크립트] 객체에서 키(key) 또는 값(value)만 따로 배열로 뽑기?!  (0) 2020.07.27
[Javascript] 자바스크립트 화살표 함수에서 리턴 생략하기  (0) 2019.02.17
[자바스크립트] Date()객체로 날짜 구하기 & moment() 객체로 날짜 구하기  (0) 2018.12.19
자바스크립트로 문자열에 특정 문자열이 존재하는지 체크하는 방법 : indexOf()  (0) 2018.10.15
[자바스크립트] Math() 함수를 이용해서 올림, 반올림, 버림 적용하기  (0) 2018.09.18
Posted by sungho88
,

[React] material ui로 TextField 사용 중, 유효성(validation) 체크하는 방법

개발/React 2019. 1. 3. 12:26

텍스트필드에, 잘못된 값을 집어넣거나 빈 값을 입력했다면 경고를 띄우고 싶다.


어떻게 하면 될까?


errorText라는 속성이 있었으나, 요즘은 error와 helperText를 사용하면 된다.



텍스트필드를 빨간색으로 변화시켜 에러처럼 보이게 만드는 것이 error 속성이다.


error는 true/false 즉, Boolean형으로 값을 지정할 수 있다.


조건을 걸면 된다.


<TextField
autoFocus
error={this.state.data.customer === "" ? true : false }
helperText="This is Helper Text"
label="고객명(customer)"
type="text"
variant="outlined"
onChange={this.handleChange}
name="customer"
defaultValue={data.customer}


요런식으로 사용하게 되면 ,조건에 따라 체크된다.


helperText의 경우, error 밑에 출력되는 문자열로 에러가 났을 때


어떤 이유로 에러가 발생했는지 알려주기 위한 용도로 사용된다.


'개발 > React' 카테고리의 다른 글

[React] 리액트 배열을 map할 때 key 생략 시 에러 발생!  (0) 2019.02.16
[React] You should not use <Link> outside a <Router> 에러  (0) 2019.01.31
[React] 리액트에서 달력(Calendar) 사용하기  (0) 2018.12.28
React에서 component 안에서 div의 height를 최대(100%)로 지정하는 방법  (1) 2018.12.04
[React] 리액트(React)에서 SCSS 사용하는 방법 & 설정 방법  (0) 2018.10.18
Posted by sungho88
,

티스토리툴바