IT LAB

1. useInput useState 의 기능을 활용하여 email, password 등의 입력란에 값이 적혀질 경우 렌더링 되도록 useCallback 함수로 메모이제이션한 handler 함수를 리턴하는 hooks를 정의함 input 태그의 onChange 속성에 대입하여 사용함 type ReturnTypes = [T, (e: ChangeEvent) => void, Dispatch]; const useInput = (initialData: T): ReturnTypes => { const [value, setValue] = useState(initialData); const handler = useCallback((e: ChangeEvent) => { setValue((e.target.value as u..

1. login SWR 원격상태와 (리액트의) 로컬상태를 하나로 통합해주는 모듈 적절한 타이밍에 지속적으로 원격서버에 데이터를 fetch하므로 최신데이터가 갱신됨 또한 컴포넌트간 swr의 키값이 같을경우 캐싱된 값을 전달하므로 데이터의 전역적인 공유가 가능해짐 프로젝트에서는 로그인 성공시 validate() 함수를 호출하여 swr이 서버에 사용자정보를 로그인 과정에서 인증에 성공한 이메일을 가지고 사용자 정보를 요청하게 된다 사용자 정보 요청이 성공하게 될 경우 localStorage 에 성공 이메일을 저장하고 다른 컴포넌트에서 해당 이메일을 가져와 사용자정보를 swr로 요청함 이러한 경우 요청한 사용자 정보의 데이터가 일치하면 캐싱된 데이터만 반환하므로 트래픽 과중에 대한 우려가 사라지게 됨 Login..

1. layouts 트리 구조 ├── App.tsx └── messenger ├── index.tsx └── styles.tsx Client.tsx render( , document.querySelector('#app') ); App.tsx const App = () => { return ( ); }; Client.tsx에서 내부 로직으로 사용될 App.tsx이다 BrowserRouter가 감싸고 있으며 이를 통해 URL과 UI가 동기화되도록 하는 라우터이다 Switch : Route로 생성된 자식컴포넌트중 매칭되는 첫번째 Route를 렌더링해줌 Redirect : 요청 경로를 다른 경로로 리다이렉션함 Route : 컴포넌트에 path 속성을 이용하여 원하는 url을 지정함 Messenger const ..

플랫폼 API 서버에 채팅 기능을 확인해보기 위해 프론트를 구현하였다. 저는 백엔드만 해오다가 토이프로젝트에 프론트가 필요해서 하게 되었는데 처음이라 발등에 불이 떨어져 해보게 되었다. 코딩하는데 생활코딩과 인프런에 올라와있는 조현영님의 slack clone강의를 많이 참고하였다. 프론트에서는 설정할게 많은것 같다. 실제 강의에서도 설정이 힘들다 하셨고 따라하는데 한참걸렸다.. (하지만 되니까 기분은 좋네 ㅎ) 아무튼 짧은 실력이지만 최대한 꼼꼼히 포스팅 해봐야겠다 1. 프론트엔드 초기 세팅하기 설치 모듈 프로젝트에서는 typescript를 사용할 것이다. react, react-dom typescript, @Types/react, @Types/react-dom package-lock.json 모듈들이 ..

이제 서버에서 클라이언트에게 STOMP 연결을 할 수 있도록 핸드쉐이크 endpoint, messageBroker의 pub 및 sub prefix를 설정해 주어야 한다. 해당 설정은 스프링에서 설정하기에 매우 쉽다. 하지만 개념을 알아야 요구사항에 따른 구현이 가능하므로 일단 개념부터 잡아보자 1. Websocket 웹소켓 소개 http는 tcp/ip 기반 비연결지향 프로토콜과 대비 websocket 프로토콜(RFC6455) - 연결지향(연결을 끊지 않음), 양방향통신(클라이언트 서버) 서버와 클라이언트가 지속적으로 TCP 라인을 통해 연결되어 양방향 통신이 가능하게 됨 소켓이 유지되는데 동의할 수 있도록 소켓을 수정함 http header의 keep-alive 속성의 값이 계속되도록 설정되어있음 HTT..

1번에서 entity 객체를 만들었으니 이제 chatroom controller 를 만들겠습니다. 생성, 정보 요청, 리스트 전달 등의 1. 채팅방 생성 기본적으로 DM은 1:1 채팅방으로 구현되었습니다. (인스타그램, 페이스북 메신저를 따라 만들려고 하였습니다) 1. 개인 DM 을 위한 방 생성 인스타그램이나 페이스북 처럼 해당 사용자에게 DM을 보내고자 할 경우, 프로필에 가서 "사용자와 채팅" 버튼 누르기 "사용자와 채팅" 버튼을 누를 시, roomMakerId는 누른 사람의 Id이고, guestId는 해당 프로필 계정의 Id입니다. 채팅방을 먼저 생성한 후, 사용자들을 해당 채팅방의 Member로 저장합니다. @PostMapping("/personal") // 개인 DM방 생성 public Hcs..

이번에 하는 토이프로젝트에서 DM 기능을 구현하는 파트를 맡게 되었다. 약 한달간 일정을 소모하여 여기저기서 찾아보고 강의도 들어가며 구현은 어느정도 완성이 되었다. 해당 토이프로젝트는 JPA를 사용하였으나 동작원리를 공부하고자 DDL은 직접 생성하였다. (도메인 파트별로 sql문 있음) 일단 도메인 객체 디자인부터 0. ERD Diagram 진한 글씨는 PK 테이블간 선으로 연결된 컬럼은 FK many to many : (ChatRoom - ChatRoom_Members - User) 1. ChatRoom @Data @Entity @Table(name = "ChatRoom") @DynamicUpdate @Builder @EqualsAndHashCode(onlyExplicitlyIncluded = tru..

1. 쉘 커널과 사용자간의 다리역할. 명령을 해석하여 프로그램을 실행함. 커널과 분리된 프로그램이며 종류가 많음. - 가지고 있는 쉘 확인 : $SHELL, chsh -l, cat /etc/shells - 쉘의 변경 : ' chsh -s /bin/바꿀 쉘 "사용자이름" ' 2. 환경설정 환경변수 HOME : 홈 디렉터리 PATH : 실행파일을 찾는 경로 LANG : 기본 셸 언어 TERM : 로그인한 터미널 PWD : 현재 경로 SHELL : 로그인 셸 USER : 사용자명 PS1 : 프롬프트 변수 MAIL : 도착한 메일이 저장되는 경로 UID : 사용자ID 주요 환경변수 \d : 요일, 월, 일 형태로 날씨 출력 \h : 호스트 이름 \s : 사용중인 셸 시간 \t : 24시간 형태 현재 시간 출력 ..

1. 파일 시스템 운엥체제가 파티션, 디스크 등 데이터를 읽고 쓰는 일련의 체제 파일 백업 및 복구 가능. 적절한 이동 필요. 인터페이스나 명령어 사용가능. 다른사용자와 공유하여 사용가능하며 명령로그를 기록함. 다양한 파일시스템 지원 2. 파일 시스템 구조 파티션 분할하여 포맷하여 파일시스템으로 사용함 부트블록 : 운영체제를 주기억장치에 올리는 역할을 하는 프로그램이 들어있는 영역 슈퍼블록 : 디스크에 대한 다양한 젖ㅇ보를 저장하고 있는 곳. (전체 블록의 수, 블록의 크기, 사용중인 블록의 수 등의 정보 저장) inode 리스트 : inode들을 모아놓은 곳. 한 블록에 여러 개의 inode를 저장함. inode는 파일에 대한 다양한 정보를 저장하는 곳으로 파일마다 하나씩 부여됨. 데이터블록 : 일반적..

1. 하드웨어 인식 단계 BIOS가 하드웨어를 점검하고 부팅 HDD를 점검함. 이후 MBR에 있는 부트 매니저 프로그램 실행하여 운영체제를 시작함. 메모리에 커널이 로드됨. 커널 매개변수를 지정하여 설정 및 변경이 가능함. 커널은 모듈을 사용함. (/etc/modeprobe.conf 파일로 부트 매니저 프로그램에 매개변수값을 바꿀 수 있음.) 2. 소프트웨어 구동 단계 루트파일 시스템을 읽기 전용 형태로 마운트하고 이상이 없으면 읽고 쓰는 형태로 다시 마운트함. 이 때 init 프로세스(/inittab) 생성됨. 해당 init프로세스가 소프트웨어 구동을 레벨별로 위임하여 운영체제를 동작시킴. /etc/inittab : 부팅과 관련된 실행레벨을 정의함. /etc/init/rcS.conf : 시스템 초기화 ..