문미새 개발일지

JavaScript에서 Promise와 async/await는 비동기 처리를 관리하는 방식이다.두 방식 모두 비동기 작업의 결과를 처리하는 데 사용되지만, 문법과 사용 방식에서 차이가 있다. PromisePromise는 비동기 작업이 완료되었을 때 결과를 처리하는 객체이며, Promise는 세 가지 상태를 가질 수 있다.Pending(대기): 비동기 작업이 아직 완료되지 않은 상태Fulfilled(이행): 비동기 작업이 성공적으로 완료된 상태Rejected(거부): 비동기 작업이 실패한 상태Promise를 사용할 때는 주로 .then(), .catch(), .finally() 메서드를 사용하여 비동기 작업이 완료되었을 때의 처리 로직을 작성한다.const myPromise = new Promise((re..

HTML(HyperText Markup Language)과 XHTML(eXtensible HyperText Markup Language)은 웹 페이지를 만들기 위해 사용되는 마크업 언어이다. 1. 문법 및 구조HTML:HTML은 비교적 유연한 문법을 가지고 있다.태그와 속성의 대소문자 구분이 없다.예: 와 는 동일하게 인식이나 같은 태그는 태그가 닫히지 않아도 사용할 수 있다.속성 값은 꼭 따옴표로 묶지 않아도 된다.예: XHTML:XHTML은 XML 기반이므로 엄격한 문법을 따른다.태그와 속성의 대소문자를 구분한다.예: 와 는 다르게 인식 .이나 같은 태그도 동일하게 태그가 닫혀야 한다.모든 속성 값은 반드시 따옴표로 묶여야 한다.예: . 2. 호환성 및 확장성HTML:브라우저가 잘못된 HTML도 ..

Flexbox와 Grid는 CSS 레이아웃을 구성하는 주요 css로, 각각 다른 목적으로 사용한다.FlexboxFlexbox는 일차원 레이아웃 모델로, 주로 한 방향(행 또는 열)으로 아이템들을 정렬하는 데 사용된다.Flexbox는 요소 간의 공간 분배와 정렬을 쉽게 할 수 있게 해준다.주요 개념 및 속성컨테이너와 아이템: Flexbox 레이아웃은 flex 컨테이너와 그 안에 포함된 flex 아이템으로 구성된다.주 축과 교차 축: 주 축(main axis)은 flex 아이템이 배치되는 기본 방향(수평 또는 수직)이며, 교차 축(cross axis)은 주 축과 수직인 방향이다.flex-direction: flex 아이템의 배치 방향을 설정한다.row (기본값): 수평으로 배치row-reverse: 수평으로..

코딩알려주는누나 메세지전송 강의 : https://www.youtube.com/watch?v=pRGOEtGjI-k&t=0s 이전 학습내용:https://moonmisae-cdpt.tistory.com/211 웹 소켓(Web Socket) 채팅 앱 만들기 - 유저 로그인코딩알려주는누나 웹소켓 강의 : https://www.youtube.com/watch?v=oFiw5VvgRFg&t=0s 이전 학습 내용:https://moonmisae-cdpt.tistory.com/209 웹 소켓(Web Socket) 채팅 앱 만들기 - 클라이언트 서버 연결유튜브의 코딩알려moonmisae-cdpt.tistory.com이전 강의에선 유저 이름을 넘겨 서버에서 유저 정보를 응답해주고 useState를 이용해 값을 받아놓기까지..

코딩알려주는누나 웹소켓 강의 : https://www.youtube.com/watch?v=oFiw5VvgRFg&t=0s 이전 학습 내용:https://moonmisae-cdpt.tistory.com/209 웹 소켓(Web Socket) 채팅 앱 만들기 - 클라이언트 서버 연결유튜브의 코딩알려주는누나 영상에서 채팅앱을 만드는 강의를 듣고 작성한다. 코딩알려주는누나 강의 영상: https://www.youtube.com/watch?v=uE9Ncr6qInQ웹 소켓(WebSocket)웹 상에서 양방향 통신을 가능하게moonmisae-cdpt.tistory.com다음 학습 내용:https://moonmisae-cdpt.tistory.com/212 웹 소켓(Web Socket) 채팅 앱 만들기 - 메세지 전송코딩알..

유튜브의 코딩알려주는누나 영상에서 채팅앱을 만드는 강의를 듣고 작성한다. 코딩알려주는누나 강의 영상: https://www.youtube.com/watch?v=uE9Ncr6qInQ 다음 게시글 :https://moonmisae-cdpt.tistory.com/211 웹 소켓(Web Socket) 채팅 앱 만들기 - 유저 로그인코딩알려주는누나 웹소켓 강의 : https://www.youtube.com/watch?v=oFiw5VvgRFg&t=0s 이전 학습 내용:https://moonmisae-cdpt.tistory.com/209 웹 소켓(Web Socket) 채팅 앱 만들기 - 클라이언트 서버 연결유튜브의 코딩알려moonmisae-cdpt.tistory.com웹 소켓(WebSocket)웹 상에서 양방향 통신..

- js에서 getElementById, querySelector와 같은 DOM SELECTOR 함수처럼 - React에서 DOM에 접근하게 되는 일이 생긴다면 접근하게 해주는 Hooks 함수 - ref 객체 내부의 값은 render와 상관없이 유지된다(리랜더링 하지 않는다) onClick이라는 속성의 태그 내에 "=" 표시가 있으면 무조건 속성은 속성값입니다 값에 대한 함수를 넣어줍니다 - Memo는 Memoization이며 기존에 수행한 연산의 결과값을 저장했다가 같은 입력이 오면 재활용하는 프로그래밍 기법입니다 - 연산된 값(결과)를 반환하여 랜더링 되었을 때 재사용할 수 있도록 해주는 Hooks 함수 - 컴포넌트의 성능을 최적화 시킬 수 있습니다 useM..

if문 만큼 많이 사용되는 것들이 - map - find - filter 가 있습니다 백엔드를 받아오는 데이터의 형식은 대부분이 배열인 경우가 많습니다. 따라서 이러한 배열들을 화면에 보여주기 위해 사용하는 함수들입니다. (그래서 배열일 경우에만 사용이 가능하다) 1. map [반복문, 한줄 씩 읽어오는 것] => 주로 배열의 길이만큼 반복할 때 사용 ex) 배열명.map((결과값 변수명) => ( 실행문 )) ex) 실행문의 경우 state.map((item) => console.log(item.id)) (id만 넣었으므로 name은 안오고 id값 1,2,3 만 들어온다) ex) HTML 반복의 경우 state.map((item) = ( )) (백엔드의 데이터를 가져올때 데이터가 배열로 오기 때문에 데..