https://github.com/sjk990515/modalTodo (깃허브 파일 링크) GitHub - sjk990515/modalTodo Contribute to sjk990515/modalTodo development by creating an account on GitHub. github.com 반응형 투두리스트 실행방법 1. 다운로드하신 후 파일로 들어가 터미널을 연 후 npm i 로 필요한 파일을 설치해 줍니다. (사용 기술 : react, typescript, react-query, axios, json-server, styled-components, react-router-dom, styled-reset, uuid) 2. 파일 안에 터미널을 추가로 한 개 더 연 후 하나는 npm star..
SteamPlus 프로젝트 링크 (https://steam-plus-theta.vercel.app/) Steam Plus steam-plus-theta.vercel.app 🏡 아키텍쳐 🎲기술적 의사 결정 사용기술 기술 설명 recoil 리코일은 매우 간단한 코드로 상태를 관리할 수 있습니다. 리덕스와 비교해 상태를 업데이트하기 위해 액션 타입, 액션 생성자, 리듀서를 작성할 필요가 없으며, 상태 업데이트 로직을 작성할 때도 상태 객체 자체를 직접 수정할 수 있었습니다. socket.io Socket.io는 다양한 이벤트를 지원하여 클라이언트에서 서버로 데이터를 전송하고 서버에서 클라이언트로 데이터를 전송할 수 있습니다. 이러한 특징으로 인해, Socket.io는 실시간 채팅기능을 구현하는 데 매우 유용합..
Recoil recoil은 전역으로 state를 조금 더 간편하고 이동할때 다양한 변형을 가능할 수 있게 해주는 라이브러리다. 리코일은 따로 atom.js를 만들어서 전역 state관리에 사용하게 된다. atom은 기본적으로 아래 처럼 atom 선언을 해준 후 키값, 기본값을 사용해 만들게 된다. import { atom } from "recoil"; export const LayoutButton = atom({ key: "Layout", default: "close", }); export const friendAllState = atom({ key: "friendAllState", default: [], }); 아톰에 위와 같이 만들어 준 후 사용법은 간단하게 아래 세가지를 이용해서 활용할 수 있다. ..
친구 검색, 요청, 수락, 내역 / 유저 검색 유저 정보는 { "id": 1 , "nickname": "고양이", "tag" : 1234 } 이런식으로 저장된다. 그리고 친구 검색을 하면 친구 내역에서 제외된 모든 유저중에 검색된다. 거기서 친구 요청을 누르면 { "id": "e579a3db-ab5c-4658-8844-4a16f48cdfcc", "myId": 내아이디, "friendId": 친구아이디, "myNickName": "내 닉네임", "friendNickName": "친구 닉네임" }, 이런식으로 저장이 된다. 이런식으로 한방향 으로만 저장이 돼있다면 filter와 for, if문을 사용해 보낸쪽은 친구 요청 상태로 받는쪽은 친구 요청이 온 상태로 표시되게 하였다. //친구 요청 온 내역 전체 ..
타입스크립트 자바스크립트는 변수를 선언한다음 변수에 string을 넣어도 되고 number,배열등등 모두 들어 갈 수 있다. 타입스크립트는 타입을 지정해 줄 수 있고 자동완성도 다른 언어를 사용할때 처럼 작동해 개발을 편리하게 만들어 준다. 타입 추론이 되어서 오타나 오류가 났을때 빨간 밑줄로 잘못된 부분을 바로 알 수 있다. 사용방법 npm install -g typescript를 사용해 글로벌로 설치해주고 (글로벌이 아니여도 된다.) 만든 프로젝트 안에서 tsc —init을 입력하면 tsconfig.json이 생성된다. // tsconfig.json 파일 module: 컴파일된 코드가 어떤 모듈을 사용할지 정의. target: 컴파일된 코드가 어떤 환경에서 실행될 지 정의. strict: 모든 타입 ..
