Work Log

Work Log - 3주차

posey 2023. 7. 25. 09:01

 

Day 11 -  '업무역량 테스트 ing'

  • 업무역량 테스트 (~7/28)

 
 

 
 
Review
 
 

 

 

 주말동안 jQuery 공부를 하면서 게시판만 완성했다.

월요일 아침 리더님께 게시판 섹션 작업을 하다가 헷갈리는 것을 여쭤봤는데, 구조 신기하게 짰다고 ㅋㅋㅋㅋㅋ 사실상 이렇게 하면 안되는 건데 일단 한번 끝까지 만들고 나서 피드백 받으라고 하셔서 일단 의기소침하게 만들고 있다..

 

오늘은 서브 페이지까지 다 만들고 나서 반응형 작업 중이다 !

반응형 하다보니 구조가 이리저리 뒤틀리고 난리도 아니지만 우당탕탕 만들어봐야지 -

파이팅 ! 

 

 

 

 

 

  • 업무역량 테스트 (~7/28)

 

 

: 오늘은 공지사항 부분의 탭 메뉴와 서브 페이지 작업을 끝냈고, 반응형은 메인 페이지까지 끝냈다 !

 

 

 

 

 

 

 

Day 12  -  '업무역량 테스트 ing'

  • 업무역량 테스트 (~7/28)
  • MXDS  교육 (디자인팀 + 퍼블팀)

 
 

 
 
Review
 

 

 

 

 

 

 
 
 

 

  • 업무역량 테스트 (~7/28)

 

 

: 오늘은 메인 페이지와 서브 페이지의 반응형 작업을 끝냈다. absolute를 많이 줘서 위치를 조정한 것이 내 최대 문제점이었다는 것을 알았다. height 값도 웬만해서는 주지 않는 것이 좋은데 이제 원인을 파악했으니 다음 페이지를 만들 때는 그걸 반영해서 잘 생각해서 만들어야겠다.

 

어쨋든 내일은 제출할 수 있을 것 같다 !

 

 

 

 

 

  • MXDS  교육 (디자인팀 + 퍼블팀)

 

 

: 오늘은 디자인팀과 퍼블팀이 진행하고 있는 MXDS 만들기 프로젝트를 시현해보고 사용법을 알려주는 교육을 진행했다.

회의를 처음 들어가보기도 했고 두근두근했다.

 

작업 시간을 단축하고 협업을 할 때 좀 더 원활하게 하기 위해서 통일된 스타일 가이드를 만드는 프로젝트였다.

그동안 두 팀에서 얼마나 많은 고민을 하셨을지 노고가 고스란히 느껴지는 듯했다.

 

table, alert, button, font, 태그별 font-size, font-color 등 하나하나 설정해둬서 시안을 받았을 때 한 눈에 알 수있도록 시스템을 구축해놓는 작업이었다.

와 이런 것까지 모두 미리 생각해두고 작업을 하시는구나하는 생각을 많이 했다.

사수님이 '우리는 산전수전을 겪어서 그렇다 지금 하는 프로젝트가 미래에 정말 편하게 작업할 수 있도록 만들어줄 것이다' 라고 하셨다. 짱 !

 

나도 페이지를 만들 때 예쁘고 깔끔하지 않으면 만들고 싶지 않은데, 교육 받을 때 디자인이 너무 깔끔하고 예뻐서 그것도 너무 기분 좋았다. 

이 스타일가이드가 나중에는 디자인, 퍼블팀뿐만 아니라 개발팀까지 영향을 미쳐서 회사 내에서 모두가 사용하도록 하는 것이 목표라고 하셨는데 너무 멋있었다.

 

여러모로 많이 배울 수 있는 시간이라 좋았다 !  

 

 

 

 

 

 

Day 13  -  '미션 제출 완료'

  • 업무역량 테스트 제출 & 피드백 
  • 업무 관련 지식 습득 - Git을 활용한 버전관리 강의

 
 

 
 
Review
 

 

 

 

 

 

  • 업무역량 테스트 (~7/28)

 

 

: 오늘은 서브 페이지까지 반응형 작업을 마치고 멘토님께 제출했다.

완전히 엉망인 코드를 보시고 허허 웃으셨댜 하하하

그래도 처음엔 다 그렇다고 하시며 위로해주셨지만 내 스스로는 슬픔에 빠졌다,, 늉뮤리,,

 

 

 

<받은 피드백>

 

- input 태그의 영역을 똑바로 잡지 않은 것

- a 태그 width, height 값 100%로 줘서 hover할 때 마우스 포인트 같이 잡히도록 할 것

- 직관적인 클래스명으로 구성하고 ' _ '나 =' - '로 통일할 것

- position: absolute;를 너무 많이 줘서 반응형에서 문제가 생기는 것. 이후에 유지보수를 할 때도 좋지 않음

- 접근성을 고려해서 tab 키를 눌렀을 때 순서대로 가도록 만들 것

- 눈에 보이게만 만들지 말고 유지보수를 할 때 어떤 오류가 생길지까지 파악해서 만들 것

 

 

 

 

  • 업무 관련 지식 습득 - Git을 활용한 버전관리 강의

 

1. Git이란?

 

: Git(깃)은 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 조율하기 위한 대표적인 버전 관리 시스템(VCS)이다.

 

* 설치 : https://git-scm.com/

 

Git

 

git-scm.com

 

 

깃 강의를 들으면서 지난번에 만들었던 스타벅스 페이지를 Github로 커밋시키는 실습을 했다.

 

 

 

$git init
# 현재 프로젝트에서 변경사항 추적(버전 관리)을 시작 
그러면 master 라는 브랜치로 프로젝트가 시작됨

$git add index.html
# 변경사항을 추적할 특정 파일(index.html)을 지정

$git add .
# 모든 파일의 변경사항을 추적하도록 지정

$git commit -m '프로젝트 생성(버전 이름 명시)'
# 메시지(-m)와 함께 버전을 생성
ex) $git commit -m 'main.js 추가'

$git remote add origin https://github.c
# origin이란 별칭으로 원격 저장소를 연결

$git push origin master
# origin이란 별칭의 원격 저장소로 버전 내역을 전송

 

 

Modified file : 수정된 파일

Untracked file : 새롭게 생성돼 추적하지 않은 파일

 

 

 

2. Netlify란?

 

: https://www.netlify.com/

 

Develop and deploy websites and apps in record time | Netlify

Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free!

www.netlify.com

 

 

Netlify에서 Github repository에 올린 파일들을 페이지로 만들어서 배포했다.

 

 

- 지속적인 배포

 

: Netlify를 통해 사이트의 지속적인 배포를 할 수 있다. Netlify를 Github의 원격 저장소와 연결을 해주면 업로드한 우리의 프로젝트를 가져가 자동으로 사이트를 만들어준다. 

또한, 버전 관리를 진행하며 변경된 프로젝트의 내용 또한 Netlify에서 자동으로 확인하여 사이트를 변경하는 것도 가능하다.

 

 

- Netlify 설치

 

: Netlify에게 Github의 저장소에서 연결할 수 있게 권한을 부여해주면, Github에서 안내하는 창이 나타난다.

All repositories와 Only select repositories로 나뉘어 Github의 모든 저장소를 Netlify에게 오픈할 것인지 아닌지를 묻는 창이다. All을 선택하고 Install을 누르면 Github의 비밀번호를 입력하는 창이 뜨고 입력하면 연동이 완료된다.

 

 

- repository 선택

 

: 다시 Netlify로 돌아와 Github를 눌러주면 내가 그동안 Github에 생성한 repository들이 쫙 목록으로 나열된다.

그 중 스타벅스 repository를 선택한다.

 

 

- Site settings and deploy !

 

: master로 선택하고 Owner, Branch to deploy 등 설정 부분을 확인할 수 있다.

나머지 설정사항들은 추후 알아보도록 하고 그대로 Deploy site를 누른다.

 

 

- Your site is deployed !

 

: 약 10초가 지나면 사이트가 만들어지며 주소가 생성된다.

예쁘진 않지만 주소가 만들어져 접속이 가능해진다. 예쁜 주소를 만들기 위해선 원하는 주소의 도메인을 구입하여 Netlify에서 연결할 수도 있다.

 

 

* 결과물 : https://master--sweet-centaur-0e5916.netlify.app/

 

스타벅스 커피 코리아

스타벅스 커피 코리아

starbucks.co.kr

 

 

 

로그인 페이지까지 개발하는 강의를 수강하려고 했지만 오늘은 팀데이를 하는 날이라 3시에 퇴근했당-

팀데이라고 한 달에 한 번씩 일찍 퇴근하고 하고 싶었던 문화 활동을 할 수 있는 날이 있다.

우리는 이번에 카페 가서 수다를 떨었당,, 궁금했던 것도 물어보고 팀워크를 다질 수 있는 좋은 시간이었던 것 같당

 

내일부터는 아마 클론코딩 과제를 받을 것 같다.

지난 과제를 수행하고 나서 div가 여기서 왜 또 나오지? 하는 생각을 너무 많이 했다. HTML 구조 짜는 것이 더 어려웠던 것 같아서 멘토님께 말씀드렸더니, 그러면 멘토님께서 만드신 사이트의 코드를 직접 보고 따라하며 배워보기로 했다.

 

강의를 너무 많이 듣는 것도 문제인 것 같다.

자신의 스타일을 만들어야 하는데, 강사님들마다 모두 스타일이 다르고 또 들으면서 따라하다보니 스스로 사고하는 것이 그동안 부족했던 것 같다.

 

내일부터 클론코딩을 할 때는 왜 여기서 이런 코드를 짰지? 왜 여기서는 position을 써야만 했을까? 그런 사고를 하면서 코딩해보려고 한당

 

파이팅 !

 

 

 

 

 

 

Day 14  -  '클론코딩 시작'

  • HTML, CSS, jQuery 가이드 교육 
  • 클론코딩 시작

 
 

 
 
Review
 

 

 

 

 

 
 
 

 

  • HTML, CSS, jQuery 가이드 교육

 

 

: 멘토님께서 오늘 HTML, CSS, jQuery 책자를 주셔서 오전에는 복습하는 시간을 가졌다.

table, form 구조 짜는 것이 헷갈려서 집중적으로 공부했고, 접근성을 위해선 scope를 쓰는 것이 중요하다.

 

 

 

 

1. table 태그 구조

 

- tr : 행 (세로)

- td : 열 (가로)

- th : 표의 제목 열. 부모 태그인 tr 태그 안에 있어야 한다.

- thead : 표의 제목 열들을 묶는 그룹 태그

- tbody : 표의 일반적인 데이터들을 묶는 그룹 태그. 기본적으로 행 그룹 태그를 사용하지 않으면 크롬 브라우저가 자동으로 tbody 태그를 묶어준다.

- tfoot : 표의 하단 영역을 묶는 그룹 태그

- caption : 표의 제목이나 설명

- col : colgroup 태그의 자식으로 열 단위를 나눌 수 있다.  ex) <col span="3"> → 세 개의 열을 그룹으로 묶음

 

 

 

*  <th> 태그 속성

 

- scope : 웹 접근성 관련 속성으로 스크린 리더가 데이터를 인식하고 읽는 순서를 결정한다.

ex) th가 열에 쓰일 경우 "col"로 설정 → <th scope="col">

ex) th가 행에 쓰일 경우 "row"로 설정 → <th scope="row">

 

 

*  <th>, <td>

 

- colspan : 열을 병합하는 속성  ex) <td colspan="2">

- rowspan : 행을 병합하는 속성  ex) <td rowspan="2">

 

 

 

2. form 태그 구조

 

- action : 양식 데이터를 처리할 서버 프로그램 URL

- method : 양식 제출할 때 사용할 HTTP 메서드

 

 

<fieldset> 태그

 

: 양식의 여러 컨트롤과 label 태그를 묶을 때 사용한다.

 

 

 

<legend> 태그

 

: 요소는 부모 fieldset 콘텐츠의 설명을 나타낸다.

 

 

 

<label> 태그

 

: 인라인 요소이며, 입력받는 필드를 설명할 때 사용한다. 웹 접근성을 준수하기 위해서 꼭 사용해줘야 한다.

input, textarea, button 태그들은 인라인 블록 요소이다.

또 label 태그의 for의 속성 값과 input  태그의 id의 속성 값을 일치시켜주어야 한다. 

 

 

 

3. link 태그

 

: 링크를 만들 때 <a> 요소를 사용한다. 그리고 <a> 요소의 href 속성에 명시한 웹 페이지(URL)를 새 탭에서 열게 할 경우에는 target="_blank" 속성을 추가한다.

그런데 여기서 target="_blank"만 사용하면 보안상 취약점이 생기고 퍼포먼스가 떨어질 우려가 있다고 한다.

이 문제를 해결하기 위해서는 noopener noreferrer를 지정해야 한다는 것을 알려주셨다.

 

<a href="연결할 페이지의 URL" target="_blank" rel="noopener noreferrer">새 탭에서 보기</a>

 

 

 

  • 클론코딩 시작

 

 

: 오후에는 멘토님께서 주신 클론코딩 과제를 수행하는 방법에 대해 배웠다.

VSCode에서 확장 프로그램 'ftp-simple'을 설치했고 회사의 개발 서버로 접속했다.

 

[
    {
        "name": "",
        "host": "",
        "port": ,
        "type": "",
        "username": "",
        "password": "",
        "path": "",
        "autosave": true,
        "confirm": false
    }
]

 

FTP connection setting으로 들어가 설정하는 법을 배웠고, 파일질라 사용법도 다시 배웠다.

 

이건 멘토님이 클론코딩을 시작하기 전에 읽어보라고 보내주셨다.

 

https://velog.io/@pastelblue0721/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

 

클론코딩에 대해서

클론코딩에 대해서 클론코딩으로 학습을 하지 않고 단어만 들었을때는 부정적인 생각이 들기 쉽다. 새로운 프로젝트를 하는것도 아니고 그냥 따라서(클론)을 만든다니. 하지만 결과물로서의 시

velog.io

 

 

이제 본격적으로 클론코딩 시작 !

 

 

 

 

 

 

 

Day 15  -  '클론코딩 ing'

  • 클론코딩 ing
  • CSS 교육 - transform 속성

 
 

 
 
Review
 

 

 

 오늘은 코로나에 확진 되어버렸다 하하

오전에는 그냥 목감기인 줄 알고 거의 헤롱헤롱 대면서 마크업만 했고, 헤더 영역 일부분만 코딩했다.

오후에도 역시 목감기인 줄 알고 멘토님과 회의실에서 마스크를 벗고 CSS 교육을 진행했다. 흡

코로나인 것을 알고 나서 바로 조퇴해버려서 근무일지에 쓸 게 없지만 기록해보겠다 ! 크흠 

 

 

 
 
 

 

  • 클론코딩 ing 

 

: 멘토님이 기존에 작업하셨던 메인 페이지와 서브 페이지를 클론코딩하는 것인데, 꽤 헷갈리는 것들이 많았다. 

왜 여기서 flex를 써야만 했고 왜 여기서 div 태그로 또 감싸줬는지 그런 의도를 파악하려고 하다보니 시간이 꽤 오래 걸릴 것 같다는 생각이 들었다.

 

이것도 회사 비밀유지 사항이 있을 수도 있어서 내가 만들면서 헷갈렸던 개념이나 느낀 점만 기록하려고 한다 !

 

오늘은 header부터 footer까지 마크업을 쭉 했고, header 영역의 일부분만 코딩했다 !

 

 

 

 

 

  • CSS 교육 - transform 속성

 

: 내가 transform 속성에 대해 잘 모르겠다고 말씀 드렸더니 멘토님께서 만드신 사이트에서 개발자 도구로 들어가서 코드를 수정해 이리저리 이동하는 것을 직접 시현해주셨다,,

나만의 일타 강사이시다,, 역시 강의로 방구석 공부를 하기보다는 실무에서 직접 배우는 것이 2만 배는 나은 것인가,,

 

 

 

<센터 정렬 방법 2가지>

 

 

  • 첫 번째 방법

 

position: absotlute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

 

 

  • 두 번째 방법

 

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%;);
반응형