Suyeon BLOG

📌 TypeScript로 기본 함수 형성하기 function add(num1:number, num2:number): void { // 반환값 타입: 없음 console.log(num1 + num2); } function isAdult(age: number):boolean { // 반환값 타입: boolean return age > 19; } 함수를 형성할 때 매개변수의 타입과 반환값의 타입을 지정해야 합니다. 📌 선택적 매개변수 function hello(name?: string) { return `Hello, ${name || "world"}`; // name이 없을 땐 world를. } const hel = hello();// 가능 const hel2 = hello('Sara');// 가능 ?:의 의..

📌TypeScript 기본타입 형성하기 let car:string = 'abc'; let isAdult:boolean = false; let arr1:number[] = [1, 2, 3]; let age:number = 1300; 변수:데이터타입 형식으로 생성할 수 있습니다. 배열일 땐 []만 쓰는 것이 아니라, 데이터타입을 꼭 명시해줘야 합니다. 📌 Tuple let b:[string, number]; // 첫 번째요소는 문자열, 두 번째 요소는 숫자 b = ['a', 1]; b[0].toLowerCase(); b[1].toLowerCase(); // number에는 toLowerCase()라는 메소드가 없다는 에러가 발생합니다. TypeScript로 Tuple을 생성하면 원하는 데이터 타입만을 저장할..

React에서 TypeScript를 활용할 수 있다는 정보를 접한 후 프로젝트에서 활용하고 싶어서 배우기 시작했습니다. 📌 TypeScript를 적용하지 않을 때 발생하는 문제들 function printItem(arr) { arr.forEach(v => { console.log(v); } } function sum(num1, num2) { console.log(num1 + num2); } 일반적인 JS를 활용한 함수입니다. TypeScript를 사용하지 않을 때 나타나는 큰 차이점은 함수를 호출할 때 나타납니다. printItem([1, 2, 3]); // 1 2 3 printItem(1, 2, 3); // 숫자에는 forEach라는 메서드가 없기에 오류가 발생합니다. sum(1, 2); // 3 su..

쇼핑몰 프로젝트에서 가장 대표적인 기능 중 하나인, 최근 본 상품 기능을 만들기 위해 LocalStorage와 Set을 활용했습니다. 📌LocalStorage 활용법 LocalStorage에 값은 항상 문자열만 저장 가능하고, 값을 넣을 때 key: value 형태를 가집니다. LocalStorage에 값을 넣는 법: localStorage.setItem('key', 'value'); LocalStorage에 값을 가져오는 법: localStorage.getItem('key'); LocalStorage에 값을 삭제하는 법: localStorage.removeItem('key'); 📌Set 활용법 Set은 대부분 중복없이 저장하고 싶을 때 자주 사용됩니다. Set으로 배열의 중복 없애는 법: new Set..

쇼핑몰 프로젝트를 하는 중인데 테마별로 옷을 보여주는 서비스를 제공하고 있어요. 이때 이 데이터들을 1차원 배열로 저장해야 하는데 이때 reduce와 concat을 알게 되어서 글 작성하는 중 입니다! 📌reduce()란 무엇인가 자신이 호출한 배열의 모든 요소를 순회하면서 누적된 값을 배열로 반환합니다. 대체로 많은 예제에서는 덧셈으로 자주 활용돼서 나옵니다. 📌concat()란 무엇인가 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환합니다. 배열 말고도 문자열을 연결할 때도 자주 사용합니다. 📌2차원 배열을 1차원으로 만들기 아까 말한 reduce()와 concat()으로 2차원 배열을 1차원 배열로 만들 수 있습니다. 1. reduce(): 배열 요소를 순회하는 역할을 합니다. 2. conca..

Redux를 사용하다가 해당 에러가 발생해서 해결방안을 기록합니다! 📌에러 발생 원인 데이터를 화면에 표시할 때, 컴포넌트로 전달된 데이터 타입과 표시하려는 데이터 타입이 일치하지 않을 때 📌오류 찾는 방법 The above error occurred in the component: 라는 오류를 더 찾아볼 수 있습니다. 바로 에서 데이터 타입이 일치하지 않는다는 의미인 것 같습니다. 저는 span에 표시한 데이터를 console.log로 확인해서 어떤 타입이 들어가 있는지 확인했습니다. 📌오류 해결 방법 console.log로 확인해본 결과 아래와 같은 배열이 나왔습니다. {type: 'login/changeNick', payload: ''} redux를 활용해서 state의 값을 변경하는데 어떤 인자를..

채팅 기능을 만들었는데 다른 채팅창을 켰을 때 그 전에 거가 다 남아있거나 똑같은 채팅창에서 해도 중복으로 저장이 돼서 이 문제점을 해결한 방법을 기록하고자 작성합니다! 📌코드 해석 ※ () 안에 적힌 것은 식별자명입니다 1. 채팅하기 버튼을 눌렀을 때 해당 유저 프로필사진, 글의 제목, 글쓴이, 글의 종류, 채팅내용을 저장하는 state(msg)를 만들어서 우선 프로필사진, 제목, 글쓴이, 종류를 저장합니다. 2. input 안에 사용자가 입력한 글을 msg에 저장합니다. 2-1. 이때 채팅 기록 전체를 관리하는 state(chat)에 현재 글제목이 있으면 그 요소 안에 채팅을 추가합니다. 2-2. 그렇지 않으면 msg에 저장합니다. 3. 채팅 닫기 버튼을 눌렀을 때 msg에 저장된 데이터를 chat에..

사용자가 입력한 채팅을 저장하는 방법과 화면에 보여주는 방법을 기록하면 나중에 유용하게 사용될 것 같아 이렇게 글을 작성하게 되었습니다. 📌 코드 해석 1. handleChatInput: input의 폼이 변경된 값을 저장하는 역할을 합니다. 2. handleSubmitBtn: 전송 버튼을 눌렀을 때 input의 변경된 값을 chat이라는 state에 저장하고, input을 초기화시켜주는 역할을 수행합니다. 3. ShowChatList(): 사용자가 입력한 메시지를 출력해주는 역할을 하는 컴포넌트 입니다. chat이라는 state를 전달받습니다. function ShowChat({data, setChatBtn}) { let [text, setText] = useState(''); let [chat, se..

프로젝트에서 상대방과 대화하는 창을 만들어야 하는데 style 주기 너무 어려워서 고생하다가 해결해서 포스트 남깁니다! 📌 코드 진행 순서 1. input 태그에 원하는 메시지를 입력합니다. 2. 전송 버튼을 클릭하면 화면에 사용자가 입력한 메시지가 보이게 됩니다. (이때 '' 일 땐 보이지 않게 합니다.) 3. 이렇게 계속 진행됩니다. 📌CSS 코드 해석 1. myChat 클래스: 사용자가 입력한 메시지를 모두 감싸고 있고, 여기서 텍스트 오른쪽 정렬을 합니다. 2. chatBox 클래스: 사용자가 입력한 메시지와 보낸 시간을 감싸고 있고, 보낸 시간은 이 클래스를 기준으로 배치될 수 있도록 position: relative; 를 줍니다. 3. chatTime 클래스: 메시지를 보낸 시간을 감싸고 있고..

채팅창을 구현할 때 날짜를 가져와야하는데 이때 사용한게 react-live-clock 입니다. 📌 react-live-clock 사용방법 1. 터미널에 npm install --save react-live-clock 을 입력해서 설치합니다. 2. 코드 상단 위에 import Clock from 'react-live-clock'; 으로 시간 컴포넌트를 생성합니다. 3. 코드 형식은 이렇게 작성합니다. ※ timezone은 여기를 참고해주세요! 결과 import Clock from 'react-live-clock'; function Chat() { return( ); } export default Chat;