Develope38 리액트 사용하는 npm list 1. 리액트 vite 프로젝트 생성npm create vite@latest2. 부트스트랩 & scss 설정npm install react-bootstrap bootstrapnpm install -D sass-embedded3. 폰트어썸 추가npm i --save @fortawesome/fontawesome-svg-corenpm i --save @fortawesome/react-fontawesome@latestnpm i --save @fortawesome/free-solid-svg-iconsnpm i --save @fortawesome/free-regular-svg-iconsnpm i --save @fortawesome/free-brands-svg-icons4. proxy 사용npm install http.. 2024. 9. 18. [Typescript] - 타입스크립트 Type과 Interface 차이 타입스크립트는 자바스크립트와 달리 정적 언어로, 암시적 형 변환을 지원에 대해 엄격하며 컴파일 될 때 타입 검사를 통해 경고를 표기해준다. 그렇기 때문에 변수나 함수 등에 먼저 타입을 올바르게 명시해 주는 것이 중요하다. 하지만 반복된 타입 정의는 오히려 코드 가시성이 떨어질 수 있어 이를 보완하기 위해서 변수 자체를 한개의 타입으로 만들어 사용할 수 있다. 1. Interface와 Type alias 특징1. Interface1. 객체(Object)의 타입을 정의할 때 사용한다.2. 함수의 파라미터와 반환 타입을 정의할 수 있다.3. extends를 이용한 상속이 가능하다.2. Type alias1. 특정 타입이나 인터페이스 등을 참조할 수 있는 타입 변수를 의미한다.2. 해당 타입의 역할을 명명한다... 2024. 9. 16. 리액트는 왜 상태를 직접 수정 하지 않고 새로운 상태 객체를 수정할까? - 리액트의 불변성 이야기 해당 포스트는 이전 state를 사용하는 이유를 공부하다가 생긴 의문을 공부하다가 다시 생긴 의문점을 작성한 내용입니다.글은 읽지 않아도 앞으로 작성할 포스트 내용과는 무관합니다! 2024.09.04 - [Develope/REACT] - 리액트는 왜 State를 사용할까? 리액트는 왜 State를 사용할까?리액트를 사용하는 와중, 가장 흔히 쓰지만 왜 이렇게 쓰는지 궁금했던게 하나 있다.바로 리액트 훅 중의 한개인 state이다. 리액트는 자바스크립트의 라이브러리다. 그렇기 때문에, 리액트의deer-develope-diary.tistory.com 다시 State의 특징에 대해이전 포스팅과는 크게 관련되지 않는 것 같아 제외한 내용이었지만, state에 대해 공부하다가 알게 된 것은 state로 선언된 값.. 2024. 9. 4. 리액트는 왜 State를 사용할까? 리액트를 사용하는 와중, 가장 흔히 쓰지만 왜 이렇게 쓰는지 궁금했던게 하나 있다.바로 리액트 훅 중의 한개인 state이다. 리액트는 자바스크립트의 라이브러리다. 그렇기 때문에, 리액트의 코드는 자바 스크립트 코드와 유사하며, 자바스크립트를 다룰 수 있다면 리액트를 배울 때 쉽게 배울 수 있다.하지만 내가 느끼기에 가장 큰 리액트와 자바스크립트의 차이라면 바로 state의 존재이다. 자바스크립트와 리액트의 변수 선언사실 state는 변수 선언보다는 좀 더 그 이상의 역할을 하지만, 비교를 위해 변수 선언으로 표현했다.자바스크립트자바스크립트에서는 변수를 선언할 때 var, let, const 라는 변수 선언 키워드를 사용한다.let name = '김철수'리액트리액트에서는 변수를 선언할 때 state라는 .. 2024. 9. 4. [리액트] 비동기 처리 에러로 인한 api 호출 순서 에러 리액트에서 api 호출 순서로 인하여 에러가 발생했다.원래 의도대로 실행이 된다면 api 함수 호출이 완료 된 후 페이지에서 호출 된 값을 따라 화면에 내용이 작성되어야 하는데 화면에 코드 실행이 되지 않았다. 기존 코드// 전달 받은 각 api 정보 const location = useLocation(); const item = location.state?.item; // 각각의 작업 리스트 값 const [workList, setWorkList] = useState([]); // api data 값 const getModApi = async () => { try{ const url = '/api/work_api/getMod'; .. 2024. 9. 1. API get, post 차이 api란?api란 애플리케이션 프로그래밍 인터페이스(Applictaion Programing Interface)의 약자 하지만 솔직히 저걸 보자마자 아 저거구나! 하고 와닿지는 않는다. 특히 Cors 에러같은 경우에는 약어 말고 풀 단어로 보면 감이라도 오는데, 얘는 응..? 싶다. 조금 더 풀어 쓰자면,고유한 기능을 가진 모든 소프트웨어 간의 서비스 계약으로, 요청과 응답을 사용하여 서로 통신하는 방법이다. 그럼 통신을 위해서는 어떻게 해야할까?api 통신을 위해서는 ajax, fetch, axios 등을 이용하여 통신할 수 있는데, 나는 axios를 이용하여 호출했다. axios로 api호출하기1. npm으로 axios를 설치 후 선언해주기npm install axios 2. 사용할 jsx 파일 상.. 2024. 8. 30. 이전 1 2 3 4 5 6 7 다음
