티스토리

개발 기억저장소

검색하기

블로그 홈

개발 기억저장소

bsu0404.tistory.com/m

슈크림 붕어빵 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

함수형프로그래밍과 React 보호되어 있는 글입니다. 공감수 0 댓글수 0 2025. 5. 6.
Suspense와 Next.js의 ssr 보호되어 있는 글입니다. 공감수 0 댓글수 0 2025. 2. 4.
react 얕은 비교 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 7. 24.
소셜 로그인 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 5. 22.
OSI 7계층 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 4. 5.
[CI/CD] 쿠버네티스 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 4. 5.
[CI/CD] 도커 이미지 만들기 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 4. 1.
[CI/CD] 이미지 생성 자동화 - 실패 / 궁금한 점 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 4. 1.
[CI/CD] Docker를 사용하여 Apache 웹 서버 실행 / 사용자 정의 페이지 만들고 이미지 생성 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 4. 1.
[CI/CD] 웹 개발 파이프라인 구축 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 3. 29.
[CI/CD] 17-3 CI/CD란? 중요성 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 3. 29.
Dynamic Programing (동적 계획법) 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 3. 28.
BE 구조 설계서, 데이터베이스 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 3. 27.
웹 기반 문서 편집기 제작 시작 프로젝트 React와 Express를 이용하여 프로젝트를 할 것 이 개발보다는 실제 사용을 염두에 둔 서비스를 개발 및 통합 (빌드, 테스트, 배포)하는 과정을 자동화 파이프라인으로 구축할 것이다. CI/CD 파이프라인 구축 기법은 중점이 x 개발환경과 프로덕션 환경의 차이를 염두에 둔 프로그래밍 풀 사이클 경험 테스트 자동화 및 배포 프로세스에 무게 백엔드 Express.js mariaDB 프론트엔드 React.js 프로덕션 AWS, Kubernetes, Minikube Jenkins, Terraform, Selemium 최종 배포 환경은 AWS위 ec2인스턴스에 minikube를 이용해 구성한 작은 원격 클러스터이나 개발단계에서 테스트를 위해서 테스트용 클러스터 - docker desktop으로 구성.. 공감수 0 댓글수 0 2024. 3. 27.
Greedy 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 3. 22.
오픈소스 기여, github pr에서 이슈 연결 오픈소스란? 오픈소스란 누구나 자유롭게 접근하고, 수정하고, 배포할 수 있는 소스코드를 말한다. 오픈 소스 기여를 위한 사전 지식 markdown git - 소스코드 버전 관리 시스템(VCS - version control system) 도구 ( git add, git clone ,,,) github - 분산 버전 관리 툴인 깃을 사용하는 프로젝트를 지원하는 웹호스팅 서비스 ( fork, issue, pr ,,,) 오픈소스에 기여하기 1. 기여하고싶은 오픈소스 포크 2. 클론한 뒤 브랜치를 만들어 수정 3. 로컬에 push 4. 컨벤션을 지켜서 pr 날리기 오픈 소스 기여 실습 - mdn mdn / content와 mdn / translated-content 기여자 참고 문서 참조 1. 위 두 repo를.. 공감수 0 댓글수 1 2024. 3. 18.
[그래프 탐색] BFS BFS(Breadth-First Search) - 너비 우선 탐색 queue - 선입 선출 (FIFO - First In First Out) 작동 방식 시작 노드를 큐에 넣는다. 큐가 빌 때까지 아래과정을 반복한다. 큐 맨 위 노드를 꺼낸다. 해당 노드 방문 여부 체크 => 했다면 패스 방문 안했다면, 이를 방문 처리 후 해당 정점과 이어진 정점들을 큐에 넣는다. 예시 1 경로 스택 / 큐 예시 2 경로 스택 / 큐 코드 const bfs = (startNode) => { let visited = new Set(); let needVisit = [startNode]; //큐역할 let results = []; while (needVisit.length) { let node = needVisit.shift.. 공감수 0 댓글수 0 2024. 3. 18.
멘토링 - 리액트 코드 클린하게 작성하기 / pure redux 1. constant 객체는 빼는 것이 좋다. 데이터가 업데이트가 되지 않는다면 이처럼 바깥으로 빼주는 것이 좋다. 2. state를 불필요하게 너무 많이 사용하지 말 것 3. useState에 함수를 넘길 때 => useState가 익명함수로 쓴다면 비동기적으로 작동할 수 있다. => 함수를 한 번 감싸준다면 리렌더링될 때마다 실행되지 않는다. 4. 상태변경시에도 리렌더링을 방지하기 => useRef 사용하기 상태가 변경되었어도 리렌더링 방지를 한다. 마운트 되었을때만 5. 꼭 해줘야하는 처리 로딩 에러 빈페이지 새롭게 시작하는 곳이면 redux를 사용하지는 않지만, 새롭게 나오는 것들도 redux에서 파생된 것이 많으므로 공부하는 것을 .. 공감수 0 댓글수 0 2024. 3. 8.
DFS 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 3. 7.
useSearchParams, URLSearchParams, locaton (with 카테고리 동기화) 수정할 부분: 사진 업로드하기 (필요한 이유에) 필요한 이유 맨 위 카테고리와 중간의 컨텐츠 부분 두 군데서 카테고리를 설정할 수 있다. 이럴 때, 두 카테고리를 동기화하고, 활성화된 카테고리를 관리하여 활성화된 색을 보여주도록 할 것이다. react-router-dom에서 제공하는 location과 useSearchParams를 사용할 것이다. 1. useSearchParams react-router-dom 패키지에서 제공되는 훅으로, 현재 URL의 쿼리 문자열을 읽고 쓰기 위해 사용 const [searchParams, setSearchParams] = useSearchParams(); 참고로 url 쿼리 문자열을 읽기만 할 때는 다음도 가능하다. const params = new URLSearchP.. 공감수 0 댓글수 0 2024. 3. 3.
api 요청 플로우 , params 처리 View => 화면에 데이터 사용 Hooks => api마다 가공 및 useEffect등 설정 Fecher => api 통신 요약해보면 위와 같다. 다음으로 api 로직 예시와 여러가지 params를 붙여 api 통신을 하는 경우를 살펴보겠다. api 로직 예시 axios를 이용해서 api를 요청해보겠다. npm i axios --save component/ common/ header.tsx const { category } = useCategory(); => hook과 연결하는 부분 , category 받아와서 화면에 사용 hooks/ useCategory.ts import { useEffect, useState } from "react"; import { fetchCategory } from ".... 공감수 0 댓글수 0 2024. 3. 1.
화면 테스트하기 @testing-library/react를 통해 테스트를 할 수 있다. render와 expect를 이용한다. npm test 명령어를 통해 만들어둔 "컴포넌트".spec.tsc를 검사할 수 있다. 예시 Button.spec.tsx import { render, screen } from "@testing-library/react"; import Button from "./Button"; import { BookStoreProvider } from "../../context/themeContext"; describe("button 컴포넌트 테스트", () => { it("렌더 확인", () => { // 1. 렌더하기 render( 버튼 ); // 2. 확인 expect(screen.getByText("버.. 공감수 0 댓글수 0 2024. 3. 1.
다크모드 만들기 themeContext.tsx import { ReactNode, createContext, useEffect, useState } from "react"; import { ThemeName, getTheme } from "../style/theme"; import { ThemeProvider } from "styled-components"; import { GlobalStyle } from "../style/global"; const DEFAULT_THEME_NAME = "light"; const THEME_LOVALSTORAGE_KEY = "book_store_theme"; // 테마상태와 토글 함수 interface 정의 interface State { themeName: ThemeName; tog.. 공감수 0 댓글수 0 2024. 2. 29.
[최단경로] 다익스트라 최단 거리를 구하는 알고리즘 조건 가중치가 모두 양수 다익스트라 알고리즘은 그리디 기반의 알고리즘으로 최소 거리에 최소 거리를 붙여가면 최종적으로 길을 찾기 때문에 음수 가중치는 고려하지 못한다. 의사 코드 for each vertex v: dist [v] = ∞ prev [v] = none dist [source] = 0 set all vertices to unexplored while destination not explored: v = least-valued unexplored vertex set v to explored for each edge (V, w): if dist[v] + len (v, w) < dist[w]: dist [w] = dist[v] + len (V, w) prev [w] = .. 공감수 0 댓글수 0 2024. 2. 27.
데브코스 15주차 - [bookstore] Day3 초기설정, 폴더 구조, 레이아웃 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 2. 25.
데브코스 14주차 - 오픈소스 / 오픈소스 라이선스 🎈오픈소스란? 누구나 특별한 제한 없이 공개되어있는 소스코드 + 리뷰, 수정 등 개선사항을 마음껏 펼칠 수 있다. OSI - 오픈소스 소프트웨어 인증마크를 달고 인증해주는 비영리 조직 🎈오픈 소스 라이선스란? (OSI - open source initiative) 오픈소스로 배포/준비/ 공개된 소스코드를 사용할 때 지켜야하는 규칙을 명시하는 것 🎈오픈 소스 라이선스 종류 - OLIS 사이트 참고할 수 있다. (한국어) 1. GPL (GNU General Public License) Free Software Foundation(자유 소프트웨어 재단)에서 만들었다. 의무사항이 강력한 편이다. => "어떤 목적으로, 어떤 형태로든 사용할 수 있지만, 사용/배포하는 경우엔 무조건 공개" 소프트웨어 유통을 활성화.. 공감수 1 댓글수 0 2024. 2. 21.
데브코스 13주차 Day3, 4 - contextAPI, Redux / node.js와 연동 및 배포 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 2. 18.
데브코스 13주차 Day2 - useParams ,styled-component, 컴포넌트 생명주기, useEffect, cleanup function 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 2. 17.
데브코스 13주차 Day1 - [react/typescript] 프로젝트 생성 및 초기 설정 - 라우팅/bootstrap 목차 [심화과정] 레이아웃 import / export 반복루틴 - 컴포넌트 map 라우팅 styled - components useEffect, Hook 서버와의 통신 Ajax Context API 리덕스 타입 스크립트 기반으로 리액트 프로젝트 생성하기 1. 리액트 프로젝트 생성 npx create-react-app . --template typescript 번외로 파일이 node_modules,package.json, yarn.lock 이것밖에 안생겨서 문제찾는데 한참 걸렸다 ㅜㅜ 알고보니 용량 부족 ㅎㅎ,, 참고 디렉토리를 .으로 하면 해당 폴더에 생성된다. 2. 부트스트랩 설치 & 적용 https://react-bootstrap.netlify.app/ React Bootstrap | React B.. 공감수 0 댓글수 0 2024. 2. 15.
데브코스 12주차 Day5 - [mini diary] 조건문, 반복문 in react 조건문 리액트의 html영역 안에서는 if ~else문을 사용할 수 없다. 삼항연산자의 사용은 가능하다. {post.detail === true ? : null} 반복문 리액트에서 jsx안에서는 for문을 사용할 수 없다. map을 사용하면 된다. {post.map((post, idx) => { return ( {post.date} { handleDetail(idx); }} > {post.title}{" "} { handleLike(idx); }} > 👍 {post.like} { handleDelete(idx); }} > 삭제 {post.detail === true ? : null} ); })} post 배열에 데이터 추가하기 const handleSubmit = (title: string, conten.. 공감수 0 댓글수 0 2024. 2. 15.

문의안내

티스토리
로그인
고객센터

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