자바스크립트

시작하기에 앞서 사용자의 프로필 사진 데이터를 아마존 S3에 이미지를 업로드 하여 사용하고 있었는데 이미지 업로드 시에 별도의 제한 없이 업로드할 수 있도록 생각했지만 서버에서 1MB 이상은 업로드할 수 없는 문제가 있었습니다. 업로드 가능한 용량을 프론트에서 제한하거나 서버에서 제한을 수정하는 것으로 문제를 해결할 수도 있겠지만 프로필 사진의 경우 항상 같은 크기로 사용자들에게 노출되며 그다지 큰 해상도가 필요하지 않았습니다. 따라서 큰 이미지를 굳이 서버에 저장하고 커다란 이미지를 내려 받는 것을 비효율적이라고 생각했습니다. 그러므로 이미지를 업로드하기 전 압축해서 서버에 업로드하도록 합시다! 이미지를 압축하는 방법은 여러가지 있습니다. 브라우저에서 이미지를 압축하는 방법과 서버에서 압축하는 방법에 ..

문제 숫자를 넣었을 때, 3자리 수마다 콤마 ','가 찍히는 input을 구현하는 중에 느닷없는 도전과제가 발생했다. 일반적으로 사용하는 수는 16자리 이내이기 때문에 아래의 코드로도 충분히 동작하지만 아래 코드는 치명적인 문제가 하나 있었다. 입력된 숫자의 길이가 16을 넘어가면 값이 뭉개지는 문제가 있다. 지수형 값으로 변환되어 발생하는 것으로 예를 들어 “1234567890123456789” 라는 숫자를 입력한 경우 “1,234,567,890,123,457,000”로 출력된다. // 값이 변경되면 저장하는 함수, 천단위마다 ','를 입력함 const priceChangeHandler = function (event) { let inputPrice = event.target.value.replace(..

브라우저에는 개발자가 활용할 수 있는 저장 공간이 존재한다. 프론트엔드 개발자라면 브라우저 저장소를 자주 다루게 되므로 브라우저 저장소에 대해서는 확실하게 이해하고 있어야한다. 이론 : 브라우저 저장소 브라우저 저장소 분류 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 ‘key-value’ 형식의 저장소 쿠키(Cookie) : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 ‘key-value’ 형식의 저장소 웹 스토리지(Web Storage) 웹 스토리지는 HTML5에 추가된 클라이언트 기반 ‘key-value’ 형식의 저장소이며, 웹 스토리지는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)로 분류된다. 두 ..

이번 주차에서는 지금까지 배운 자바스크립트의 기초를 가지고 다양한 알고리즘 문제를 풀고 페어 프로그래밍을 해보았다. 페어 프로그래밍 : https://ko.wikipedia.org/wiki/%ED%8E%98%EC%96%B4_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D 알고리즘 : https://ko.wikipedia.org/wiki/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98 알고리즘 문제를 풀어보는 것은 컴퓨터가 주어진 규칙에 맞도록 동작하도록 명령하는 방법을 익히는데 도움이 되었다. 처음에는 간단한 문제도 어떻게 답을 작성하면 좋을지 답답했지만, 문제를 하나 둘 풀고 다른 사람의 풀이도 리뷰하며 사고가 넓어지는 것을 느꼈다. 잘 다루지 못했던..