이번에는 툴바 관련 로직을 보완하고 이미지 업로드 기능을 일부 구현했습니다!
🎉 Done
1. Toolbar 스타일 로직 보완
1-1. 헤더가 토글 형식으로 동작하도록 구현
헤더 스타일에도 사용자 경험상 토글로 적용되는 것이 익숙하여 추가했습니다.
-
기존
-
변경
-
block 일 때
-
caret 일 때
1-2. ToDo
- 호버 시 글씨 색상 변경 안됨
- View 영역 말고 편집 영역에 대한 스타일 적용
2. 이미지 업로드 기능 추가 (서버와의 통신 제외)
서버 API가 없어서 일단 local에서 동작하도록 구현
2-1. 구현 방법
htnl input 태그를 사용해서 OS의 file dialog를 이용
일반적으로 input 태그는 아래와 같이 사용됩니다.
- 일반적인 input 태그 이미지
주로 사용자에게서 텍스트 입력을 받는 수단으로 사용되는데,
사실은 그 외에도 type attribute를 통해 다양한 수단으로 활용할 수 있습니다.
- 다양한 input 태그의 활용처
저는 input 태그에 file 타입을 주어 파일 다이얼로그를 열 수 있도록 하였습니다.
JS로 파일을 업로드하는 여러 방법을 찾아봤는데 예제가 이거밖에 없더라구요.
아마 가장 간단하고 쉬운방법인 거 같습니다.
참고 링크 : HTML input
-
구현된 input 태그
-
click 핸들러
- input tag 클릭 시 호출된 file dialog
-
file dialog에서 넘어온 값 활용
-
change handler 내부
마크다운의 이미지 문법으로 url과 함께 추가합니다.
- 이미지 View 쪽에 css 적용
위, 아래, 가운데 정렬을 해줬습니다!
2-2. URL의 createObjectURL
특정 객체를 가리키는 URL을 생성합니다.
2-2-1. url 생성 순서
- file dialog로부터 blob 데이터를 얻어서 브라우저 내부에 저장
- 브라우저 내부에 저장된 blob 데이터를 url을 통해 접근할 수 있도록 url 생성
- 생성된 url을 앞에 blob: 네임스페이스가 붙는다.
- blob이 붙은 url
2-2-2. 사용 시 주의사항
- 불필요한 반복 호출 금지
createObjectURL()을 매번 호출할 때마다 새로운 객체 URL을 생성함
- life-cycle 관리
생성한 url이 필요 없어졌다면 명시적으로 URL.revokeObjectURL()을 사용해서 해제해주는 것이 좋음 (만약 그렇지 않을 경우 document가 사라지기 전까지 계속 남아있음)
- Service Worker에서 사용 불가
메모리 누수 가능성이 있어 Service Worker에서는 사용 불가, Web Worker에서는 사용 가능!
참고 링크 : web worker vs service worker
📝 To-Do
1. 이미지 업로드 API 연결
2. 링크 삽입 구현
3. write 영역 스타일 추가
4. 출간하기 후 포스팅 view 페이지 연결
5. 기존 포스팅에서 수정하기 클릭 시 시나리오 구현
