[태스크①의 해설 기사]미경험으로부터 엔지니어가 커리어 초기에, 맡겨질 3개의 태스크를 출제해 본다

마지막 기사 해설

출제한 태스크는 이쪽

태스크 ① 화면에 표시 문장 추가

~상품 일람 페이지의 상품 가격에 「(세금 포함)」를 추기하자~

상기 태스크에 있어서, 생각하는 순서로서는 MVC 프레임워크에 있어서, 우선 처리의 흐름을 잡는 것. 다만 이번 태스크에 관해서는 데이터를 취득할 필요도 로직을 바꿀 필요도 없기 때문에, Controller와 View의 어느 부분에 처리가 달리고 있는지 확인해, 필요한 부분에 처리를 추가할 필요가 있다.

단서가 되는 것은 URL이다.



HTTP 요청에서 Controller의 어떤 액션을 호출할지(FW에 따라서는 routing을 경유한다)지, 결정하고 있기 때문에 URL을 확인한다.

상품 일람 페이지에 관해서는 「products/list」라고 하는 path 때문에 productionController 파일을 검색한다.

열린 파일 내에서 "products/list"라는 워드 검색을 하면 function index에 처리가 실행되고 있는 것을 알 수 있다.



어노테이션 부분을 보면 @Template ("Product/list.twig")가 대상의 view 파일인 것을 알 수 있다.
이 근처는 프레임 워크에 따라 다르지만, 뷰의 문장을 추기하는 태스크는
URL로부터 Controller→액션→view 파일이라고 하는 흐름으로, 외형을 표시하고 있는 파일을 특정한다.

다음에 대상의 「list.twig」를 검색해, 대상의 파일(eccube/src/Eccube/Resource/template/default/Product/list.twig)을 열면, 우선 할 일은 실제로 이 파일에 처리 실행 중인지 확인합니다.
프로그래밍 초보자에게 흔한 실수로서, 기술 방법에 대해 여러가지 고민하고 있으면, 원래 그 부분에 처리가 다니지 않았다!
같은 일이 자주 있으므로, 무엇인가 처리를 추기할 때는 확실히, 표시할 수 있는 태그
<p>TEST</p>
나 디버그의 기술을 해, 우선은 표시 확인하고 나서 실장에 들어가면 좋다.


(↑TEST라는 문자가 표시되어 있으므로, products/list에 액세스하면 list.twig에 처리가 통과하고 있는 것을 확인할 수 있었다)
처리가 실행되고 있는 것을 확인할 수 있으면 다음은, 추기해야 할 개소의 확인을 한다

해당 부분을 신속하게 찾는 테크닉으로서 Chrome의 개발자 툴을 사용하는 방법을 모르는 분은 꼭 기억해 주셨으면 한다.

products/lits를 표시하고 있는 상태에서, 「(세금 포함)」를 표시하고 싶은 요금의 개소를 확인하면



class="price02-default"

라는 class로 표시하고 있는 것을 알 수 있다.
이 "price02-default"를 list.twig 파일에서 검색해 보면


155행째 근처에 대상의 기술이 있는 것을 알 수 있다.
이 endif 밖에 「(세금 포함)」을 추기하는 것으로 태스크①은 완료



이상, 태스크①의 해설이 된다.

대량의 코드로부터 어떻게, 빨리 정확하게 해당 개소를 찾아내는지, 실무에서는 소중하게 된다.
애플리케이션 설계를 잡거나 검색 방법을 잡는 것으로, 이 정도의 태스크는 곧바로 해낼 수 있다고 생각합니다.