React로 웹사이트를 개발하다가 이제 웹디자인 후 css를 만져야하는데

scss를 어떻게 사용할 지 몰라서 찾아보았다.

 

React에서 scss 사용

일단 맨 처음에는 css에 아무것도 없고,

저 사이트는 '노마드코더'를 따라하며 만든 사이트이다.

 

웹서핑도 해보고 블로그도 들어가보고 공식 사이트에 나와있는 방법도 봤는데,

결론은 공식 사이트 짱짱맨!!

 

https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

공식 사이트에 나와있는대로 한번 해보자!


react 2.0.0 버전 이후로 지원가능하다.

 



 

npm install node-sass --save

 

작업을 잠시 중단한 후, 위의 코드를 입력해준다.


설치후

취약점이 69개나 발견되었다길래 하라는대로 해봤다.

npm audit fix

위의 코드를 입력해준다.

 

yarn add node-sass

 

마지막으로 위의 코드를 입력해준다.

 


css 폴더를 scss로 바꿔주고

 

App.js 스크립트에서

import한 스크립트파일의 이름도 바꾸어준다.

 

.App { h1{ color:red; } }

.App { 
  h1
  { color:red; } 
}

간단하지만 확실히 바뀔 수 있는 코드를 적고

 

yarn start

성공적!

(캡처에 있는 오류는 js 상 오류라 무시해주세요..)


그 외에도

https://medium.com/@jsh901220/react%EC%97%90-scss-%EC%A0%81%EC%9A%A9%EB%B0%8F-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-1-c7bd2895f5a6

React에 SCSS 적용및 기본 사용법(1)

React, 혹은 다양한 Framework로 프로젝트를 진행하다보면 Front-End개발자는 css작업을 하게 된다. css는 추가적인 플러그인을 설치할 필요 없이 사용할 수 있고, 사용 환경에 영향을 받지 않기 때문에 많은 사람이 css을…

 

 

https://liante0904.tistory.com/176

[React] yarn eject 실패시

리액트 그리고 js 풀스택 개발에 관심이 있다면 한번 쯤은 들어봤을 velopert님이 집필한 '리액트를 다루는 기술' 책을 최근 구입했다. 그리고 연휴를 이용해 빠르게 훑어가던 중 진행이 안되는 부분이 있어서 포..

 

 

이런 사이트들을 참조했는데,

하다가 막히면 한번 따라해보시길..!

나는 저 방법들 먼저 써봤다가 안대서 공식사이트를 참조했는데,

공식사이트 방법만으로도 실행되어서 그냥 한다.

아디오스-!

(해당 포스팅은 '2019-06-10' 최종 수정되었습니다.)

 

정말 오랜만에 웹으로 찾아온 히니입니다 :>

 

이번에는 React에 대해서 배우고 정리해보겠습니다.

저는 이번에 '생활코딩 인강', '노마드코더 인강', 'React 공식사이트 문서', 'React.js를 이용한 모던 프런트엔드 구축 책'으로 공부 한 후 정리합니다.

미리 말씀드리지만, 윈도우 기준으로 설명합니다.

(나중에 맥 기준 설명 추가할 수 있으면 할게요!)


우리는 필요에 의해 배웁니다.

또는 미래의 필요를 대비해서 배우기도 하죠!

저는 이후 케이스이지만, 어쨌든 우리가 왜 React를 배울까? 어떤 쓸모가 있을까?에 대해서 먼저 설명하겠습니다.

 

( 바쁘시면 맨 아래쪽의 '정리'만 보셔도 됩니다. )

 


 

일단, React 는 무엇일까요?

 

React는 자바스크립트 라이브러리로 UI를 만들기 위해 사용됩니다.

페이스북의 첫번째 오픈소스 프로젝트랍니다.

 


 

여기서 알 수 있는 첫번째 장점, '라이브러리로서 다른 소프트웨어들과 섞어서 쓸 수 있다' 입니다.

 

노마드코더에서는 '장고, 루비온레일즈, nodejs'와 함께 쓴다고 하더군요!

 


 

두번째 장점은, 가장 큰 장점이라고 생각되는 '구조가 편리하다' 입니다.

== '컴포넌트 기반 개발'

== '조합형 사용자 인터페이스' 이라고 봐도 되겠습니다.

 

생활코딩에서 가장 강조하는 부분인데,

긴 줄의 코드를 작은 요소(component)들로 나누어서 작업할 수 있게 되어있으므로

가독성, 재사용성이 좋고 유지보수가 편리합니다.

'분할 정복' 방식을 적용할 수 있습니다.

 

[분할 정복 방식 링크]

 


 

세번째 장점은, '배우기 쉽다' 입니다.

 

html과 자바스크립트(js)의 기초를 아는 사람이라면 쉽게 배울 수 있습니다.

React에서는 공식 사이트에서 추천하는 바와 같이

(반드시 그럴 필요는 없습니다.)

주로 JSX를 사용하여 코드를 작성하는데, JSX가 자바스크립트 기반이기 때문입니다.

 

JSX란 JavaScript eXtension 의 약자로 페이스북이 개발한 자바스크립트 라이브러리입니다.

 

[JSX 연결링크]

 


 

네번째 장점은, '데이터의 단방향 흐름' 입니다.

 

React에서는 데이터가 부모요소로부터 자식요소로만 전달됩니다.

(이는 이후에 state, props 파트에서 보실 수 있으며, 인지만 하고 계시면 됩니다.)

 

[State, Props 연결링크]

 

 


(건너뛰셔도 됩니다)

 

페이스북에서는 React를 내놓으면서 MVC 패턴의 한계를 느끼고,

다른 컨셉인 Flux/Redux를 제안했습니다.

 

http://webframeworks.kr/tutorials/react/flux/

WebFrameworks.kr - Flux와 Redux

https://www.zerocho.com/category/React/post/57b60e7fcfbef617003bf456

(React) 리덕스 패턴(Redux pattern), react-redux

 

[Flux, Redux 링크]

 

Flux와 Redux 설명이 되어있는 포스팅입니다.

간단히 설명하자면, MVC(양방향 데이터 흐름) 가 대규모 어플리케이션을 다루기에 너무 복잡해서

페이스북이 다른 컨셉인 Flux/Redux(단반향 데이터 흐름) 를 제안했다는 것입니다.


 

데이터가 단방향으로 흐르기 때문에 복잡하지 않음.

State가 꼬이지 않고 명료하게 드러난다.

 


 

다섯번째 장점은, '효과적인 업데이트' 입니다.

== '반응형 UI 렌더링'

 

페이지가 리로드될 때, 웹사이트의 모든 부분을 다시 띄운다면 시간이 오래 걸리고 비효율적이겠죠.

하지만 React는 시각요소인 DOM을 만들어서 이전과의 차이만큼만 효과적으로 업데이트합니다.

 

수명주기 메소드의 shouldComponentupdate() 를 보면 이해하실 수 있습니다.

[ shouldComponentupdate 링크 ]

 


 

여섯번째 장점, '방대한 정보' 입니다.

 

React는 이미 방대한 커뮤니티와 라이브러리, 오픈소스가 있으므로

문제가 있으면 참고할만한 곳이 많습니다.

 


 

 

 

저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

 

다음 포스팅은 'React 설치' 입니다.

 

치앙마이 한달살기 준비 (짐싸기) 타이틀

안녕하세요, 여러분! :>

드디어 제가 치앙마이로 날아갈 날이 이틀 남았는데요!

이 시점에서 짐싸는 걸 포스팅 해보려고 합니당~!

다른 지역 해외여행시 짐싸기에도 도움이 될 거에요.

심플하게 짐싸기 리스트와 짐싸기 팁을 알려드릴게요.

편하게 보실 수 있게 이미지와 이미지를 볼 수 없는 경우를 대비해서 표로 정리해 드립니당!

@짐싸기 리스트@

짐싸기 리스트 이미지





의류::

속옷

양말

모자

휴대용 가방

벨트

악세사리

향수

여분 신발

잠옷

화장품::

기초화장품

화장품, 화장도구

세안 머리띠

고무줄, 삔

화장솜, 면봉

칫솔, 치약

기타::

고데기

셀카봉

노트북

충전기

마우스

USB

태블릿

이어폰

보조배터리

마스터카드

비자카드

환전한 돈

증명사진

바우처

티켓

상비약

탈취제

휴족시간

우산, 우비

유심

포켓 와이파이

태국::

수건

부채

휴대용 선풍기

물티슈

선글라스

생리대x

수영복

변환기x

면도기




이렇게 짐싸기 리스트를 정리해보았는데요.

저도 짐싸면서 정리해본거라 더 생각나는게 있으면 추가해둘게요 :>

, 여러분 '여권' 챙기세요!!! 멍청히은 ㅠㅠㅠㅠㅠ 여권을 안적었네요 ;<

'증명사진'에 대해 첨언을 하자면, 혹시 여권을 잃어버렸을 때를 대비해서 챙겨가야합니다!

여기서, '태국' 이라고 적혀있는 건 태국만의 짐싸기 팁? 이랄까용!

저도 아직 안가봐서 인터넷을 참고했는데, 다녀온 후에 생각나는 걸 더 첨가하도록 하겠습니다.

우선 태국은 '수건'의 질이 별로 안좋다고 해요 ㅠㅠ 그래서 저는 얇은 수건을 두 장만 들고 가기로 했습니다.

얇아서 공간차지도 얼마 안하는데다 빨래할 때 같이 넣고 빨면 되니까요 :>

그리고 덥기 때문에 '부채'랑' 휴대용 선풍기'를 추가해두었는데, 이건 더운 나라면 모두 해당할 것 같네요!

'선글라스'와 '수영복'도 마찬가지입니다.

휴대용 선풍기는 들고 다녀본 결과 다른 전자기기들 충전하기도 바빠서 충전하기가 너무 귀찮아요 ㅠㅠ

그래서 저는 '부채'를 들고 가려고 합니다!

'물티슈'는 태국에서 생각보다 비싸다는 글을 어디선가 봐서 챙겨가는데, 많이는 안챙기고 그냥 휴대용 물티슈를 챙겼습니다.

'생리대'는 태국가서 사면 돼요!

2년 전 쯤에 태국에 가족여행으로 9박 10일 정도 다녀온 적이 있는데,

(그 때는 남부 지방 푸켓 쪽을 여행했습니다.)

그 때 생리대를 마트에서 보니까 굉장히 저렴하고 질도 좋았던 것으로 기억해요.

'변환기'는 우리나라와 똑같은 전압을 사용하기 때문에 필요하지 않습니다 :>

@짐싸기 팁@

1. 여행용 파우치 이용하기!

여행용 파우치를 이번 여행 짐싸면서 처음 써봤는데, 정말 공간활용이 잘되더라구요.

또한 물품 별로 구분에 둘 수도 있고, 남는 파우치들은 공간차지도 얼마 하지 않아서 들고가서 나중에 짐이 생기면 담는 용도로 쓰려고 들고갑니다.

가격도 그렇게 안 비싸서 하나 장만해두면 괜찮을 거 같아요 ㅎㅎㅎ

2. 속옷은 넉넉하게

물론 여행가서 빨래를 할 수 있지만 더운 나라인 만큼 하루에 한 번 혹은 두 번까지도 속옷을 갈아입을 수 있을 것 같아서

여름 옷이라 옷의 비중이 적은 대신 속옷을 많이 챙겨갑니다!

3. 기내반입가능/위탁가능 물품 숙지하기

빠른 시일내에 컨텐츠로 작성해서 올릴게요!

4. (태국) 길고 얇은 옷 챙기기

사원에 들어갈 때 입을 길고 얇은 옷은 숲속이나 모기가 많은 곳에 갈 때도 유용합니다!

또한, 자외선을 피하기도 좋으니 나시나 반팔 위에 입을 얇은 남방, 가디건을 꼭 챙겨가시길 바래요 :>

다녀오겠습니다!

이 컨텐츠는 아직 부족한 부분이 많은 것 같아 '수정중'으로 올리도록 하겠습니다 ㅎㅎㅎ

저는 드디어 내일 출국인데요!

모두 건강하고 재밌는 여행 되시길 바랄게요 :>


LAMP 설치

(putty를 이용해서 ubuntu 18.04에 LAMP 설치하는 방법입니다.)


@LAMP란?@


Linux, Apache, MySQL, PHP의 첫글자만 따온 약어입니다.

리눅스 운영체제에 세가지 오픈소스 소프트웨어를 설치함을 의미합니다.


@LAMP 설치@


# 업데이트

$ sudo apt-get update && sudo apt-get upgrade


# Apache2 웹서버 설치


## Apache란?

Apache HTTP Server(Apache)는 HTTP 웹서버이다.

* 웹서버: 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹페이지를 반환하는 컴퓨터 프로그램

## Apache 설치

$ sudo apt-get install apache2

Y

<Ok>

확인

링크 창에 (public ip주소) 치면 해당 창이 나와야 함

가끔 오류나는 경우

apt-get 대신 apt을 써서?

(차이점 정리 해야함)

$ apache2 -v

아파치 웹서버 버전 확인

Apache2의 디폴트 Document Root는 /var/www/ , 디폴트 파일 /var/www/html/index.html

이 경로에 HTML 또는 PHP 파일 등을 생성하면 웹 브라우저를 통해 해당 파일을 요청할 수 있음.

/etc/apache2/apache2.conf 에 들어가면

여기서 Default Directory를 수정할 수 있음

링크에 ip주소 치면 나오는 Apache2 Ubuntu Default Page 참고

## 방화벽 설정

$ sudo ufw enable

방화벽 프로그램 ufw 활성화

$ sudo ufw defaul deny incoming

$ sudo ufw default allow outgoing

방어벽 기본 설정 변경

incoming은 'deny'로 outgoing은 'allow'로

$ sudo ufw allow ssh

ssh 접속 허용

$ sudo ufw app info "Apache"

$ sudo ufw app info "Apache Secure"

$ sudo ufw app info "Apache Full"

셋 중에 하나 골라서 방어벽에 적용

Apache: Web Server

Apache Secure: Web Server(HTTPS)

Apache Full: Web Server(HTTP, HTTPS)

$ sudo ufw allow in "Apache"

*갑자기 putty 접속 안됨*

Sudo ufw enable 후에 sudo ufw allow (포트번호) 해줘야함 -> 포트번호는 ec2 인스턴스 보안규칙에 포함된 걸로다가


# MySQL 서버 설치


## MySQL 이란?

세계에서 가장 많이 쓰이는 오픈 소스 '관계형 데이터베이스 관리 시스템(RDBMS)'이다.

## MySQL 설치

$ sudo apt-get install mysql-server

Y

$ sudo mysql_secure_installation

mysql root 사용자 비밀번호 설정

y: password plugin setup 할건지?

1: strong한 형태의 password setting 할 것

password 두번 입력 (숫자, 영소문자 합쳐서 8글자 이상)

y: 데이터베이스를 아무나 읽어볼 수 없게 함

y: 원격 접속으로 root 계정을 사용할 수 없게 ( 별도 계정 생성해야 하게 ) 함

y

y

$ sudo mysql -u root -p

패스워드 입력해서 mysql 접속 (*sudo로 접속하지 않으면 비밀번호 안먹을 수도 있음)

$ create user (추가한 user이름) identified by '(비밀번호)';

비밀번호는 대문자,숫자,특수문자를 하나 이상 포함하고 8자리 이상이어야 함.

$ show variables like 'validate_password%';

비밀번호 설정 확인

mysql> grant all privileges on db.* to '(추가한 user 이름)'@'localhost' identified by '(비밀번호)';

mysql> flush privileges;

## MySQL error

새로 생성한 user의 host가 %(외부접속)이다.

privileges(권한) 줄 때 오류 날 수 있다.

* mysql> grant all privileges on *.* to (추가한 user이름) identified by '(비밀번호)';로 권한 수정해주기


# PHP 설치


## PHP 란?

프로그래밍 언어의 일종이다. (추가 필요)

$ sudo apt-get install php php-mysql

$ sudo vi /var/www/html/info.php

info.php 파일에 위처럼 적고 저장

(vi 편집기 사용법 정리해야함)

확인

링크 창에 (public ip주소)/info.php를 치면

이러한 화면이 나옴 (설치된 php의 정보를 보여주는 화면)


# phpMyAdmin 설치


## phpMyAdmin이란?

MySQL을 WWW 상에서 관리할 목적으로 PHP로 작성한 오픈 소스 도구이다.

## phpMyAdmin 설치

$ sudo apt-get install phpmyadmin

이러한 화면들이 뜨면 그냥 Default 설정 <Ok>하기

phpmyadmin의 비밀번호 설정 (8자리 이상이고 대문자,숫자,특수문자 하나 이상인 비밀번호)