20220711

jungkwanlee·2022년 7월 11일

코딩일지

목록 보기

73/108

1) 학습한 내용

멘토링(10시 30분)

1.원페이지 구현을 다했다고 어떻게 말할 수 있을까?
-> 테스트 문서 만들기(문서에다가 테스트 문서 만들어서 체크해야할 사항을 리스트로 모은다. 한명씩 타인(본인)의 페이지를 체크해본다.) 모두 패스가 되면 1차적으로 다한거임.
2. a태그에 #이 들어갈 경우 순서가 바뀔 수 있다.
3. VS 소스 콘트롤이 무엇인가요?
-> 터미널 기능을 GUI로 바꾼 편리한 기능이다.
4. [제안] 코드리뷰(중복여부, 독립적으로 구성되어 있는지)
5. 이미지 로딩이 다른 경우
-> 캐싱된 이미지인가? 아니면 컴퓨터 성능 차이
6. 컴포넌트 기반이 무슨 말인가요?
-> 객체들이 독립적으로 재사용 가능하게 하는 것. 공통된 것은 공통된 것으로, 컴포넌트들은 컴포넌트 중심으로
7. 카카오 지도 api 스크립트를 HTML과 분리하고 싶다.
-> 스크립트 태그 찾아보기 http://www.tcpschool.com/html-tag-attrs/script-src
8. [제안]서로 같은 기능 구현을 해보고 차이점을 이야기 해보기

컴포넌트

컴포넌트(component)란 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위를 말한다. 컴포넌트를 이용하면 소프트웨어 개발을 마치 레고(Lego) 블록을 쌓듯이 조립식으로 쉽게 할 수 있다. 모듈(module)이라고도 한다.

스크립트 태그

카카오 지도 API가 자바스크립트로 이뤄져 있다면 자바스크립트 파일에 옮겨서 링크를 만드는 방법으로 아래의 예제가 있다.

<script src="/examples/scripts/script_src.js"></script>

나는 자바스크립트 태그를 아래와 같이 작성했었다.

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=067f7b942819e19fc2f3202be6e39efd"></script>

    <script src="./js/kakao_api.js"></script>

오전 회의

오전 회의는 프로젝트 완성도에 대한 논의가 있었다.

김용훈 - 페이지의 오류를 점검하고 있었다. 크기 공간으로 인해서 글자 줄의 일관성이 없다는 것을 말했다.

전체적인 회의는 홈페이지 클론 코딩에 관한 팀업에 관한 것이었다.

오후 작업

오후에 내가 맡은 것은 클론 홈페이지를 점검하는 것이었다. 작업물들은 대부분 완성이 되었지만 클론 페이지에는 미디어 쿼리가 적용되어 있지 않았고 미디어 쿼리를 제대로 적용시키거나 적용시켰던 미디어쿼리도 원본 사이트와 비슷한 형태로 조정한다면 문제는 없을 것이다.

개선 필요사항

header : banner-wrap 클래스부터 css 적용이 이뤄지지 않았음. 인터넷 창의 변화를 주면 이미지가 span 태그와 겸쳐짐. 미디어 쿼리 적용이 필요함.

Crad_flip : 크기를 줄인 결과, 원본 리소프트의 미디어쿼리와 차이가 있음. 미디어쿼리를 원본과 비슷한 크기로 조정이 필요함.

slick-cus : 미디어 쿼리 적용이 필요함. 슬라이드 속도를 조정해야 할 필요가 있음.

iconP : 원본 사이트와 비슷하게 미디어쿼리 조정이 필요함.

kakao_api : 텍스트 스타일 조정 필요.

footer : 미디어쿼리 적용이 필요함.

TOP 버튼을 추가해야 함.

홈페이지의 전체 페이지는 완성되었지만 미디어쿼리 쪽에서 문제가 있다는 것을 발견하였고 미디어 쿼리 작업을 원본 홈페이지와 똑같이 해야 했다.

그나마, 내가 맡은 역할은 카카오 지도 API의 폰트를 조정해야 했다.

2) 학습내용 중 어려웠던 점

미디어쿼리와 Css 고급 선택자를 응용해서 원본 홈페이지를 클론하는 것이 생각보다 어렵다. 단순히, 소스코드를 복사해서 붙여넣는 것과 달리 시간이 오래 걸렸다는 것이다. 미디어 쿼리와 css를 응용하면 반응형 웹이 만들어진다. 반응형 웹은 여러 차례의 시행착오를 거쳐야 만들어지는 것이다.