Suyeon BLOG

서울 열린 데이터 광장에서 서울에 있는 음식점들을 모아서 검색 사이트를 만들었습니다. React만 사용하다가 Vue를 사용하면서 좋은 점 등을 포스팅하려고 합니다. 📌 만들게 된 계기 JSON으로 데이터를 생성해서 다루기만 했지 API를 활용한 프로젝트를 만들어 본 경험이 없었고, Vue가 React보다 데이터를 다루는 데 훨씬 효율적이라는 지인의 얘기를 듣고 Vue를 기반으로 한 API 프로젝트를 만들게 되었습니다. 📌 Vue를 사용하면서 느낀점 1. Vue에서 template와 script가 나눠져 있는 덕분에 가독성이 좋은 코드를 구현할 수 있습니다. Vue를 처음 접했을 때 다소 어색했던 부분이었습니다. 하지만 HTML과 JavaScript 부분이 따로 나누어져 있어서 프로젝트를 구현할 때 깔끔하..

프로그래머스에서 JS를 활용한 코딩테스트를 하는 과정에서 더 좋은 코드를 구현할 수 있는 방법을 배웠습니다. 그것들을 여기에 써볼려고 합니다. 📌 동일한 코드가 여러번 사용될 때는 함수를 만드는 것이 좋습니다. 코딩테스트를 처음 시작 했을 때 코드를 쭉~ 나열하면서 시간 초과로 실패한 경험들이 많으실텐데 함수를 활용하면 시간초과로 실패하던 문제를 가볍게 성공할 수 있게 됩니다. JS의 기본 상식! function을 사용한 일반 함수와 화살표 함수의 차이점을 잘 알고 알맞게 사용하시는 걸 추천드립니다. 추천 참고 자료: 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 출처: 드림코딩 엘리 📌 반복문 안에서 indexOf와 splice를 되도록이면 시간이 덜 걸리는 것으로 대체하..

API를 이용한 프로젝트를 하다보니 사용하는 데이터의 양이 늘어나면서 이들을 더 구체적으로 표현하면 좋은 코드가 될 것 같아 시작하게 되었습니다. 📌 React에 TypeScript 적용하기 React 프로젝트를 생성하기 전일 때 npx create-react-app 프로젝트명 --template typescript React 프로젝트를 생성한 후일 때 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 📌 결과 TypeScript를 적용하기 전인 React 프로젝트의 파일들입니다. 확장자명은 js, css로 이루어져 있는걸 확인할 수 있습니다. TypeScript를 적용한 후인 React 프로젝트의 파일입..

📌 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..

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

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

* 프론트엔드를 준비하면서 면접 질문이 뭐가 있는지 찾아보는 도중 this에 관한 것이 있어서 관련된 도서를 읽어봤습니다. 제가 본 질문은 this가 뭔가요? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 단 this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 사실 학교에서 Java에 대해 배운 적이 있어서 여기서의 this와 같은 개념일 줄 알았는데 전혀 다른 개념이라서 처음에 봤을 때 이해하기 조금 어려웠습니다. 그래서 코어 자바스크..

출처: Do it! 클론 코딩 영화 평점 웹서비스 1. movie_id - moive API에서 id값이 10인 것만 출력할 수 있습니다. ex) https://~~.json?movie_id=10 2. sort_by - 기본적으로 내림차순 정렬을 합니다. ex) https://~~.json?sort_by=rating 평점(rating)을 기준으로 내림차순을 합니다. ※ 영화 평점 웹서비스 디자인은 어디서 가져온 것인가? https://dribbble.com/shots/2442798-Movie-Application Movie Application dribbble.com - 여기서 회원가입은 없기 때문에 기능에는 '영화 제목', '영화 개봉년도', '영화 장르', '영화 시놉시스', '영화 평점', '영화 ..