은은하게 코드 뿌시기

-0-..도대체 왜 디버깅이 안되는거야 하고 ssr이라서 로컬에 안찍히는 구나 개념적으로만 생각햇지 소스를 뒤져 보지 않았는데 소스를 확인해보니 그냥 별다른게 아니고 도메인을 받아오는 구간에서 ssr로 보내줄경우 로컬이 아닌 다른곳으로 api요청(dev나.. 다른곳으로)을 보내고있었다. 아니 그러면 ssr로 보낼때 api호출에 왜 log가 출력되지 않는거지? 하고 의문을 갖게 됬는데 csr로 할땐 크롬에 ssr로 할땐 서버 터미널에 로그가 출력되기 때문이었다. 끗.

vs code 단축키를 뿌셔보자 필요해 보이는 단축키를 정리해보자 파일 열기 : Ctrl + P 현재 열려있는 파일 닫기 : Ctrl + w 라인 전체 선택 : Ctrl + L 행 삭제 : Ctrl + X (빈선택), Ctrl + Shift + K 행 복사 : Ctrl + C 행을 아래로 이동 : alt + Down 행을 위로 이동 : alt + Up 위에 행 아래로 복사 추가 : Shift + alt + Down 아래 행 위로 복사 추가 : Shift + alt + Up 들여쓰기 : 블록 선택후 Tab 내어쓰기 : 블록 선택후 Shift + Tab 문장단위 주석 : Ctrl + / Command Palette를 오픈 : Ctrl + Shift + P 전체 디렉토리에서 파일명 검색 : Ctrl + P 최..

/* eslint-disable */ import logo from './logo.svg'; import './App.css'; import river from './river.jpg'; import React, { useState } from 'react'; function App() { addEventListener('click',()=>{ }) let [topic,topicChange] = useState(['ㄱ뷰 좋은 캠핑장', 'ㄴ뷰 좋은 카페', 'ㄷ뷰 좋은 음식점']); let [like,lickChange] = useState(0); const postProps = { postsData :[ {topi : 'ㄱr뷰 좋은 캠핑장' , date : '2023-10-31'}, {topi : 'ㄴ..

변수대신에 쓸수있는 데이터 저장공간 함수 내에서 선언된 변수 처럼 컴포넌트 내에서 관리 되어, 값을 변경 해 가며 사용 할 수 있다. state는 변경이 되면 HTML이 자동으로 재렌더링 되기때문에 (변수는 새로고침을해야만 데이터를 받아올 수 있음, 재랜더링안됨) 자주 변경되는 데이터를 새로고침 없이 웹앱처럼 동작하게 만들기 좋 장점을 가지고 있습니다. import React, { useState } from 'react'; let [state데이터 변수명, state 데이터 변경 함수명] = useState('데이터!!') 혹 const [state, setState] = useState(initialState); { state데이터 변수명 } - state는 직접 수정해서는 안되고 useState 를..

리액트로 작성시에 warning메세지가 뜨는 경우가 있다. 변수를 선언해놓고 사용하지 않았다던지, import시켜놓고 사용 하지 않았다던지 기타 등등 인데 직접적인 오류는 아닌데 메세지가 보고 싶지않다면 하기 처럼 소스 맨윗단에 주석을 달아주면된다. /* eslint-disable */ 주석을 달아주면 그냥 바로 successfully!

JSX ? - React에서 html과 같이 비슷하게 작성 할 수 있도록 해주는 문법을 JSX라고 합니다. - 자바스크립트의 확장문법 - 브라우저에서 실행하기 전에 코드가 번들링되는 과정을 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. - JSX는 자바스크립트의 공식적인 문법이라고 할 수는 없습니다. JSX 문법의 특징 및 준수사항 - 컴포넌트에 여러 요소가 있다면 반드시 부모요소 하나가 감싸는 형태여야 합니다. (형제노드 안됨XXX) (Virtual Dom방식에서는 컴포넌트 변화를 감지 할 떄 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야 한다는 규칙이 있기 때문입니다.) - 자바스크립의 값을 JSX 안에서 렌더링 할 수 있습니다. (EX 예제의 asterisk..

React 를 쓰면 새로고침 없이 앱처럼 동작을 한다! 이런것들을 웹앱이라고 한다. Web-app 웹앱의 장점 - 모바일앱으로 발행이 쉬움, 앱처럼 뛰어난 ux , 웹사이트보다 비즈니스적 강점 1. node.js 설치 - 신버전으로 설치하기 (npm툴 ,create-react-app 라이브러리 설치를 위해서 설치한다!) https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치된 노드 버전 확인 하는법 cmd -> node -v 2. visual studio code 설치하기 - 터미널 쓰기 좋아서 써보기좋음 https://code.visualstudio...

create-react-app 제거 후 재설치 해보자 npm uninstall -g create-react-app npm install -g create-react-app create-react-app 재실행 npx create-react-app my-app

노란색 상자처럼 터미널을 열었는데 powershell이 디폴트여서 cmd로 변경하고싶을때 아래와 같이 따라하면된다. 1. ctrl + shift + p 하고 termminal: select defualt profile 선택 2. command prompt 선택 3. 터미널 껏다 키기 4. 껏다키면 cmd로 바뀌고 앞에 경로앞에 ps가 없어진 것을 알 수 있음