class App extends Component {

  render() {

    return (

      <div className="body">

        <Login />

    );

  }

}


이렇게 있는데, 가로 100%, 세로 100%로 크기를 지정하고 싶다면,


쉽게 생각하면


가로 width : 100%


세로 height : 100%


로 하면 될 것 같다. 하지만, 가로는 적용되지만, 세로는 적용되지 않는다.




위에 사진의 경우 아랫쪽 배경이 흰색이라 보이지 않지만, 로그인 폼 부분의 높이만 aqua색이 적용된 것이다.

그렇다면, 어떻게 높이를 전부 바꿀 수 있을까?

HTML이라면, body를 바꾸면 되지만, React에서는 다른 방법이 존재한다.

바로, 단위를 % 말고, 다른 것으로 하면 된다.


여기서 답을 찾았다.


https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573


바로 vh와 vw 단위를 사용하면, 너비값과 높이값을 부모 요소에 맞게 사용할 수 있다. 


vh 요소는 높이값의 100분의 1의 단위입니다. 


예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이다. 즉, 100vh는 브라우저 높이의 전체이다.


이와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다. 따라서, 100vh는 브라우저 너비 전체이다.


즉, 최대 높이값이를 제작할때 100vh로 사용하면 된다.


height를 px등으로 지정하는 것과 달리, 브라우저의 높이가 줄어들거나 늘어나도


vh단위는 1/100 이므로 100vh 설정을 했기 때문에 항상 전체 높이를 잡을 수 있다.


















Posted by sungho88
,

웹 어플리케이션 서비스를 옛날에 시청했는데


HTML CSS를 안 쓰다가, 다시 쓰려니 기억이 안나서 다시 들어가봤습니다.


생활코딩 많이 바뀌었더라구요.. 복잡해지고 무슨 코딩야학?? 이게 뭥미.


어쨋거나 다시 HTML을 시작해봅시다.


https://opentutorials.org/course/3083


코딩

인터넷

컴퓨터


에 대해  배운다니 멋지고 거창하군요.




HTML = 쉽고, 중요하다, 퍼블릭 도메인이다.


퍼블릭 도메인이란, 저작권이 없는 100% 무료인 것들을 말한다.


HTML 코딩 실습 환경 준비


1. 웹 브라우저

2. 웹 에디터


태그(Tag)

<strong>강조할 내용</strong> : 텍스트 일부를 강조하기 위해 사용하는 태그

<u>밑줄</u> : 밑줄을 귿는 태그

<h1>제목</h1>: 제목. 


<h1>부터 <h6>까지 존재하며 숫자가 커질수록, 폰트 사이즈는 작아짐.


<br> : 새로운 줄로 개행할 수 있다. 하지만, 

<p> 테그 역시 새로운 줄로 개행된다.

둘의 차이점은


<br>은 단순한 줄을 바꾸는 용도로 사용되지만,

<p>는 단락을 구분해주기 때문에 의미론적으로 더욱 중요한 태그이다.

물론 <br>은 여러번 쓰면 원하는 만큼 띄울 수 있기만, <p>는 정해진 간격만큼만 띄울 수 있다.

이것은 css를 통해 커버할 수 있다. margin-top: 30px; 이런식으로 마진을 쓰면 되기 때문이다.


<ul>

<li></li>

<ul>



<ol>

<li></li>

<ol>

속성(Attribute)

<img src="logo.jpg" width="100%"  >


src와 width가 속성이다. 순서는 상관없다. 시작 태그 안에 작성한다.

Posted by sungho88
,

마진을 위 아래 좌 우 각각 설정할수도 있지만, 


마진(margin)으로 네 영역을 모두 동일하게 지정할 수 있다.


margin : "10px 20px 30px 40px"와 같이 쓰면 된다.


맨 처음 값이 상단(위), 다음값이 우측, 세번째 값이 하단, 네번째 값이 좌측이다. 


방향으로 네 값이 돌아간다.


그런데, 반복되는 값이라면 줄여서 "10px 20px" 이라고도 사용이 가능하다.


"10px 20px" 은 "10px 20px 10px 20px" 과 같은 말이다.


동일한 값으로 4번 반복된다면 "10px" 하나만 쓰면 된다.


즉, "0 auto" 는 상단과 하단은 여백을 주지 말고, 


좌측과 우측의 여백을 자동으로(auto) 주라는 것임을 알 수 있다.

 

이렇게하면, 왼쪽 마진을 오른쪽 마진을 자동으로 나눠서 균등하게 갖게 된다. 


이렇게, 가운데 정렬이 된다.


margin : "0 auto"; 이렇게 작성하면 되지만, 이상하다면 그냥 풀어서... 


margin-left : auto;

margin-right: auto;


이렇게 작성해줘도 된다. 아니 원래 이렇게 해야 정상이다. 


또한, 이것을 사용하려면 당연하지만, 너비가 존재해야 한다.


너비가 있어야 좌 우를 auto로 맞춰서 가운데 정렬이 될 것 아닌가?


너비를 주지 않으면 당연히 가운데 정렬이 적용되지 않는다.

Posted by sungho88
,

드디어 리액트에서 scss를 사용하기 편리해졌다.


v2가 릴리즈되면서 매우 편해졌다.


지난번까지는 


yarn eject를 해서, css 부분을 복사해 하단에 붙여넣고 sass-loader를 추가하고 


나름 복잡한 작업을 해줘야 SCSS를 인식했다.


하지만, 업데이트되면서,


node-sass만 설치해준뒤,


CSS파일을 불러오듯이,  --> import './App.css';


SCSS파일을 불러와서 사용하면 된다. --> import './App.scss';


와우!


편해졌다.





만약,  node-sass를 설치하지 않고 scss를 사용하려고 한다면 다음과 같은 에러가 발생한다.



쉽게 해석하면,


sass 파일을 import하기 위해서는 node-sass를 설치하라!


라는 의미이다.


yarn add node-sass


또는


npm install node-sass 를 입력한다.


 



(예제)


TestComponent.js를 하나 만든다. 그리고, scss 파일을 import한다.



import React from 'react';
import './TestComponent.scss';


const TestComponent = () => {
return (
<div className="MyComponent">
<h1 className="header01">Test Component</h1>
</div>
);
};


export default TestComponent;


TestComponent.scss를 만든다.



.MyComponent {
background: yellow;
color: black;
padding: 1rem;
.header01 {
background: white;
color: black;
font-size: 3rem;
text-align: center;
padding: 1rem;
}
}

 

App.js에서 TestComponent.js를 import한 뒤, 삽입한다.



import React, { Component } from 'react';
import './App.css';
import TestComponent from './TestComponent';


class App extends Component {
render() {
return (
<div className="App">
<TestComponent />
</div>
);
}
}


export default App;




이렇게한뒤, 


css를 사용하는 것처럼 적용된다.









Posted by sungho88
,

[HTML] CSS 기초

개발/HTML 2018. 10. 18. 00:09

1. 선택자(Selector) : CSS 설정을 적용할 대상을 지정할 때 사용함.


<body> 태그에 적용하고 싶다면


body {

 ...

}


와 같이 css에 써주면된다. 이러면 body 태그 전체에 적용이 된다.


 

2. 폰트 지정


font-family로 여러개의 폰트를 쉼표로 연결해서 지정해주어야 한다.

여러개를 지정하는 이유는 OS 환경마다 쓰이는 폰트가 다르기 때문이다.

앞쪽에 있는 폰트를 적용하게 된다.

만약, 폰트 지정을 하지 않게 되면, 환경에 따라 다른 폰트가 출력되므로 통일감이 없어보이게 된다.


3. font-size : 폰트 크기 조정


4. text-align 속성은 텍스트의 정렬 방향을 의미합니다.


left: 왼쪽 정렬

right: 오른쪽 정렬

center: 중앙 정렬


5. letter-spacing : 글자 사이의 간격을 조정


6. vh와 vw


vh와 vw


vh 요소는 높이값의 100분의 1의 단위입니다. 

예를 들어 브라우저 높이값이 1200px일때 1vh는 12px이라는 뜻이다. 


그와 유사하게 뷰포트의 너비값이 780px이면 1vw는 7.8px이 된다.



7.  css에서 inherit :요소가 부모 요소로부터 속성(property)의 값을 받게 된다.





CSS에서 상속 개념은 중요하다.


원하는 태그에 속성을 넣지 않아도, 상위 또는 최상위 태그(body)


예를 들어


body {

 ..


안에 속성을 넣게 되면


body 태그 안에 있는 모든 태그들에게 의 속성이 적용된다.


그 밑에서 원하는 태그에 오버라이드해서 재정의하면 그 태그의 속성은 바뀔 수 있다.

하지만, 지정하지 않는 모든 태그는 body 속성이 기본적으로 적용된다.




CSS에서 Color 개념


RGB 색상


16진수로 표기한다.


기본적으로, 아래와 같이 RGB 방식으로 작성한다.


#RRGGBB


RR GG BB가 같다면 #RGB로도 가능하다.


또한, vs code나 다른 HTML 개발 에디터에서는 상수값을 제공한다.


Color.red

Color.blue

Color.gray

Color.yellow 등등.. 이것을 사용하면 된다.


물론, 웹 디자이너나 더욱 색을 다양하게 표현하고 싶다면 


구글에 RGB Picker 또는 RGB selector와 같이 검색하면 디테일하게 색상을 정할 수 있다.



ARGB 색상


16진수로 표기한다.


기본적으로, 아래와 같이 RGB 방식으로 작성한다.


#AARRGGBB


AA가 추가된 상태이다. 6자리 숫자만 쓰면 기본적으로 불투명이다.


A는 투명도(alpha)값이다. 




box-sizing : border-box;


box-sizing은 처음보는 개념이다. 이것의 의미는 무엇인가? 박스 사이즈를 정하는 속성같은데


정확한 의미와 언제 사용되는지 알아봐야겠다.




clearfix:after 


:after하니까 float 해제가 되었는데, 이 것의 의미는 무엇인가? before은 또 무엇인가?


clear 소성은 무엇인가?



이미지의 비율(ratio)을 유지하며 크기를 조정하기 위해서는,


높이를 지정하되, 너비는 auto로 해야 자동으로 한다.






















































Posted by sungho88
,


     yarn add react-router-dom


     npm install react-router-dom

 


을 아무리 해도, 사용하려하니 설치가 되지 않았다(해당 모듈을 찾을 수 없다)는 에러가 발생한다.


검색을 해봤더니,


package.json에 저장이 되어있는지 확인해보란다.


확인해봤다.


없다.


어떻게 없을수가 있지? 


yarn으로, npm으로 5번을  넘게 설치했다.


다음과 같이 설치하면 된다.



  

    npm install --save react-router-dom




--save?


저장하라는 건가보다.


사용된다.



Posted by sungho88
,

어떤 문자열이 있다고 가장하자.


string txt = "Hello My Name is JANG.";



이 때, 특정 문자열(Hello, My, Name, is, JANG, Hell, Nam 등등 모든 문자열 가능)


이 포함되어 있는지 확인하고 싶다면,


indexOf()메소드를 사용하면 된다.


주의할 점은,


 if문에서,


if (txt.indexOf("Hello")) {


로 생각할 수 있지만, 아니다.


index의 반환값은 


Hello라는 문자열이 없을 때 -1을 반환한다고 한다.


하지만, if 조건문에서 


0, -0, null, false, NaN, undefined, ' '


을 제외한 모든 값들은 true이다. -1도 true로 인식되므로, 위 if문은 항상 true가 된다.


그래서, 


if (txt.indexOf("JANG") !== -1)  {


alert("Find txt : JANG");

}


이렇게 -1 이 아니라면, 조건을 해줘야 한다.


-1이 아니라는 것은 string txt에 문자열이 존재한다는 것이므로 true가 발생, 


-1이라는 것은 없다는 것이므로 false가 출력된다.



Posted by sungho88
,

리액트를 다루는 기술이라는 책을 보며 궁금한 점을 적어보았다.



[DOM 관련]

1. 자바스크립트 DOM은 어떤 의미일까? 너무 크고 머릿속에 안 들어옴.

2. 자바스크립트 DOM과 리액트의 가상(Virtual) DOM의 차이점은 무엇인가?


[var와 const 그리고 let의 스코프 차이]


var = 


[부모 컴포넌트 & 자식 컴포넌트]


부모 컴포넌트 : B라는 컴포넌트를 불러와서 사용하는 App.js 컴포넌트가 부모.

B 컴포넌트 : 불려쓰이는 컴포넌트를 자식 컴포넌트. App.js로부터 props값을 전달받아 사용함.


 [p.85]


ES6의 화살표 함수와 일반 function을 이용한 함수 선언 함수의 차이점.


- 완전히 대체하는 것은 아니다


[p.137]


... 전개 연산자(Spread operator)



...뒤에 위치한 배열값을 그대로 꺼내서 현재 배열에 복사하는 것.


[p.146]


컴포넌트 라이프 사이클 활용 예제


[p. 157]


함수형 컴포넌트와 클래스 컴포넌트의 속도 차이.


함수형이 더 빠르다고 블로그에 나왔는데 뭐가 더 빠른걸까?



[Todo 리스트 구현]


e.stopPropagation();


이벤트의 확산을 막아 멈춰준다.


즉, 이벤트가 해당 부모의 이벤트까지 전달되지 않도록 도와준다.


return (
<div className="todo-item" onClick={() => onToggle(id)}>
<div className="remove" onClick={(e) => {
e.stopPropagation();
onRemove(id)
}}>
&times;
</div>

<div className={`todo-text ${checked && 'checked'}`}>
<div>{text}</div>
</div>

{
checked && (<div className="check-mark"></div>)
}

</div>
);



e.stopPropagation(); 을 하지 않으면,


onRemove를 호출하려고 클릭을 하면, onRemove함수만 실행되는 것이 아니라,


해당DOM의 부모의 클릭이벤트에 연결되어있는 onToggle도 실행되어 


정상적인 동작을 할 수 없다.


따라서,


e.stopPropagation();을 통해 이벤트가 해당 부모의 이벤트까지 확산되어 전달되지 않도록 해야한다.






onClick={() => onToggle(id)} 으로 호출해야한다.


onClick={onToggle(id)} 으로 하면 절대 안 된다.



위에는 함수를 단순히 선언한 것이므로, 눌렀을 때 함수가 실행되지만,

아래는 함수를 호출한 것이므로, 해당 함수가 렌더링될때 호출된다.


호출되면 -> 데이터에 변화가 생길 것이고 변화가 생기면? ->  


-> 또 렌더링 -> 또 호출 -> 또 데이터 변화 -> 또 렌더링 -> 또 호출.


무한반복에 빠질 수 있다. 













Posted by sungho88
,

import 문에서 궁금한 점이 생겼다.


어떤 것은 그냥 import하고, 어떤 것은 중괄호{ } 안에 변수? 를 적어준다는 것이다.


무슨 차이가 있는지 검색해봤다.


만약, 아래와 같은 코드가 있다고 해보자.  



import React from 'react';
import { render } from 'react-dom';



이 파일은 이제부터 React와 render라는 변수를 사용할 수 있다. 


React변수는 react패키지에서 불러왔고, 


render 변수는 'react-dom'이라는 패키지에서 불러왔다.


그런데, 


첫 번째는 그냥 React인데, 두 번째는 { render }처럼 괄호 안에 감싸져 있다. 


차이점은, 보내주는 export 방식의 차이였다. 


모듈을 불러올 때 import라고 써주는 것처럼, 


모듈을 다른 파일로 보내려면 export라고 명시적으로 써줘야한다. 


예를 들어보면,


App.js에서 다음과 같이 선언한다.


const a = 1;
const b = 2;
export { a };
export const c = 3;
export default b;



위와같이 App.js에서 세 가지 방식으로 export를 했다. 


변수 a는 객체에 담아서 export하고, 변수 c는 선언 및 초기화와 동시에 바로 export 했다. 


또한, 변수 b는 독특하게 앞에 default라는 키워드를 붙인 채 export했다. 



또 다른 함수 Sub.js에서 App.js에 export한 것들을 불러오려고 한다.


import d, { a, c as e } from './Example';
console.log(a, d, e); // 1, 2, 3


와 같이 작성한다.


(해석)


App.js에서 export한 값들을 불러오려면,


Sub.js에서는 코드 윗쪽에 import를 선언하면 된다.


from './App' 부분이 App.js로부터 해당 파일로 불러와 사용하겠다는 의미이다. (js는 생략해도 된다) 

 


그런데 뭔가 이상하다.


처음보는 d는 괄호 없이 불러오고, 


나머지 a, c는 괄호 안에서 불러옵니다. 또한, c는 뒤에 as e라고 되어있네요.


default는 번역하면 기본이라는 뜻이다. 


말그대로,default 로 export한 b는 괄호를 사용하지 않아도 import할 수 있습니다. 


그리고 변수명도 Sub.js에서 마음대로 지을 수 있습니다. 


위 코드에서는 변수 d가 바로 변수 b를 import한 것이다. 


나머지 a와 c는 반드시 export할 때의 이름을 그대로 import해야 하며, 괄호 안에서 불어와야 합니다.


괄호 안의 변수도 이름을 바꾸고 싶다면, as 라는 키워드를 사용해 바꿀 수 있습니다. 


c as e라고하면, 변수 c의 값을 변수 e로 넘겨주는 겁니다. 


이렇게 하면 변수 e를 c 대신 사용할 수 있습니다. 


이것은 두 개 이상의 패키지에서 같은 변수 이름을 사용해 변수가 겹칠 때, 


이름을 다르게 바꿀 수 있어 유용하다.



Posted by sungho88
,

This git repository has untracked files or uncommitted changes:

~

~~

~~~

~~~~

Remove untracked files, stash or commit any changes, and try again.

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.



$ yarn eject


를 하려고 했더니, 다음과 같은 에러가 발생했다.

아니 깃은 무슨 깃이여?

깃 설정 아무것도 안했는데?

하지만, 에러가 났으니 해결 방법을 검색했고 찾았다.


커밋을 해줘야한다고 한다.

솔직히 왜 해줘야 하는지도 잘 모르겠다.

하지만, 다음과 같이 


$ git add .

$ git commit -m "commit text"

와 같이

add를 하고 commit을 해주면~?

정상적으로 에러안나고 

yarn eject가 실행된다.

이유는 솔직히 모르겠다.

위에는 에러!!!


아래는 해결!!!



Posted by sungho88
,