WIL (10) 썸네일형 리스트형 트러블 슈팅 문제내용 singup POST 요청에서 data와 imageFile을 같이 넘겨주지 못하는 문제가 발생 message : “Failed to parse multipart servlet request” 해결방법 시도한 방법 업로드한 파일을 프리뷰하기 위해 만들어 놓은 코드에서 실제 API에 이미지를 보내려면 객체로 보내야 한다. setImageFile(e.target.files[0]); 프리뷰 처리와 API에 이미지를 보낼 때 데이터 타입이 달라서 에러가 발생했다. 이를 수정했다. axios.js 에서 이미지 파일을 업로드하는 API에 대한 header 타입을 지정해줬다. // 프로필 사진 입력 const imgRef = useRef(); const [profileImage, setProfileImage].. 협업 진행 상황 https://www.notion.so/1f79bf893dde4b67b721106f65c6dfa9 중간 발표 자료 프로젝트 소개 www.notion.so 중간발표 후 질문을 통해 배운 것들이 있어서 정리해보려고 한다. Websocket과 Socket.IO에 대한 고민을 말씀해주세요. 이는 양방향 통신을 할 때 많이 쓰는 방법 두가지 입니다. Websocket의 장점은 연결 됐을 때 연결을 초기화한 이후에는 오버헤드가 되지 않아서 가볍게 연결 할 수 있다는 점입니다. Socket.IO에서는 스프링을 사용할 수 없어서 가볍게 사용할 수 있는 웹 소켓을 선택하게 됐습니다.(Socket.IO는 Node.js에서 사용하기 위한 라이브러리) 렌더링될 때 이전 컴포넌트가 보이는 이슈에 대한 해결책은 무엇인가요? 상태.. 협업 진행 상황 https://www.figma.com/file/R3kgSEZ71BrclxHGauGNPm/%EB%AA%A8%EC%9D%B4%EC%9E%90?type=design&node-id=41-2&t=aYReX0JTIlztGwDA-0 Figma Created with Figma www.figma.com 아직 와이어프레임이 나오지 않았다 .. ㅜㅜ https://www.notion.so/H99-14-2-c0ff91ff8a1844c5887920211da0eff2 H99 14기 실전프로젝트 2조 ✨ 항해99 14기 실전프로젝트 2조 www.notion.so 멘토님 피드백에 따라 스코프를 확장하기도 했다... 협업 진행 상황 📌 노션 API · 기능 명세서 Does and Don’ts www.notion.so 📌 git clone organizations에서 포크 > 내 repo 주소 복사 > 컴퓨터 내 파일 생성 > VSC에서 git clone 내 레포 주소 > ls > cd 폴더 명 클론한 로컬 저장소 디렉토리로 이동 > git add . > git commit -m "" > git push origin main > pr Mini Project https://www.notion.so/13-_FE-9c151e1c41d14662a0955d46b7e4a747 Axios 📌 Axios란? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드와 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. 📌 Axios의 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 📌 Axios 설치하기 > npm install axios 📌 Axios의 문법 구성 axios({ url: 'https://test/api/cafe/list/today', // 통신할 웹문서 method: 'get', // 통신할 방식 data: { // 인자로.. React_Life Cycle 📌 Life cycle React 컴포넌트는 생명 주기가 있다. 생애 주기 또는 라이프사이클(Life cycle)이라고도 많이 표현한다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다. 📌 Mount 컴포넌트가 처음 실행될 때 그것을 Mount라고 표현한다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장한다. 그 후에 componentWillMount 메소드를 호출하고, render로 컴포넌트를 DOM에 부착한 후 Mount가 완료되면 componentDidMount가 호출된다. 주의할 점 : componentWillMount에서는 props나 state를 바꾸면 안 된다. Mount 중이기 때문. 그리고 아직 DOM에 render하지 않.. React_State, Props React State 📌 State란? 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다. State 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링한다. 📌 State를 변경하기 State 값을 변경하기 위해서는 반드시 setState 함수를 이용한다. setState 함수를 호출할 때 다시 렌더링 해달라는 명령을 내린다. const App = () => { const [value, setValue] = useState(초기값); return ~ } 📌 State를 변경하는 방법 // 1. setState 내에 변경할 값을 넣는다. con.. DOM과 Virtual DOM, props와 state React 1주차 학습 내용을 바탕으로 정리해본다. DOM이란? Document Object Mode 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. 웹 개발자가 javascript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 도움이 된다. DOM의 문제점 트리구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다. // Simple getElementById() method document.getElementById('some-id').innerValue = 'updated value'; 위 코.. JavaScript_ES JavaScript의 ES 자바스크립트란? 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. 스크립트는 웹페이지의 HTML안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다. 자바스크립트의 강점으로 아래를 언급할 수 있다. HTML/CSS를 완전히 통합할 수 있다. 간단한 일을 간단하게 처리할 수 있다. 무든 주요 브라우저에서 지원하고, 기본 언어로 사용된다. ES란? ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다. 뒤에 숫자는 버전을 뜻하고 ES5는 2009년, ES6는 2015년에 출시되었다. JavaScript ES6 문법 let, const let은 새로운 값을 받을 수도 있고 재할당할수도 있다. 즉, 변경 가능한 변수가 생성된다.. 이전 1 다음
