프론트엔드 개발자 클론 프로젝트 후기...1

내가 리액트를 하면서 프론트의 기본이 약하다는 걸 깨닫고

프론트엔드 개발자의 기초를 다지려고 한다 .

 

기초를 제대로 다지는걸 목표를 삼았으니 독학도 좋지만 도움을 받아보려고 한다.

*여태 필요한 부분만 찾아서 봤다면 

*이번에는 여기에서 하는 그대로 따라 해보려고 한다 

 

출처 : 패스트 캠퍼스

구성을 보고 홀딱 반해버렸다.

 

일단 프론드엔드 프로젝트의 3대장 HTML CSS Javascript 

요즘 핫하다는 타입스크립트 리액트 뷰 graph QL

 

3대장부터 조지고 나머지를 음미하려고 한다

 

클론 프론드엔드 프로젝트는 스타벅스를 클론 해본다고 한다 

괜찮은 프로젝트가 될거같다 . 

 

출처 : 패스트 캠퍼스

처음부터 아주 흡족 했던 이유 1 

 

프론트엔드는 독학 하기 쉽다 바로 보여지고 직관적이니까

하지만 why , how 를 모른다 

 

세팅세팅!

 

이번에 intelli J말고 vscode를 이용해보려고한다

프론트 작업은 좀더 간편하고 깔금 한거 같다 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

vscode는 나중에 웬만한것들도 다 작업이 가능하니까 만능으로 쓰기 좋은거 같다

(TMI VScode 는 마이크로 소프트 이다)

 

 

영어를 모르는 나같은 토종한국인은 한글 패치 진행

왼쪽 사이드바에서 테트리스 같은걸 선택후 korean을 적으면 패치 할수있는 팩이 나온다 .

 

 

폴더는 스타벅스폴더를 새로 만들었다.

시작 html 파일이름은 index.html로 만들었다 

 

먼저 기본적인 html 코드인데

하나하나 다치려면 효율성이 너무 떨어진다

매번 새파일을 만들때마다 할 순 없지아니한가

그래서 단축키라는 유용한 기능이 있는법

! 엔터를 치면 위와 같은 코드가 사라락 만들어진다

안에는 아직 빈 깡통 + 바뀔수 있는 이름이지만 그래도 세팅하는겸 파일들을 만들어준다 

 

그 다음 꿀팁 ! 

이건 강의에서 알려준건데

프론트엔드 개발자로써 알아두면 아주 유용할거 같다

• 먼저 한글 패치와 같이 테트리스를 눌러주고 
• 밑에 사진과 같은 패키지를 깔아준다
• 기능 기여도를 들어가서 드래그 되어있는 글을 복사한다 

 

 

** 이 기능이 무엇이냐면 

• 없어도 코딩은 가능하다
• 하지만 생산성을 높여준다 how?
• 줄 정렬 기능을 사용하는 것이다 이거에 대한 예재는 밑에서 알려주겟다

 

 

• 오른쪽 상단에서 파일을 클릭

 

• 기본 설정에서 바로가기키 클릭

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이런창이 틀텐데 검색 창에 우리가 드래그 했던 

검색하면 두번째 칸에 selection을 클릭하고 원하는 키바인딩을 입력해주면 된다

나는 컨트롤 알트 m 로 설정을 해놓았다 

 

다른 단축키와 중복 될 수 있으니  설정전에 꼭 확인해 보도록

실험을 위해 

제목태그중 하나인 h2를 이용해 난잡한 구성을 만들어보았다

 

깔끔한 코딩이 생산성을 높이니 저기에서 내가 정렬을 해주려면

내가 직접 지워주는 방법이 있는데 

방금 설치한 팩을 이용하면 더욱 간다하게 가능하다

내가 아까 입력했던 커맨드인 ctrl + alt + m 를 누르면! 

한번에 정렬된 모습을 찾아볼수있다. 

 

오늘 세팅은 여기 까지 진행하고 다음에는 

 

출력부터 포스팅 해보겠다.

 

성공적인 클론 프론트엔드 프로젝트위한 세팅 끝 ! 

 

더욱 자세한 세팅법은 같이 듣는걸로

http://abit.ly/5lc7dz9

한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. | 패스트캠퍼스