'Programming' 카테고리의 글 목록 (2 Page)

AWS S3 private + IAM + CloudFront로 보안을 첨가한 파일 업로드 구현

서론 기존에 Laravel을 이용하여 S3 파일업로드에 대하여 설명을 한 적이 있었습니다. 다만, 이때는 public으로 열어둔 S3에 손쉽게 업로드를 구현하는 방법을 설명 드렸었습니다. [Laravel] AWS S3 연동하기 및 파일 업로드 구현 개발을 하다보면 서버 이외의 스토리지 서버를 운영해야 하는 일이 잦습니다. 오늘은, Laravel을 이용하여 AWS의 스토리지 서비스인 S3 연동 방법을 소개해 드리려고 합니다. Laravel은 기본 설정이 jjong-factory.tistory.com 하지만, 연습과 개인프로젝트에서는 상관없지만 실제 서비스 중인 프로젝트에서 위와 같이 구현하게 되면 보안상 이슈가 생기기 마련입니다.. 이제, 위 방법에서 보안을 챙겨보도록 하겠습니다! 버킷 생성 먼저 AWS에..

혁종2022.04.26

Programming

npm install시 npm ERR! code ERESOLVE 오류 해결

최근 react를 ubuntu 서버에 세팅해야 할 일이 생겨서 세팅 중에 아래와 같은 오류가 발생 하였다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree 생각보다 해결 방법은 간단했는데 npm install --save --legacy-peer-deps 위와 같이 --save --legacy-peer-deps 를 추가하니 해결 되었다. 참고 : npm install `--force` and `--legacy-peer-deps` 차이점 참고 https://stackoverflow.com/questions/66020820/npm-when-to-use-force-and-legacy-peer-deps velog.io

혁종2022.04.21

Programming

CKEditor5 - Web Editor CKEditor5 이미지 업로드(For jQuery)

시작에 앞서 기존, CKEditor5를 사용하여 이미지 업로드 게시글을 올린 적이 있다. 피드백이 너무 늦었지만, 댓글로 문의 주시는 대부분이 그냥 javascript나 jquery를 사용하여 개발중이신 분들이 많은 것 같았다. CKEditor5 - Web Editor CKEditor5 이미지 업로드 시작에 앞서 일단 CKEditor 를 사용하기로 마음을 먹었는데, 에디터를 커스텀 할 때 가장 첫 번째로 문제가 되는 점은 역시 이미지를 업로드 하는 문제일 것이다. CKEditor는 해당 부분을 굉장히 말끔 jjong-factory.tistory.com 해당 분들을 위해서 조금 내용을 수정하여, jquery를 사용하시는 분들도 이미지 업로드 모듈을 쉽게 구현하도록 예제를 들어서 설명을 진행해 보려고 한다!..

혁종2022.04.15

Programming/Flutter

[Flutter] Window10 + Intellij를 이용한 flutter 개발 환경 구축

타이틀 입력 1. Flutter란? Flutter는 구글이 개발한 오픈 소스 모바일 애플리케이션 개발 프레임 워크 입니다. 하이브리드 어플리케이션을 개발시 유용하게 사용 할 수 있는 프레임 워크 에요. 언어는 dart라는 아이를 사용합니다. 기존의 각종 하이브리드 어플리케이션을 개발하기 위해 사용하였던 언어들보다 앱의 퀄리티가 잘 나오는 것이 특징입니다. 그럼 Flutter를 사용하기 위해, 세팅을 먼저 시작해 볼까요? Window10, Intellij를 사용하여 Flutter 개발 환경을 구축해보도록 하겠습니다. 2. 개발환경 구축 - Flutter Plugin Intellij의 가장 큰 장점은 다양한 Plugin을 이용하여 개발 환경을 최적화 시킬수 있다는 점 이겠죠? Intellij에서는 Flutt..

혁종2021.03.11

Programming

[Javascript] mobile touch Event

touch event? click event? mouse event? 처음으로 모바일쪽 웹 페이지를 고려하여 개발을 들어가시는 분들은 PC 페이지에서는 이벤트 들이 제대로 실행 되었는데, 모바일에서는 실행되지 않았던 경험을 겪어 보셨을 거에요. 모바일은 이벤트의 종류가 PC 버전과는 상이하기 때문인데, 대표적으로는 touch, click, mouse 세가지가 혼동 되실 것 같아요. 개인적으로 세 이벤트를 이해하기 쉽게 설명해 보면, mouse : 컴퓨터와 연결된 mouse와 관련된 이벤트 들이에요. 마우스의 up, down, move, whell 이벤트 들이 이쪽에 포함 되요. click : touch up & down, mouse up & down 을 묶은 이벤트 에요. touch : display를 ..

혁종2020.12.28

Programming

mobile browser address bar fix (url bar)

mobile browser address bar issue 웹 페이지를 퍼블리싱 할 때, 모바일 페이지의 경우 디바이스, 브라우저에 따라서 높이갚 설정이 제대로 이루어 지지 않을 때가 자주 있습니다. 높이갚을 100vh, 100% 등 전체 화면을 컴포넌트가 먹게끔 하고 싶은데 브라우저의 address bar(url bar)의 높이 값이 방해가 되는 경우. 또 스크롤을 하다보면 브라우저의 address bar(url bar)가 숨었다가 나왔다가.. 높이값은 계속 변경되고.. 번거롭게 해결하는 경우가 많았는데 CSS만으로 쉽게 해결 할 수 있기에 내용 공유를 해봅니다. how? 일단 전제는, 아직 vh로 높이값을 계산하는 것은 시기 상조 인 것 같습니다. 아니 앞으로도 vh는 쓰면 안될 것 같아요. Andr..

혁종2020.12.24

Programming

[laravel] laravel8.x social login(google login, kakao login, naver login)

Laravel 8.x 에서의 Social Login 지원 시작! 최근 Laravel이 8.x 버전으로 올라가면서, laravel에서 각종 소셜 로그인을 지원해 주는 것을 발견했다. 기존에 Oauth2.0 방식으로 로그인 하는 대부분의 플랫폼들은 정말 쉽게 구현이 가능해졌다. laravel.com/docs/8.x/socialite Laravel Socialite - Laravel - The PHP Framework For Web Artisans Laravel Socialite Introduction In addition to typical, form based authentication, Laravel also provides a simple, convenient way to authenticate wit..

혁종2020.12.18

Programming

Google App Script 시작하기(2) - 외부 프로젝트에서 내가 만든 Google App Script API 호출하기

시작하기 앞서, 이전 설정부분을 보시려면 아래 문서를 클릭해 주세요. Google App script 시작하기(1) - Google App script로 API 구현하기 이번 프로젝트에서 구글 설문지를 이용한 프로젝트를 진행 하게 되었습니다. 아쉽게도 구글 설문지 (Google Forms) API는 존재 하지 않았습니다. 대신, Google Apps Script 라는게 있더라구요! 뭔지 조금 jjong-factory.tistory.com 구글 로그인 (Laravel Framework)을 구현하는 방법을 알아보시려면 아래 문서를 클릭해 주세요. [laravel] laravel8.x social login(google login, kakao login, naver login) Laravel 8.x 에서의 S..

혁종2020.12.17

Programming

Google App script 시작하기(1) - Google App script로 API 구현하기

이번 프로젝트에서 구글 설문지를 이용한 프로젝트를 진행 하게 되었습니다. 아쉽게도 구글 설문지 (Google Forms) API는 존재 하지 않았습니다. 대신, Google Apps Script 라는게 있더라구요! 뭔지 조금 살펴 보았습니다. Apps Script – Google Apps Script Example Scripts From productivity tools to enterprise automation, see what you can build with Google Apps Script. Learn more » www.google.com 구글에서는 Apps Script 라는 Google 자체 스크립트를 편집하여 API를 만들수 있는 기능을 제공 합니다. 해당 기능을 이용하여 구글 API 에서..

혁종2020.12.17

Programming

[NVM] NVM을 이용하여 node.js 버전 관리하기

개요 여러가지 프로젝트를 동시에 진행 하다보면, 프로젝트 마다 node 버전이 달라서 컴파일 하는데 애먹는 경우가 자주 있는데, 그럴때 NVM을 이용하여 node.js 버전을 관리해 주면 쉽게 해결 할 수 있다. 이 NVM을 MAC (Linux), Window 환경 두가지에서 모두 구축하여 노드 버전을 쉽게 관리 해보자! Mac (Linux) 환경에서 NVM 활용하기 github.com/nvm-sh/nvm#install--update-script nvm-sh/nvm Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - nvm-sh/nvm github.com 일단 위 git 페이지를 참조하..

혁종2020.12.14

Programming

국가별 ISO, 전화번호 코드 Excel

country code for the relief call excel country code for the relief call and ISO-code excel 파일 입니다. 개발 하다가 필요해 져서 작업하였습니다. 동일 국가에 여러 전화번호 코드가 있는 경우에는 여러 행으로 분류 해 두었습니다. 필요하시면 다운로드 하시구 광고 한번씩만 눌러주시면 감사하겠습니다 ㅎㅎ

혁종2020.06.12

Programming

CKEditor5 - Web Editor CKEditor5 이미지 업로드

시작에 앞서 일단 CKEditor 를 사용하기로 마음을 먹었는데, 에디터를 커스텀 할 때 가장 첫 번째로 문제가 되는 점은 역시 이미지를 업로드 하는 문제일 것이다. CKEditor는 해당 부분을 굉장히 말끔하게 해결해 주었는데, CKEditor5는 국내 문서가 별로 없는것 같아서 따로 정리해 본다. 만약, 라이센스문제를 찾아보고 계신다면 아래 문서를 확인해 주시면 될 것 같습니다. CKEditor 소개 및 라이센스에 관한 문서 보러가기 CKEditor5 - Web Editor CKEditor5 소개 및 라이센스 문제 CKEditor 예전에는 웹 에디터로 네이버 스마트에디터2를 사용하다가, 요즘 디자인에는 너무 구시대적 이라는 발상이 들어서 새로운 에디터를 찾아보다 Ckeditor를 찾게 되었다. CKE..

혁종2020.03.13

티스토리툴바