본문 바로가기

전체 글

HTML5 Content Models Metadata Cotent Flow Content Phrasing Content Embedded Content Sectioning Content Heading Content Interactive Content # 참고 https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories 더보기
프론트엔드 엔지니어도 알면 좋을 스프링 부트 기본 #2 Spring Boot + Maven 환경으로 프로젝트를 만들고 기본적인 구조를 파악해보자. 간단하게 intelliJ IDE로 프로젝트를 생성했다. 사용한 intellJ IDE 버전은 2019.3.3.입니다. 메뉴 File > New > Project 선택하면 아래와 같은 창이 나오는데 Spring Initializr를 선택하고 수정 없이 다음 버튼을 눌렀다. 만약 다른 에디터를 사용한다면 https://start.spring.io/에서 설정한 후 파일을 다운로드하면 된다. Type을 Maven Project를 선택하고 다음 버튼을 눌렀다. Web으로 만들 것이라 Spring Web 체크한 후 다음 버튼을 누르면 뭔가 설치가 되면서 프로젝트가 만들어진다. 처음 만든 프로젝트의 폴더 구조는 다음과 같다. m.. 더보기
프론트엔드 엔지니어도 알면 좋을 스프링 부트 기본 #1 프로젝트 구성 방법은 구성하는 사람의 선호도와 경험에 따라 다양할 것이다. 그러나 한국에서 자바 기반의 웹 프로그래밍이 보편화되어 있고 스프링 부트(Spring Boot)로 구성된 경우가 많다. 스프링 부트 기반의 프로젝트를 clone 받았을 때 어떻게 구동해야 할지부터 막막했던 완전 초심자가 구동하는 방법을 익히기 위해서 학습한 내용을 정리해본다. 📃 JAVA와 JSP(Java Server Page) 자바를 현업에서 사용해본 적 없었고 JSP도 오래전에 스터디로 학습했던 게 전부였다. 그래서 둘은 무슨 관계인가부터 학습해야 했다. 자바는 객체지향형 프로그래밍 언어로 정리하고 보니 그러면 JSP는 무엇이며 왜 생겨났을까 궁금했다. JSP의 효용을 알기 위해서는 Java Servlet과 톰캣으로 웹 애플리.. 더보기
단위 테스트(Unit Test) 작성 코드가 변경되면 자동으로 테스트가 수행되도록 스크립트를 하나 추가했습니다. // package.json "scripts": { "test": "jest", "test:watch": "jest --watchAll" }, 그리고 layouts 폴더도 테스트 커버리지에 포함시켰습니다. // jest.config.js collectCoverageFrom: [ '/components/**/*.vue', '/pages/**/*.vue', '/layouts/**/*.vue' ] 테스트 코드를 작성하면서 만났던 이슈는 체크 박스의 checked 값을 확인할 수 없다는 사실이었습니다. 그래서 체크 박스에 vlaue 값을 추가했고 그 값으로 렌더링이 정상적으로 되었는지 체크했습니다. // TodoList.vue // be.. 더보기
좋은 강의 무료로 듣는 법 Cousera라는 사이트가 있습니다. 유명한 대학교 강의를 들을 수 있는 곳이죠. 아는 분도 있겠지만 모르시는 분들을 위해 무료로 듣는 법을 소개합니다. 회원 가입 후 듣고 싶은 강좌를 검색합니다. 무료로 등록 버튼을 클릭하면 안내 창이 나옵니다. 하단에 청강이라는 링크를 발견할 수 있을 텐데요. (없는 경우에는 청강 불가능) 청강 버튼을 누른 후 새로 고침 하면 무료로 등록하기 버튼이 강좌로 이동으로 바뀝니다. 그리고 아래처럼 강좌를 들을 수 있게 됩니다. HTML, CSS, and Javascript for Web Developers 과정은 한글 자막도 제공하고 있으니 관심 있는 분이라면 들어보면 좋겠습니다. 청강은 수료증이 나오지 않습니다. 유로로 신청 후 강의를 듣고 과제를 완수하면 수료증이 발급.. 더보기
단위 테스트(Unit Test) 환경 구축 create-nuxt-app로 프로젝트를 설정할 때 단위 테스트 프레임워크를 선택할 수 있다. AVA, Jest 중에 선택할 수 있는데 React.js로 개발했을 때 사용한 Jest를 사용한 경험이 있었기 때문에 Jest로 선택했다. 참고로 Jest는 facebook에서 만들었다. 선택하지 않은 경우에는 테스트 관련 모듈을 수동으로 설치 및 설정해줘야 한다. 아래 모듈을 --save-dev로 추가하자. @vue/test-utils : vue 코드를 단위 테스트할 때 필요한 유틸을 제공한다. jest : 단위 테스트 작성에 필요한 matcher, teardown 등을 제공한다. mock, spy로 테스트하는 방법도 안내하고 있으니 공식 사이트를 방문해서 꼭 보도록 하자. vue-jest , babel-je.. 더보기
Todo App 만들기 with nuxt + API 이번 시간에는 이전 포스팅에서 이야기했듯 API(Application Programming Interface) 연동하는 방식으로 변경한다. API를 구성하기 위해서 json-server 모듈을 사용할 것이라 먼저 설치했다. npm install -g json-server db.json 파일을 만들고 데이터를 넣은 후 // db.json { "todos": [{ "id": "todo-1", "text": "API 연동하기", "completed": false }] } json-server를 실행하고 콘솔에 노출되는 URL로 접근하자. json-server --watch db.json nuxtjs/axios가 설치되어 있지 않다면 설치하자. 그리고 API 호출하는 코드를 작성했다. service 폴더 안에 .. 더보기
Todo App 만들기 with nuxt 2 지난 글에 이어 이번에는 수정 기능을 추가했다. 😀 할 일 목록을 추가할 때와 수정할 때 폼이 동일해서 TodoInpuForm이라는 컴포넌트로 분리했고 추가, 수정 함수를 callback props로 받았다. 추가, 수정일 때 버튼의 문자도 다르게 노출시켰다. 수정 일 때는 입력한 텍스트를 노출해야 하기 때문에 옵션으로 기본 텍스트 값을 추가했다. // TodoInputForm.vue {{ mode === 'add' ? 'ADD' : 'EDIT' }} 할 일을 추가할 때는 defaultText가 필요하지 않기 때문에 props를 생략했고 수정할 때는 defaultText를 props로 전달했다. // pages/create.vue Create Todo // pages/edit.vue Edit Todo U.. 더보기