분류 전체보기 192

[React x Typescript] Route 관련 에러...<Uncaught Error: useRoutes() may be used only in the context of a <Router> component>

하나 해결하면 하나 안되고 하나 해결하면 여러 개 안되고 돌아버리겠습니다요... 리액트에서 타입스크립트 넘어가는거 쉽지 않네요... 휴 에러1_Uncaught Error: useRoutes() may be used only in the context of a component :: 응 그냥 로 안 감싸서 그랬다 이거야.... //index.tsx import React from 'react'; import {createRoot} from 'react-dom/client'; import {BrowserRouter} from 'react-router-dom'; import './index.css'; import App from './App'; const rootElement = document.getElem..

[230607] Proxy

Proxy 클라이언트에서 서버로 접속할 때 직접 접속하지 않도록 "중간에서" 대신 전달하는 서버입니다. = 중개 서버 역할 >> 왜 굳이 Proxy 서버가 중간에서 중개역할을 하는 건가요? _[1] 캐시 수행 Proxy 서버에서는 서버로부터 응답받은 내용을 Proxy 서버의 캐시에 저장합니다. 클라이언트에서도 동일한 내용을 요청할 때 Proxy 서버는 캐시에 저장해두었던 응답을 반환할 수 있습니다. * 불필요한 네트워크 요청 ↓ * 속도 ↑ _[2] 보안 기능 수행 클라이언트의 IP를 감출 수 았고 서버로부터 오는 응답을 가려줄 수 있습니다. * 보안 기능 수행 Proxy로 api 데이터 받아서 뿌리기 과제를 하다가 api2 에서 데이터를 받아와서 뿌리는 것 까지는 "삼항 연산자"를 사용해서 컴포넌트를 ..

[React x Typescript] App.tsx, Index.tsx 설정하는 방법

React 프로젝트에 Typescript 사용할 때 App.tsx와 index.tsx을 설정하는 방법에 대해서 정리합니다. *App.tsx import './App.css'; const App: React.FC = () => { //{: React.FC는 없어도 잘 동작합니다. } return ( MAIN ); } export default App; 그렇다면 React.FC 는 무슨 역할을 하는 친구일까요?? > **FC** 라는 제네릭 타입을 이용하여 함수형 컴포넌트들이 타입스크립트로 작성 할 수 있게 해주는 역할을 합니다. 잠깐.. 근데 이젠 더이상 " React.FC " 를 사용하지 않는다구요..? :: 참고 - React.FC를 사용하지 않는 이유 > 굳이 React.FC를 쓰는 것보다 props..

[230605] CI/CD + 깃 액션

개발 및 유지보수 단계 Plan - Code - Build - Test - Release - Deploy - Operate - Plan - ... Chapter 1 . CI/CD CI/CD 는 파이프라인으로 표현되는 실제 프로세스를 의미하고 애플리케이션 개발에 지속적인 자동화 및 지속적인 모니터링을 추가하는 것을 의미합니다. 다만 이 용어들은 사례별로 CI/CD파이프라인에 구현된 자동화 수준 정도에 따라 그 의미가 달라집니다만 대부분의 기업에서는 " CI " 먼저 추가 후 클라우드 네이티브 애플리케이션의 일부로서 "CD " 배포 및 개발 자동화를 구현해 나갑니다. [1] CI : 개발자를 위한 자동화 프로레스인 지속적인 통합 * Continuous Integration * 개발자를 위한 자동화 프로세스 ..

가제: 감성 프로젝트 - 작업 2 깃 merge충돌

팀원들과 깃 PR을 올리다가 역시나 충돌 대환장 파티 내꺼는 컴포넌트 단위로 올려서 충돌 나는 부분이 없었는데 갓 댐... 전체 파일로 PR제출 하신 두 분이 충돌이 나 버렸다. 어제 그니까 30일 화요일 스터디 당시에는 도저히 제 시간 안에 해결 할 수 없을 거 ㅅ같아 잠시 보류 하고 다른 작업을 했다. 30일 진행 한 작업 1. figma전체 디자인 수정 작업 완료 2. 각자 PR한 부분 코드 리뷰 및 답변하기 + 기능 구상 31일오늘 시간을 내어 충돌 난 부분을 해결 하기 위해 검색을 해봄... 우선.. 휴.. 음 간단하게 git fetch 쓰면 되지 않을까 했는데 git remote된게 아니고 이 터미널로 연결 된 작엄이 내 레포지토리와 연결 된거라서 공용 레포지토리의 작업물을 받아 오는게 불가했..

[230531]TypeScript 찍먹 2

> Enum : 열거형 - 특정 값의 집합을 정의할 때 사용됩니다. (문자형 과 숫자형에서 사용) # 숫자형 열거형은 "상수값"을 대신하여 사용되므로 타입스크립트에서 많이 사용됩니다. - 코드의 가독성을 높이고 오타와 같은 실수를 방지해줍니다. # 문자형 열거형은 주로 외부에서 가져온 값을 타입스크립트에서 다루기 위해서 사용됩니다. - Ex. HTTP요청 방식을 나타내는 열거형 정의 - 코드의 가독성을 높이고 오타와 같은 실수를 방지해줍니다. enum HttpMethod { Get = 'GET', Post = 'POST', Get = 'PUT', Get = 'DELETE', } * Reverse mappings: 역 매핑이라고 ' 숫자형 열거형'에서 역으로 key 값을 이용해서 value를 얻거나 반대로..

카테고리 없음 2023.05.31

[230530] Typescript찍먹 + 환경 설정 세팅

분명 작년에 프론트 엔드 공고를 볼 때는 타입스크립트는 우대사항에 있었던 것 같은데 최근에 공고들에서는 타입스크립트가 자격 요건에 들어가 있는 공고들이 많았습니다. 그래서 그런지 코스에서도 타입스크립트가 추가되었고 이왕 배우는거 제대로 배우고자 스터디도 시작했습니다. 주말마다 인터넷에 있는 다양한 무료 강의 와 자료집을 우선 훑고 '이펙티브 타입스크립트'와 함께 공부할 예정입니다. 가능하다면 만들어두었던 프로젝트를 타입스크립트로 리펙토링 해보는 것도 좋을 것 같아요. 기본 타입스크립트 환경 설정 # mkdir typescript-project 을 통해 새로운 폴더에 프로젝트를 생성한 후 # npm init -y 으로 npm 초기화를 통해 package.json파일을 생성합니다. (npm init -y을 ..

[가제: 감성 프로젝트] 1차 기간 기록 중

기간 : 1.5월 18일 목요일 시작 : 4명의 팀원 주제 및 만들고 싶은 사이트 정하기 테마 어림 잡아 정하기 *5/21 : 팀원 한명 의견 불일치로 탈퇴 2.5월 23일 화요일 디자인 수정 회의 + 피그마 작업 : 메인 / 로그인 페이지 작업 시작하기 : 기능 분배 * 목표 각자 맡은 업무 80% 정도 완료해오기 * hj : 로그인 페이지 + sso * jy : 푸터 + 플레이 리스트 ui 컴포넌트 * me : header + article ui 컴포넌트 # 05.30 [1]깃을 통해 pr 작업을 시도하려던 중 , header 브랜치를 먼저 만들기 이후에 structure 브랜치를 만들고 거기서 작업을 하다가 pages를 폴더를 만들고 여기서 pr 을 한뒤 다시 header브랜치로 돌아가니 만들어 두..

*작성중* JavaScript 순열 & 조합 알고리즘

조합 : nCk 주어진 배열의 서로 다른 n 개의 요소에서 순서를 생각하지 않고 k 개를 선택하는 조합. 중복을 허용하지 않습니다. const arr = [ 1, 2, 3, 4 ]; 3개를 선택하는 조합의 결과물 : [1, 2, 3], [1, 2, 4], [2, 3, 4], [1, 3, 4] 주어진 배열의 요소들을 이용해서 조건에 맞는 배열들을 얼마나 만들 수 있는가 #프로그래머스 LV01: 예산 https://velog.io/@devjade/JavaScript%EB%A1%9C-%EC%88%9C%EC%97%B4%EA%B3%BC-%EC%A1%B0%ED%95%A9-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 JavaScr..

[230523] 중간 회고 : 여름을 맞으면서 다시금 각오를 다진다.

꽤 오랜만에 블로그 글을 쓰는 것 같습니다. 꽤나 해이해진 것도 있지만 프로젝트 이것 저것 벌여놓은 일을 수습하느라 블로그 글을 정리할 시간이 없었다는 것도 맞는 말이겠지요.. 저는 여름을 정말 정말 좋아합니다. 다른 어떤 계절보다 제일 좋아합니다. 여름에만 E 성향으로 바뀌는 걸지도 모릅니다. 밀린 업보들을 매 회고 마다 청산하겠다고 하지만 정작 제대로 된 것은 하나도 없습니다. 빨리 취업하고 싶은 마음에 내가 잘못 된 길을 선택한 건 아닐까.. 라는 걱정이 들지만 사실 이러한 걱정은 이전 회사에서의 업무들을 생각하면 다시 음 아냐.. 아주 잘 한 선택이었지라는 결론을 내리게 됩니다. 저는 성격이 좀 급합니다. 이게 빨리빨리 해야 된다는 의미이기보다 내가 모르는 것이 있는 상태가 싫습니다. 문제를 풀 ..