JOYLOG

이미지 첨부 기능을 개발하면서, input 태그에 파일이 첨부될 때(onChange)의 event 를 콘솔에 찍어보았는데요. 다중업로드? 처럼 multiple 속성값을 넣어주면, 다중 파일 업로드가 가능해진다고 해요! 콘솔을 찍어보면 Files 내부에 파일을 Object 형태로 받아오고 있다는 것을 확인할 수 있어요. 미리보기 기능을 구현하기 위해선 이미지 DOM이 필요한데, 이것은 URL.createObjectUrl() 메서드를 활용하여 반환받을 수 있어요. 위에서 받아온 파일 Object 각각을 URL.createObjectUrl() 의 매개변수로 넣어주면 주어진 객체를 가리키는 URL을 DOMString 으로 반환받을 수 있어요. 이 때 매개변수로 넣어주는 Object는 File, Blob, Med..

history.pushState(null, '', '/kpi/reply'); 인턴 생활 2주차! 애플리케이션 코드를 분석하다 파라미터를 변경하는 이유에 대해 이해하고 있지 않다는 것을 깨달았다. 그래서 파라미터와 쿼리에 대해 정리해보고자 한다! 페이지 주소를 정의할 때, 유동적인 값을 전달해야할 때가 존재한다. 이 때 파라미터와 쿼리를 활용한다. Tip 1. URL을 통해 보여주는 값을 지정하기 때문에, 새로고침시 해당 데이터 값들을 잃지 않는다 2. 유효하지 않은 Parameter에 대해서는 Validation 검사를 해주어야 한다. 파라미터 : /profiles/joy → 일반적으로 파라미터는 특정 id나 이름을 가지고 조회할 때 사용 쿼리 : /about?detail=true → 쿼리의 경우엔 어떤..

CORS 이슈 Cross-Origin Resource Sharing (보안을 위한 정책) 원인 : request 보내는 client 와 response 보내는 server가 다른 포트를 가지고 있다면, CORS 정책에 막혀짐 해결 : 다양한 방법이 있는데, 그 중 하나는 Proxy 사용 (https://create-react-app.dev/docs/proxying-api-requests-in-development#configuring-the-proxy-manually) Proxy? : 유저와 인터넷 사이에 Proxy Server가 있다. : IP를 Proxy Server에서 임의로 바꿔, 인터넷에서는 접근하는 사람의 IP를 모르게 된다. 데이터 또한 임의로 바꿀 수 있다. 방화벽 기능 2. 웹 필터 기능..

Recat JS facebook 에서 2013 년에 발표한 library 컴포넌트로 이루어져 있어 재사용성이 뛰어남 Virtual DOM Real DOM? Virtual Dom? 이 무엇인가. 10개의 리스트가 있을 때, 그 중 하나의 리스트가 Update 되었다. Real DOM : 전체 리스트를 다시 Reload 해야하므로, 많은 비용 발생 Virtual DOM : 바뀐 한 가지 아이템만 DOM에서 바꿔 줌. Virtual Dom은 어떻게 한 가지 아이템만 DOM에서 바꿀 수 있을까? JSX 를 랜더링한다. (Virtual DOM 이 Update) 이전 Virtual DOM과 비교해 바뀐 부분을 찾는다. ( = diffing) 바뀐 부분만 Real DOM에서 바꿔준다. npx 활용하여 React Ap..