개발 기록17 A Line Translate : 한줄 번역기를 만들었어요. (크롬 확장 프로그램 개발 과정, Chrome extensions) #2 A Line Translate : 한줄 번역기를 만들었어요 #1에서 이어지는 내용입니다. 오랜만에 다시 잡은 확장 프로그램 프로젝트네요. 지난 시간엔 빌드 된 파일을 크롬에 올려서 테스트 하는 것 까지 진행했습니다. 이제 본격적인 기능 구현에 들어가보겠습니다. 이 프로그램은 드래그 한 내용을 번역해서, 그 결과를 별도의 엘리먼트를 생성해 띄워주는 기능을 갖고 있습니다. 이 기능을 미루어 볼때, 우리가 구현해야 할 내용은 크게 세 가지가 있겠습니다. 첫 번째는 드래그 한 내용을 다룰 수 있도록 전달하는 것, 두 번째는 전달받은 내용을 바탕으로 텍스트를 번역하는 것, 세 번째는 번역된 텍스트를 사용자에게 띄워주는 것 정도가 있겠네요. 그럼 하나씩 구현해보도록 하겠습니다. Drag Function 드래그 한 .. 2020. 12. 30. A Line Translate : 한줄 번역기를 만들었어요. (크롬 확장 프로그램 개발 과정, Chrome extensions) #1 학기가 시작하고 과제와 자료 조사 및 필기를 하며 영어로 된 자료들을 볼 때가 많은데, 한 두 단어를 몰라서 구글 번역기를 켜고 작은 화면에서 옮겨적는 과정이 상당히 번거로웠습니다. 물론 모니터 하나를 더 쓰면 될 일이지만 들고 다니기엔 여분의 모니터를 휴대하고 다니기에는 부담스러워서... 영단어나 문장을 바로 번역해서 보게 해주는 서비스가 있다면 어떨까 생각해봤습니다. 영어를 보고 이게 무슨 뜻일까? 라고 생각했을때 바로 번역이 된다면 좋겠지만 그런 하이테크까지는 모르고... 그 과정을 최대한 줄일 수만 있다면 그걸로 충분할 것 같았습니다. 어떤 방법으로 번역을 할 수 있을까 고민해보니, 드래그를 했을때 자동으로 컨텍스트가 번역된다면 꽤 멋진 기능이 될 것 같았습니다. 그런데 이런 기능이 작동하려면 프.. 2020. 11. 17. react 프로젝트에 redux 적용하기 #2 지난 react 프로젝트에 redux 적용하기 #1에서는 리덕스가 적용되는 대략적인 구조를 만들었습니다. 그러나 앞으로 우리가 해야할 작업은 이것만으로 충분하지 않았습니다. 오늘은 비동기 작업을 위해 리덕스 청크(redux-thunk)를 이용하여 요청을 처리해보겠습니다. 리덕스 청크란 리덕스 미들웨어의 한 종류입니다. 간단한 동기 작업만이 가능한 리덕스에 비동기 작업이나, 웹 요청, 또는 저장소에 접근하는 복잡한 요청 등을 처리해주는 고마운 친구입니다. 우리는 오늘 이 고마운 친구와 함께 비동기 작업을 수행해 볼 예정입니다. 그럼 시작하겠습니다. 시작 우선 가장 문제가 되는 비동기 작업부터 처리해보겠습니다. 우리가 비동기 요청을 보냈을때의 상태를 구분해보면 세 가지가 있습니다. 1. 요청을 보내지 않았거.. 2020. 10. 2. react 프로젝트에 redux 적용하기 #1 이번에 진행중인 토이 프로젝트에서 상태관리 라이브러리인 redux를 적용하게 되었습니다. 문제는 아직 한 번도 사용해본적이 없는 라이브러리이기에 실전에 앞서 redux가 어떤 방식으로 동작하는지, 어떻게 적용시키야 하는지 알아보기 위해 기존에 있던 react 프로젝트를 redux를 이용한 구조로 바꾸는 튜토리얼을 진행해보려고 합니다. 리팩토링 할 대상은 지난번 리액트 튜토리얼을 진행했던 무비앱. 이 리액트 프로젝트를 redux를 이용한 프로젝트로 탈바꿈 시켜보는게 오늘의 목표입니다. 막상 진행하려고 하니 정말 아무것도 모르는 제로 베이스 상태였기 때문에 유튜브에 올려져있는 벨로퍼트(김민준)님의 강좌를 참고하였습니다. 우선 기존 레파지토리를 남기고 새 프로젝트에서 작업을 시작하기 위해 새 저장소를 생성하겠.. 2020. 9. 16. 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #3 이전 포스팅에 이어지는 내용입니다. 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #1 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #2 위 포스팅을 먼저 보고 와주세요! 지난 포스팅에서 ssh 인증을 통해 외부에서 인스턴스로 접근하는 과정까지 진행했습니다. 이제 빌드 파일을 업로드 하고, nginx 설정에서 이 빌드 파일을 띄워주도록 변경해보겠습니다. 인스턴스에 처음 접속하면 홈 디렉토리로 연결됩니다. (~) 빌드 파일을 이곳에 먼저 올려보겠습니다. scp -i ~/.ssh/id_rsa -r ./build/ 유저이름@인스턴스주소:./ 여기에선 파일 전송 명령어인 scp를 사용합니다. -i 옵션은 인증서의 위치, -r 옵션은 하위 파일들을 포함하는 .. 2020. 9. 12. 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #2 이전 포스팅인 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #1에 이어지는 내용입니다. 지난 시간에 우리는 GCP에 우분투 인스턴스를 생성하고, nginx를 설치하여 서버를 가동시키는 과정까지 진행했습니다. 그럼 이제 리액트 프로젝트를 가져와서 nginx에 연결하는 과정까지 해보겠습니다. 이번 프로젝트를 진행하면서 많은 시간을 정보 검색에 할애했었는데, 원하는 내용을 찾지 못해서 이곳저곳에서 토막 지식을 붙여다가 겨우 성공했습니다... 삽질은 힘드네요. 우리의 최종 목표는 빌드된 파일만을 서버에 업로드하고, 배포 과정을 단축시킬 수 있는 스크립트를 작성하는 것 까지입니다. 그럼 시작하겠습니다. nginx를 설치했다면 주어진 외부 IP주소를 통해 들어갔을때 기본 화면이 보입니다.. 2020. 9. 11. 이전 1 2 3 다음
