전체 글74 [JavaScript] 객체지향과 Class 함수 객체지향과 Class 함수 # 객체지향 프로그래밍이란 프로그래밍 개념 중 하나로, 데이터를 단순히 받고 처리하는 것이 아니라 공통점으로 묶어 객체 단위로 나누어 관리하는 방식이다. 반복되는 값을 그때그때마다 새롭게 처리하는 것이 아니라 미리 형식(class)를 지정해놓고 처리하므로 데이터 관리를 효율적으로 할 수 있다. 예를 들어 사용자 정보의 내용은 이름, 나이, 아이디 등 반복되는 항목이 존재한다. 그러니 사용자의 정보를 객체로 생성하는 함수를 만들면 반복되는 작업을 굳이 하지 않아도 된다. 이렇게 함수를 통해 객체지향 프로그래밍을 구현할 수 있다. 객체지향 프로그래밍에는 프로토타입 기반 언어와 클래스 기반 언어가 있다. 자바스크립트는 프로토타입 언어이므로 클래스 없이도 프로토타입으로 상속을 할 수 .. 2023. 3. 14. [React] 제어 컴포넌트와 비제어 컴포넌트를 적절하게 사용하는 법 제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트와 비제어 컴포넌트란, React에서 form 태그 엘리먼트를 다루는 방법이다. form 태그 엘리먼트는 자체적으로 데이터를 가진다는 특정이 있다. 이 특성 때문에 form 태그 엘리먼트를 다루는 방법이 두 가지로 나뉜다. form 태그 엘리먼트 중 가장 자주 사용되는 input 태그를 예로 들어 제어 컴포넌트와 비제어 컴포넌트를 설명해보려 한다. React에서는 input의 value 값을 다룰 때 state를 사용하거나 ref를 사용한다. state를 사용하는 것을 제어 컴포넌트, ref를 사용하는 것을 비제어 컴포넌트라고 한다. # 제어 컴포넌트 import React, { useState } from 'react'; export default funct.. 2023. 3. 12. [자료구조] 배열 배열 # 자료 구조란 자료 구조란 데이터를 조작하는 방법이다. 같은 코드를 작성하더라도 그 코드를 구현하는데에는 다양한 방법이 존재한다. 그리고 코드를 효율적으로 동작시키기 위해서는 그 중에서도 가장 빠른 코드를 작성해야 한다. 그렇다면 무엇이 '더 빠른 코드'인가? 코드의 실행 속도는 코드를 실행하는데 걸리는 시간으로 판단하지 않는다. 같은 코드라도 컴퓨터마다 그 실행 속도가 다르기 때문이다. 코드의 실행 속도는 '코드를 실행하기 위해 몇 단계가 필요한지'로 판단한다. 같은 기능을 구현하는 코드라도 5단계만에 실행이 완료되는 코드보다 3단계만에 실행이 완료되는 코드가 더 빠른 코드가 되는 것이다. 이를 시간 복잡도라고 한다. # 배열 배열은 가장 기초적인 자료 구조이다. 배열의 연산을 통해 코드가 자료.. 2023. 3. 11. [JavaScript] 자주 사용하는 자바스크립트 코드 정리 코딩테스트 공부하는 중... 개인적으로 자주 사용하는 코드를 기억하기 위해 정리해본다.🧐 배열 대소관계 비교 : for 사용하기 let array = [3, 2, 1]; for(let i = 0; i < array.length; i++){ for(let j = 0; j < array.length; j++){ if(array[i] < array[j]){ [array[i], array[j]] = [array[j], array[i]]; } } } console.log(array) // [1, 2, 3] for을 두 번 사용한다. array = [3, 2, 1]라고 했을 때, array[0]과 array[0] 비교 array[0]과 array[1] 비교 array[0]과 array[2] 비교 array[1]과 .. 2023. 3. 7. [배포] TypeScript + Express 배포하기 TypeScript + Express 배포하기 웹 페이지는 html, css, js 이외의 파일은 읽지 못한다. 그러니 내가 짠 코드를 웹 페이지가 읽을 수 있는 파일로 변환한 build용 파일이 따로 있어야 한다. 배포를 하기 위해서는 build 파일들이 있어야 하는 것이다. TypeScript로 작성된 프로젝트를 배포하기 위한 과정을 알아보자. 배포는 클라우드타입에서 진행하였다. (클라우드타입으로 배포하는 법: https://inthedev.tistory.com/57) 사이트에 배포하고 싶은 파일, build 폴더 생성을 위한 명령어, 실행 명령어를 입력해주면 배포가 완료된다. 그 과정은 1. npm ci 2. tsc : ts 파일을 js 파일로 변환 3. node app.js : 실행 이 과정을 컴.. 2023. 3. 3. [배포] 클라우드타입으로 Express 배포하기 클라우드타입으로 Express 배포하기 Express로 작은 프로젝트를 만들고 나서 배포를 하기 위해 클라우드타입 이라는 서비스를 이용하였다. 유튜브 조코딩님의 영상을 참고하여(https://youtu.be/SGGebq48h3Y) Express를 배포하는 방법을 소개하려 한다. 1. 클라우드타입 홈페이지 회원가입 https://cloudtype.io/ 모두의 플랫폼팀, 클라우드타입클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다.cloudtype.io 깃허브로 가입하면 깃허브에 올린 Repositories와 연동이 편하다. (다른 방식으로는 가입 안 해봐서 모르겠음...) 2. + 버튼 눌러서 프로젝트 형식 선택하기 상단의 +를 누르면.. 2023. 3. 2. [React] Express로 CORS 에러 해결하기 Express로 CORS 에러 해결하기 와 드디어... 해결... 프론트엔드에서 API를 이용하여 프로젝트를 만들다 보면 거의 반드시 CORS 에러를 마주하게 된다. 나는 서울시에서 제공하는 공공 API를 이용하여 프로젝트를 만들었는데 CORS 에러가 발생하였다. CORS 에러를 해결하는 방법을 구글에 검색하면 참 많은 방법이 나오는데, 그 중에서도 난 API만을 받아오는 작은 서버를 직접 만드는 방법을 선택하였다. CORS 에러는 원래 서버에서 해결해야 하는 에러이기 때문에 Node.js를 이용하여 해결하였다. 우선 유튜브 조코딩님의 https://youtu.be/Tt_tKhhhJqY 영상을 참고하였다. 기본적인 Node.js 내용을 이해할 수 있다. 이 내용을 바탕으로 API만을 위한 소소한.. 2023. 3. 1. [Redux Toolkit] TypeScript로 store, slice, selector 타입 지정하기 TypeScript로 store, slice, selector 타입 지정하기 1. store.tsx import { configureStore } from "@reduxjs/toolkit"; const store = configureStore({ reducer: { // reducer 입력 }, }); export default store; export type RootState = ReturnType; 가장 하단에 export type RootState = ReturnType; 를 추가한다. 2. slice.tsx import { createSlice, PayloadAction } from "@reduxjs/toolkit"; interface StateType { a: number; b: boolean.. 2023. 2. 26. 이전 1 2 3 4 5 6 7 ··· 10 다음
