JJONG`sFACTORY

전체 글

개발, 맛집, 여행에 대한 정리!
프로그래밍 일지/명빵
[개인프로젝트] next.js 퍼블리싱 / Layout / Component / propType 처리
퍼블리싱 사실 퍼블리싱은.. 지루해서 적을게 없긴 하다 디자인 자체를 못하기도 하고.. arknights tool box쪽 디자인과 인게임 디자인을 참조해서 만들었다. 색감도 인게임 디자인과 명일방주 공식사이트를 참조하였다. 인게임 형태의 카드모양을 퍼블하는쪽이 조금 힘들었다. 상단 이미지는 랜덤한 몇개의 이미지에서 변경 되도록 처리 해 두었다. Layout / Component / styles 처리 루트 아래에 components, layout 을 따로 두어 처리 했다. 각 컴포넌트/ 페이지별로 사용하는 스타일은 module로 처리 했다. import pageLayoutCss from "@/styles/layout/page.module.scss" export default function PageLay..
혁종
혁종
프로그래밍 일지/명빵
[개인프로젝트] 명일방주 정보 조회용 프론트엔드 세팅 (Next.js + SCSS)
서론 일단, Next.js로 클라이언트를 개발해 보기로 마음 먹긴 했는데.. 나는 사실 React도, Next.js도 사용해 본적이 없다.. ㅎㅎ.. Vue.js를 사용해 본 적이 있어서 대충 개념을 하루정도 익힌 뒤, 일단 세팅.. 퍼블리싱은 SCSS를 사용하기로 했다. Next.js에 SCSS 세팅 일단 프로젝트를 만들자. npx create-next-app 얼추 세팅을 진행하고 npm i sass sass 모듈을 추가해 주었다. 이후 해당 부분 세팅이 제대로 진행 되었는지, 기존에 있는 global.css, Home.module.css를 global.scss, Home.module.scss로 이름 변경 하였다. 또, 전역 스타일링을 위해서 _mixins.scss, _variable.scss를 추가 ..
혁종
혁종
프로그래밍 일지/명빵
[개인프로젝트] 명일방주 정보 조회용 프로젝트 개발 시작!
Laravel + MongoDB 세팅 먼저 JSON 데이터로 되어있는 게임 데이터를 최적화 하여 사용 할 수 있도록 MongoDB를 세팅을 진행 하였다. https://github.com/jenssegers/laravel-mongodb GitHub - jenssegers/laravel-mongodb: A MongoDB based Eloquent model and Query builder for Laravel (Moloquent) A MongoDB based Eloquent model and Query builder for Laravel (Moloquent) - GitHub - jenssegers/laravel-mongodb: A MongoDB based Eloquent model and Query bui..
혁종
혁종
프로그래밍 일지/명빵
[개인프로젝트] 명일방주 정보 조회용 개인프로젝트 시작
서론 퇴사 후 잔여 시간동안 개인적인 개발 역량도 늘리고 포트폴리오도 늘릴 겸, 개인프로젝트를 진행 해 보려고 했다. 주제 정하기가 조금 어려웠는데, 개인 프로젝트로 많은 양의 데이터도 처리해 보고 싶기도 하고 새로운 DB, 프론트엔드 언어도 사용해 보고 싶었다. 처음에는 롤토체스와 관련된 프로젝트를 진행하고 싶어서 여러가지 데이터를 찾아보기도 하고 분석하여서 어느정도 정리 하였는데 롤토체스라는 게임의 특성상 데이터가 너무 자주 변경되기 때문에 개인 프로젝트로 진행하기엔느 부적합 하다는 생각이 들었다. 어느정도 하다 보니까 곧 시즌마감이라서 데이터가 확 바뀌고 주기적인 패치 때문에 혼자서는 개발 속도가 따라가지 못하는 문제가 있어서 비슷한 내용으로 개발을 진행하려다 보니 핸드폰 게임이 눈에 들어왔다. 내..
혁종
혁종
Programming
[Laravel] Response 관리
API 형태로 개발을 진행 할 때, 클라이언트와의 협업 중 중요한 부분인 response 값 관리에 대한 정리 내용 입니다. 기능이 나온지는 오래 되었지만.. 개인적으로 업무 하는 것들도 많고 공부를 안 한지가 오래 되어서 정리 차 적어 봅니다. Laravel 내에서의 HTTP CODE값 굉장히 예전부터 Laravel을 사용하던 저는 따로 HTTP CODE값을 정의해 두고 사용하고 있었는데 이번에 개인 프로젝트를 진행하면서 공부겸 공식 문서를 몇가지 살펴보다가 HTTP CODE값이 현재 laravel 버전에서는 이미 정의 되어 있단는 걸 이제야 알았습니다 ㅠ_ㅠ.. Vender/sysfony/http-foundation/Response.php 내에서 정의된 값들을 확인 할 수 있습니다. public co..
혁종
혁종
Programming
[AWS] ACM + Route53을 이용한 SSL(Https) 인증서 발급
서론 서비스를 진행하다 보면 SSL 인증서를 발급받아서 실 서버에 적용해야 되는 경우들이 많이 있습니다. 실 서비스라면 무조건 적용 해야 겠죠? 무료 인증서 발급으로는 letsencrypt 같은 친구들이 있지만, 와일드 카드 인증서의 경우 자동 갱신이 어렵다는 점과 3개월 마다 갱신을 해야 한다는 단점이 있습니다. 하지만 AWS에서 서버를 이용하고 있다면, Route53과 ACM(AWS Certificate Manager)를 이용한다면 갱신이 필요없는 인증서를 발급받아 적용 시킬 수 있습니다. EC2의 로드밸런싱과 Route53, ACM을 이용하여 SSL 인증서를 발급받아 적용시켜 보도록 하겠습니다. ACM을 이용하여 SSL 인증서 발급받기 먼저 인증서부터 발급 받아야 겠죠? AWS 콘솔로 이동하여 AC..
혁종
혁종
PHP/PHP
Laravel - passport를 이용한 로그인 구현 (Oauth)
서론로그인 구현 방식에는 여러가지 방식이 있지만, 요즘에는 Oauth 방식을 이용한 로그인 방식이 많이 사용 됩니다.라라벨에서는 passport라는 인증 관련 확장 프로그램을 제공해 주어, 쉽게 Oauth 방식 로그인구현이 가능합니다.  Laravel - The PHP Framework For Web ArtisansLaravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.laravel.com하지만 한글로 된 문서는 거의 없어서 처음 접해보시는 분들은 구현하기 힘들어..
혁종
혁종
Programming
laravel.log could not be opened in append mode: failed to o pen stream: Permission denied
웹 서버 세팅 중 laravel log와 관련하여 Permission 오류가 뜨는 경우가 많이 있다.문구에서 알 수 있듯, 권한의 문제인데 웹서버에게 권한울 부여 하면 정상적으로 작동한다. sudo chown -R $USER:www-data storagesudo chown -R $USER:www-data bootstrap/cachechmod -R 755 storagechmod -R 755 bootstrap/cache위 명령어들을 입력해 주고, 다시 한번 확인해 보자!
혁종
혁종
Programming
Laravel + Firebase 연동 및 앱 버전 관리
서론 이번에는 앱 관리를 위해서 Laravel에 Firebase realtime database를 연동해 보도록 하겠습니다. 먼저, 구글 계정으로 로그인 해 주신 뒤, 파이어베이스 프로젝트를 생성해 줍니다. Firebase Setting 파이어베이스 프로젝트를 생성 후, 왼쪽 위에 톱니바퀴 아이콘을 클릭 해 주신 다음 프로젝트 설정 -> 서비스 계정 -> 서비스 계정 만들기를 클릭해 줍니다. 그러면, 새 비공개 키 생성 버튼이 활성화 되게 되는데, 해당 버튼을 클릭 후 키 생성 버튼을 눌러주셔서 json 파일을 다운로드 받아 주세요. 그 다음 Realtime Database를 생성해 줍니다. 왼쪽 메뉴에서 빌드->Realtime Database를 선택하여 데이터 베이스를 생성해 주세요. 잠금모드로 시작합..
혁종
혁종
Programming
AWS S3 private + IAM + CloudFront로 보안을 첨가한 파일 업로드 구현
서론 기존에 Laravel을 이용하여 S3 파일업로드에 대하여 설명을 한 적이 있었습니다. 다만, 이때는 public으로 열어둔 S3에 손쉽게 업로드를 구현하는 방법을 설명 드렸었습니다. [Laravel] AWS S3 연동하기 및 파일 업로드 구현 개발을 하다보면 서버 이외의 스토리지 서버를 운영해야 하는 일이 잦습니다. 오늘은, Laravel을 이용하여 AWS의 스토리지 서비스인 S3 연동 방법을 소개해 드리려고 합니다. Laravel은 기본 설정이 jjong-factory.tistory.com 하지만, 연습과 개인프로젝트에서는 상관없지만 실제 서비스 중인 프로젝트에서 위와 같이 구현하게 되면 보안상 이슈가 생기기 마련입니다.. 이제, 위 방법에서 보안을 챙겨보도록 하겠습니다! 버킷 생성 먼저 AWS에..
혁종
혁종
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
혁종
혁종
Programming
CKEditor5 - Web Editor CKEditor5 이미지 업로드(For jQuery)
시작에 앞서 기존, CKEditor5를 사용하여 이미지 업로드 게시글을 올린 적이 있다. 피드백이 너무 늦었지만, 댓글로 문의 주시는 대부분이 그냥 javascript나 jquery를 사용하여 개발중이신 분들이 많은 것 같았다. CKEditor5 - Web Editor CKEditor5 이미지 업로드 시작에 앞서 일단 CKEditor 를 사용하기로 마음을 먹었는데, 에디터를 커스텀 할 때 가장 첫 번째로 문제가 되는 점은 역시 이미지를 업로드 하는 문제일 것이다. CKEditor는 해당 부분을 굉장히 말끔 jjong-factory.tistory.com 해당 분들을 위해서 조금 내용을 수정하여, jquery를 사용하시는 분들도 이미지 업로드 모듈을 쉽게 구현하도록 예제를 들어서 설명을 진행해 보려고 한다!..
혁종
혁종
혁종
쫑 팩토리
상단으로

티스토리툴바