티스토리

사고쳤어요

검색하기

블로그 홈

사고쳤어요

makeaccident.tistory.com/m

김민제

구독자: 0

방명록 방문하기

주요 글 목록

[React / ts] 모바일 대응하기 웹 페이지를 제작할 때 화면 크기가 변경되었을 때 화면이 잘 출력되도록 대응하는 것은 매우 중요하다.화면 크기에 맞춰 잘 보여지도록 개발을 하더라도 화면 크기에 따라 의도하지 않은 화면이 보여질 수 있다.예를 들어 위의 페이지에서는 화면이 정상적으로 잘 보여진다.그러나 모바일 환경 또는 화면 크기를 줄이면 의도하지 않은대로 화면이 깨지는 것을 볼 수 있다.이런 일이 발생하지 않도록 화면 크기에 대응하여 보여지도록 해보자. 미디어 쿼리(@media)const BooksListStyle = styled.div` display: grid; grid-template-columns: ${({ view }) => view === "grid" ? "repeat(4, 1fr)" : "repeat(1, 1fr).. 공감수 0 댓글수 0 2025. 5. 5.
[React / ts] MSW로 백엔드 구현 없이 API 테스트해보기 https://mswjs.io/docs/getting-started Getting startedThree steps to get started with Mock Service Worker.mswjs.ioMSW(Mock Service Worker)는 클라이언트 측에서 네트워크 요청을 가로채고 이를 모킹할 수 있게 해주는 라이브러리이다.주로 API 통신을 테스트하거나 개발 단계에서 백엔드 없이 API를 개발하고 테스트할 때 유용하게 사용된다. 다음 명령어를 통해 설치를 진행해준다.npm install msw@latest --save-dev 이후 다음 명령어를 통해 mock service worker를 생성해준다.npx msw init public/ --save 명령이 실행되면 public 폴더에 mockS.. 공감수 1 댓글수 0 2025. 5. 1.
[React / ts] 스니펫 사용하기 VSCode에서는 스니펫을 사용하여 반복되는 코드 조각들을 편리하게 입력할 수 있다. VSCode 좌측 하단의 설정을 누른다. 코드 조각을 누른다. typescriptreact를 선택한다. (작업 환경에 맞는 언어와 프레임워크를 선택하면 된다) VSCode Extension에는 스니펫의 추가를 도와주는 여러 확장 프로그램들이 존재한다.Snippet Generator를 설치해준다. 스니펫을 추가하고자 하는 코드가 포함된 파일을 연다. 코드를 드래그한 뒤 팔레트 확장(Ctrl + Shift + P)를 눌러 Generate Snippet에 들어간다.이후 이름, 설명 등을 입력하면 스니펫이 클립보드에 복사된다. 처음에 열었던 typescriptreact.json에 복사한 스니펫을 붙여넣는다. 이제 VSCod.. 공감수 0 댓글수 0 2025. 4. 29.
[React / ts] Craco로 절대 경로(allias) 사용하기 https://craco.js.org/ Configure CRA without ejecting. | CRACOCreate React App Configuration Overridecraco.js.orgCraco란 Create React App Configuration Override의 약자로, Create React App(CRA)로 생성한 React 프로젝트에서 eject 하지 않고도 설정을 커스터마이징할 수 있게 해주는 도구이다.Craco를 사용하여 상대 경로가 아닌 절대 경로를 사용하여 파일을 import할 수 있도록 설정해보자. 먼저 다음 명령어들을 통해 craco를 설치해준다.npm i -D @craco/craconpm i -D @craco/types // 타입스크립트 다음으로 src폴더에 ts.. 공감수 0 댓글수 0 2025. 4. 29.
[React / ts] Book Store 만들기 - ⑩ 주문 처리(주소 검색 구현) 주소를 입력할 때 자주 볼 수 있는 화면이다.위 창에서 주소를 검색한 뒤 주소를 클릭하면 검색된 주소 정보가 입력된다. https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net위 서비스는 다음 링크에서 보다 자세히 안내되어 있으며 무료로 제약없이 사용할 수 있다.이를 활용하여 주문을 처리하는 페이지를 구현해보자. // FindAddressButton.tsximport Button from "../common/Button";import { useEffect } from.. 공감수 1 댓글수 0 2025. 4. 28.
[React / ts] Book Store 만들기 - ⑨ 도서 상세 페이지 제작 // BookDetail.tsximport { Link, useParams } from "react-router-dom";import styled from "styled-components";import { useBook } from "../hooks/useBook";import { getImgSrc } from "../utils/image";import Title from "../components/common/Title";import { BookDetail as IBookDetail } from "../models/book.model";import { formatDate, formatNumber } from "../utils/format";import EllipsisBox from "../compon.. 공감수 1 댓글수 0 2025. 4. 24.
[React / ts] Book Store 만들기 - ⑧ 쿼리스트링을 활용한 BooksFilter 구현 쿼리스트링을 활용하여 BooksFilter를 구현하여 카테고리를 선택하였음을 알 수 있도록 해보자. // BooksFilter.tsximport styled from "styled-components";import { useCategory } from "../../hooks/useCategory";import Button from "../common/Button";import { useSearchParams } from "react-router-dom";const BooksFilter = () => { const { category } = useCategory(); const [searchParams, setSearchParams] = useSearchParams(); const handleCate.. 공감수 0 댓글수 0 2025. 4. 23.
[React / ts] Book Store 만들기 - ⑦ Zustand를 활용한 로그인 구현 https://www.npmjs.com/package/zustand zustand🐻 Bear necessities for state management in React. Latest version: 5.0.3, last published: 3 months ago. Start using zustand in your project by running `npm i zustand`. There are 3665 other projects in the npm registry using zustand.www.npmjs.comZustand는 간결하게 상태 관리를 할 수 있도록 도와주는 라이브러리이다.npm install zustand // authStore.tsimport { create } from "zustand.. 공감수 0 댓글수 0 2025. 4. 23.
Slack 봇 만들기 - ① 봇 워크스페이스에 추가하기 업무의 자동성, 효율성을 위해 슬랙 봇을 개발해보자.Slack 사전 설정먼저 슬랙 봇을 만들 채널을 하나 생성해준다. https://api.slack.com/ AI 업무 관리 및 생산성 도구업무가 이루어지는 새로운 세상, Slack 전 세계에서 가장 사랑받는 업무용 운영 체제에 인력, 프로젝트, 도구, AI를 한데 모아보세요slack.com다음으로 채널에 권한을 설정해줄 것이다.위 링크에 들어간 뒤 우측 상단의 Your apps를 클릭한다. 앱 이름과 채널을 입력한 후 Create App을 누른다. Create App을 누른 뒤 나오는 페이지에서 OAuth&Permissions를 클릭한다.이곳에서 슬랙 봇에게 권한을 부여할 것인데, 화면을 아래로 스크롤하여 Scopes에서 "Add on OAuth Sco.. 공감수 0 댓글수 0 2025. 4. 22.
[React / ts] Book Store 만들기 - ⑥ Axios 사용과 웹서버 연결 https://www.npmjs.com/package/axios axiosPromise based HTTP client for the browser and node.js. Latest version: 1.8.4, last published: a month ago. Start using axios in your project by running `npm i axios`. There are 152098 other projects in the npm registry using axios.www.npmjs.comJavaScript, TypeScript에서 가장 대중적으로 사용되는 통신 라이브러리이다.npm i axios // http.tsimport axios, { AxiosRequestConfig } fro.. 공감수 1 댓글수 1 2025. 4. 21.
[React / ts] Book Store 만들기 - ⑤ 라우터 만들기 https://www.npmjs.com/package/react-router-dom react-router-domDeclarative routing for React web applications. Latest version: 7.5.1, last published: 4 days ago. Start using react-router-dom in your project by running `npm i react-router-dom`. There are 23676 other projects in the npm registry using react-router-dom.www.npmjs.comhttps://www.npmjs.com/package/@types/react-router-dom @types/react-.. 공감수 1 댓글수 0 2025. 4. 21.
[React / ts] Book Store 만들기 - ④ 컴포넌트 제작과 테스트파일 만들기 Button Component 만들기Buttonconst Button: React.FC = ({ children, size, scheme, disabled,}) => { return ( {children} );};styled 컴포넌트의 ButtonStyle을 가져오고 Props를 전달받아 기본적인 Button을 구현하였다. ButtonStyleconst ButtonStyle = styled.button>` font-size: ${({ theme, size }) => theme.button[size].fontSize}; padding: ${({ theme, size }) => theme.button[size].padding}; color: ${({ theme, sch.. 공감수 0 댓글수 0 2025. 4. 20.
[React / ts] Book Store 만들기 - ③ ThemeSwitcher 만들기 버튼을 클릭하여 라이트 테마 다크 테마를 변경할 수 있는 기능을 구현해보자. // theme.tsexport type ThemeName = "light" | "dark";type ColorKey = "primary" | "background" | "secondary" | "third";interface Theme { name: ThemeName; color: Record;}export const light: Theme = { name: "light", color: { primary: "brown", background: "lightgray", secondary: "blue", third: "green", },};export const dark: Theme = { name.. 공감수 0 댓글수 0 2025. 4. 19.
[React / ts] Book Store 만들기 - ② 레이아웃 구성, 글로벌 스타일 적용 레이아웃 구성현재 만들고자 하는 Book Store에는 여러 가지 페이지들이 존재한다.그리고 각 페이지에는 Header, Footer와 같이 공통적으로 사용되는 부분들이 존재한다. // Home.tsximport Footer from "../components/common/Footer";import Header from "../components/common/Header";function Home() { return ( Home body );}export default Home; 이를 위해 다음과 같이 Components 폴더에 Header와 Footer를 정의하고 페이지마다 활용할 수 있을 것이다.위 방법을 사용하면 코드를 재사용하여 확실히 깔끔해지는 .. 공감수 0 댓글수 0 2025. 4. 18.
[React / ts] Book Store 만들기 - ① 프로젝트 생성과 폴더 구조 설정 먼저 다음 명령어로 프로젝트를 생성해준다.npx create-react-app ./ --template typescript 그리고 다음과 같이 폴더 구조를 만들어준다. api: 서버와 통신을 할 때 사용될 api들을 모아놓는 폴더이다.components: 화면을 구성하는 컴포넌트들을 모아놓은 폴더이다.hooks: 프로젝트에서 사용될 react hook들을 모아놓은 폴더이다.models: 프로젝트에서 사용될 모델들을 정의하여 모아놓은 폴더이다.pages: 프로젝트에서 사용될 웹 페이지들을 모아놓은 폴더이다.utils: 자주 사용되며 보조적인 기능을 처리해줄 함수들을 모아놓은 폴더이다. 공감수 0 댓글수 0 2025. 4. 17.
[React / ts] Task App 만들기 - ⑦ Firebase 연동하여 로그인, 로그아웃 만들기 https://firebase.google.com/?hl=ko Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.com Firebase 홈페이지에 접속하여 Get strated in console을 누른 뒤, react-task-app 프로젝트를 생성해준다.ios, android 등의 다양한 앱을 추가할 수 있는데, 웹을 추가해준다.안내되어있는대로 firebase 라이브러리를 설치한 뒤, src에 firebase.ts를 만든 후 SDK를 복사해 붙여넣는다. Firebase-Aut.. 공감수 1 댓글수 0 2025. 4. 17.
[React / ts] Task App 만들기 - ⑥ dnd-kit으로 drag and drop 만들기 https://www.npmjs.com/package/@dnd-kit/sortable @dnd-kit/sortableOfficial sortable preset and sensors for dnd kit. Latest version: 10.0.0, last published: 4 months ago. Start using @dnd-kit/sortable in your project by running `npm i @dnd-kit/sortable`. There are 1119 other projects in the npm registry using @dnd-kit/sorwww.npmjs.comdnd-kit은 drag and drop을 구현하는 데 도움을 주는 라이브러리이다.npm install @dnd-k.. 공감수 0 댓글수 0 2025. 4. 17.
[React / ts] Task App 만들기 - ⑤ Logger Modal 만들기 사용자들이 Board, List, Task를 편집할 때마다 Logger를 추가하여 관리하였었는데, 이를 보여주는 화면을 구현해보자. // LoggerModal.tsximport React from "react";import { useTypedSelector } from "../../hooks/redux";import { FiX } from "react-icons/fi";import { body, closeButton, header, modalWindow, title, wrapper,} from "./LoggerModal.css";import LogItem from "./LogItem/LogItem";type TLoggerModalProps = { setIsLoggerOpen: React.Di.. 공감수 0 댓글수 0 2025. 4. 17.
[React / ts] Task App 만들기 - ④ Modal 만들기 일(Task)를 눌렀을 때 해당 정보가 모달로 나오도록 구현해보자.// EditModal.tsximport React, { ChangeEvent, useState } from "react";import { FiX } from "react-icons/fi";import { useTypedDispatch, useTypedSelector } from "../../hooks/redux";import { deleteTask, setModalActive, updateTask,} from "../../store/slices/boardsSlice";import { addLog } from "../../store/slices/loggerSlice";import { v4 } from "uuid";import { b.. 공감수 0 댓글수 0 2025. 4. 17.
[React / ts] Task App 만들기 - ③ ActionButton 만들기 "새로운 일 등록" 버튼과 "새로운 리스트 등록" 버튼을 눌렀을 때 각 기능을 수행할 수 있도록 구현해보자.// ActionButton.tsximport React, { useState } from "react";import { IoIosAdd } from "react-icons/io";import DropDownForm from "../DropDownForm/DropDownForm";import { listButton, taskButton } from "./ActionButton.css";type TActionButtonProps = { boardId: string; listId: string; list?: boolean;};const ActionButton: React.FC = ({ board.. 공감수 0 댓글수 0 2025. 4. 15.
[React / ts] Task App 만들기 - ② list, task 만들기 board에 이어서 각 board마다 존재하는 list와 task를 만들어보자.현재 만드려고 하는 Task-App의 구조는 board - list - task 이다.board 내에는 여러 개의 list가 있고, list 내에는 여러 개의 task가 있으며각 board, list, task는 자유롭게 제거하거나 추가할 수 있다. List// ListContainer.tsximport React from "react";import { IList } from "../../types";import List from "../List/List";import { listContainer } from "./ListsContainer.css";import ActionButton from "../ActionButton/A.. 공감수 0 댓글수 0 2025. 4. 15.
[React / ts] Task App 만들기 - ① board 만들기 React / TypeScript를 활용하여 간단한 Task를 관리해주는 웹페이지를 만들어보자.먼저 위 사진에서 + 버튼을 눌러 게시물을 여러 개 만들 수 있고,게시물을 선택하여 게시물에 해당하는 Task를 볼 수 있도록 할 것이다. Redux 사전 세팅먼저 디렉토리 구조는 다음과 같다.// store/slices/boardsSlice.tsimport { createSlice } from "@reduxjs/toolkit";import { IBoard } from "../../types";type TBoardState = { modalActive: boolean; boardArray: IBoard[];};const initialState: TBoardState = { modalActive: false.. 공감수 0 댓글수 0 2025. 4. 15.
[React] Redux 사용하기 Reduxhttps://www.npmjs.com/package/redux reduxPredictable state container for JavaScript apps. Latest version: 5.0.1, last published: a year ago. Start using redux in your project by running `npm i redux`. There are 18534 other projects in the npm registry using redux.www.npmjs.com Redux란 자바스크립트에서 상태를 관리하기 위한 라이브러리이다.React에서 컴포넌트트 자체적으로 상태를 가지고 있고, props를 통해서 컴포넌트의 상태를 전달할 수 있지만,앱이 커지면서 여러 컴포넌트가.. 공감수 1 댓글수 1 2025. 4. 14.
[React / ts] props 사용해보기 React에서 props는 컴포넌트 간에 데이터를 전달하는 속성(properties)이다.부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하며, 함수의 매개변수처럼 작동한다. import React from "react";interface MyProps { weather: string;}const MyWeather: React.FC = (props) => { return 오늘의 날씨는 {props.weather}입니다.;};export default MyWeather;타입스크립트에서는 다음과 같이 props를 사용할 수 있다.MyProps라는 인터페이스를 생성한 뒤, MyWeather의 타입인 React.FC에 를 추가하여MyWeather이라는 컴포넌트가 MyProps라는 타입의 props를 필요.. 공감수 1 댓글수 0 2025. 4. 10.
[React / ts] useState 사용법과 간단한 To-Do List 만들기 useState()useState()는 리액트에서 컴포넌트의 상태를 관리하기 위해 사용되는 Hook(훅)이다.기본적인 사용법은 다음과 같다.const [state, setState] = useState(initialValue); state: 현재 상태 값setState: 상태를 변경할 수 있는 함수initialValue: 상태의 초기값 타입스크립트에서는 타입을 명시하여 사용할 수 있다.const [state, setState] = useState(initialValue);type: initialValue, state의 타입 useState에서는 일반적인 String, Number 등의 타입뿐만 아니라 객체, 배열 등 또한 사용할 수 있다.interface User { name: string; age.. 공감수 0 댓글수 0 2025. 4. 8.
[React / ts] 클래스형 컴포넌트와 함수형 컴포넌트 리액트에서는 기능별로 다른 파일에 컴포넌트를 작성 후, 한 파일에서 합칠 수 있다.만약 한 파일에 모든 컴포넌트를 작성하고 기능을 작성한다면 매우 지저분해지고 유지보수가 힘들 것이다.리액트에서 컴포넌트를 작성하는 방법에는 두 가지가 있다. 클래스형 컴포넌트import { Component } from "react";class ClassCom extends Component { render() { return 클래스형 컴포넌트; }}export default ClassCom;class "클래스명" extends Component주의사항으로 클래스는 Component를 extends해야 하고,render()를 호출한 뒤 그 안에 return문을 작성해야 정상적으로 빌드가 된다. 함수형 컴포넌트fun.. 공감수 0 댓글수 0 2025. 4. 8.
타입스크립트로 리액트 시작하기 리액트로 프로젝트를 생성하기 위해 기존에 사용하던 명령어는 다음과 같다.npx create-react-app my-app 위 명령을 실행하면 필요한 라이브러리들을 자동으로 설치해준다.또한 폴더 구조와 여러가지 js 파일들도 생성해주어 npm start 명령을 통해 예제 페이지를 확인할 수 있도록 해준다. 그런데 타입스크립트를 사용하기 위해서는 위의 js 파일들이 필요하지 않고, ts파일들이 필요하다.친절하게도, 이런 경우를 위한 프로젝트 명령어가 존재한다.npx create-react-app my-app --template typescript 위 명령어를 통해 프로젝트를 생성하면 아래와 같이 모든 js파일들이 tsx파일로 생성된다! tsxtsx파일은 html 컴포넌트를 사용할 수 있는 ts의 확장된 파일.. 공감수 0 댓글수 0 2025. 4. 7.
타입스크립트 클래스와 객체 만들기 let empName: string = "김민제";let empAge: number = 26;let empJob: string = "개발자";function printEmp(empName: string, empAge: number, empJob: string): void { console.log(`이름: ${empName}`); console.log(`나이: ${empAge}`); console.log(`직업: ${empJob}`);}printEmp(empName, empAge, empJob); 직원들의 이름, 나이, 직업이 있을 때 이를 출력하는 함수가 있다.위 코드를 실행하면 이름, 나이, 직업이 잘 출력되지만, 한 가지 문제가 있다.만약 직원들이 수백명이 존재한다면, 직원 정보가 더 많이 존재.. 공감수 0 댓글수 0 2025. 4. 6.
타입스크립트의 특징과 타입 명시 자바스크립트는 변수를 선언할 때 let, const, var 등으로 선언하고 별도로 타입은 지정해주지 않는다.그렇기 때문에 변수들의 타입을 헷갈리기 쉬우며 의도치 않은 버그가 발생할 수 있다.const a = 3;const b = '5';console.log(a*b);// output: 15숫자 타입의 3과 문자열 타입의 5를 곱했지만 에러가 발생하지 않고 15라는 결과가 출력된다.지금은 별 문제가 아니라고 생각할 수 있지만, 큰 규모의 코드에서 이런 일이 발생한다면 원인을 찾기 매우 힘들 것이다. 타입스크립트타입스크립트는 이름에서 알 수 있듯 자바스크립트에 "타입 선언 기능"을 추가한 언어이다.타입스크립트는 자바스크립트를 포함하는 더 넓은 환경을 보유하고 있으며타입스크립트 환경에서 자바스크립트는 동작 .. 공감수 0 댓글수 0 2025. 4. 4.
객체 지향 프로그래밍 절차적 프로그래밍객체 지향 프로그래밍을 알아보기 전에 이전에 사용되었던 절차적 프로그래밍에 대해 알아보자절차적 프로그래밍이란 순차적으로 프로그래밍을 하는 방식이다.순서대로 차곡차곡 쌓아 올리는 건축물과 비슷한 느낌으로 이해할 수 있다.int add(int a, int b);int minus(int a, int b);int multiple(int a, int b);int divide(int a, int b);int main(){ add(1, 2); minus(4, 3); multiple(5, 6); divide(8, 3);} 객체 지향 프로그래밍객체 지향 프로그래밍은 "객체"를 기능 단위로 하는 프로그래밍 방식이다.객체는 메소드(함수), 데이터(변수)가 모두 포함되며 특정 역할을 수행.. 공감수 1 댓글수 0 2025. 4. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.