โฌ๏ธ Main Note
https://docs.google.com/document/d/1sIVI-Wg2ckkhNszCZrRixyR34HJZ3keW2FxahcIHWeY/edit
๐ [Image]
-
When uploading the image in browser, backend uploaded the uploaded image into storage and got the URL, and that url was res-sent to browser.
--> This method made a big waste in storage. -
To make image upload more efficient, preview function can be used. By using
FileReader(), the file shown but not saved to the sotrage. The fake URL was used here. -
.readAsDataURL(): This method makes the fake URL, which is only available in the computer it is used. If the user use this method, there is no waste created so uploading the image becomes efficient. However, when uploading the real post, the fake URL shouldn't be used.
๐ [createBoard Image Request]
When we click post submit button, files were precedingly uploaded with uploadFile, and the returned url was compromised as an array and requested to createBoard.
Meaning, originally uploadFile was operated for every change in file. Here, it took a bit long time to upload one by one. To shorten the uploading time and upload all at once, we used Promise.all().
- Array formed promise is sent all at once, so we waited for a while.
==> So once the post submit button is clicked, all the files were uploaded through uploadFile and createBoard was requested together.
[PreLoad vs. LazyLoad]
LazyLoad
- For vertically long pages(like Naver.com), the files were downloaded only when the scrolling was reached. The files weren't getting loaded all at once.
--> Unnecessary contacts with server happened less.
PreLoad
- All files are loaded at once and when particular file is needed, the browser shows the needed file.
--> Less rendering time
๐ [Extentions]
.webp
Has better compression so has better technique than png or jpg.
PageSpeedInsights
- Checks the browser's speed.
- Able to make efficient speed running browser.
- Can have higher accuracy of search-engine bot.
Libraries regarding image
react-dropzone & react-beautiful-dnd
- Drag and drop to upload the image
react-avatar-editor
- The image can shrink, expand, and even change its border shape.
๐ [Algorithms - recursion function]
- Recursion can be used instead of while-loop.
- But has slow speed, so usually people use while-loop.
//1. repeats the function (repeats itself)
//2. Ending point should be assigned
function recursion(count) {
if (count >= 5) {
console.log(count);
return; //ending recursion function
}
count++;
return recursion(count);
}
recursion;