MJ.Story

트러블 슈팅 문제: 댓글 수정 삭제 , post작성 후 메인 페이지 랜더링 문제 새로고침을 해야 추가가 되거나 수정이 가능했다. 댓글 수정 부분은 400번대 에러가 있지만 기능은 작동 해결 : post렌더링 문제는 우선 순위의 문제였다 랜더링 과정에서 post값이 렌더링끝나는 부분보다 느리게 오면 랜더링이 되어지지 않았다. PostSlice 파일에서 post 부분에 ThunkAPI.dispatch(__getList()); 를 작성 하여 post연결이 끝나면 요청 순서가 보장되게 한뒤 해결했습니다. 댓글 수정 삭제 부분은 댓글과 수정부분을 컴포넌트를 분리하여 아무생각없이 모든 값을 import해와서 실행하다 보니 쓸데없는 렌더링 부분이 너무 많아 생기는 문제라고 파악하고 수정 컴포넌트에서 실행할 수있는부분..

1. 프로젝트 설명 프로젝트 이름 : MBTI_board 2. 와이어 프레임

Axios란? Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활요하는 HTTP 비동기 통신 라이브러리 입니다. (백엔드와 프론드엔드간에 통신을 위해서 만들어진 AJAX도 더불어 사용하기도 합니다.) 1. Axois의 특징 Axios는 운영환경에 따라서 브라우저간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용한다. Promise(ES6) API를 사용 요청(Request) 응답 (reply)을 JSON 형태로 자동 변경 HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변환 2. Axios 사용법 Axios 다운로드 yarn add axios & npm i axios // 생성한 프로젝트 상단에 import로 추가 import axio..

자바크립트의 동기적 처리와 비동기 처리에 대해 알아보자 만약 작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없습니다. 그리고 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있죠. 하지만 이를 비동기적으로 처리를 한다면 멈추지 않기 떄문에 동시에 여러 가지 작업을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있습니다. function work() { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + 'ms'); } work(); console.log('다음 작업'); 여..

Promise 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리한는 데도 한계가있다 ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다 프로미슨느 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수있다는 장점이 있다 프로미스는 Promise 생성자 함수를 통해 인스턴스화한다. Promies생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 전달받는데 이 콜백 함수는 resolve와 reject함수를 인자로 전달 받는다. promise는 비동기 처리가 성공(fulfilled)하였는지 또는 실..

1. 프로젝트 명 크리스마스에 뭐하니 2. 소개 즐거운 크리스마스 가족,친구,연인들과 정보를 공유하며 행복한 하루를 보내세요 3. 와이어프레임 (FE만 해당) 메인페이지 2. 카테고리별 리스트 3. 작성 / 수정페이지 4.상세페이지 4. API Table API 설계

Q.1 컴포넌트 A는 리덕스 스토어를 구독하고 있습니다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정합니다. 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는 지 흐름을 그려볼까요? (메모장, 사진 등) 리덕스 전체적인 흐름도 클라이언트가 [Deposit $10]을 버튼을 누릅니다. 그럼 [Click] 이벤트가 발생하게 되며, [Event handler]에 있는 [Dispach]가 {Action: Desposit, payload:$10} 이라는 [Action(명령지)]을 담아 [Store] 안에 있는 Reducer에게 정보를 보냅니다. 그럼 [Action(명령지)] 를 받은 것을 토대로 [State]에 있는 값을 꺼내어 요청한 [Action(명령)]을 수행 후..

클로저 클로저는 둘러싸여진 상태의 참조와 함께 다발로 묶여진 함수의 콤비네이션이다. 바꿔말하면 클로저는 내부 함수로부터 외부함수의 접근권한을 준다. 클로저는 함수 생성 시점에 언제나 생긴다. // 24-1 const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); } //