소소한 기록 방

일단 백엔드를 배우고 파베를 하자. 파이어베이스... 뭐 좋지만 딱 프로토타입 제작용이다 라는 말이 딱 맞는 것 같다. 근데 아직 백엔드 할 줄 모르나, 제작은 해야 하니 파이어베이스 9으로 제작 해보았다. 일단 Create(만들기)와 Read(읽기)가 가능한 게시판 폼을 제작해보았다. BoardAdd.Vue 글 쓰기 작성자 제목 내용 글 작성 v-model로 데이터를 넘겨 줄 수 있도록 html사이드에서 제작 해주었다. 폼은 bootstrap 5로 제작 해주었다. 폰트나 디자인은 나중에 수정 해야한다... 사진이나 파일 넣는 기능또한 넣어야 하기 떄문에 글 쓰기 페이지 디자인은 나중에 다시 할 필요가 있다. 스크립트 사이드를 확인 해보자. 이 또한 firebase 9이 되면서 문법이 새롭게 바뀌었다. ..

이제부터 백엔드쪽 기능들을 건들여볼까 했다. 근데 나는 아는 것이 없었기에.. 플러터에 사용해봤었던 파이어베이스로구축 해볼까 했다. 그냥 대충 구글링해서 파베 쓰면 되겠지 했었던 나는 죽어있었고.. 문제점은 파이어베이스 9, Vue 3로 넘어오면서 두 친구 다 문법이 상당히 많이 변경 되었다는 점이다. 나는 이를 알 리가 없었고, 진짜 시간 많이 잡아 먹었던 것 같다. 결국엔 구현 했다는 것이 중요한 거 아니겠나? 회원 가입 페이지 부터 천천히 알아보자. 회원가입 이름 이메일 주소 이메일은 타인에게 유출되지 않으며, 로그인 시에만 사용 됩니다. 비밀번호 회원가입 bootstrap 5를 통하여 간단한 로그인 페이지를 만들어주었다. 당연히 container로 묵여있기 때문에 반응형이 되는 웹이다. 파베 9으..

먼저 학교장 인사말부터 작업 시작 했습니다. 원래의 이사장 인사말 디자인도 뭐 나쁘지 않지만 일단 사진 업데이트 및 폰트설정을 했다. 글은 그대로 가져오고 모바일 웹과 대응 가능하도록 제작하였다. 학교장 인사말 지난 30여 년간 목회를 하면서 느낀 것은 교회학교(Sunday School)의 중요성입니다. 그러나 제한된 시간과 환경 속에서 학생들을 하나님께서 원하시는 하나님의 사람으로 양육하는 것은 무척 어렵고 고민스러운 문제였습니다. 일주일에 6일 동안 복음과는 거리가 먼 세상의 환경에서 교육을 받으며, 세상의 교육에 우리 자녀들의 삶과 미래를 맡길 수 밖에 없음을 늘 안타깝게 생각해 왔습니다. 여러 나라의 선교현장을 보면서, 자녀들에게 다양한 언어를 어릴 때부터 가르쳐 세계적인 지도자(Global Le..

https://apis.map.kakao.com/ 카카오 지도 API는 무료로 제공되고 있다. 지도 API KEY를 등록하면 바로 사용할 수 있도록 되어있다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 디벨로퍼 홈페이지에서 API 키를 받고 무료로 사용 할 수 있다. 지도뿐만 아니라 카카오톡 채널, 로그인 메시지 등등 다양한 서비스도 무료로 제공하고 있다. 다음과 같은 api key를 발급 받아야 지도로 사용할 수 있다. 이런 식으로 스크립트를 가져오면 된다. var contain..

푸터를 직접 만들까 생각하다가, 부트스트랩 example을 활용하여 개발했다. 전부 라우터 링크로 묶어주어 라우팅 될 수 있도록 노가다 해주었다. (50595) 경상남도 양산시 물금읍 황산로 733-21 | TEL: 055-387-2941 학교 소개 이사장 인사말 학교 연혁 교육 철학 학교 시설 학교 연혁 교육 정보 학사 일정 커리큘럼 입학 FAQ 입학 안내 모집 요강 교육비 안내 상담 문의 국크 이야기 학교 소식 학교 활동 학생 마당 © 2021 Copyright Onnuri International Christian School. ALL RIGHT RESERVED 모바일 웹 대응도 가능한 부트스트랩으로 만든 푸터이다. 다음은 트랜지션인데, 다른 화면으로 넘어갈때의 트랜지션을 지정해주었다. 내 사랑 f..

메인 페이지에 뭘 만들어야할까 다양한 레퍼런스들을 찾아보다가 그냥 깔끔 무난한 스타일로 swiper하나를 제작 해보기로 맘먹었다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 대규모 프로젝트들에서도 많이 사용하고 현업에서 진짜 많이 사용하는 슬라이더이다. https://www.dji.com/kr DJI - 공식 웹사이트 DJI 기술로 새로운 가능성의 미래를 엿볼 수 있습니다. DJI Air 2S, D..

본격적인 개발의 시작이다. 일단 vue3 webpack을 사용해주었다. 모듈 관리 시스템이라고 보면 편하다. npx degit ParkYoungWoong/vue3-webpack-template#eslint 이름 헤로피 블로그를 운영하시는 프론트엔드 개발자님의 깃허브에서 가져왔다. eslint 설정이 깔끔해서 사용한다. webpack 내에 있는 의존성 패키지는 다음과 같다. "devDependencies": { "@babel/core": "^7.13.10", "@babel/plugin-transform-runtime": "^7.13.10", "@babel/preset-env": "^7.13.10", "@vue/compiler-sfc": "^3.0.11", "autoprefixer": "^10.2.5", "..

페페 표정으로 플러터 개발을 하고 있던 도중, 개발 이론만 공부해서 될 게 아니라 대회든, 해커톤이든, 프로젝트든 할려면 토이 프로젝트를 계속 해봐야 진짜 실력이 늘 거 같아서 플러터로 앱도 만들어보고, 웹 개발도 계속 해보고 하다가 동아리에서 개발 과제를 내주었다. 또 마침 개발 해야 할 것이 존재하였고.. 바로 내가 졸업한 온누리 국제 학교이다. 문제가 많은 웹 페이지인 것을 알 수있는데 디자인은 그래도 당시에 템플릿? 같은걸 구매해서 사용 한 것 같아서 괜찮지만, 일단 관리를 하는 사람이 없다는 것이 첫번째 문제이고, 백엔드 차원에서 관리 하는 사람도 누군지 모르겠고.. 그냥 사용자도 없고 취약점은 많은 사이트였다. PHP 기반 테크노트라는 곳에서 관리를 하는 것 같은데 사이트는 다음과 같다. ht..