Project Log/I'mticon 프로젝트 후기 ✨ 동기 본격적인 취준하기 전 마지막으로 만들어볼 프로젝트를 정하고 있었다. 처음에는 간.단.한 사진첩 사이트를 만들어보려고 했는데 또 생각보다 일이 커지면서...프로젝트가 영영 끝나지 않을 것 같은 느낌이 들기 시작했다. 그래서 다시 밤새 뭐만들어보지 고민하다가 다 엎고 특수문자 이모티콘 사이트를 만들어보기로 했다. 웹 이모지나 깨톡 이모티콘이 주로 많이 쓰이긴 하지만 그래도 종종 특수문자 이모티콘의 수요가 있는것을 보아왔기 때문에 만들어 보는 것도 좋을 것 같다고 생각했다. 검색해보면 블로그에 특수문자 이모티콘 모음이라는 제목으로 글이 올라온 것도 봤지만 이 경우에는 복사하기가 영 귀찮다. 그래서 사이트를 만들어서 클릭 한 번이면 자동으로 복사되는 기능을 넣고, 태그로 이모티콘을 검색하는 기능을 넣기.. 더보기 자바스크립트 클립보드 복사기능 - 크로스브라우징 이슈 프로젝트를 얼추 완성하고 배포한 뒤, 친구들한테 테스트를 부탁했는데 한 친구가 복사 기능이 안된다고 했다. 그 친구는 아이폰 safari에서 사용을 했는데, 찾아보니 기존 사용했던 자바스크립트 코드가 iOS safari에서는 지원이 안되는 것으로 보였다. 찾아보니 iOS = 10 부터는 가능하긴 하다고 한다. iOS < 10 미만의 버전에서 OS clipboard 읽기/쓰기는 'shorcut keys'가 아닌 document.execCommand()로는 실행할 수 없다. 여기서 'shortcut keys'는 copy/paste 액션 메뉴나 커스텀 iOS 단축키, 아니면 블루투스 키보드의 단축키 등을.. 더보기 자바스크립트 클립보드 복사 기능 구현 자바스크립트로 클립보드 복사 기능을 구현하는 방법은 아래와 같다. 들어가기에 앞서, select()함수는 과 태그에서 상요할 수있는 함수로, 모든 문자열을 선택하게 해준다. execCommand()함수는 문서의 편집 가능한 영역을 변경할 수 있게 해주는 여러가지 기능을 제공한다. const onCopy = str => { const el = document.createElement('textarea'); el.value = str; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); }; 요소의 value값에 복사하고자 하는 string값을 넣어준다. 를 현재HTML d.. 더보기 프로젝트 변경 원래는 사진첩 사이트를 만들어보려고 했는데 회원가입/로그인 기능까지 구현하려다 보니까 프로필관리 등등 해야할게 너~무 많아졌다. 다시 루미서울처럼 프로젝트가 커져가는 것을 발견...^^ㅎ... 그래서 며칠동안 작성한 코드는 다 엎고 다시 간단한 프로젝트로 다시 만들기로했다. 회원가입 같은 기능은 싹 빼고 간단하게 자동 복사 기능, 태그로 이모티콘 검색하는 기능, 유저가 이모티콘을 추가할 수 있는 기능만 넣으려고 한다. 기술스택은 원래 사용하던대로 프론트는 React, 백엔드는 express, DB는 mysql을 사용할 것이다. 프로젝트하면서 느끼는건데 이제 원하는 기능 구현은 구글링, trial&error을 통해 어렵지 않게 구현 할 수 있게 된 것 같다. 물론 기능 구현도 중요하지만 이제는 다른사람과 .. 더보기 이미지 업로드시 미리보여주기 기능 유저가 프로필 사진을 바꾸거나 사진을 올릴 때 미리볼 수 있도록 하는 기능이 필요했다. 생각해본 로직은 바꿀 사진을 선택해서 input에 집어넣었을 때 바로 서버로 보낸 후 temp폴더 내에 저장한 다음, 이 저장된 이미지를 다시 가져와서 화면에 보여준다. 그리곤서 유저가 submit을 하면 temp폴더에 있던 이미지파일이 정식 img폴더로 이동하고, submit이 안되면 temp에서 삭제하려고 했다. 그런데 찾아보니 업로드 전에 이미지를 미리 보여줄 수 있게 HTML5에서 지원하는 기능이 있었다. 굿굿 그래서 아주 간편하게 submit 버튼을 누르기 전에 이미지를 확인할 수 있도록 작성할 수 있었다. 1. addPhoto요소가 클릭되면 photoInput요소의 클릭이벤트를 트리거시킨다. 2. 파일 선택.. 더보기 개인용 사진첩 만들기 여행을 가도 사진찍는 것 보다는 눈으로 보는 걸 좋아해서 거의 안찍는 편인데 요즘 부쩍 지나고보면 남는 건 사진이더라 하는 생각이 많이 들었다. 종종 큰맘 먹고 여행 다녀와서 추억을 기록하자는 취지에서 네이버 블로그에 몇 번 글을 써봤는데, 글 하나를 작성하는 것 만해도 시간이 너무 오래걸려 잘 안쓰게 된다. 인스타, 페북도 안하기 때문에 시간이 지나서 보는 사진이라고는 정리도 안되어있고 그마저도 따로 백업도 안해둬서 엉망인 앨범 뿐이다. 그래서 제목이나 간단한 내용을 집어넣을 수 있는 개인용 사진첩을 만들어보기로 했다. 이름은 너무 클리셰같긴하지만 말그대로 flashback으로 지었다. 기능은 얼마 없는 것 같긴하지만 그래도 만들다보면 분명히 엄청 오래걸릴 것 같다. 이번에는 꼭!!!! 굳이 치명적으로.. 더보기 이전 1 다음