router함수를 사용해 페이지 엘리베이터를 만드는 방법 이번글에서는 페이지 엘리베이터, 줄여서 PE를 만드는 방법에 대해서 설명해보자 한다. 변경사항이 즉시 웹페이지에 적용되는 Node.js 개발환경에서는 view page를 주기적으로 변경해야 할 상황이 발생한다. 예를들어 A라는 컴포넌트를 사용하는 2개의 페이지가 있다고 하자. 해당 컴포넌트는 각기 다른 위치에 배치되어있기 때문에 수시로 두 페이지를 이동해가며 시각적인 피드백을 받아야 한다. 이러한 작업이 2개 페이지에만 해당된다면 어떻게든 page next, prev정도로 사용 가능하겠지만 3개, 4개, 그 이상의 페이지에서 피드백이 필요하다면 어떨까? 매번 페이지 url를 입력해가며 이동하는건 피곤하고 비효율적인 작업일테고, 보통의 경우라면 엘리베이터 페이지를 사용할것이다. 이와같이 사용중인 페이지의 .. 개발/프론트엔드 2020. 11. 26. 00:35
Nuxt.js에서 컴포넌트의 CSS자산을 관리하는 방법 css: [ '~assets/css/common.scss' ], Nuxt.js 환경에서 개발을 진행하다 보면 컴포넌트 또는 글로벌 요소의 css를 수정해야 하는 경우가 있다. 이러한 상황에서 하나의 파일로 구성된 글로벌 css파일은 여러 문제를 발생시키게 된다. 클래스나 상속등의 문제로 이슈가 발생했을 경우 이를 고치기 어렵다(각기 다른 css코드가 문제를 일으킬때가 있기 때문) 글로벌 요소의 특성상 단일 클래스에서 상속을 통해 코드를 작성하는데 이로인해 가독성이 떨어진다. 자산 로드 속도등의 문제는 뒤로하고, 개발단계에서 발생하는 문제만 봐도 꽤나 심각한것을 알 수 있다. 이를 방지하기 위해서는 요소별 css를 모듈화시켜 사용해야 하는데, 이를 개발하는 과정에 있어 필자가 사용한 방식을 소개해보도록 하.. 개발/프론트엔드 2020. 11. 22. 23:06
Codeigniter 4에서 바뀐 것들 내가 주로 사용하는 백엔드 프레임워크인 Codeignite가 최근에 3에서 4버전으로 버전업이 이루어졌다. 대표적인 변경점으로는 CLI기능 지원, 폴더구조 간략화, MVC 패턴 구조에서 모델의 기능 축소, TDD기능 포함등의 개선이 이루어졌다. 프레임워크의 버전업이 이루어짐에 따라 문서또한 새롭게 작성되었는데 이를 보고 개발함에 있어 내가 겪었던 이슈들을 공유해보고자 한다. 모델의 기능 축소 이번 버전에서는 기존의 3에서와는 달리 모델이 아닌 컨트롤러에서 쿼리를 요청하도록 변경되었다. 이전에는 모든 쿼리를 model폴더에 있는 queryModel.php등의 파일에서 인자 넘겨받아 모델 함수에서 결과값을 return하는 방식이였지만 이번 버전에서는 모델 파일에서는 쿼리에 대한 필터링이나 일부 설정만 지원하.. 개발/백엔드 2020. 11. 16. 01:50
Vue프로젝트에 적합한 퍼블리싱을 하는 법 Vue프로젝트에 적합한 퍼블리싱이란? 퍼블리싱된 파일을 vue에 적용하는 작업을 수월하게 하기 위해 퍼블리싱 단계에서 할 수 있는 일은 두가지가 있다. vue프로젝트의 폴더구조를 고려해 static file들을 배치한다. 사용하기로 협의된 디자인 프레임워크를 cdn방식으로 적극 활용한다. 퍼블리싱 단계에서 파일들을 관리하는 방법은 여러가지가 있는데 퍼블리싱하기 편한 폴더구조일수록 프로젝트에 이식하기 어려운 구조일 가능성이 다분하다. 예를들어 시안을 보고 작업한다고 할 경우 아래와 같이 폴더구조를 작성할 수 있다. index.html public/ design/ 201011.psd imgs/ dummy.png css/ common.css main.css sub.css lib/ framework.min.js.. 개발/프론트엔드 2020. 11. 5. 01:29
프리랜서로 살아남기#2 - 일은 인맥으로 구하는게 맞다 한달만에 연재하는 프살남 시리즈다. 이번 글의 주제는 인맥에 대해서이다. 나는 개발 경력도 얼마되지 않았고 일개 대학생이기 때문에 인맥이라고 말할만한 것도 마땅치 않다. 프리랜서로 활동하기 전부터 알고있던 IT인력이라곤 피시방 알바생 형누나밖에 없었다. 그러다보니 인맥으로 일을 구하는 것은 매우 어려웠다. 그래서 나는 업계에 아는 사람들을 만들기 위해서 현재 프리랜서로 활동하고 계시는 분들중 한분을 어렵게 컨택하여 인터뷰를 요청했다. 이 분은 현재 앱 개발자 프리랜서로 활동중이고 천단위 프로젝트를 소화하고 있는 능력자셨다. 인터뷰 질문으로 가장 궁금해할만한 내용인 '일을 구하게 된 경로'에 대해서 질문하였다. 형, 그러면 계약(프로젝트)는 구하는 경로가 어떻게 되요? 인터넷에서 보니까 인맥으로 구한다고 .. 개발/기타 2020. 7. 14. 01:08
프리랜서로 살아남기#1 - 대학생은 어디에서 일을 구하나 마지막으로 글을 올린지 4개월정도 지났다.. 그동안 엄청나게 바쁜건 아니였지만 글을 쓰지 못했다. 2020년 상반기는 내가 프리랜서로써 처음 발딛음하는 시기였고 아직 안정기에 들진 못했지만 약 반년간 프리랜서로 살아남기 위해 했던 일들을 한번 써볼까 한다. 지금도 마찬가지지만, 처음 프리랜서를 시작할때는 정말 아무것도 모르고 있었다. 세금이니, 계약서니, 영업이니 아는게 하나도 없었고 조금이라도 정보를 얻기위해 실무에 있는 개발자 지인들에게 연락해봤지만 그들또한 IT프리랜서에 대해서는 무지했다. 결국 경험을 통해 배워나가야만 했고 이 과정에 있어서 정~말 다양한 일이 있었다. 제대로 프로젝트를 끝내서 기분이 좋았던 일도 있었지만 기술부족으로 인해 배상금을 물을뻔한 일도 있었다. 이제부터 이야기 해보겠다... 개발/기타 2020. 6. 20. 05:52
내가 노션(Notion)을 삭제한 이유 글을 읽기에 앞서 저는 1인으로 활동하고 있는 프리랜서이며 모든 업무 프로그램의 목적을 원활한 협업보다는 업무 정리와 효율성에 초점을 두고 글을 작성했음을 알립니다. 나는 평소에 외주 업무를 주로 한다. 매일 해야할 투두 리스트를 작성하고 캘린더에 미팅과 마감 일정을 등록하며 진행상황을 공유하는 업무가 주가 되고 이를 정리하기 위한 앱으로 노션을 사용하고 있었는데 사용하면 할수록 업무 관리 앱으로써 가장 기본적인 요소가 부족하다는 느낌을 받았고 노션 앱을 삭제하게 되었다. 강력한 기능, 그러나 과도한 이모티콘 노션에서는 Template라는 페이지 규격을 제공하며 투두 리스트나 멤버 목록, 캘린더 페이지를 한번에 생성할 수 있다. 이는 다양한 형태의 페이지를 원하는 사용자에게는 정말 유용한 기능이다. 하지.. 개발/기타 2020. 2. 26. 19:38
AWS EC2 웹서버 설치하기 1. AWS EC2 Instance - Ubuntu 16.04 cui 으로 생성 2. 패키지 설치하기 php7, mysql5, apache2, php-mysql, mysql, node-js, npm, pm2 3. AWS RDS Instance 생성하고 ec2 서버에 연결 4. ip:port으로 접속해서 웹서버 정상적으로 작동하는지 확인 5. AWS Route53으로 포트 포워딩 설정 개발/인프라, CS 2020. 2. 13. 00:26