react

CheckBox, Radio

리액트 안쓰고 어떤식으로 사용하는지 써보기!

리액트로 체크박스 다루기

리액트 라디오버튼 다루기

리액트 map 활용 라디오 버튼

리액트 map 활용 셀렉트 박스

리액트 음식 주문 폼에 체크박스, 라디오버튼 적용

visual studio code 세팅

• page.js가 두개일 순 없다!

vs code 다운로드

• vs code
• 해당 사이트로 들어가서 다운로드를 받는다!
• 다운 다 받으면 이런 setup파일이 생기는데 저걸 눌러서 다운로드 받는다!
  
• 경로는 건들지말고 기타의 4가지 전부 선택후 다음눌러서 다운로드 받는다.
  

nvm 다운로드

• nvm을 검색하고 다운로드 받는다!
• 설치가 끝나고 cmd에서 nvm 쳤을때 쥬르륵 뜨면 성공!
  
• cmd에 'nvm install 20.12.0' 작성한 후 엔터키를 누르면 알아서 다운로드 된다!
• installed successfully.가 떴으면 성공
  
• nvm use 20.12.0 를 작성한 후 엔터치면 이 버전을 사용한다는 것!

nextJs_project 파일 생성하기!

• 내가 원하는 경로에 프로젝트 파일을 하나 만들어서 다운로드 받아준다!
• 그 경로에서 cmd키고 npx create-next-app@latest 엔터치고 아래처럼 설정해준다
  

자동 정렬 플러그인 prettier

• 예.. 뭐 그 다음에 확장프로그램에서 prettier설치하고 잘 쓰면 됩니다.. 설정에 default쳐서 formmater prettier로 바꿔주고, format on save 체크하면 됩니다요..

node.js

• 브라우저 : js 실행기 (클라이언트 사이드 랜더링 - CSR)
• 브라우저 밖에서 사용 : node.js
• 구글에 node.js 검색후 다운로드

SSR와 CSR

• 요즘 보는 앱들 SSR 많이 씀
• CSR도 많이 쓰는데 리액트 쓸거면 SSR 많이
• 무조건적으로 좋아!는 아니지만 확률적으로는 next.js가 좋을 것이다!
• 참고자료

TODO

• visual studio code 세팅하는 방법 정리하기
• 재료공구 게시글 태그별 리스트 페이지 구현

느낀점

• 비쥬얼 스튜디오..!! 써보고 싶었는데 드디어 써본다! 후후.. 하지만 늘 세팅은 날 괴롭게하지..