목록전체 글 (64)
MJ.Story
WIL 실전 프로젝트를 진행하면서 가장 우려가 되는 부분은 웹소켓 부분이었다 클론 주에 실패한 조들도 다수가 있었고 일단 우리 프로젝트의 핵심 기능이기 때문에 가장 중요한 부분이기 때문이다. 클론 주에 웹소켓을 구현하였던 조의 팀원들에게 직접 코드리뷰를 듣고 노마드 웹소켓 부분 강의를 추천 받아 강의내용을 학습 또 백엔드에서 궁금했던 레디스로 채팅이 구현이 된다는 기술매니저님의 조언을 듣고 가능성 부분은 해결함 이제 앞으로 부딪히는 일만 남은거 같다. - 이번주는 왜인지 모르겠으나 그냥 열심히 안했던거 같다. 분명 바쁘고, 힘든 주가 맞아야 할텐데, 집중도 덜해지고, 의욕도 너무 없었다. 너무 달려오다가 멈춰서 그런가? 팀원들에게 피해를 주지 않으려면 다시 의지를 끌어 올려야겠다. 이번주 고생했고 다음주..
WIL 이번 클론 코딩 주차 내가 가장 신경쓴 부분 미디어 처리 부분이다. formdata : 일단 formdata는 이미지 처리할 때 사용하는 것이라고 알았으나 비디오도 된다고 새롭게 알게 되었다. 비디오 파일을 URL로 읽을 수 있게 변환해준뒤, formdata File로 묶어서 매개변수로 전달 해준다. const onChangeVideo = (event) => { const file = event.target.files[0]; setVideoFile(file); const reader = new FileReader(); // const file = imgRef.current.files[0]; console.log(file); reader.readAsDataURL(file); reader.onload..
트러블 슈팅 문제: 댓글 수정 삭제 , post작성 후 메인 페이지 랜더링 문제 새로고침을 해야 추가가 되거나 수정이 가능했다. 댓글 수정 부분은 400번대 에러가 있지만 기능은 작동 해결 : post렌더링 문제는 우선 순위의 문제였다 랜더링 과정에서 post값이 렌더링끝나는 부분보다 느리게 오면 랜더링이 되어지지 않았다. PostSlice 파일에서 post 부분에 ThunkAPI.dispatch(__getList()); 를 작성 하여 post연결이 끝나면 요청 순서가 보장되게 한뒤 해결했습니다. 댓글 수정 삭제 부분은 댓글과 수정부분을 컴포넌트를 분리하여 아무생각없이 모든 값을 import해와서 실행하다 보니 쓸데없는 렌더링 부분이 너무 많아 생기는 문제라고 파악하고 수정 컴포넌트에서 실행할 수있는부분..
WIL 이번주 드디어 첫 협업 백에 대해 기본 지식조차 없어서 무엇을 어떻게 물어봐야 하고 API설계등 궁금한건 많지만 과감하게 이것저것 물어보지 못해서 아쉬웠지만 최소한 협업 과정에 대한 흐름과 로컬에서 json데이터베이스를 사용하다가 배포된 백엔드 데이터베이스를 이용해 구현해 봐서 너무 좋았습니다. 또 기획서와 와이어 프레임을 바탕으로 어떤 api가 필요할지 파악하는게 중요하다는걸 깨달았다. api 인터페이스에서 변경되어야 할 사항이 있다면 반드시 백엔드분들과 협의하는 식으로 진행해야된다는걸 늦게나마 알게 되었다 TIL_221219 오늘 한 일 MBTI 게시판 CSS 완성하기 내일 할 일 프로젝트 게시물 추가하기 기능 완성하기 예외처리 스터드 사전 자료 조사하기 TIL_221220 오늘 한 일 프로젝..
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)하였는지 또는 실..