Project Log DarkTheme(다크모드) 적용하기 1편 (feat.useContext) 이번에 개인 웹사이트를 개편하면서 dark-theme도 한 번 적용해보려고 한다. 별 다른 이유는 없고 그냥 깐지나보여서ㅎㅎ light/dark모드를 오가기 위해서 먼저 toggle button이 필요하다. Toggle이라는 이름의 컴포넌트를 만들까 했지만 토글 버튼을 사용할 경우가 theme switching 해주는 경우 말고는 없는 것 같아 그냥 아예 ThemeToggle이라는 이름으로 컴포넌트를 만들었다. import React, { useState } from 'react'; import styles from './ThemeToggle.scss'; const ThemeToggle = () => { const [lightMode, setLightMode] = useState(true); const .. 더보기 프로젝트 후기 ✨ 동기 본격적인 취준하기 전 마지막으로 만들어볼 프로젝트를 정하고 있었다. 처음에는 간.단.한 사진첩 사이트를 만들어보려고 했는데 또 생각보다 일이 커지면서...프로젝트가 영영 끝나지 않을 것 같은 느낌이 들기 시작했다. 그래서 다시 밤새 뭐만들어보지 고민하다가 다 엎고 특수문자 이모티콘 사이트를 만들어보기로 했다. 웹 이모지나 깨톡 이모티콘이 주로 많이 쓰이긴 하지만 그래도 종종 특수문자 이모티콘의 수요가 있는것을 보아왔기 때문에 만들어 보는 것도 좋을 것 같다고 생각했다. 검색해보면 블로그에 특수문자 이모티콘 모음이라는 제목으로 글이 올라온 것도 봤지만 이 경우에는 복사하기가 영 귀찮다. 그래서 사이트를 만들어서 클릭 한 번이면 자동으로 복사되는 기능을 넣고, 태그로 이모티콘을 검색하는 기능을 넣기.. 더보기 자바스크립트 클립보드 복사기능 - 크로스브라우징 이슈 프로젝트를 얼추 완성하고 배포한 뒤, 친구들한테 테스트를 부탁했는데 한 친구가 복사 기능이 안된다고 했다. 그 친구는 아이폰 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을 통해 어렵지 않게 구현 할 수 있게 된 것 같다. 물론 기능 구현도 중요하지만 이제는 다른사람과 .. 더보기 배포 재도전기 - ETRI 형태소 분석 API사용 배포해보려고 heroku에서도 시도해봤지만 역시나 같은 라이브러리 문제(라이브러리 자체 문제는 아니고 찾아보니 동적로드 라이브러리 관련한 문제인 것 같다.)로 실패했다. 어떻게 방법이 없을까 하다가 한국전자통신 연구원에서 제공하고 있는 형태소 분석을 API를 사용해보기로 했다. 하루에 5000건만 호출할 수 있으며, 1회 호출 시 입력이 1만 글자 미만까지만 요청이 가능하다. 사용방법은 홈페이지에 자세하게 가이드가 나와있다. 먼저 API key발급 요청을 하면 메일로 보내주시는데, API 요청할 때 request body에 json형태로 보내면 된다. 나 같은 경우에는 형태소 분석 서비스를 이용할 것이기 때문에 analysis_code에 morp를 넣어주었다. { "access_key": "YOUR_AP.. 더보기 Table of Content 컴포넌트 만들기 - useContext 원페이지 개념이라 스크롤이 좀 길어지다 보니 스크롤을 맨 위로 올리는 top 버튼이나 목차 컴포넌트가 필요했다. 처음에는 간단하게 top버튼을 만들까 했는데 그것보다는 목차 컴포넌트를 만드는 게 뭔가 더 포멀 한 느낌을 줄 것 같아 목차 컴포넌트를 만들기로 결정했다. 각 목차는 태그로 감싸고, 이동할 컴포넌트에는 id를 달아줘서 태그가 해당 id를 가진 섹션으로 이동할 수 있게 만들었다. 이동하는 것 까지는 완성했는데 문제는 스크롤이 머무는 해당 섹션의 스타일을 다르게 표현하고 싶었는데 도저히 어떻게 해야 할지 감이 안 왔다. 자주 보는 블로그 사이트 velog에도 ToC컴포넌트가 있어서 뜯어보려고 개발자 도구를 열어서 봤는데 그것만으로는 알 수가 없었다. 다행히도(?) 개발자이신 velopert님이 오.. 더보기 이미지 업로드시 미리보여주기 기능 유저가 프로필 사진을 바꾸거나 사진을 올릴 때 미리볼 수 있도록 하는 기능이 필요했다. 생각해본 로직은 바꿀 사진을 선택해서 input에 집어넣었을 때 바로 서버로 보낸 후 temp폴더 내에 저장한 다음, 이 저장된 이미지를 다시 가져와서 화면에 보여준다. 그리곤서 유저가 submit을 하면 temp폴더에 있던 이미지파일이 정식 img폴더로 이동하고, submit이 안되면 temp에서 삭제하려고 했다. 그런데 찾아보니 업로드 전에 이미지를 미리 보여줄 수 있게 HTML5에서 지원하는 기능이 있었다. 굿굿 그래서 아주 간편하게 submit 버튼을 누르기 전에 이미지를 확인할 수 있도록 작성할 수 있었다. 1. addPhoto요소가 클릭되면 photoInput요소의 클릭이벤트를 트리거시킨다. 2. 파일 선택.. 더보기 개인용 사진첩 만들기 여행을 가도 사진찍는 것 보다는 눈으로 보는 걸 좋아해서 거의 안찍는 편인데 요즘 부쩍 지나고보면 남는 건 사진이더라 하는 생각이 많이 들었다. 종종 큰맘 먹고 여행 다녀와서 추억을 기록하자는 취지에서 네이버 블로그에 몇 번 글을 써봤는데, 글 하나를 작성하는 것 만해도 시간이 너무 오래걸려 잘 안쓰게 된다. 인스타, 페북도 안하기 때문에 시간이 지나서 보는 사진이라고는 정리도 안되어있고 그마저도 따로 백업도 안해둬서 엉망인 앨범 뿐이다. 그래서 제목이나 간단한 내용을 집어넣을 수 있는 개인용 사진첩을 만들어보기로 했다. 이름은 너무 클리셰같긴하지만 말그대로 flashback으로 지었다. 기능은 얼마 없는 것 같긴하지만 그래도 만들다보면 분명히 엄청 오래걸릴 것 같다. 이번에는 꼭!!!! 굳이 치명적으로.. 더보기 프로젝트 후기 ✨ 동기 재밌있는 API없나 둘러보다가 youtube에서 댓글을 제공해주는 API가 있길래, 댓글에서 가장 많이 쓰여진 단어를 word cloud형태로 보여주는 사이트를 만들기로 했다. 통계적으로 엄청나게 유의미한 데이터는 아니지만 그냥 심심풀이로 한번 돌려서 보고싶었다ㅋㅋㅋ 🔥 프로젝트를 진행하면서... 플젝 진행하면서 아쉬웠던 점을 몇가지 추려보았다. 1. 명사 분석이 잘 안됨 사전에 나오는 명사나 일반적인(?) 명사는 명사로서 분리가 잘되지만, 인터넷용어나 전문용어는 명사로 분석이 잘 안되는 것 같아 아쉬웠다. 예를 들면 게임 관련 영상을 돌리면 캐릭터 명이나 게임 관련 용어들을 명사로 제대로 분석하지 못하는 모습이 보여졌다. 오버워치 영상을 돌리면 솜브라 -> 솜, 브라 이렇게 나눠지고 둠피스트 .. 더보기 이전 1 2 3 다음