React 3

[React] 'react-simple-jstree' 에서 클릭한 파일 Path 가져오기

리액트에서 폴더 트리를 사용하는데 클릭한 파일경로를 얻는 방법을 시행착오(?) 끝에 허무할 정도로 간단하게 얻는 방법을 알게되어 포스팅합니다. 분명 저처럼 메서드 만들어서 알아내려고하는 분이 분명있을거 같.... 먼저 tsx파일의 return 부분입니다. const handleNodeSelect = (e: Event, data: any) => { if (data && data.node && data.instance) { // 클라이언트에서 선택한 폴더의 경로 const folderPath = data.instance.get_path(data.node, '/'); console.log(folderPath); // API에서 선택된 폴더의 이미지 리스트를 가져오기 axios.get('/api...', { p..

React 2024.01.25

JavaScript와 TypeScript 차이점

JavaScript TypeScript 언어 스크립팅 언어 객체지향 컴파일 언어 정적 타입 vs 동적 타입 동적 타입 -변수의 타입을 런타임에 결정 - 변수를 선언할 때 타입을 명시할 필요X 정적 타입 -변수의 타입을 컴파일 시점에 결정 -변수를 선언할 때 명시적으로 타입 지정 타입 시스템 동적 타입 언어이기 때문에 런타임시에만 타입이 검사됨. 이로 인해 런타임 오류가 발생 할 수 있음. 정적 타입 언어이기 때문에 컴파일 시에 타입 체크를 수행. 이로 인해 오류를 사전에 방지. 에러 처리 런타임에 발생한 에러는 실행 중단 발생. 디버깅 어려움. 일부 오류는 컴파일 시 발견됨. 따라서 상대적으로 더 안전함. 컴파일러 별도의 컴파일 단계 없이, 소스 코드를 직접 실행 가능. TypeScript 컴파일러를 사..

React 2023.11.15

[React] 리액트(React) 개발 환경 셋팅하기 - win10

갑자기 리액트 개발에도 참여하게 되어 React 공부를 시작했습니다. 백엔드개발자라면 프론트개발에 대해 어느정도 할 줄 알아야한다고 생각했는데 이렇게 또 기회가 오네요 하하하하하하하하하 막상 업무를 받으니 하기 귀찮 먼저 환경 설정부터 시작하겠습니다. 1. Node.js (최신버전) 설치하기 Node.js는 Chrome V8 Javascript 엔진으로 만들어진 Javascript 런타임입니다. ※ React 개발 환경 셋팅하는데 Node.js를 왜 설치하나요? React를 사용하기 위해 Node.js가 반드시 필요한 것은 아닙니다. Node.js는 JavaScript 런타임 환경으로, 서버 측 애플리케이션 개발을 위해 사용됩니다. React와 Node.js는 다른 목적을 가진 도구이지만, React 앱..

React 2023.09.08