React.js16 TypeScript에 대하여 ~ 📌 오늘의 TIL - TypeScript 기초 정리 오늘은 TypeScript 기본 개념을 정리해봤다. React 프로젝트에 적용하려다 보니, 헷갈리는 개념들이 있어서 다시 한번 기초를 다지는 시간을 가졌다. 1️⃣ TypeScript란? TypeScript는 JavaScript의 상위 호환 언어로, 정적 타입을 지원한다. 쉽게 말해, JavaScript에서 타입을 강제할 수 있도록 만든 언어라고 보면 된다. let message: string = "Hello, TypeScript!";console.log(message); 위 코드에서 message 변수가 string 타입이라는 걸 명확하게 지정해 줬다. JavaScript였다면 그냥 let.. 2025. 3. 6. [트러블슈팅] MBTI 유형 계산 로직 1. 문제발생상황: 테스트시 결과가 ESTJ만 나오는 상황이 발생함.결과: 결과가 골고루 나오지 않음2. 원인 추론로직 오류코드에서 결과값을 계산할때 계산식이 잘못됫다고 생각함.3. 해결 방안(1) 로직 꼼꼼히 점검하기먼저, 로직이 어떻게 돌아가는지 콘솔로 하나하나 찍어가며 상황을 파악함콘솔을 찍어보니 질문에 답을 클릭하였을때 배열에 E or I 의 형태의 결과값이 나와야되는데 내가 고른 질문의 텍스트가 전달됨질문을 클릭하였을때 type에 E/I 형태를 스플릿으로 나누고 질문에서 첫번째것을 고르면 잘른 앞의 E를 두번째것은 뒤에 I를 전달하도록 수정하였음.4. 결과드디어 문제 해결!로직이 정상적으로 내가 고른 값을 받아와 E가 I보다 많으면 E를 S가 N보다 많으면 S을 정상적으로 뽑아와정상적인 결과값을.. 2025. 2. 25. axios란 무엇인가? 오늘은 리액트 심화주차 강의를 들으면서 axios라는것을 공부해보았습니다. 우선 axios가 무엇인지 적어보겠습니다.axios는 http를 이용하여 서버와 통신하기 위해 사용하는 패키지라고 합니다.axios를 이용하기 위해서는 패키지를 설치해야합니다.설치방법은 터미널에 yarn add axios를 치시면 설치가 완료됩니다.axios는 여러가지 메서드들이 존재합니다.주요 메서드들을 적어보겠습니다.주요메서드는 get, post, delete, put, patch가 있습니다.get은 서버의 데이터를 조회할때 사용합니다.기본적인 사용방법을 아래에 적어보겠습니다.axios.get(url[, config]) // GET(url은 매개변수, 대괄호([]) 안의 값은 선택 입력사항입니다.주위사항으로는 어떻게 요청해야 .. 2025. 2. 19. [트러블슈팅] 이미지 수정시 불러오기, 카카오 api키 보안처리 1. 문제발생상황1: 카카오 Map API키 보안문제상황2: 게시글 수정시 기존의 이미지 파일을 최초 1번 불러와야함.결과1: 키를 html파일에 script를 사용하여 노출이 되는 문제가 생김. 노출이되면 API키가 해킹에 위험이 높아짐.결과2: 게시글 수정시 이미지를 변경하지 않아도 기존의 이미지로 업데이트 되야하는데 파일을 선택하라고 알림을 받음.2. 원인 추론카카오 Map API를 .env 파일에 환경변수로 작성하였지만 html에서는 Import.meta 방식으로 불러 올 수 없어서 노출이미지를 작성시 필수로 넣어야된다는 조건이 있지만 수정하기에서 데이터를 불러올때 파일을 불러오지 않고 url주소만 불러옴.3. 해결 방안(1) 카카오 API, 게시글 수정시 기존 이미지 불러오기카카오 Map.. 2025. 2. 18. 리덕스 툴킷에 대하여 ... 1. Redux Toolkit이란?Redux Toolkit(RTK)은 Redux의 공식 상태 관리 라이브러리로, 기존 Redux의 복잡한 설정을 간소화하고 생산성을 높이기 위해 설계되었다. RTK를 사용하면 Redux의 보일러플레이트 코드를 줄이고 더 직관적인 상태 관리를 할 수 있다.2. RTK의 주요 기능1) configureStore기존 Redux의 createStore를 대체하며, 미들웨어와 DevTools 설정이 기본적으로 포함되어 있다.자동으로 redux-thunk를 포함하여 비동기 처리를 쉽게 할 수 있다.import { configureStore } from '@reduxjs/toolkit';import counterReducer from './counterSlice';const store.. 2025. 2. 11. [트러블슈팅] Custom hook의 속성을 잘 몰라서 생긴일... 1. 문제발생상황: 토글을 하면 상태값이 바뀌면서 다른 컴포넌트에서 상태값이 무엇인가를 판단하고 그것에 맞는 리스트를 보여줘야되는 Coustom hook을 만듬.결과: 하지만 토글의 상태를 변화시켜주는 컴포넌트에서는 상태값이 잘 바뀌는데 리스트 컴포넌트에서 그 상태값을 못받아옴.2. 원인 추론콘솔로 찍어보기콘솔로 찍어보니깐 실제로 상태값이 바뀌지만 리스트에서는 값이 안바뀜. 서로 다른 주소값을 가지는거 같음.3. 해결 방안(1) Coutom hook의 성질에 대하여 알아보기!!커스텀 훅은 독립적인 성질을 가지는 파일이였다,. 한마디로 대쉬보드 컴포넌트에서 만든 [list,setList] = useState값을 리스트 컴포넌트에서 다시 [list, setList] = useState한다해도 값이 이어지.. 2025. 2. 10. 이전 1 2 3 다음