웹 공부 노트3 [React] 리액트 컴포넌트에 값 전달하기 - 프로퍼티(Props) 사용) 오늘의 공부 노트는 React에서 컴포넌트에 값을 전달해야 할 일이 무조건 있을 것이다 이럴 경우는 어떤 식으로 전달하는지 알아보자! # 프로퍼티(Props)란? - properties의 줄임말이다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다 즉 단방향 데이터 흐름을 갖는다. - 프로퍼티는 하위 컴포넌트에서 수정이 불가하다. 우선 개념적 정의를 알아봤으니 이제 사용방법을 알아보자! # 사용법 시나리오 - 버튼을 생성해주는 컴포넌트가 있고 버튼의 text, fontColor, onClick 이벤트를 프로퍼티로 넘겨주고 설정해 주는 시나리오이다. 우선 프로퍼티가 없이 구현한 코드를 먼저 살펴보자! function CustomButton(){ return 버튼이다! } function App.. 2023. 9. 6. 서버 사이드 렌더링(SSR),클라이언트 사이드 렌더링(CSR),정적 렌더링(SR) 특징, 차이점 간단 정리 이번 포스팅은 웹에서 렌더링 방식이 있는데 각 렌더링 별로 차이점과 특징을 공부해보겠다. 우선 렌더링 방식은 총 3가지 (SSR, CSR, SR)이 있다. 하나씩 차근차근 알아보자! # 클라이언트 사이드 렌더링 (Client-side Rendering) - CSR - 렌더링이 클라이언트 쪽에서 일어남 - 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내줌 → 클라이언트는 그것을 받아 렌더링 시작 - 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드되고 실행이 끝나기 전까지 사용자는 볼 수 없다. # 서버 사이드 렌더링 (Server-Side Rendering) - SSR - 서버 쪽에서 렌더링 준비를 끝내고 클라이언트에 전달하는 방식 - 클라이언트에 전달되는 순간 HTM.. 2023. 5. 24. [NestJS - 오류] npm run start시 오류 npm ERR! enoent This is related to npm not being able to find a file. NestJS 서버 시작 시 아래와 같은 오류가 발생했다. npm ERR! enoent This is related to npm not being able to find a file. 그래서 해당 오류를 검색을 해 원인과 해결방법을 찾았다. 그걸 공유해보도록 하겠다! # 발생 원인 본 필자는 vscode를 사용하고 있었다. NestJS 파일이 있는 경로는 C/nestProjects/test-app이다. 하지만 나는 C/nestProjects까지만 들어가서 vscode에 있는 터미널에서 npm run start를 실행시켰다. 결론은 상위 폴더에서 npm run start를 실행시켜서 오류가 발생한 것이다. # 해결 방법 cd를 사용하여 파일이 있는 경로에 가서 npm run start을 실행시켜 주면 해결된.. 2023. 3. 10. 이전 1 다음
