개발야 기하하자

먼저 폴더를 만듭니다 

myapp 이라는 폴더를 자신이 편한 경로에 만들어줍니다.

그다음 V

SC를 켜고 Ctrl + ` 를 눌러 터미널을 킨 뒤 

npm init => 패키지 생성

npm install =>   npm 실행

명령어를 입력해줍니다

노란줄의 index.js 파일이 Default값으로 들어가고 package.json 파일이 만들어집니다. 

그럼이제 express를 install 해보겠습니다.

npm install express --save 를 입력합니다.

그러면 package-lock.json 이 생성됨을 볼 수 있습니다.

package-lock.json 에 들어가보면

express가 정상 설치됨을 알 수 있습니다.

그러면 index.js에 코딩을 해보겠습니다.

이렇게 코딩을 해주고 터미널에서 node index.js  를 실행해줍니다.

그러면 

열림이라는 문구와 http://localhost:3000/ 번 포트로 접속이 가능합니다. 

그럼 http://localhost:3000/ 로 접속을 해볼까요?

정상적으로 Hello World! 가 찍힌 것을 볼 수 있습니다!

감사합니다 :)

저번시간에 만들었던 구조로 가겟습니다. ( 디폴트 구조 ) 

src에 Hello 라는 폴더를 만들고 Hello.js라는 파일을 만들어줍니다!

rcc 를 입력후 컨트롤 + 스페이스바를 누른뒤 ( 자동 기본 문법 셋팅 )

내부에 h1태그에 hellow world ! 를 입력해줍니다.

그리고 app.js에 가서 return() 값안에 들어간 코드를 다 삭제하고

<Hello />라는 것을 입력해줍니다 (자동 import 안될 시 => 입력 ( import Hello from './Hello/Hello'; )  )

그래서 app.js에 코드를 넣어주면

npm start를 했을 때 결과가 아래처럼 찍히네요!

이번시간에는 hello world를 컴포넌트에서 불러와서 출력하는 법을 공부했습니다!

https://nodejs.org/en/ 에서 node.js를 설치해줍니다

왼쪽은 안정적인 버전, 오른쪽은 최신 기능이들어간 최신버전입니다.

왼쪽을 설치합니다.

설치가 완료됐으면 윈도우 검색창에 cmd를 입력후 명령 프롬프트에  들어가 node -v 라는 명령어를 실행 시켜준 뒤

node -v 로 잘 설치가 되었나 확인합니다.

그리고 초기에 파일을 만들 경로에 들어가 create-react-app (프로젝트 이름) 이라는 명령어로 초기 설정을 잡아줍니다.

그럼 vsc에 들어가 확인을 해보면 아래처럼 디폴트 구조가 잡혀있습니다.

Ctrl + ` 를 누르시고 터미널을 열고 npm start라는 명령어를 입력합니다.

이러한 화면이 뜬다면 성공을 한 것입니다. 이제 App.js폴더 수정, component 단위로 앞으로 코딩을 해봅시다~~

&. 속성은 같은태그에 몇가지 부분만 다르다면 &. 속성으로 나누어 스타일을 주는겁니다. 

예제를 보시죠 

예를 들어 test라는 스타일에 one은 margin-top을 30px를 주고 싶고 two는 margin-top: 50px 를 주고싶다면

&.로 나누어 js에서 스타일을 줄 때  

이렇게 주면 둘 다 width:100%, height:100% 가 적용되고 one 은 margin-top: 30px, two는 margin-top:50px 따로 따로 적용됩니다.

:: 속성 

예를 들어 input 속성인 placeholder 를 바꾸고 싶다고 한다면

input::placeholder 를 이용하여 placeholder의 스타일을 바꿀 수 있습니다.

이렇게 placeholder의 스타일을 주면 됩니다. 오늘의 공부 끝~~!