사진 찍는 개발자의 365일

컴포넌트는 화면의 영역을 구분해서 개발할 수 있는 뷰의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 위의 그림과 같이, 화면단에서 표현되는 부분들을 컴포넌트 단위로 분리하면 하나 하나에 로직을 넣어 유지보수도 쉽고 코드 관리도 더 쉽게 할 수 있다. 컴포넌트 생성 코드 형식 Vue.component('컴포넌트 이름', { //컴포넌트 내용 }); 컴포넌트 생성 후 표시하는 방법 Vue.component('app-header', { template: 'Header Component }); 컴포넌트를 통해 app-header를 선언하게 되면, html 코드에 해당 컴포넌트의 이름을 태그 형식으로 쓸 수 있다. app-header 컴포넌트의 템플..

vue에서 template 문법이란 화면을 조작하는 방법. 템플릿은 크게 데이터 바인딩과 디렉티브로 나뉨. 데이터 바인딩 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다. {{ message }} //script 단 new Vue({ data: { message: 'Hello Vue.js' } }); 위와 같은 방법으로 html에 vue의 데이터를 입력시킬 수 있다. 디렉티브 디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있다. Hello Vue.js new Vue({ data: { show: false } }); 위와 같은..

인스턴스는 뷰로 개발하게되면 필수적으로 사용해야하는 코드. new Vue(); 보통 이런식이나 var vm = new Vue(); 이런 식으로 사용한다. 이 Vue 인스턴스에는 미리 정의되어있는 속성과 메서드(API)들이 있기 때문에, 이를 활용해서 개발을 진행하면 편하다. 우선 대표적인 인스턴스 속성과 API를 살펴보면 new Vue({ el: , //인스턴스가 그려지는 화면의 시작점(특정 HTML 태그들) template: , //화면에 표시할 요소(html,css등) data: , //반응성(Reactivity)이 반영된 데이터 속성. 여기서 선언된 데이터는 html에서 {{ }}로 사용 가능 methods: , //화면의 동작과 이벤트 로직을 제어하는 메서드. created: , //뷰의 라이프 ..

실기는 떨어졌다. 공부가 너무 부족했다. 어떤건지는 알고 있었던 문제도 있었는데, 답이 RASP엿나, 였는데 ASP로 쓰질않았나. 순서를 잘못보고 틀리지 않았나 정말 진짜 시험 보고 나와서 울고싶었다. 다행히 그 다음날, 면접 관련해서 연락이 왔다. 1차 기술면접을 통과했고, 2차 인성면접을 보고싶다고 하셨다. 날아갈 것 같았다. 그러면서 어떤 면을 좋게 봐주신 건지도 궁금했다. 애초에 내가 기술면접을 완전 잘 본것도 아니고, 많이 절었음에도 그렇게 봐주신 것이 감사했다. 2차 인성면접은 이틀 후로 잡았고, 인터넷에서 인성면접관련해서 글을 많이 찾아봤다. 대부분 대기업이 아니라면 인성면접은 약간 연봉협상 관련해서 이야기하고, 회사 문화에 대해서 잘 맞는 사람인지 알아보는 그런 자리일 확률이 높다고 했다...

스프링 부트를 공부하면서 정보처리기사를 준비중이다. 일단 필기는 준수하게 통과했고, 실기를 공부하고 있다. 사람인과 잡플래닛에 이력서와 포트폴리오를 올려놨다. 깃허브는 국비교육때 진행한 프로젝트를 올려놓았고, 링크는 cafe24에 호스팅한 사이트를 직접적으로 올려놓았다. 기본적으로 연락오는 곳들은 SI업체가 많았고, 형식상으로 메일을 보내는 곳이 대부분이었다. '귀하가 우리 회사가 찾는 인재 같아서...' 하지만 개인적으로는 와닿는게 없었다. 그러던 중, 일본계 한국기업에서 연락이 왔다. 하지만 백엔드가 아닌 프론트앤드였다. 좋았던 점은 만화 관련 일을 다루는 곳이었다.(어렸을 때부터 만화를 달고 살았다보니...) 나는 분명 'UI/UX 프론트 반'을 나오긴 했지만, 반 이름은 대부분 명목상 짓는 경우가..

맨날 이론강의만 듣다보니 다시 프론트 코딩이 하고싶어져서 찾던 도중에, 예전에 강의에서 들었던 SCSS를 인텔리제이에서도 쓸 수 있을까 하고 알아보았다. 대부분이 그렇듯 항상 내가 원하는 정보는 외국어로만 나와있더라... 흑흑 한 단계 한 단계 정리해보겠다. 일단 기본적으로 원문은 아래의 링크를 참고했다. intelliJ SCSS 관련 도큐먼트 Sass, Less, and SCSS - Help | IntelliJ IDEA www.jetbrains.com SCSS설치 전 필수 설치 자료(Node.js, File Watchers) Node.js 바로가기 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs..

닌텐도 클론 사이트를 만들어 볼 겸 스프링 부트 프로젝트를 생성했다가 처음 보는 오류를 발견했다. Hibernate ORM을 사용해보려고 했는데, UnknownPluginException이 발생했다. 설정부터 이렇게 오류가 나면 진짜 코딩하고싶은 맛도 싸악 떨어지지만.. 아냐.. 그래도 우리는 해야된다... 하나하나 읽어보자.. 대부분의 UnknownPluginException은 해당 플러그인의 홈페이지를 보면 해결방법이 다 나와있다. org.gradle.api.plugins.UnknownPluginException: Plugin [id: 'org.hibernate.orm', artifact: 'org.hibernate-gradle-plugin: 5.4.29.Final'] was not found in ..

집에서는 윈도우로 강의를 듣고, 밖에서는 맥북으로 강의를 듣느라 둘 사이에 자바 버전이 달라서 일어난 해프닝... 처음에는 왜 실행이 안될까...하다가, 오류를 읽어보니 뭔가 자바 버전에서 생긴 문제 같았다. 위와 같이 Could not target platform: 'Java SE 11' using tool chain: 'JDK 8(1.8)'. 이라는 오류가 떴다. 내가 맥북에 자바 1.8을 깐 기억밖에 없는 것으로 보아, Java SE 11을 이용해야 하는데, 내 자바 버전이 1.8이여서 생기는 오류 같았다. 얼른 다시 Java SE 11을 깔았다. 오라클에서 받으면 된다. 자기 컴퓨터 버전에 맞게끔 받아준 뒤, 삭제의 경우는 구글링을 열심히..! 우선 Project Structure에서 Projec..

본 코드 리뷰는 쇼핑몰을 제작하면서 쓴 코드를 다시 한 번 살펴보고, 코드 품질을 향상 시킬 수 있는 방안을 찾기 위함입니다. 대부분은 '아 이렇게 하지말고 저렇게 하면 좋지 않았을까' 하는 아쉬움이겠지만, 그래도 그런 경험들이 쌓여서 더 좋은 코드를 만들어낼 수 있지 않을까 하는 마음에서 이 코드리뷰를 진행해봅니다. #1. HomeController @Controller public class HomeController { @RequestMapping(value = "/", method = RequestMethod.GET) public String home(Locale locale, Model model) { return "index"; //index.jsp와 연결 } } #2. CustomContro..

7월달부터 국비지원으로 개발을 배우고 있습니다. 그동안은 학원에서 컴퓨터로 했는데, 이제 프로젝트도 다가오고 코로나 시국으로 계속해서 비대면 수업을 진행하다보니 사진 편집용으로만 사용되고 있는 맥북을 좀 써봐야겠다고 생각하게 되었습니다. 하지만... 생각보다 맥으로 프로그래밍하는 것은 굉장한 인내심을 요구했고.. 알 수 없는 오류들이 나와도 윈도우보다 훨씬 적은 답변들만이 인터넷에 존재해서... 여러 사이트들을 돌아다니며 정보들을 종합해서 문제를 해결하고 있습니다 ㅠㅠ... 그래서 오늘은! 자바 환경 변수 설정 및, 왜인지 모르게 자바를 깔면 설치되는 JavaAppletPlugin 해결법에 대해서 알아보겠습니다. 어떻게 보면 JavaAppletPlugin이 환경변수 설정을 막아버려 생기는 오류를 방지하기..