분류 전체보기 89

[자료구조] 자료 구조 공부는 왜 할까?

유튜브 강의https://www.youtube.com/watch?v=bh23BDYOry8  1. 효율적인 데이터 관리적절한 자료구조를 사용하면 데이터를 삽입, 삭제, 검색하는 작업이 훨씬 빠르고 효율적으로 수행됩니다.ex) 배열을 사용하면 인덱스를 통해 빠르게 접근할 수 있지만, 삽입이나 삭제가 빈번한 경우 연결 리스트가 더 적합할 수 있습니다. 2. 문제 해결 능력 향상많은 알고리즘 문제는 특정 자료구조를 활용하여 해결할 수 있습니다.ex) 그래프를 사용하면 네트워크 경로 탐색 문제를, 트리를 사용하면 계층적 데이터 구조를 처리하는 문제를 효율적으로 해결할 수 있습니다. 3. 코드의 유지보수성 향상잘 설계된 자료구조는 코드의 복잡성을 줄이고, 변경 사항이 발생했을 때 수정하기 쉽게 만들어 줍니다. ex..

CS 2024.07.30

[Github Workflow] 코드 리뷰 자동화

혼자서 혹은 팀으로 사이드 프로젝트 진행할 때, 내가 잘하고 있는지 궁금한 적 없었나요?하지만 혼자하니까 피드백을 받을 방법이 없고, 같이 하는 팀원분들도 영양가 있는 피드백을 주기 어렵다고 느낀 적 없었나요? 만약 Github 를 이용중이시라면, 간단한 코드를 넣어서 피드백을 받으실 수 있습니다. 우선 시작 전에 2가지를 알고 있으셔야 합니다.이 기능은 사용하신 만큼 돈이 듭니다.Github를 사용중이여야 하고, PR을 올릴 때 리뷰를 받기 수월합니다.이미 Github Workflow를 사용해보신 분이 있다면 간단하게 파일 하나만 추가해주시면 바로 적용해보실 수 있습니다. 내가 선택한 Github Work flow https://github.com/marketplace/actions/chicken-co..

[빵부스러기] next.js 로 다국어 페이지 만들기1

앞으로 next.js로 다국어 페이지를 만들때 필요한 요소들입니다. 1. next로 만든 패키지 (app router 로 구성할 예정) 2. 구글 스프레드 시트 3. 구글 스프레드 시트 next 패키지 연동 목차 1. next 프로젝트 만들기 2. next 다국어 기초 프로젝트 셋팅 3. 구글 스프레드 시트 연동하기 4. 구글 스프레드 시트 next 프로젝트 연결하기 1. 프로젝트 생성하기 2. 다국어 관련 라이브러리 설치 yarn add i18next react-i18next

빵부스러기 2024.02.27

[빵부스러기] next.js 로 다국어 페이지 구현하기 0

개요 클론 코딩 하기 좋은 소재 중 하나로 애플 페이지가 있습니다. 애플 페이지를 보면 다양한 언어를 지원하는 걸 볼 수 있습니다. 다국어 페이지를 도메인으로 제공하는 방법은 크게 두가지가 있습니다. url은 아래와 같이 분리할 수 있습니다. ex) www.appple.com/kr [서브도메인].[도메인]/[path] Loading... q1.quotes.com 1. 서브 도메인으로 페이지를 분리 ex) kr.apple.com 2. path 로 페이지를 분리 apple.com/kr 1번의 예시는 아래의 사이트로 확인할 수 있습니다. https://ko.duolingo.com/ 무료로 외국어를 배우세요. 게임을 통해 영어를 비롯한 다양한 언어를 배워보세요. 100% 무료로 제공되는, 게임처럼 재미있고 과학..

빵부스러기 2024.02.27

[빵부스러기] <a> 태그 target="_blank"

`target="_blank"` 및 기타 옵션 _blank: 이 옵션은 링크를 클릭했을 때, 새 탭이나 창에서 해당 URL을 엽니다. 링크된 리소스가 현재 탭이나 창과는 독립적인 경우에 주로 사용됩니다. _self (기본값): 링크된 문서를 현재 창이나 탭에서 엽니다. _parent: 링크된 문서를 부모 프레임에서 엽니다. 현재 페이지가 프레임 내에 있지 않은 경우, 이 옵션은 `_self`와 동일하게 작동합니다. _top: 링크된 문서를 현재 창의 최상위 프레임에서 엽니다. 여러 계층의 프레임이 있는 경우, 모든 프레임을 무시하고 최상위에서 문서를 엽니다.

빵부스러기 2024.02.09

[TypeScript] 셀렉트 버튼 외부를 클릭했을 때, 이벤트 감지하는 방법

import { useState } from "react" const Button = () => { const [isOpen, setOpen] = useState(false) const handleOpen = () => { setOpen(!isOpen) } return ( {isOpen ? "열렸다" : "닫혔다"} ) } export default Button 외부에서 클릭하는 걸 감지 하고 싶다면? useRef 사용하기! import { useEffect, useRef, useState } from "react" const Button = () => { const [isOpen, setOpen] = useState(false) const ref = useRef(null) const handleOpen..

빵부스러기 2024.02.07

[TypeScript 오류] 양방향 import 오류 - Dependency cycle detected. eslint(import/no-cycle)

파일 구조 📦redux ┣ 📂slice ┃ ┗ 📜authSlice.ts ┣ 📜provider.tsx ┗ 📜store.ts 문제가 된 부분 // authSlice.ts import { RootState } from '../store'; ``` //store.ts import authReducer from './slice/authSlice'; 오류 문구 Dependency cycle detected. eslint(import/no-cycle) 오류 원인 서로가 서로를 import하고 있어서 순환 의존성 문제가 생겼습니다 (의존성이 순환적으로 참조) 모듈 로더가 해당 모듈의 로딩 순서를 결정할 수 없게 되어 예측 불가능한 결과 / 런타임 오류 유발하게 됩니다 (성능에 악영향을 끼침) 그래서 해당 규칙을 설정 ..

빵부스러기 2024.02.06

[React] Cannot import type declaration files. Consider importing '[파일이름]' instead of '@types/[파일이름]'.ts(6137) - @types 경로 오류

결론 부터 보기! 오류 원인 및 해결 방법: 오류 원인: @types라는 경로는 node_modules에 있는 @types 를 가져오려고 하기 때문에 발생합니다. 해결방법: @types 라는 경로 대신 다른 경로로 임포트를 해주면 됩니다. ex) src/types , ../../ 상대 경로 등등 참조 링크: https://stackoverflow.com/questions/61308006/how-to-correctly-import-custom-types-in-typescript How to correctly import custom types in typescript I have custom type in src/@types/app.d.ts ( export type AuthKeyT = string ) I ..

빵부스러기 2024.01.29

[빵 부스러기] React 폰트 적용

목차 - pretendard 다운로드 링크 - otf ? woff 차이? - weight 별 매칭 [pretendard] https://cactus.tistory.com/306 Pretendard Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는 cactus.tistory.com weight 별 매칭 900 - black 800 -extrabold 700 -bold 600 -semibold 500 -medium 400 -regular 300 -light 200 -extralight 100 -..

빵부스러기 2024.01.26