반응형 개발 이야기112 2019 Log 2018 Log에 이어 올해도 회고록을 작성해본다. 2019년은 시간이 빠르게 흘러간 것 같은 느낌이든다. 시간이 빨리 흘러갔다는 것은 그만큼 변화가 없고, 새로운 경험도 없었다는 것의 반증이다... 뇌속에 새롭고 신선한 뭔가가 저장되지 않았다. 이토록 슬플수가...ㅜㅜ "회사출근 - 퇴근 - 가끔 집공부 - 잠 - 주말데이트 or 스벅 공부" 루틴이 반복된 것 같은데, 크게 기억에 남는 일이 없었던것 같다. 2020년에는 더 행복한 삶을 사는 개발자가 되기 위해 올 한해의 개발회고를 해보도록 하자. 토이 프로젝트(팻 프로젝트) 크게 3가지의 토이 프로젝트를 기획하고 개발했다.(고 쓰고 싶지만 개발중단됬다고 보는게 맞겠네유) 첫 토이 프로젝트로 NBA 선수검색 서비스를 만들어보고자 했다. 평소 NBA를 .. 2020. 1. 3. React 이미지파일 미리보기 이번에는 React 프로젝트에서 이미지 파일 미리보기 기능을 정리합니다. 음.. 좀더 상세히 말하면 웹사이트에서 이미지 파일을 업로드 하기전에! 웹사이트 상에 이미지를 출력하여 미리보기 하는 기능입니다. 간단한 예제를 만들며 정리하겠습니다. 01. 화면 UI 만들기 화면 UI는 아래와 같이 만들어 보겠습니다. 간단하게 이미지 미리보기영역과 input(type file)박스입니다. 코드는 아래와 같습니다. import React from 'react'; function App() { return ( ); } export default App; 02. State 추가하기 이미지는 미리보기 할때는 에 들어갈 base64 인코딩 값이 필요합니다. 또 file의 상태도 필요할겁니다.(결국 업로드는 file을 하는.. 2019. 12. 24. Nodejs 파일 읽어 Promise 다루는 방법 어느날 로그파일을 읽어 json으로 가져와야 하는 과제(?)가 주어졌습니다. 또한 로그 파일이 생각보다 큰 경우도 존재합니다. fs모듈의 readFile과 같은건 파일 전체를 메모리에 올려버리기 때문에 메모리 사용량이 엄청 늘어납니다.(대용량 비추) 음.. Nodejs의 fs와 event-stream이라는 stream을 쉽게 사용할수 있도록 도와주는 라이브러리를 이용해서 특정 파일을 읽어서, 객체화하는 방법을 정리합니다. 순서는 아래와 같습니다. 파일 스트립으로 읽기 chunk 단위로 수행하고자하는 작업 수행 stream을 promise로 변경 async await로 promise를 제어 01. 파일 스트림으로 읽기 const fs = require('fs'); const es = require('eve.. 2019. 11. 28. VSCode 확장 추천!!! VSCode 에디터는 코드 편집기 입니다. 하지만 자바스크립트 개발자, 프론트 개발자라면 주개발툴로서도 역활을 해냅니다. (마이크로소프트에서 만들었고, 타입스크립트 인기가 높아지면서 더 그 위상이 높아지는듯합니다 ㅎㅎ) 아래는 VSCode의 추천 Extenstion 입니다. 01. ES7 React/Redux/GraphQL/React Native snippets 리액트 개발자라면 거의 필수입니다. 코드 편집기에 아래 키워드로 구조를 만들어버릴수 있는 snippets을 제공합니다. 예를들면, rce : class componet 생성 rafce : allow function component 생성 rfce : function component 생성 02. ESLint 거의 말이 필요없는 필수.. 문법을 확.. 2019. 11. 27. React 프로젝트 Font 적용하기 해당 글에서는 Material-Ui 라이브러리를 사용하여 React 프로젝트에 웹 Font를 적용하는 방법을 정리합니다. 먼저 폰트파일은 아래 사이트에서 다운로드 받을 수 있습니다. 무료 한글 폰트 사이트 ↓↓↓ https://noonnu.cc/index 이후 create-react-app으로 프로젝트 생성 했다는 가정하에 진행합니다. 01. material-ui 설치 npm install @material-ui/core 02. font 디렉토리 생성 src | App.tsx | index.css | index.tsx | react-app-env.d.ts | serviceWorker.ts | +---fonts | CookieRunBold.ttf 위와 같이 index 경로에 fonts 디렉토리를 생성하고 .. 2019. 11. 16. Docker compose로 Nginx + Flask + uwsgi 배포 Docker compose로 Nginx + Flask(uwsgi로 실행) 환경을 배포하는 방법을 정리합니다. 전체소스 : https://github.com/kjcaway/nginx_flask_test kjcaway/nginx_flask_test nginx + flask docker compose test. Contribute to kjcaway/nginx_flask_test development by creating an account on GitHub. github.com 먼저 패키지 구조는 아래와 같습니다. ├── docker-compose.yml ├── flask │ ├── Dockerfile │ ├── src │ │ ├── run.py │ │ └── webapp │ │ ├── __init__.py.. 2019. 10. 19. React로 ProgressBar 구현하기 요즘 몇몇 웹사이트 들어가보면 브라우저 상단에 ProgressBar가 동작하는 것을 확인 할 수 있습니다. 유투브, 구글애드센스 등 브라우저에서 요청을 하면 ProgressBar를 표시해서 사용자에게 나름(?) 사용성을 향상 시켜줍니다. 해당 글에서는 React 프로젝트에서 상단 ProgressBar를 구현하는 방법을 정리합니다. 아래의 주요 라이브러리를 사용했습니다. CRA(Create React App) Axios(비동기 요청 라이브러리) Material-UI(React UI 라이브러리) 01. 관련 라이브러리 설치 1 2 npm install --save axios npm install --save @material-ui/core cs material-ui의 progressbar 컴포넌트를 사용할 .. 2019. 10. 4. 간단 fixedHeader 테이블 만들기 table 요소 표시할때 header를 고정 시키는 방법을 정리하려합니다. 사실 여러 UI 라이브러리들이 고정된 header로 표시하는 기능을 옵션 형태로 제공 하기도 합니다. 여기서는 css 속성 중 아래 속성을 이용해서 해당 기능을 구현하고자 합니다. overflow: auto position: sticky 먼저 아래와 같은 형태로 테이블을 만들어 봅시다. No. Name Dept Email Expired 1 강팔자 웹개발팀 8888@naver.com Y 2 강호식 기획팀 2222@naver.com Y (...중략) css는 아래와 같이 해줍니다. table { width: 100%; background-color: #f1f1f2; } table > thead > tr > th { font-weigh.. 2019. 9. 29. Redux-Saga 로 비동기 요청 예제 redux-saga는 애플리케이션의 "부작용"들(데이터 요청(fetch) 등의 비동기 작업, 브라우저 캐시 같은 순수하지 않은 것들)을 쉽게 관리하고 효과적으로 실행하고 간단한 테스트와 쉬운 실패 처리를 목적으로 한다. redux-saga는 애플리케이션에서 필요한 사이드 이펙트를 별도의 스레드로 분리해서 관리할 수 있고, 리덕스의 미들웨어로 리덕스의 액션은 스레드를 시작, 중지, 취소시킬 수 있다고 한다. (redux-saga github에서 발췌) redux-saga를 이용해서 어떻게 애플리케이션을 작성하는지 나름 정리를 해볼까합니다. 검색요청을 하는 기능을 만든다고 가정합시다. 동작은 간단합니다. input box에 검색어 입력 검색 버튼 클릭 서버로 비동기 요청 수행 요청에 대한 성공 또는 실패를 .. 2019. 8. 18. Selenium 네이버 로그인 + Beautifulsoup 나의 메일 리스트 Python의 브라우저 자동화 라이브러리인 Selenium으로 네이버 로그인과 Html 문서 파싱에 쓰이는 Beautifulsoup를 사용한 메일리스트를 가져오는 작업을 해보겠습니다. 테스트 환경은 python 3.7.2입니다. 01. 관련 패키지 설치 1 2 3 4 5 6 7 $$ pip install selenium $$ pip install beautifulsoup4 $$ pip freeze beautifulsoup4==4.8.0 selenium==3.141.0 soupsieve==1.9.2 urllib3==1.25.3 cs 02. 로그인 창 띄우기 네이버(https://naver.com)에서 메일을 클릭해봅시다. URL을 확인 해보니 아래와 같습니다. https://nid.naver.com/nid.. 2019. 8. 4. Docker 명령어 정리 Docker(18.09.8) 기준 명령어 정리 # 도커 버전 확인 1 2 docker version Colored by Color Scripter cs # 도커 이미지 확인 1 docker images cs # 도커 이미지 삭제 && 도커 사용하지 않는 이미지 일괄 삭제 1 2 3 4 5 ## 도커 이미지 삭제 docker rmi nginx:latest ## nginx(이미지명):latest(태그명) ## 사용하지 않는 도커 이미지 일괄 삭제 docker rmi $(docker images -f "dangling=true" -q) cs # 도커 이미지 빌드 1 2 3 4 5 6 docker build -t portfolio:1.0.0 . ## -t, --tag : 이미지명 태그명 설정 ## portfol.. 2019. 7. 27. Docker 빌드 시 소스파일 git으로 얻어오기 toy 프로젝트를 docker image로 만들어서 배포하고자 배포 시나리오를 생각던 중 docker build 시 소스파일을 git으로 가져오는 방법을 정리합니다. 테스트 환경 : VirtualBox 6.0사용 Host : Windows 10 Guest : Ubuntu 16.04 01. Docker 설치 https://basketdeveloper.tistory.com/26?category=798107 를 참고하시면 됩니다. 설치를 확인 하기 위해서는 아래 명령어로 docker version 확인 가능합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 jckang@jckang:~$ docker version Client: Version: 18.09.8.. 2019. 7. 21. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 반응형
