# 티스토리에 code pen 불러오기




▶ code pen에 계정 생성 및 로그인 후 코드를 작성한다.

 코드 작성 후 

1. save 하기

2. embed 클릭





   1. 테마 설정 가능

2. 사이즈 조절 가능

3. iframe을 클릭하여 나온 코드를 복사





 티스토리(및 기타 블로그) 에디터의 외부컨텐츠(혹은 html)를 선택 후




 위에서 복사한 소스를 붙여넣고 확인을 누른다.




▶ 간단하게 code pen의 소스를 불러올 수 있다. 끝




ex)


'Front-end dev > Etc.' 카테고리의 다른 글

vscode와 Git 연동하기  (530) 2020.01.17
모델-뷰-컨트롤러(Model-View-Controller, MVC)  (580) 2020.01.07
[Node.js] listen EADDRINUSE Error  (514) 2020.01.06
Front-end 로드맵(v.2020)  (887) 2020.01.03
Front-end 로드맵(v.2018)  (518) 2018.03.29

# Visual Studio Code Git 연동하기



우선 vscode와 git을 설치해준다.

Download Visual Studio CodeDownload Git





Git 설치가 완료되면 Git bash 또는 cmd창을 열어서 Git 계정 정보를 입력해준다.
 - Git 설치 시 특이사항이 없다면 그냥 기본으로 두고 Next를 눌러 진행해 주면 된다.

 - Window10 에서는 powerShall 을 이용하여 계정 정보를 등록해도 된다.


git config --global user.name username
git config --global user.email user@email.mail




Git 계정을 연결했으면 

Visuasl Studio Code를 새로 열어서 작업 할 폴더를 연다.




폴더 연결 후, 소스 제어 편집에 들어가서 + 버튼을 클릭하여 폴더를 선택하면




이렇게 연결되었음을 확인 할 수 있다.




test로 신규 파일을 하나 만들어 보면, 소스제어 아이콘에 1이라고 뜨고 내용을 확인 할 수 있다.

+를 눌러 변경된 내용을 스테이징 한다.




체크 아이콘을 누르면 커밋(commit) 메시지를 입력할 수 있고 입력하면 커밋이 완료된다.




추가로, 더 많은 기능을 확인 할 수 있는데 필자에게는 마지막 커밋 실행 취소 가 너무 신세계였다... 세상에




이제 push 명령을 실행하기 위한 작업을 해야한다.


일단 github에서 새로운 원격 저장소를 만들어 준다.

레파지토리를 생성하면 아래 화면을 볼 수 있고, 우측에 아이콘을 누르면 카피된다.



vscode에서  ctrl + `  을 누르면 터미널을 실행할 수 있고, 아래 이미지에서

 - 1번을 누르고 '기본 셸 선택'을 누르면 2번이 뜨고

 - 2번에서 원하는 셸을 선택 후

 - 3번을 클릭하면 추가할 수 있다.



선택한 셸에서 아까 복사한 링크를 입력하면 (Git 계정 로그인이 화면이 나올 수 있음) 연동이 완료되고 push를 실행 할 수 있다.



'Front-end dev > Etc.' 카테고리의 다른 글

codepen 불러오기  (587) 2020.07.08
모델-뷰-컨트롤러(Model-View-Controller, MVC)  (580) 2020.01.07
[Node.js] listen EADDRINUSE Error  (514) 2020.01.06
Front-end 로드맵(v.2020)  (887) 2020.01.03
Front-end 로드맵(v.2018)  (518) 2018.03.29

모델-뷰-컨트롤러(Model-View-Controller, MVC)



모델-뷰-컨트롤러(Model-View-Controller, MVC)는 


소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다.
이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나
그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다.



MVC에서 

- 모델은 애플리케이션의 정보(데이터)를 나타내며,
- 는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고,
- 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다.



구성요소

컨트롤러는 모델에 명령을 보냄으로써 모델의 상태를 변경할 수 있다. (ex : 워드 프로세서에서 문서를 편집하는 것)
  또, 컨트롤러가 관련된 뷰에 명령을 보냄으로써 모델의 표시 방법을 바꿀 수 있다. (문서를 스크롤하는 것)
- 모델은 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에 이를 통보한다. 이와 같은 통보를 통해서 뷰는 최신의 결과를 보여줄 수 있고,
  컨트롤러는 모델의 변화에 따른 적용 가능한 명령을 추가/제거/수정할 수 있다.
  어떤 MVC 구현에서는 통보 대신 뷰나 컨트롤러가 직접 모델의 상태를 읽어 오기도 한다.
- 는 사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어 온다.


[웹 애플리케이션에서 일반적인 MVC 구성요소 다이어그램]



모델
모델(model)이란 어떠한 동작을 수행하는 코드를 말한다. 표시 형식에 의존하지 않는다. 다시 말해, 사용자에게 어떻게 보일지에 대해 신경쓰지 않아도 된다. 모델은 순수하게 public 함수로만 이루어진다. 몇몇 함수들은 사용자의 질의(query)에 대해 상태 정보를 제공하고 나머지 함수들은 상태를 수정한다.

MVC에서 모델은 여러 개의 뷰(view)를 가질 수 있다. 뷰는 모델에게 질의를 하여 모델로 부터 값을 가져와 사용자에게 보여준다.

컨트롤러
MVC의 뷰는 여러 개의 컨트롤러(Controller)를 가지고 있다. 사용자는 컨트롤러를 사용하여 모델의 상태를 바꾼다. 컨트롤러는 모델의 mutator 함수를 호출하여 상태를 바꾼다. 이때 모델의 상태가 바뀌면 모델은 등록된 뷰에 자신의 상태가 바뀌었다는 것을 알리고 뷰는 거기에 맞게 사용자에게 모델의 상태를 보여 준다.

원리
자바언어에서 모델은 java.util.Observable을 상속(extends)받아 만들 수 있다. 
모델에는 현재의 상태 정보를 변경하거나 다른 클래스에게 알릴 수 있는 함수가 있어야 한다. 
모델의 상태를 변경하는 함수(mutator)는 setChanged()와 notifyObservers()를 호출하여야 한다. 
NotifyObser는 모델에 등록된 모든 뷰에게 업데이트 메시지를 보내게 된다. 
뷰는 java.util.Observer를 implement하여 만들면 update method를 구현할 수 있다. 
update함수의 두 번째 매개변수는 Object 모델에서 넘어온 추가정보를 받는 데에 사용된다.

interface Observer {
    void update(Observable t, Object o);
}

뷰는 반드시 모델에게 질의하여 업데이트하는 부분이 구현되야 한다. 
모델은 addObserver라는 함수를 이용하여 뷰를 자신에게 등록시킨다. 
모델은 자신에게 등록된 모든 뷰를 기억하고 있다가 자신의 상태가 바뀌게 되면 등록된 모든 뷰에 notify 함수를 호출하여 뷰를 update시킨다. 
모델은 뷰를 여러 개 가질 수 있다. MVC에서는 이것을 허용하고 있다. 또한 뷰도 여러개의 모델에 등록될 수 있다.


'Front-end dev > Etc.' 카테고리의 다른 글

codepen 불러오기  (587) 2020.07.08
vscode와 Git 연동하기  (530) 2020.01.17
[Node.js] listen EADDRINUSE Error  (514) 2020.01.06
Front-end 로드맵(v.2020)  (887) 2020.01.03
Front-end 로드맵(v.2018)  (518) 2018.03.29

[Node.js] listen EADDRINUSE Error


node.js를 사용하다보면 
1
2
3
4
events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: listen EADDRINUSE :::3000


"C:\Program Files\JetBrains\WebStorm 2017.3\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run server-start --scripts-prepend-node-path=auto
> IonicConvention@0.0.1 server-start C:\Users\CI\Desktop\IonicConvention
> nodemon ./server/server.js
[nodemon] 1.13.3
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./server/server.js`
[nodemon] app crashed - waiting for file changes before starting...
events.js:183
      throw er; // Unhandled 'error' event
      ^
Error: listen EADDRINUSE :::3000
    at Object._errnoException (util.js:1024:11)
    at _exceptionWithHostPort (util.js:1046:20)
    at Server.setupListenHandle [as _listen2] (net.js:1351:14)
    at listenInCluster (net.js:1392:12)
    at Server.listen (net.js:1476:7)
    at Object.<anonymous> (C:\Users\CI\Desktop\IonicConvention\server\server.js:40:8)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)



위와 같은 EADDRINUSE 에러를 마주하게 되는 경우가 종종 생기게 된다.
이는 해당 포트(위의 예시에서는 3000번)를 사용하고 있는 다른 프로세스가 이미 존재하기 때문에 뜨는 에러이다
그럴 때는, 이전의 프로세스를 종료하면 되는데 cmd 창을 열어 
1
taskkill //IM node.exe


라고 입력한다. 프로세스가 종료되면
'성공: 프로세스 "node.exe"(PID ---)이(가) 종료되었습니다.' 라고 뜨며,
원래 실행하려던 프로그램을 다시 실행해보면 정상적으로 동작하는 것을 확인할 수 있다.

위 명령어로 다른 프로세스도 강제로 종료할 수가 있는데,
/F는 강제종료, /IM은 이미지 이름을 의미한다.

인터넷 익스플로러를 종료하고 싶다면,
아래와 같이 입력하면 된다.

1
taskkill //IM iexplore.exe



'Front-end dev > Etc.' 카테고리의 다른 글

codepen 불러오기  (587) 2020.07.08
vscode와 Git 연동하기  (530) 2020.01.17
모델-뷰-컨트롤러(Model-View-Controller, MVC)  (580) 2020.01.07
Front-end 로드맵(v.2020)  (887) 2020.01.03
Front-end 로드맵(v.2018)  (518) 2018.03.29

# Front-end 로드맵(v.2020)





[출처] https://roadmap.sh/frontend

'Front-end dev > Etc.' 카테고리의 다른 글

codepen 불러오기  (587) 2020.07.08
vscode와 Git 연동하기  (530) 2020.01.17
모델-뷰-컨트롤러(Model-View-Controller, MVC)  (580) 2020.01.07
[Node.js] listen EADDRINUSE Error  (514) 2020.01.06
Front-end 로드맵(v.2018)  (518) 2018.03.29

+ Recent posts