CS/React (8) 썸네일형 리스트형 [React] 리액트 JS와 JSX파일의 차이점 클론 코딩 강의를 들을 때 js와 jsx 두 파일이 섞여 나올 때가 많았다.한 번 정리하고 넘어가기로! JSX 파일JavaScript XML의 약자자바스크립트에서 XML을 추가한 확장형 문법! 자바스크립트에서 HTML 문법을 사용할 수 있다!리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능하다는 특징이 있음왜 굳이 JSX 파일을 사용할까?스택오버플로우 질문과 답변 참고 결과 .jsx를 사용하면 자바스크립트 내에서 HTML을 사용할 수 있음그러나 그것 빼고는 js와 jsx 간 기능적으로 큰 차이점 없음jsx 관련해서 자바스크립트 내에서 직관적인 UI 작업이 가능하고, 개발이 도움이 되는 에러 메시지를 표시할 수 있게 해주긴 함 프로젝트 팀원들끼리 js를 쓸지 jsx를 쓸지 논의 후에 사용하면 된다! S.. [React] 리액트의 <Link>태그 Link 사용 예시//a tag: 페이지 이동//홈페이지에 링크 설정해서 프로덕트 페이지로 넘어가게 만듦import { Link } from 'react-router-dom';//가려는 경로를 to 프로퍼티로 지정. function HomePage(){ return ( My Home Page Go to the list of products. );}export default HomePage; Link 컴포넌트는 React에서 사용하는 태그라고 할 수 있다. *참고: 태그참고로 태그란 웹 사이트 내에서 다른 페이지, 또는 같은 페이지의 특정 위치, 또는 그 외 다른 웹사이트의 URL로 연결할 수 있는 하이퍼링크.. [React] useEffect() 훅에 대하여 useEffect 목적useEffect는 컴포넌트의 side effect를 처리하기 위한 함수.컴포넌트의 상태 변화에 따라 상태를 이용해 리액트와 관련 없는 부수 작업을 처리하기 위한 것. 첫번째 파라미터로 입력된 함수가 호출되는 시점은 컴포넌트가 첫 렌더링되는 시점과두번째 파라미터로 입력된 dependency 배열의 각 요소 값이 변경되었을 때이다. 각 요소값이 변경되었는지 판단하는 시점: 컴포넌트가 렌더링되는 시점. 사용방법1. useEffect(() => {})//컴포넌트가 렌더링 될 때마다 호출됨. 매우 비효율적. 거의 사용되지 않음2. useEffect(()=> {}, [])//첫번째 렌더링 후에만 호출됨 useEffect 사용 이유: 무한 루프 방지상태를 업데이트할 때,상태 업데이트 함수.. [React] 자바스크립트 배열 배열const hobbies= ["Swimming", "Cooking", "Running"];console.log(hobbies[0]); >>>Swimming const content=[~, ~, ~];내부에 문자열을 저장하거나 하는 식으로 구성 hobbies.push("Walking"); //새 원소 추가console.log(hobbies); //전체 출력const index= hobbies.findIndex((item) => { return item=== 'Swimming'; //각 원소를 스위밍과 비교하고 두 텍스트가 일치하면 함수가 true를 반환하여 스위밍의 인덱스를 가져옴 //그리고 그 값인 0을 index변수에 저장});console.log(index); 다른 언어들이랑 거.. [React] 자바스크립트 import, 함수, 객체와 클래스 import and export export 방법 2가지.util.js에서 export하고app.js에서 import한다고 가정. 1) 변수생성&이름할당하며 export export let apikey= "adfsfe2qw2dd";=> 몇개든 상관없이 export 가능.import {apiKey} from "./util.js"; 2) default exportexport default "adfsfe2qw2dd"; 변수 생성하거나 이름 할당하지 않고 이름 없는 값을 export => 2번째 방법은 하나더 추가하려고 하면 오류.파일별로 하나의 값만 default export 가능.import apikey from "./util.js";//import 파일에서 원하는 이름 할당하면 됨. export시에 이름.. UDEMY React 완벽 가이드 2024: 섹션1 시작하기& 섹션 2 자바스크립트 새로고침 React= Declarative UI Programming -바닐라로 짜면 쓸데없이 복잡하다. 명령형 방식. -리액트는 군더더기 없고 작성할 코드가 비교적 짧다. UI 업데이트도 알아서 해줌. 조건, 목표 상태, 상태 변경 조건만 정의하면 나머지는 리액트가 알아서 해줌 +) CodeSandBox- 개발환경 포함해서 리액트 연습 가능한 사이트. visual studio code에서 작업가능. npm start 리액트 라이브러리(추가 패키지) 설치. npm install npm run dev 이것도 실행. -리액트 프로젝트는 빌드 프로세스를 사용한다. 작성한 코드가 그대로 브라우저에서 실행되는게 아니라는 뜻. 브라우저에 전달되기 전에 내부적으로 코드가 수정됨. 이유1) 처리되지 않은 리액트.. [c++] / static 변수 사용 이유 동적계획법 문제중에 백준 14501번 퇴사 문제를 풀다가 애를 먹은 기억이 있었다. 예전에 풀 때는 감도 못 잡고 힘들었는데 책과 함께 다시보니 풀만한 문제다. 퇴사 문제에 쓰이는 개념중에 static 변수랑 resize 함수가 있는데 꼭 알아둬야 할 개념이라 정리해본다. 1. Static 변수의 특징 static 변수 장점: 메모리 측면에서 효율적이다. static 메모리 영역에 저장되어 고정된 메모리 영역을 사용하기 때문. 또한 속도가 빠르다. 객체를 생성하지 않고 사용가능하기 때문. 단점은 프로그램 종료시까지 메모리에 할당된 채로 남아있는다. heap 영역과 다르게 static 영역은 garbage collector의 관리를 받지 않기 때문. static 변수의 개수가 많아지면 프로그램의 수행의 악.. [개발기록] 참조에 의한 호출과 procedural abstraction C++ 복습겸 함수사용연습 이전 1 다음
