리액트 프로젝트를 생성하기 위해서 바탕화면에 새폴더를 만들고 shift + 오른쪽 마우스키 -> 여기에 shell창열기

프로젝트 명은 'test' 로

npx create-react-app test 명령어를 입력해 주었습니다.

다음과 같이 오류가 발생하였습니다,,

검색을해보니

npm install create-react-app 명령어 입력을통해

먼저 설치를 해주어야한다고하네요

설치가 끝나고 이제 npx create-react-app test

명령어를 통해 다시 리액트 프로젝트를 생성해보겠습니다.

잘 생성이 되는 모습입니다.. 

 

이제 vs 코드에서 npm start 로 실행을 시켜보았는데 문제 없이 잘 돌아가는 모습입니다.

설치는 이곳에서 ->  Node.js (nodejs.org)

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

홈페이지 접속후 LTS 버전으로 다운로드 합니다. 전부 다음다음 하면 설치완료,,

설치 완료 하셨다면 이제 두가지 설정을 해야합니다

1. 환경변수 설정

2. 실행규칙 변경

환경변수 설정은 다음과 같습니다

1.검색창에 ->  sysdm.cpl 검색하기

 

2. 시스템속성 - 고급 - 환경변수 선택

3. 시스템 변수 - 새로만들기

4. 이대로만 넣기

변수이름 : NODE_HOME

변수값 : C:\Program Files\nodejs

5. 시스템 변수 잘보면 path라는 항목이있습니다 선택

6 새로만들기 선택후

7. %NODE_HOME% 입력후 확인

이것으로 환경변수 설정은 끝났고 이제 실행규칙을 변경해야합니다.

 

1. powershell '관리자 권한' 으로 실행하기.

 

2.Set-ExecutionPolicy Unrestricted 입력(복붙하세요,,)

3. Y후 엔터

 

여기까지 다하셨다면 cmd창을 열어서 node -v 를 입력해보세요

버전이 잘 나왔다면 설치가 잘 된것입니다,, ㅎㅎ

혹시나 실행에 오류가 있을경우 환경변수나 실행규칙에 문제가 있을경우가 많으니 꼭 설정바랍니다.

이 외에는 컴퓨터마다 환경,,설정이 다 달라서 제일 빠른방법은 본인이 나는 오류 검색해보는방법입니다.

이제 막 HTML,CSS (자바스크립트는 쪼금..)

시작한지는 2주 정도 지난거같습니다...

아직 대학생이라 학교,알바하면서 짬짬히 구글링하고 영상도 엄청 많이 본거 같아요

처음에는 그냥 막연하게 땅에 머리박으면서 했습니다..

HTML 태그 위주로 시작했는데 정리를 좀 한다고했는데

해본적이 없어서 완전 중구난방..ㅋㅋ

 

죄송합니다,, 눈갱

자세히는 아니지만  어느정도 느낌만 찾고

그 다음은 레이아웃 나누는법을 좀 찾아본거같습니다 

flew , float , grid

처음에 무슨말인지 ㅋㅋ 하 참 ㅋㅋㅋㅋ 

 

아르바이트 끝나고 아는 동생하고 24시 카페에서 각자 공부했는데

새벽 다섯시까지 이해한다고 눈도 머리도 빠지는줄알았습니다..

(사실 아직도 잘 몰루?)

 

그리고 시작된 레이아웃 나누기..

 

div태그랑 열심히 씨름하면서 한 일주일 보냈습니다,,

제가 대학교 과가 컴퓨터 공학과라 맨날 학교에서 

검은색 콘솔창과 씨름하다가

맞짱뜨자,,이놈아

바뀌는게 눈으로 보이니까 

흥미 가지기가 좋았던거 같습니다..

아직 얕은 지식이지만 길가다가 건물들 보면

어떤식으로 박스안에 정렬할지 저도 모르게 고민하게 되더라구요,,

justify-content..,,,,,,,,인가..

 

그래서 네이버 구글 들어가서 페이지 확대도 해보고 줄여도 보면서 

px단위가 아닌 뷰포트 그리고 모바일 반응형 웹 등등

이래저래 정보를 많이 알았는데

알아가고 적용 하려면 시간이 많이 필요할거같습니다..

HTML/CSS 슬라이더

HTML / CSS 로만 이미지 슬라이더도 만들어보고

가린다고 가린건데 진짜 죄송합니다

홈페이지 따라만들기도 해보았습니다.

일주일 정도 씨름하고 나니

이제 홈페이지 들어가면 자세하겐 아니더라도

아~ 대충 이렇게 만들어졌겠구나 하고 느낌은 잡을수있게된거같아요.

 

욕설은 죄송합니다,,

원노트에도 뭔가 쌓여가니까 좀 뿌듯하기도,,

 

하지만 현실은..

눈갱 죄송합니다.

 

근데 아직 효율적인 코드의 사용 방법이 

너무너무너무너무 부족하다고 느꼈습니다..

태그를 비롯한 중복클래스의 그룹화..등등..

그래도 주먹구구 식으로 계속 만들기..

 

PPT 탭메뉴 홈페이로 구현하기

 

아이디어가 없어 학교 수업시간에 만들었던

PPT를 활용해 만든

탭메뉴 스타일 홈페이지입니다

 

'폰' 카톡입니다..

 

맨땅에서 만든 카카오톡 입니다..

이때 리얼타임으로 시간 구현하려고 

처음으로 자바 스크립트 사용한거 같습니다.

오글거리누,,

 

지금 만들고있는 소개 사이트입니다....

제가 제일 좋아하는 '1Q84' .........

 

아직 남에게 보여줄 정도는 아니지만

점점 발전해보겠습니다..!

봐주셔서 감사합니다~

'웹 홈페이징 > 끄적끄적,,' 카테고리의 다른 글

vs code extension 한국어  (0) 2023.07.30

+ Recent posts