또띠아 참치 피자 레시피

요즘 골목 식당에 나오는 참치 피자 맛이 궁금해서 만들어 봤습니다. 집에 스파게티용 토마토 페스토, 토르티야가 있길래 아래처럼 조합해 봤습니다. 재료 스파게티용 토마토 페스토 2큰술, 또띠아, 모차렐라 치즈, 참치캔 풀무원 신 생가득 통밀 또띠아 COUPANG www.coupang.com 지오바니 유기농 토마토 바질 파스타 소스 COUPANG www.coupang.com 상하치즈 모짜렐라 피자용 슈레드 치즈 COUPANG www.coupang.com 사조 안심따개 살코기참치 85g x 10p + 마일드참치 안심따개 100g x 4p COUPANG www.coupang.com 1. 또띠아 위에 토마토 페스토를 바른다. 2. 치즈를 과하지 않게 올린다. 골목식당을 보니 많이 넣는 게 꼭 좋은 것만은 아니라고..
요리 노트 2020. 9. 5. 16:33
Proxyman으로 인앱 웹뷰(WebView) 디버깅 하는 방법

Chrome, Safari 브라우저로 디버깅 방법은 웹뷰 디버깅에 비해 쉽습니다. Android 기반의 Chrome은 Chrome 브라우저를 사용해서 쉽게 디버깅 가능하고 iOS 기반의 Safari는 Safari technology preview 도구를 사용하면 됩니다. 하지만 App에 Webview경우 접근할 방법이 없어서 디버깅하기 어렵습니다. 제가 생각하는 최선의 방법은 Proxy 툴을 이용해서 로컬 서버 페이지와 스크립트를 바꿔서 이슈를 차근이 해결하는 방법뿐이다. Mac 사용자라면 무료도구인 Proxyman을 추천합니다. 같은 기능을 하는 도구로 charles proxy 도 있으나 이 도구는 30일 동안만 무료 사용 가능합니다. Windows 사용자라면 Fiddler를 추천합니다. 사용방법 Pr..
개발 노트 2020. 8. 22. 18:35
마틴 파울러 리팩터링 2판

마틴 파울러의 리팩터링이 자바스크립트 언어로 다시 쓰여진다는 출간 소식을 듣자마자 그 책을 구입했지만 못 읽고 있었다. 최근 시간이 조금 나서 책의 예제를 따라 해봤다. 우선 1장을 따라했는데 실무에서 잘 사용하지 않는 몇가지 코드를 제외하고 내용은 꽤 훌륭했다. (예를 들어 aPerformance 에 a에 타입을 붙여서 쓰는 방식, 함수를 선언하는 방식 function amountFor()) 결과물은 이 저장소에서 확인해 볼 수 있다. 커밋을 상당히 작은 단계로 했는데 실제로 책에서 작게 수정하고 동작하는지 테스트하고 커밋하는 순서를 권장했다. 책과 다르게 작성한 부분은 README.md에 남겨두었다. 리팩터링 2판 (리팩토링 개정판) 마틴 파울러의 『리팩터링』의 2판으로, 새로운 리팩터링 카탈로그를 ..
개발 노트 2020. 6. 12. 17:53
[vue.js] 뷰 - 동적 컴포넌트 v-bind:is

상황에 따라 사용될 컴포넌트가 동적으로 변경되어야 할 때가 있다. 그럴 때 아래와 같은 방법을 사용한다. var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } } }) components에 사용할 컴포넌트 목록을 추가한다. 아래처럼 is prop에 변경할 컴포넌트명을 가지고 있는 data를 바인딩한다. 초기 값이 home으로 되어 있기 때문에 home 컴포넌트가 노출된다. 조건에 따라 currentView 값을 바꾸면 그에 맞는 컴포넌트가 노출된다. 참고 https://kr.vuejs.org/v2/g..
개발 노트 2020. 6. 8. 10:19
HTML5 태그 종류

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
개발 노트 2020. 5. 12. 10:29
프론트엔드 엔지니어도 알면 좋을 스프링 부트 기본 #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..
개발 노트 2020. 4. 10. 14:13
프론트엔드 엔지니어도 알면 좋을 스프링 부트 기본 #1

프로젝트 구성 방법은 구성하는 사람의 선호도와 경험에 따라 다양할 것이다. 그러나 한국에서 자바 기반의 웹 프로그래밍이 보편화되어 있고 스프링 부트(Spring Boot)로 구성된 경우가 많다. 스프링 부트 기반의 프로젝트를 clone 받았을 때 어떻게 구동해야 할지부터 막막했던 완전 초심자가 구동하는 방법을 익히기 위해서 학습한 내용을 정리해본다. 📃 JAVA와 JSP(Java Server Page) 자바를 현업에서 사용해본 적 없었고 JSP도 오래전에 스터디로 학습했던 게 전부였다. 그래서 둘은 무슨 관계인가부터 학습해야 했다. 자바는 객체지향형 프로그래밍 언어로 정리하고 보니 그러면 JSP는 무엇이며 왜 생겨났을까 궁금했다. JSP의 효용을 알기 위해서는 Java Servlet과 톰캣으로 웹 애플리..
개발 노트 2020. 4. 8. 17:27
[vue.js] 단위 테스트(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..
개발 노트 2020. 4. 2. 11:15
1 ··· 10 11 12 13 14 15 16