Work Log - 1주차
Day 1 - '퍼블리셔로서 첫 출근 !'
- Onboarding 교육
- 멘토멘티 배정 후 점심식사
- 필수 동영상 시청 및 근로계약서 작성
- 부서 이동 후 인사
Review
우선 출근하기까지 웃픈 상황이 있었다.
첫 출근 하루 전 날 초행길이니 직접 운전해 미리 사옥에 가보았다.
정확히 20분이 소요되어서 '이정도면 첫 출근이니까 넉넉잡아 1시간 전에 출발하면 되겠다.' 라는 망상을 했다.
다음 날 아침,
첫 출근이라 그런지 잠도 안 오고 새벽 4시에 눈이 떠졌다.
흠흠 뭐 입지~ 여유롭게 준비를 하고 9시 출근이니 7시 55분 정도에 미리 나와서 내비게이션을 찍었다.
그런데 이게 뭐람 55분 소요, 8시 50분 도착이라고 뜨는 것이다 !!!!!!!!!!!!!!!!!!!!
그때부터 멘붕이 시작되었고, '밟아서 무조건 지각 안해야지' 라는 생각밖에 없었다.
장마철이라 그런지 출발과 함께 굵은 빗줄기가 후두둑 떨어지기 시작했고, 대전이 아니라 서울인가? 싶을 정도로 심한 교통체증을 처음 경험했다.
소요 시간이 점점 늘어나면서 마음이 더 조급해지기 시작했고, 앞에 차가 수없이 밀려있으니 속도를 낼 수도 없었다 ^^
그래도 결국 8시 55분에 도착해서 지각은 면했고 주차하자마자 총알처럼 튀어 들어갔다.
그렇게 첫 출근 완료 !
사내에서 장애인 분들과 함께 카페 사업을 운영하시는데, 인사 팀장님께서 웰컴 드링크로 또 커피를 준비해주셨다.
너무 스윗하시다구 -
- Onboarding 교육 - 회사·문화·사옥 소개, 필수 동영상 시청
: 인사 담당자 분께서 메뉴얼 북과 웰컴 키트, 사내 운영 카페에서 준비해주신 디저트를 나눠주셨다 !
너무 감동하지 않을 수 없어 -
사실 누텔라 쿠키 하나가 더 있었는데 너무 맛있어서 사진도 안 찍고 먹어버렸다. 누텔라가 맛없기 힘들긴 하지만
그래도 너무 맛있어서 회사 다니면서 엄청 살찔까봐 심히 걱정되었다.
웰컴 키트에는 칫솔 세트, 마우스 패드, 무선 충전기, 포스트잇, 마스크, 이름표, 로고 스티커가 들어 있었다 >_<
감동의 언박싱이 끝나고 난 후 인사 담당자 분께서 편안한 분위기로 교육을 시작하셨고, 다른 부서 신규 입사자 분들과 함께 교육을 듣게 되었다.
판교에서 근무하는 분도 계셨고, 나머지는 본사에서 함께 근무하지만 부서만 다른 분들도 계셨다.
간단히 자기소개를 하면서 어느 부서인지 어떤 업무를 맡게 되는지 대화도 나누었고,
생활 Tip, 급여 및 휴가, 복지, 주요 업무 도구 등에 대해 조목조목 알려주셨다.
대표님을 뵐 수 있는 시간도 있었는데, 앞으로 3개월 인턴 기간 동안 자신의 정체성에 대해 확립하고 본인 직무에 대해
깊이 들여다 보는 시간을 가졌으면 좋겠다는 말씀을 해주셨다.
직무에 대해 자부심을 느끼고 즐겁게 일하면 가장 좋겠지만 일을 하다보면 매너리즘에 빠지게 될 수도 있으니,
수습 기간 동안 끊임없이 자신을 되돌아보고 본인에게 이 직무가 적합한지, 또 본인의 인내심은 어디까지인지 등 그런 여러가지 것들을 생각해보는 시간을 가지라는 당부의 말씀을 들었다.
간단히 말하자면, 입사를 했지만 3개월의 수습 기간이 주어지고 수습 기간이 끝나는 날 팀원 분들 앞에서 그동안 배운 것과 느낀 것을 PT 하는 시간을 가진다. 그러고 나서 정식 직원이 되는 절차를 밟는다.
아직 나는 직무에 대한 지식이 부족해서 빨리 입사해서 빨리 개발 흐름에 대해 파악하고 싶었다.
대표님께서 말씀하신 3개월 안에 빠르게 적응하고 이런 생각들이 정리되어 확립될지 아직은 모르겠지만,
해왔던 대로 기록하면서 차근차근 생각해보려고 한다.
- 멘토·멘티 배정 후 점심식사
: 점심시간이 되었고, 실무 면접 당시 면접관이셨던 팀 리더님과 FD님 두 분께서 오셔서 먹고 싶은 것이 있냐고 물어봐주셨다 !
면접 때도 편하게 잘 챙겨주셔서 너무 감사했는데, 회사에서 또 한 달 간 잘 적응할 수 있도록 멘토로 배정해주셔서 너무
감사했다. 좋은 사수님들이 계셔서 너무너무너무 다행이다.
팀 분위기는 좋겠구나 싶어서 안도하기도 했고, 궁금하거나 힘든 것이 있을 때 여쭤 볼 수 있는 좋은 분들이 계시니 다른
걱정은 하지 않아도 될 것 같았다.
알려주시는 업무 잘 따라하고 공부만 열심히 하면 되겠다 그런 긍정 회로만 돌릴 수 있도록 계속 안심시켜주셔서 너무 좋았당 :-)
카레를 먹고 싶다고 해서 근처 카레집으로 가게 되었다.
궁금한 걸 물어보라고 하셨는데, 정신없는 첫 출근 날이라 멍한 상태라 단순하게 계속 점심 때 보통 뭐 드시냐, 포장해서
드시는지 배달해서 드시는지 밥순이처럼 밥 얘기만 했던 것 같다 ㅋㅋㅋㅋㅋ
멘토님께서 몰래 내 블로그를 보고 계시다고 하셔서 너무 부끄러웠지만 ㅋㅋㅋㅋㅋ
그래도 기록하는 게 나중에 되돌아보기도 좋고 3개월 뒤 발표할 때 도움이 될 것 같아서 계속 기록하려고 한당...
직무에 대해서 자세히 알려주시고 어떻게 생활하게 될지 이런저런 이야기를 하면서 즐거운 시간이었다 !
제 멘토가 되어주셔서 감사드립니당 !!!
- 필수 동영상 시청 및 근로계약서 작성
: 대표님께서 회사가 돈을 어떻게 버는지, 어떤 방향으로 나아가고자 하는지를 알아야 자신이 어떤 방식으로 성장해나갈 것인지, 회사에서 어떻게 효율적으로 업무를 수행할 수 있을지에 대해 고민해볼 수 있다고 강조하셨다.
신입사원이 꼭 시청하길 바란다고 하셨던 필수 동영상 5개를 시청했다.
오후 5시 정도까지 교육이 이어졌고 끝나고 난 후 근로계약서를 작성하는 시간을 가졌다.
3개월 동안의 수습 기간 동안 근로시간, 임금 등에 대한 계약이었고 꼼꼼히 확인 후 작성하였다.
- 부서 이동 후 인사
: 근로 계약서 작성 후 인사 담당자 분께서 내가 일하게 될 부서로 안내해주셨다.
내가 일하게 될 곳은 3층이었는데, 사옥이 예쁜 것은 알고 있었지만 테라스도 있고 취사 가능한 탕비실(?)도 있어 직원들이 편하게 생활할 수 있도록 시설이 잘 갖춰져 있었다 !
그리고 우리 부서 사무실 엄청 크다... 직원 분들이 엄청 많으셔서 깜짝 놀랐다.
깔끔하게 정리된 내 자리로 이동해서 팀원 분들께 인사를 드리고 탕비실에서 자기소개하면서 간단하게 대화를 나눴다.
팀 분위기가 너무 편해보여서 빨리 적응할 수 있을 것 같아서 기분이 좋았다 ㅎㅎㅎ
리더님이 화기애애하게 잘 이끌어주셔서 그런 게 아닐까 생각이 들었고 안도했다 :-)
내일부터 파이팅 넘치게 일해봐야겠당 -
그나저나 오늘 퇴근도 거의 1시간 걸렸다. 내일도 쉽지 않겠지만 힘내야지
파이팅 -
Day 2 - '멘토멘티 활동 시작'
- 그룹웨어, 메일, Notion 설정
- 사원증 신청
- 프로그램 설치 및 적용
- 멘토멘티 활동
- 사업부 소개 및 인사
- Notion 자기소개 작성
- HTML&CSS 강의, 가인지경영 강의 시청
- 사업부 스타일가이드 습득, 지디웹 참고
Review
오늘은 어제와 같은 상황을 반복하지 않기 위해 15분 정도 일찍 나서서 출발했다.
소요시간이 35분이라고 뜨길래 '역시 10분이라도 더 빨리 나서야겠구나 그래야 덜 밀리는구나' 했는데,
비가 심하게 오면서 점점 시간이 늘어나기 시작했고 결국 어제처럼 1시간 만에 회사에 도착했다 :-(
서울 분들에게는 아무것도 아닌 시간이겠지만,, ㅎㅎㅎ
일단은 앞으로도 오늘처럼 조금 더 빨리 나와서 출근 시간보다 조금 더 빨리 도착해서 업무를 준비하려고 한다.
- 그룹웨어, 메일, Notion 설정
: 출근해서 가장 먼저 한 일은 회사 주요 업무 도구인 3가지를 안내 받아서 가이드대로 설정하고 재정비하는 시간을
가졌다. 그룹웨어에서 보통 퍼블팀에서는 전자결재, 업무연락 카테고리를 가장 많이 이용하기 때문에 우선은 헷갈리니
그 2가지부터 익혀두면 될 것 같다.
메일은 로그인을 해보니 Notion 초대 코드가 도착해있었고, 회사에서 협업 도구로 사용하고 있는 Notion에 가입해서
핵심 가치, 핵심 역량 란을 우선 하나하나 살펴보았다.
또 서버팀에서 고정 IP 세팅, 설치해야하는 프로그램 등을 메일로 친절하게 안내해주셔서 가이드대로 설치했다.
- 사원증 신청 - 신규 입사자 안내사항 확인 후 가이드대로 진행
: 그룹웨어의 업무연락 카테고리에 들어가보니 신규입사자 서류 제출 안내를 보내주셔서 사원증 신청부터 진행했다.
IT 회사 특성상 힙하고 자유로운 분위기라 그런지 사원증도 본인 사진이 아닌 음식, 캐릭터, 아이폰 미모티콘 등
원하는 이미지로 첨부하면 된다고 하셔서 너무 놀랐다 ㅋㅋㅋ
멘토님이 미모티콘으로 많이 한다고 알려주셔서 나도 미모티콘을 다시 만들어서 첨부했다.
어떻게 제작되어 나올지 기대된다 !
- 프로그램 설치 및 적용 - VSCode, Slack, Figma, Notion
: 우리 팀에서 주로 사용하고 있는 에디터는 VSCode라서 우선 가장 먼저 설치하였고, 본인이 평소 사용하는 확장 프로그램도 설치하면 된다고 하셔서 설치 진행했다. 멘토님이 추천해주신 확장 프로그램도 같이 설치했당 -
<내가 설치한 확장 프로그램>
1. Material Icon Theme
2. Live Server
3. htmltagwrap
4. indent-rainbow
5. HTML to CSS autocompletion
6. HTML CSS Support
7. HTMLHint
8. CSS Peek
9. ESLint
10. Auto Rename Tag
11. Framer Dark
<멘토님 추천 확장 프로그램>
1. Auto Close Tag
2. ftp-simple
3. Live Sass Compiler
4. Power Mode (멘토님 강추)
5. saveBackup
- 멘토멘티 활동 - 사업부 Notion 안내, 지향하는 개발 방식 교육, 그룹웨어 안내
: 1층에서 같이 커피를 마시면서 멘토님이 하나하나 안내해주셨다.
주변에 IT 직종에 계신 지인이 한 분도 안 계셔서 궁금한 것을 여쭤볼 경로가 없었는데, 업무 방식도 알려주셔서 재밌고 신기한 경험이었다. 최고 !
1. 사업부 Notion 안내 - 미션, 핵심 가치, 핵심 역량
미션 | 고객을 핵심인재로 !
우리가 일을 잘하는 것이 고객도 일을 잘하는 사람이 되는 것이다.
핵심가치 | 고객만족, 프리미엄서비스, 기본에 충실, 프로페셔널리즘, 핵심인재
모든 사업의 결과는 고객의 성공을 위해, 과정은 구성원과의 신뢰를 기반으로 완성된다 !
핵심역량 | 빠른 피드백과 과정의 고유, 고객의 요청 전 선 서비스 제공, 변화를 활용한 고객 만족도 향상
2. 지향하는 개발 방식 교육 - 애자일, 스크럼과 스프린트, OKR
- 애자일 VS 워터폴 방법
- 워터폴 방법론 '폭포수 방법론'
: 각 작업이 폭포처럼 위에서 아래로 떨어지는 단계별 개발 방법론.
요구사항 정의(설계) → 디자인 → 개발 → 테스트 → 배포의 과정이 순차적으로 진행된다.
애자일 방법론이 등장하기 전까지는 산업 현장에서 보편적으로 사용되던 프레임워크이다.
단계별로 업무를 분담하기 때문에 맡은 바가 명확하다는 장점이 있지만, 속도가 느리고 유연하지 못하다는 단점이 있다.
속도, 변화에 취약하고 문제가 발생하기 이전 단계로 되돌리기 어려워 변경 사항이 생길 경우, 처음 계획 단계부터 다시
시작해야하는 치명적인 단점또한 존재한다.
- 애자일 방법론 '행동이 민첩한, 생각이 기민한 방법론'
: 90년대 이후, 워터폴 방식은 한계가 드러나기 시작했다.
이런 경직된 워터폴 방법론에 대한 대안으로 나타난 것이 바로 애자일 방법론이다.
일정한 주기를 가지고 빠르게 제품을 출시하여 고객의 요구사항, 변화된 환경에 맞게 요구를 더하고 수정해나가는 탄력적인 방법론이다.
즉, 변화하는 고객 요구 사항에 대응하는 민첩한 개발 방식으로 빠르게 변화하는 현 시대에 걸맞도록 고안된 방법론이다.
피드백 → 재설계 → 피드백 → 재설계의 방식이라 개발이 빠르고 유연하며 결함을 빠르게 식별하고 수정이 가능하다는 장점이 있다.
하지만 빠른 반복 작업에 익숙한 숙련된 사람이 필요하며, 수많은 변경사항이 있을 수 있으므로 번거로움이 발생할 수 있다는 단점이 있다.
- 애자일의 대표주자 '스크럼'
- 1단계 '비전 설정'
: 자율적으로 일하면서도 엉뚱한 일을 하지 않기 위해서,
내가 하는 일의 의미를 알기 위해서,
일의 우선순위를 결정하기 위해서
회사와 일맥상통하는 우리 팀의 비전을 세우는 것이 아주 중요하다.
비전을 세우는 방법에는 '엘리베이터 피치'라는 방법이 있다.
엘리베이터 피치란, 엘리베이터를 타고 올라가는 짧은 시간 동안에 소개할 수 있는 비전이라 해서 지어진 이름이다.
- 2단계 '로드맵 & 프로덕트 백로그 작성'
: 우리 팀의 1년짜리 목표이자 계획인 로드맵은 주로 분기별로 작성한다. 각 분기에 해야하는 일을 크게 3개 정도씩 적는 형태를 로드맵이라고 한다.
이렇게 작성한 다음 프로덕트 백로그를 작성하는데, 프로덕트 백로그는 앞으로 3개월 동안의 할 일 목록을 작성하는 것이다.
로드맵에 적어 놓은 것을 토대로 각 분기의 실질적으로 해야할 일을 모두 적어서 만들면 된다.
'프로덕트 백로그'는 프로덕트 오너(PO)가 우선순위에 따라 정리하고, 우선순위가 높은 일은 자세히 처리하고, 낮은 일은 두루뭉술하게 처리
가능한지 여부를 미리 파악할 수 있어 업무 효율을 향상시킬 수 있다.
- 3단계 '유저스토리(Userstory) 작성'
: 스크럼에서는 커다란 할 일 목록인 프로덕트 백로그에 '유저스토리' 형태로 작성하는 것을 추천한다 !
유저스토리는 이미 고객의 입장에서 쓰여 있는 것이기 때문에 자연스럽게 매순간 고객의 입장에서 생각하게 된다.
또 원래 하려던 방식 말고 더 나은 방식으로 일하게 된다.
- 4단계 '플래닝 포커(Planning Poker) 작성'
: '플래닝 포커'에 사용되는 숫자들은 작업 일수를 의미한다.
0은 이 일을 하는 데 하루도 안 걸린다, 1/2은 반나절이면 충분하다, 5는 5일 걸리는 일이라는 걸 의미한다.
플래닝 포커를 할 때는 모든 팀원들이 모여서 프로덕트 백로그에 할 일 하나를 가져다 놓고 각자가 이 일을 하는 데 며칠 이 걸릴지 생각을 한 후,
작업일수가 적힌 카드를 내밀면서 게임이 진행된다.
왜 그 기간이 걸리는지 각자의 이유를 제시하면서 그 과정에서 각자의 고민과 경험, 지식을 자연스럽게 나눌 수 있게 된다.
단, 플래닝 포커는 데드라인과 다르다 !
어디까지나 추정일 뿐 약속이 아니기 때문에 상황, 예기치 못한 변수에 따라 언제든 충분히 변경될 수 있다는 걸 명심하자 -
- 5단계 '릴리즈 플래닝'
: 이제 3개월 간 무슨 일을 언제할지 계획을 세울 차례다. 이를 '릴리즈 플래닝'이라고 한다.
우리 팀에 가장 알맞은 스프린트 단위를 결정하고 (보편적으로 2주),
각 스프린트 별 작업 일수를 확인하고,
각 스프린트에 할 일을 정하는 순서로 진행한다.
모든 일은 스프린트 내에서 시작되고 끝나야 한다. 한 개의 할 일이 여러 개의 스프린트에 걸쳐서 진행되면 안된다 !
우리가 스프린트 단위로 일을 하는 이유는 전력질주 하듯 일을 한 다음 숨 좀 고르고 다시 또 전력질주 하기 위함이다.
그렇게 일단 한번 제대로 끝까지 해보고 잘된 것이 뭔지 잘 되지 않은 건 뭔지 확인한 다음, 다음 번엔 다시 더 제대로 잘할 수 있다.
- 6단계 '스프린트의 개요'
: 첫째 날은 스프린트 플래닝을 하며 모든 팀원들이 모여 진행한다.
프로덕트 오너가 프로덕트 백로그에 있는 할 일 중에 이번 스프린트에 진행할 할 일을 알려주면 팀원들이 각각의 할 일을 어떻게 진행할지
이야기를 하면서 진행된다.
다음으로, 매일매일 진행하는 데일리 스크럼이 있다.
15분 미만의 시간 동안 팀원들이 모여 어제 한 일, 오늘 한 일 그리고 현재 고민들을 이야기 하며 진행한다.
그 다음은 프로덕트 백로그 다듬기 미팅이 있다.
우리 팀의 커다란 할 일 목록인 프로덕트 백로그에 새로 할 일을 추가하기도 하고, 프로덕트 오너가 미리 추가해놓은 할 일을 팀원들이 보고
의견을 내놓기도 한다. 또 각각의 할 일을 완료하는 데 얼마나 걸릴지 플래닝 포커를 하기도 한다.
마지막 날, 리뷰와 회고를 꼭 진행한다.
리뷰는 우리가 완료한 일 그 자체에 대해 이야기 하고, 회고는 우리가 일하는 방식에 대해 이야기 하는 시간이다.
또 리뷰는 팀 외부에 있는 모든 이해관계자들이 참석하고, 회고는 딱 우리 팀원들끼리만 진행한다.
- 7단계 '스프린트 플래닝과 스프린트 백로그'
: 스프린트가 주간 일정처럼 되지 않으려면 3가지를 꼭 기억해야 한다.
첫째, 모든 일은 스프린트 내에서 시작하고 끝나야 한다.
둘째, 매 스프린트는 리뷰와 회고를 토대로 그 직전의 스프린트보다 더 나아져야 한다.
셋째, 스프린트 중간에는 새로운 일이 추가되면 안된다.
프로덕트 백로그에 있는 할일을 스프린트 백로그로 옮기는 일은 프로덕트 오너가 하는 일 !
각각의 할 일을 어떻게 할지는 전적으로 개발팀이 결정한다.
스프린트 진행 동안 스프린트 백로그에 있는 세부적인 할 일들을 마음대로 추가하거나 삭제할 수 있는 것도 개발팀이 유일하다.
- 8단계 '데일리 스크럼 & 프로덕트 백로그 다듬기'
: 데일리 스크럼을 진행할 때에는 우리의 이번 스프린트 목표를 달성하기 위해 어제 뭘 했는지, 오늘은 뭘 할 예정인지, 그 목표를 달성함에 있어
방해가 되거나 고민이 되는 지점은 뭐가 있는지를 간단하게 돌아가면서 이야기 한다.
데일리 스크럼은 결코 나의 업무를 누군가에게 보고하는 활동이 아닌, 각자의 상황을 파악해야 도움을 청할 수도 받을 수도 있기 때문에 진행하는 것이다.
프로덕트 다듬기는 프로덕트 오너가 필요하다고 생각하면 언제든지 진행 될 수 있다.
매일 데일리 스크럼 이후에 짧게 진행할 수도 있고, 아예 정기 미팅을 잡고 진행할 수도 있고, 또는 리뷰를 할 때 함께 진행할 수도 있다 .
프로덕트 다듬기 미팅은 프로덕트 오너가 우리 팀의 미래를 준비하기 위해서도 필요하지만, 앞으로 우리가 할 일들을 미리 확인하는 시간이기도 하니,
모든 팀원들은 최대한 적극적으로 참여하는 것이 가장 중요하다 !
- 9단계 '리뷰 & 회고'
: 리뷰와 회고의 시간을 가지는 이유는 간단하다.
전보다 더 나아지기 위해서 !
우선은 스프린트 마지막날 리뷰를 먼저 진행하고 나서, 바로 이어서 회고를 진행한다.
리뷰는 우리가 '완료한 일 그 자체'에 대해 이야기하는 시간이다.
그런 다음 이 일을 완료하는 과정에서 있었던 일을 함께 이야기 해도 좋고, 간단히 다음 스프린트에 어떤 일을 할지 이야기하면 리뷰는 끝 !
회고는 우리 팀의 '일하는 방식'에 대해서 이야기하는 시간이다.
회고를 할 때는 KPT(Keep Problem Try) 방식을 활용하면 좋다.
Keep에는 이번 스프린트에 좋아서 계속 유지하고 싶은 것을 적고,
Problem에는 별로여서 그만하고 싶은 것을 적고,
Try에는 다시 열심히 고민한 다음 새롭게 시도하고 싶은 것들을 적으면 된다.
회고는 절대 누구의 잘잘못을 따지는 시간이 아니라 발생한 일들을 객관적으로 살펴보고 어떻게 하면 좋은 것 계속할지, 별로인 건 그만할지만
생각하면 된다.
- 구글의 운명을 바꾼 경영 도구 'OKR' 교육
- 구글의 OKR 도입 배경
: 벤처 투자자 존 도어는 인텔을 떠난 후 구글이라는 작은 스타트업에 투자하며 구글을 키운 인물로 유명하다.
그가 인텔에서 일하던 시절, 그의 상사이자 경영자였던 앤디 그로브에게서 배운 OKR이라는 경영 시스템을
두 창업자와 구글 직원들에게 전파했다. 이를 도입하고 실행함으로써 세계에서 가장 효율적으로 일하는 회사라 불리며, 동시에 엄청난 성과를
내는 기업으로 성장하게 된다.
- OKR의 개념
: 그렇다면 OKR은 도대체 무엇인가?
OKR은 목표(Objective)와 핵심 결과(Key Result)의 약어로, 목표와 핵심 결과를 뜻한다.
팀 혹은 개인이 목표를 설정하고 수치화하는 목표 달성 프레임워크로, 지속적으로 관리할 수 있게 하는 도구이자 시스템이다.
회사가 먼저 목표를 설정하면 부서와 직원들이 자발적으로 자신의 목표를 설정하는 쌍방향 방식이라 자율적으로 일하는 환경을 만들 수 있다.
- OKR의 핵심 사항
: 조직의 비전과 연결되어야 한다.
단기 (분기별 3개월) 및 장기 (연간 1년)를 설정해야 한다.
꼭 측정 가능해야 한다.
개인, 팀 및 회사 수준에서 설정 돼야 한다.
상향식에 의한 설정이어야 한다. (위로부터 40% 아래로부터 60%)
조직 전체에 공개하여 사용해야 한다.
매 분기마다 점수를 매겨야 한다.
- OKR 도출 절차
: 목표 (By 브레인 스토밍) → 목표 정비 (선호도 Map, 비슷한 목표끼리 묶고 제거하고 통합) → 목표, 순위 도출(중요도와 적합도 검토)
→ 최종 OKR을 논의 (우리는 '핵심 결과'로 측정되는 '목표'를 수행하겠다)
3. 그룹웨어 안내 - 전자결재, 업무연락 카테고리
: 우리 팀에서 그룹웨어 내 주로 사용하는 카테고리는 전자결재와 업무연락 카테고리이다.
전자결재 카테고리에는 연차, 공가 등을 작성하는 휴가계와 출장, 지출결의서 등을 작성하는 기타기안 등이 있고,
업무연락 카테고리에는 말 그대로 업무를 보내주시면 내가 확인한 후 댓글로 처리할 수도 있고, 다른 분들께서 휴가 전 업무 공유를 위해 사용하시기도 한다.
또 일일 업무 보고하는 구글 스프레드 시트를 공유해주셔서 근무 일지를 적을 수도 있다.
- 사업부 소개 및 인사
: 팀 리더님께서 우리 사업부 내 각각의 팀으로 가서 인사하는 시간을 갖게 해주셨다 !
바쁜 와중에 다들 환영해주셔서 너무 감사한 시간이었다.
부서 카카오톡 그룹 채팅에도 초대 받았는데 환영의 이모티콘을 엄청 보내주셔서 또 감사한 날이었다 ㅎㅎㅎㅎ
굉장히 힙한 회사 분위기이당 -
- Notion 자기소개 작성
: 회사 Notion에 들어가면 신입사원들이 자기소개 글 작성하는 카테고리가 있다.
어떤 경험이 있는지, 어디서 출퇴근하는지, 관심사, 입사 포부, 목표 등을 자유롭게 작성하면 된다.
업로드 후에 우리 팀과 그 외 기획팀 분들께서도 댓글로 환영의 인사를 남겨주셨다 !
- HTML&CSS 강의 수강 및 실습, 가인지 경영 강의 수강
: 기술 면접 당시 table 태그로 표를 만드는 문제가 있었는데, 헷갈리기도 하고 기억이 안 나서 완전 망쳤다 ㅠ_ㅠ
그래서 강의를 들어보면서 실습해보는 시간을 가졌다.
- HTML
<h1>Table 기본</h1>
<p>tr 행 - 세로</p>
<p>td 열 - 가로</p>
<p>tfoot - 표의 하단 영역을 묶는 그룹 태그</p>
<p>thead - 표의 제목 열들을 묶는 그룹 태그. 기본적으로 행 그룹 태그를 사용하지 않으면
크롬 브라우저가 자동으로 tbody 태그로 묶어줌</p>
<p>tbody - 표의 일반적인 데이터들을 묶는 그룹 태그. 기본적으로 행 그룹 태그를 사용하지
않으면 크롬 브라우저가 자동으로 tbody를 묶어줌
</p>
<p>colspan - 열을 병합하는 속성</p>
<p>rowspan - 행을 병합하는 속성</p>
<p>colgroup - 열을 그룹으로 묶을 수 있도록 해주는 태그</p>
<br />
<hr />
<br />
<table>
<caption>프로필 테이블</caption> <!-- caption : 표의 제목이나 설명 작성 -->
<tr> <!-- tr : 표의 행 -->
<th>이름</th> <!-- th : 표의 제목 열 -->
<th>취미</th>
<th>특기</th>
</tr>
<tr>
<td>홍길동</td> <!-- td : 표의 일반 열 -->
<td>도술</td>
<td>축지법</td>
</tr>
<tr>
<td>짐코딩</td>
<td>헬스</td>
<td>코딩</td>
</tr>
</table>
<br />
<hr />
<br />
<h1>Table 그룹 태그</h1>
<table>
<caption>
학급 점수
</caption>
<colgroup>
<col class="col0" />
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
</colgroup>
<thead>
<tr>
<th>반</th>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
<th>코딩</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1반</td>
<td>홍길동</td>
<td>90</td>
<td>100</td>
<td>90</td>
<td>81</td>
</tr>
<tr>
<td>짐코딩</td>
<td>85</td>
<td>81</td>
<td>95</td>
<td>100</td>
</tr>
</tbody>
<tfoot> <!-- tfoot으로 나뉘어져있으면 위의 행과 병합할 수 없음 -->
<tr>
<td colspan="2">평균</td>
<td>87.5</td>
<td>90.5</td>
<td>92.5</td>
<td>90.5</td>
</tr>
</tfoot>
</table>
- CSS
table {
border: 1px solid darkslategray;
border-collapse: collapse;
}
th, td {
border: 1px solid darkslategray;
padding: 12px;
}
.col0 {
width: 80px;
}
.col1 {
background: yellow;
}
휴 colgroup 부분에서 width 값은 적용되는데 background가 적용이 안돼서 진짜 1시간 동안 엄청 헤맸는데,
알고보니까 그냥 단순 오타였다. 휴우 화나 -
가인지 경영 강의는 대표님께서 신입사원들이 필수로 시청했으면 하는 강의 중 하나인데, 온보딩 교육 때 들었지만
다시 들어보며 회사가 지향하는 가치가 무엇인지에 대해 파악할 수 있었다.
- 가치 경영 : 고객 가치를 목적으로 일하는 것
- 인재 경영 : 사람을 성장시키고 그와 함께 일하는 것
- 지식 경영 : 지식으로 성과를 내는 것
- 사업부 스타일가이드 및 지디웹 참고
: 팀 리더님께서 우리 부서 스타일가이드를 공유해주셔서 살펴보는 시간을 가졌다.
헤더부터 푸터까지 어떤 방식으로 코드를 짜는지, 주로 사용하는 폰트, 정렬 및 위치, 버튼, 박스 스타일, 탭 메뉴, 레이어 팝업 등 상세하게
가이드가 만들어져 있어서 쭉 보면서 앞으로 어떤 식으로 일을 해야할지, 어떤 공부가 필요할지 고민해볼 수 있었다.
지디웹에는 우리 팀의 사수님들께서 직접 진행하신 프로젝트 결과물들이 업로드 되어 있어서 내가 앞으로 어떤 페이지를 만들어야 할지 알 수 있었다.
걱정도 많이 되지만 앞으로 공부하고 성장하는 데에 많은 도움이 될 것 같다.
래퍼런스 자료또한 잘 갖춰져 있는 회사에 입사하게 되어서 또 너무 다행이고 감사하고 있다 !
, https://brunch.co.kr/@lucy5016/8,
https://brunch.co.kr/@delivan/15
Day 3 - '업무 방식 공부'
- 신규 입사자 서류 제출
- 업무 방식 공부 - 애자일, 스크럼 유튜브 강의 수강 및 기록
- HTML & CSS 강의 수강 - background, position 속성
Review
이제는 지각할까봐 무서운지 알람이 울리기 10분 전에 눈이 떠진다 ㅋ_ㅋ
출근 길은 어느정도 적응이 되어서 괜찮고 어제는 조금 더 빨리 출발해서 30분 일찍 도착했다.
앞 자리 기획팀 PM님께서 먼저 커피 사러 가자고 해주셔가지구,, >< 기쁜 마음으로 따라갔다.
팀 리더에게 사내 카페 쿠폰을 주셔서 그 쿠폰으로 내 커피까지 사주셨당
팀 분위기는 어떤지, 어떤 일을 하는지, 또 다음주에 회식은 어디로 갈지(?) 이런저런 이야기를 하다가 보니 직원 분들이 사내 카페로 먼저
출근하신다는 걸 알게 됐다 ㅋㅋㅋㅋㅋ 역시 직장인은 커피로 하루를 시작해야 하는 게 맞는 거징
그렇게 PM님 덕분에 기획팀, 개발팀 분들과도 인사하면서 기분 좋게 시작했당 !
- 신규 입사자 서류 제출 - 인사기록카드, 중소기업취업자소득감면 신청서 제출
: 전자결재 카테고리에 입사 날 보내주신 신규 입사자 서류 안내가 있었다.
데드라인을 일주일 주셔서 인사기록카드를 작성하여 댓글로 첨부하였고, 중소기업취업자소득감면 신청서는 가이드를 정말 상세하게 안내해주셔서
큰 어려움 없이 작성하여 행정 부서 담당자 분께 직접 제출했다.
- 업무 방식 공부 - 애자일, 스크럼 유튜브 강의 수강 및 기록
: 이에 대한 기록은 어제의 근무 일지란에 통일하여 작성하였다 !
3개월 후 성장 발표를 해야할 때의 자료를 미리 조사해놓기 위해서 강의를 들으며 기록하였다.
OKR 방식은 아직 조금 헷갈리고 어렵긴 하지만 애자일, 스크럼은 확실하게 개념을 파악하였고 어떤 식으로 업무를 해나가야 할지 알 수 있었다.
- HTML & CSS 강의 수강 - background, position 속성
1. background 속성
- background-color
- 요소의 배경 색상을 지정하는 속성이다.
- transparent : 기본값으로, 투명하다.
- 색상 : 지정 가능한 색상으로 지정하면 된다.
- background-image
- 요소의 배경 이미지를 삽입하는 속성이다.
- none : 기본값으로, 이미지가 없다.
- url("경로") : 이미지 경로를 설정하는 함수 개념이다.
See the Pen Untitled by yellowposey (@yellowposey) on CodePen.
배경 색상은 이미지 뒤에 나오게 된다.
- background-repeat
- 요소의 배경 이미지를 반복시키는 속성이다.
- repeat : 기본값으로, 이미지를 수직, 수평 반복시킨다.
- repeat-x : 이미지를 수평 반복시킨다.
- repeat-y : 이미지를 수직 반복시킨다.
- no-repeat : 어느 쪽으로도 반복시키지 않는다.
See the Pen Untitled by yellowposey (@yellowposey) on CodePen.
- background-position
- 요소의 배경 이미지 위치를 지정하는 속성이다.
- 0% 0% : 기본값으로, 0~100% 사이의 값이다. (잘 사용하지 않음)
- 방향 : 방향1 방향2로 두 방향까지 설정할 수 있으며, top, bottom, left, right, center가 있다.
- 단위 : px, em, rem 등 단위로 지정한다.
See the Pen Untitled by yellowposey (@yellowposey) on CodePen.
See the Pen Untitled by yellowposey (@yellowposey) on CodePen.
- background-size
- 요소의 배경 이미지 크기를 지정하는 속성이다.
- auto : 기본값으로, 이미지의 실제 크기로 설정한다.
- 단위 : px, em, rem 등 단위로 지정한다.
- cover : 비율을 유지하고, 요소의 더 넓은 너비에 맞춘다.
- contaion : 비율을 유지하고, 요소의 더 짧은 너비에 맞춘다.
See the Pen Untitled by yellowposey (@yellowposey) on CodePen.
See the Pen Untitled by yellowposey (@yellowposey) on CodePen.
- background-attachment
- 요소의 배경 이미지가 어떠한 스크롤의 특성을 가지고 삽입되는지에 대해 설정해주는 속성이다.
- scroll : 기본값으로, 이미지가 요소를 따라서 같이 스크롤된다.
- fixed : 이미지가 뷰포트에 고정되어서 같이 스크롤 되지 않는다.
- local : 요소 내 스크롤 시 이미지가 같이 스크롤 (잘 사용하지 않음)
See the Pen Untitled by posey (@poseybutter) on CodePen.
See the Pen Untitled by posey (@poseybutter) on CodePen.
background-attachment: fixed;를 통해서 결과적으로는 요소가 아닌 뷰포트, 즉 화면에 배경 이미지가 고정되는 것이기 때문에 스크롤하면
HTML 요소는 올라가지만 배경 이미지는 고정되는 효과를 구현할 수 있다.
이렇게 background-attachment: fixed;를 통해서 패럴렉스 예제들을 손쉽게 구현할 수 있다.
나중에 예제를 통해 더 자세히 알아보도록 하겠다.
2. position 속성
- position
- 요소의 위치 지정 기준을 지정하는 속성이다. 어떠한 요소를 배치할 때는 기준을 잡고 나서 위치 값을 설정해야 한다.
position과 같이 사용하는 CSS 속성들에는 top, bottom, left, right, z-index가 있고, 모두 음수를 사용할 수 있다.
- static : 기본값으로, 기준이 없다는 뜻이다.
- relative : 요소 자신을 기준으로 한다.
- absolute : 위치 상 부모 요소를 기준으로 한다.
- fixed : 뷰포트(브라우저)를 기준으로 한다.
- sticky : 스크롤 영역을 기준으로 한다. (잘 사용하지 않음)
See the Pen Untitled by posey (@poseybutter) on CodePen.
- top, bottom, left, right
- 요소의 각 방향별 거리를 지정하는 속성이다.
- auto : 기본값으로, 브라우저가 계산한다.
- 단위 : px, em, rem 등 단위로 지정한다.
See the Pen Untitled by posey (@poseybutter) on CodePen.
See the Pen Untitled by posey (@poseybutter) on CodePen.
See the Pen Untitled by posey (@poseybutter) on CodePen.
Day 4 - '업무 관련 지식 습득'
- HTML & CSS 강의 수강 - position 속성, flex, transition 속성, transfrom 속성
Review
- HTML & CSS 강의 수강 - position 속성, flex, transition 속성, transfrom 속성
1. position 속성
- 요소 쌓임 순서 (Stack order)
: 어떤 요소가 사용자와 더 가깝게 있는지 (위에 쌓이는지) 결정
- 요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본값 static 제외)
- 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
- 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일수록 위에 쌓임
See the Pen Untitled by posey (@poseybutter) on CodePen.
- z-index
- 요소의 쌓임 정도를 지정하는 속성이다.
- auto : 기본값으로, 부모 요소와 동일한 쌓임 정도이다.
- 숫자 : 숫자가 높을수록 위에 쌓인다.
- 요소의 display가 변경됨
: position 속성의 값으로 absolute, fixed가 지정된 요소는,
display 속성이 block으로 변경된다.
See the Pen Untitled by posey (@poseybutter) on CodePen.
2. flex
- display
- Flex Container의 화면 출력(보여짐) 특성이다.
- flex : 블록 요소와 같이 Flex Container 정의한다.
- inline-flex : 인라인 요소와 같이 Flex Container 정의한다.
- flex-direction
- 주 축을 설정하는 속성이다.
- row : 기본값으로, 행 축 (좌 → 우)을 뜻한다.
- row-reverse : 행 축 (우 → 좌)을 뜻한다.
- column : 열 축 (위 → 아래)을 뜻한다. (잘 사용하지 않음)
- column-reverse : 열 축 (아래 → 위)을 뜻한다. (잘 사용하지 않음)
See the Pen Untitled by posey (@poseybutter) on CodePen.
- flex-wrap
- Flex-items 묶음(줄 바꿈) 여부를 지정하는 속성이다.
- nowrap : 기본값으로, 묶음(줄 바꿈)이 없다.
- wrap : 여러 줄로 묶는다.
- wrap-reverse : wrap의 반대 방향으로 묶는다. (잘 사용하지 않음)
See the Pen Untitled by posey (@poseybutter) on CodePen.
- justify-content
- 주 축의 정렬 방법 속성이다.
- flex-start : 기본값으로, Flex Items를 시작점으로 정렬한다.
- flex-end : Flex Items를 끝점으로 정렬한다.
- center : Flex Items를 가운데 정렬한다.
- space-between : 각 Flex Items 사이를 균등하게 정렬한다. (잘 사용하지 않음)
- space-around: 각 Flex Items의 외부 여백을 정렬한다. (잘 사용하지 않음)
- align-content
- 교차 축의 여러 줄 정렬 방법 속성이다. flex-wrap: wrap; 상태여야하고, 빈 공간이 있는 상태에서 두 줄 이상일 때만 동작한다.
- stretch : 기본값으로, Flex Items를 시작점으로 정렬한다.
- flex-start : Flex Items를 시작점으로 정렬한다.
- flex-end : Flex Items를 끝점으로 정렬한다.
- center : Flex Items를 가운데 정렬한다.
- space-between : 각 Flex Items 사이를 균등하게 정렬한다. (잘 사용하지 않음)
- space-around: 각 Flex Items의 외부 여백을 정렬한다. (잘 사용하지 않음)
- align-items
- 교차 축의 한 줄 정렬 방법이다.
- stretch : 기본값으로, Flex Items를 교차축으로늘린다.
- flex-start : Flex Items를 각 줄의 시작점으로 정렬한다.
- flex-end : Flex Items를 각 줄의 끝점으로 정렬한다.
- center : Flex Items를 각 줄의 가운데로 정렬한다.
- baseline : Flex Items을 각 줄의 문자 기준선에 정렬한다. (잘 사용하지 않음)
See the Pen Untitled by posey (@poseybutter) on CodePen.
- order
- Flex Item의 순서를 지정한다. HTML 구조를 바꾸지 않고도 화면에 출력되는 순서의 요소를 그때그때 다르게 만들어 줄 수 있는 장점을 가지고 있다.
- 0 : 기본값으로, 순서가 없다는 뜻이다.
- 숫자 : 숫자가 작을수록 먼저 정렬된다.
- flex-grow
- Flex Item의 증가 너비 비율을 지정하는 속성이다.
- 0 : 기본값으로, 증가 비율이 없다는 뜻이다.
- 숫자 : 증가 비율 을 뜻한다.
- flex-shrink
- Flex Item의 감소 너비 비율을 지정하는 속성이다. 아무것도 지정하지 않으면 Flex Container의 가로 너비가 작아지면서 요소가 찌그러지는 현상이
발생한다. 그것은 기본적으로 각각의 Flex Item 부분에 감소하는 너비 비율이 있기 때문이다.
- 1 : 기본값으로, Flex Container의 너비에 따라 감소 비율을 적용한다.
- 숫자 : 감소 비율 을 뜻한다.
- flex-basis
- Flex Item의 공간 배분 전 기본 너비를 지정하는 속성이다.
- auto : 기본값으로, 요소의 Content 너비이다.
- 단위 : px, em, rem 등 단위로 지정한다.
3. transition
- transition
- 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성이다.
- 기본 문법 : transition: 속성명 지속시간 타이밍함수 대기시간;
* 지속시간은 단축형으로 작성할 때, 필수 포함 속성이다 !
- 이 외 속성 : transition-property, transition-duration, transition-timing-function, transition-delay
See the Pen Untitled by posey (@poseybutter) on CodePen.
- transition-property
- 전환 효과를 사용할 속성 이름을 지정하는 속성이다. 단축형으로 작성할 때, 필수 포함 속성이다 !
- all : 기본값으로, 모든 속성에 적용한다.
- 속성 이름 : 전환 효과를 사용할 속성 이름을 명시한다.
- transition-duration
- 전환 효과를 사용할 지속 시간을 지정하는 속성이다.
- 0s : 기본값으로, 전환 효과가 없다.
- 시간 : 지속시간(s)을 지정한다.
See the Pen Untitled by posey (@poseybutter) on CodePen.
- transition-timing-function
- 전환 효과의 타이밍(Easing) 함수를 지정하는 속성이다.
- ease : 기본값으로, 느리게 - 빠르게 - 느리게 = cubic-bezier(0.25, 0.1, 0.25, 1)
- linear : 느리게 - 빠르게 - 느리게 = cubic-bezier(0, 0, 1, 1)
- ease-in: 느리게 - 빠르게 - 느리게 = cubic-bezier(0.42, 0.1, 1, 1)
- ease-out : 느리게 - 빠르게 - 느리게 = cubic-bezier(0, 0, 0.58, 1)
- ease-in-out : 느리게 - 빠르게 - 느리게 = cubic-bezier(0.42, 0, 0.58, 1)c
- cubic-bezier(n,n,n,n) : 자신만의 값을 정의한다. (0~1) (잘 사용하지 않음)
- steps(n) : n번 분할된 애니메이션이다. (잘 사용하지 않음)
* 래퍼런스 사이트
https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function,
https://greensock.com/docs/v2/Easing
- transition-delay
- 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정하는 속성이다.
- 0s : 기본값으로, 대기시간이 없다.
- 시간 : 대기시간(s)을 지정한다.
See the Pen Untitled by posey (@poseybutter) on CodePen.
4. transform
- transform
- 요소의 변환 효과를 지정하는 속성이다.
- 기본 문법 : transform: 변환함수1 변환함수2 변환함수3 ... ;
transform: 원근법 이동 크기 회전 기울임;
See the Pen Untitled by posey (@poseybutter) on CodePen.
- 2D 변환 함수
<px>
- translate(x, y) : 이동(x축, y축)
- translateX(x) : 이동(x축)
- translateY(y) : 이동(y축)
<단위 없음, 배수>
- scale(x,y) : 크기(x축, y축)
- scaleX(x) : 크기(x축) (잘 사용하지 않음)
- scaleY(y) : 크기(y축) (잘 사용하지 않음)
<deg>
- rotate(degree) : 회전(각도)
- skew(x,y) : 기울임(x축,y축) (잘 사용하지 않음)
- skewX(x) : 기울임(x축)
- skewY(y) : 기울임(y축)
- matrix(n,n,n,n,n,n) : 2차원 변환 효과 (잘 사용하지 않음)
- 3D 변환 함수
<px>
- translateZ(z) : 이동(z축) (잘 사용하지 않음)
- translate3d(x,y,z) : 이동(x축,y축,z축) (잘 사용하지 않음)
- perspective(n) : 원근법(거리)
<단위 없음, 배수>
- scaleZ(z) : 크기(z축) (잘 사용하지 않음)
- scale3d(x,y,z) : 크기(x축,y축,z축) (잘 사용하지 않음)
<deg>
- rotateX(x) : 회전(x축)
- rotateY(y) : 회전(y축)
- rotateZ(z) : 회전(z축) (잘 사용하지 않음)
- rotate3d(x,y,z,a) : 회전(x축,y축,z축,각도) (잘 사용하지 않음)
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) : 3차원 변환 효과 (잘 사용하지 않음)
See the Pen Untitled by posey (@poseybutter) on CodePen.
- perspective
- 하위 요소를 관찰하는 원근 거리를 지정하는 속성이다.
- 단위 : px 등 단위로 지정한다.
* perspective 속성과 함수 차이점
- 속성 perspective: 600px; / 적용 대상 : 관찰 대상의 부모 / 기준점 설정 : perspective-origin
- 함수 transform: perspective(600px); / 적용 대상 : 관찰 대상 / 기준점 설정 : transform-origin
- backface-visibility
- 3D 변환으로 회전된 요소의 뒷면 숨김 여부를 지정하는 속성이다.
- visible : 기본값으로, 뒷면이 보인다.
- hidden : 뒷면을 숨긴다.
- Overwatch 예제 만들어보기
- HTML
<div class="container">
<div class="heroes">
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
<div class="hero">
<div class="image"></div>
</div>
</div>
<div class="logo">
<img src="https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/logo_overwatch.png" alt="Overwatch">
</div>
</div>
- CSS
body {
height: 100vh;
background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.container {
padding: 50px 0;
}
.container .heroes {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 700px;
margin: 0 auto;
padding: 40px 20px;
}
.container .heroes .hero {
width: 80px;
height: 84px;
background: #555;
border: 3px solid #fff;
border-radius: 10px;
box-sizing: border-box;
overflow: hidden;
margin: 4px;
transform: skewX(-14deg);
transition:
transform .1s,
background .6s;
}
.container .heroes .hero:hover {
background: #ff9c00;
transform: skewX(-14deg) scale(1.3);
z-index: 1;
}
.container .heroes .hero .image {
width: 140%;
height: 100%;
background-position: center;
background-size: 90px;
background-repeat: no-repeat;
transform: skewX(14deg) translateX(-16px);
/* 원래 상태로 돌리기 위해 반대값으로 입력 */
}
.container .heroes .hero:nth-child(1) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png");}
.container .heroes .hero:nth-child(2) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero2.png");}
.container .heroes .hero:nth-child(3) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero3.png");}
.container .heroes .hero:nth-child(4) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero4.png");}
.container .heroes .hero:nth-child(5) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero5.png");}
.container .heroes .hero:nth-child(6) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero6.png");}
.container .heroes .hero:nth-child(7) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero7.png");}
.container .heroes .hero:nth-child(8) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero8.png");}
.container .heroes .hero:nth-child(9) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero9.png");}
.container .heroes .hero:nth-child(10) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero10.png");}
.container .heroes .hero:nth-child(11) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero11.png");}
.container .heroes .hero:nth-child(12) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero12.png");}
.container .heroes .hero:nth-child(13) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero13.png");}
.container .heroes .hero:nth-child(14) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero14.png");}
.container .heroes .hero:nth-child(15) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero15.png");}
.container .heroes .hero:nth-child(16) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero16.png");}
.container .heroes .hero:nth-child(17) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero17.png");}
.container .heroes .hero:nth-child(18) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero18.png");}
.container .heroes .hero:nth-child(19) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero19.png");}
.container .heroes .hero:nth-child(20) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero20.png");}
.container .heroes .hero:nth-child(21) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero21.png");}
.container .heroes .hero:nth-child(22) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero22.png");}
.container .heroes .hero:nth-child(23) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero23.png");}
.container .heroes .hero:nth-child(24) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero24.png");}
.container .heroes .hero:nth-child(25) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero25.png");}
.container .heroes .hero:nth-child(26) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero26.png");}
.container .heroes .hero:nth-child(27) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero27.png");}
.container .heroes .hero:nth-child(28) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero28.png");}
.container .heroes .hero:nth-child(29) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero29.png");}
.container .heroes .hero:nth-child(30) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero30.png");}
.container .heroes .hero:nth-child(31) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero31.png");}
.container .heroes .hero:nth-child(32) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero32.png");}
.container .logo {
max-width: 300px;
margin: 0 auto;
padding: 0 20px;
}
.container .logo img {
width: 100%;
}
- 결과물 : https://poseybutter.github.io/overwatch-vanilla/
Day 5 - '업무 관련 지식 습득'
- JavaScript 강의 수강 - 개요, 데이터 종류, 변수, 예약어, 함수, 조건문, DOM API
Review
어제까지 CSS 강의를 한번 쭉 훑었기 때문에 오늘부터는 JS 강의를 듣기 시작했다.
다음주에 소규모 페이지 만들기 미션을 받게 될 것 같아서 미리 공부를 좀 해 둬야할 것 같아서 마음이 조금은 조급해졌다.
회사에서 매주 금요일마다 아침마당이라는 대표님과 직원들이 소통할 수 있는 장이 마련되고 있다.
회사 생활하면서 불만이나 개선되었으면 좋겠는 것들을 익명 게시판에 작성하면 대표님께서 직접 읽고 피드백해주신다.
되게 소소한 것들이 올라오는데 보면서 되게 신기했다. 굉장히 수평적인 분위기이구나 싶어서 좋아보였다.
오후에 멘토님과 사내 카페에서 입사 후 첫 주는 어땠는지, 회사에 대해서 더 궁금한 건 없는지 등 이런저런 이야기를 나눴다.
내 성향이 하면 하는 거고 말면 마는 거고 무던한 성격이라 딱히 별 고민 없이 생활한 것 같아서 지금 상태는 이렇다고 말씀 드렸는데
너무 솔직하게 말씀 드렸나 싶어서 살짝 민망했지만 사실이니 어쩔 수 없지 하하
멘토님이 회사 생활하면서 사용하라고 수첩도 사주셔서 너무 감동 받았습니다,, 감동의 연속 -
회사에서 이렇게 신규 입사자들에게 1:1 멘토멘티 활동을 하게 해주시는 것이 참 좋은 것 같다.
멘토님뿐만 아니라 우리 팀원들이나 다른 팀원들도 너무 잘 챙겨주셔서 금방 적응할 수 있고, 주로 협업 할 일이 많으니 두루두루 잘지내면서
직접적으로 업무 교류도 할 수 있도록 미리 환경을 제공해주시는 것 같다.
여튼 첫 회사로 너무 좋은 회사에 입사하게 되어서 너무 감사한 요즘이다 -
다음주도 파이팅 !!!
- JavaScript 강의 수강 - 개요, 데이터 종류, 변수, 예약어, 함수, 조건문, DOM API
[자바스크립트의 개요]
1. 표기법
- dash-case(kebab-case)
: 말 그대로 ' - ' 대시 기호를 이용한 표기법이다.
단어와 단어 사이를 꼬챙이로 꽂아놓은 것처럼 생겼다고 해서 'kebab-case'라고도 불린다.
이 표기법은 HTML과 CSS에서 유독 많이 사용된다.
the-quick-brown-fox-jumps-over-the-lazy-dog
위의 예시처럼 각각의 단어 사이사이마다 대시 기호를 추가해 띄어쓰기를 대신하는 것이다.
그러면 컴퓨터는 하나의 단어로 인식할 수 있고, 그 단어를 우리가 알고 있는 단어들로 구분해서 읽어낼 수 있다.
- snake_case
: 단어와 단어 사이에 ' _ ' 언더 바라는 기호를 사용해서 하나의 단어로 묶어내는 방식을 이용한 표기법이다.
the_quick_brown_fox_jumps_over_the_lazy_dog
언더 바를 통해서 하나의 단어로 인식할 수 있고, 이러한 방식을 'snake_case', 즉 뱀 표기법이라고도 한다.
이 표기법은 HTML과 CSS에서 주로 많이 사용된다.
- camelCase
: 첫 번째 단어의 첫 글자는 소문자, 그 다음 단어부터는 첫 글자가 대문자로 시작해서 소문자로 끝나는 구조로, 각각의 단어를 구분해서 인식할 수 있다.
theQuickBrownFoxJumpsOverTheLazyDog
낙타의 등이 볼록볼록 튀어나온 것처럼 보인다고 해서 'camelCase', 즉 낙타 표기법이라고 불린다.
이 표기법은 HTML과 CSS보다는 JS에서 주로 많이 사용된다.
- ParcelCase
: camelCase와는 다르게 'ParcelCase'는 첫 번째 단어의 첫 글자도 대문자로 시작한다.
TheQuickBrownFoxJumpsOverTheLazyDog
자바스크립트에서 new라는 키워드를 가지고 있는 생성자 함수라는 개념을 살펴볼 때 ParcelCase를 통해서 이름을 명시하게 된다.
자바스크립트에서는 대부분의 경우 camelCase를 사용하면 되는데, 특수한 경우에 ParcelCase라든지 앞서 살펴 본 dash-case, snake_case를 사용할 수도 있다.
거의 대부분은 camelCase를 사용한다.
2. zero-based Numbering
: 말 그대로 0 기반 번호 매기기 방법이다. 특수한 경우를 제외하고 0부터 숫자를 시작한다.
console.log(new Date('2023-07-19').getDay()); // 3, 수요일
console.log(new Date('2023-07-18').getDay()); // 2, 화요일
console.log(new Date('2023-07-14').getDay()); // 5, 금요일
3. 주석 (Comments)
// 한 줄 메모
/* 한 줄 메모 */
/**
* 여러 줄
* 메모1
* 메모2
*/
- 윈도우 : Ctrl + /
- 맥 : Command + /
[자바스크립트의 데이터 종류]
// string (문자 데이터)
// 따옴표를 사용한다.
let myName = "posey";
let email = 'poseybutter@gmail.com';
let hello = `Hello ${myName}?!`; // 보간법 이용
console.log(myName); // posey
console.log(email); // poseybutter@gmail.com
console.log(hello); // Hello posey?!
// Number (숫자 데이터)
// 정수 및 부동소수점 숫자를 나타낸다.
let number = 123; // 정수. 따옴표 붙이면 문자 데이터로 바뀜. 따옴표 유무 중요
let opacity = 1.57; // 부동소수점 숫자
console.log('number'); // 123
console.log('opacity'); // 1.57
// Boolean (불린 데이터)
// true, false 두 가지 값밖에 없는 논리 데이터이다.
let checked = true; // 참
let isShow = false; // 거짓
console.log(checked); // true
console.log(isShow); // false
// Undefined
// 값이 할당되지 않은 상태를 나타낸다.
// 즉, 자바스크립트에서는 값이 없는 상태를 undefined라는 데이터로 인식한다.
let undef;
let obj = { abc: 123 };
console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined
// Null
// 어떤 값이 의도적으로! 비어있음을 의미한다.
let empty = null;
console.log(empty); // null
undefined와 null은 둘 다 뭔가가 없다는 공통점을 가지고 있지만, 의도적인지 아닌지 여부로 둘을 구분할 수 있다.
// Object (객체 데이터)
// 여러 데이터를 Key:Value 형태로 저장한 데이터의 집합이다. { }
// 중괄호 사이에 데이터들의 집합을 추가하면 된다.
let user = {
// Key: Value;
name: 'Posey',
age: 77,
isValid: true,
};
console.log(user.name); // Posey
console.log(user.age); // 77
console.log(user.isValid); // true
// Array (배열 데이터)
// 여러 데이터를 순차적으로 저장한다. [ ]
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'
데이터를 순차적으로 저장한다면 [ ] 대괄호로, Key: Value 형태로 저장한다면 { } 중괄호로 저장하면 된다.
[자바스크립트의 변수]
1. 변수
- 데이터를 저장하고 참조(사용)하는 데이터의 이름
- 종류 : var(사용하지 않는 것을 권장), let, const
// 변수는 재사용이 가능하다 !
// 변수 선언 !
let a = 2;
let b = 5;
console.log(a + b); // 7
console.log(a - b); // -3
console.log(a * b); // 10
console.log(a / b); // 0.4
// let - 값(데이터)의 재할당이 가능하다 !
let a = 12; // 선언
console.log(a); // 12
a = 999; // 재할당
console.log(a); // 999
// const - 값(데이터)의 재할당이 불가능하다 !
const a = 12; // 선언
console.log(a); // 12
a = 999; // 재할당
console.log(a); // TypeError: Assignment to constant variable.
변수를 만들 때 어떠한 새로운 값을 언제든 재할당하는 것을 전제로 한다면, 그 변수는 언제든 값을 재할당할 수 있도록 열려있어야 한다.
그러면 거기서 발생하는 내부적인 낭비가 있을 수 있기 때문에, 되도록이면 닫혀 있는 형태의 재할당이 불가능한 const 키워드를 사용하고,
만약 재할당이 필요하면 let이라는 키워드로 바꿔서 코드를 수정할 수 있도록 사용하는 것이 좋다.
2. 예약어 (Reserved Word)
- 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어이다. 예약어를 사용하게 되면 SyntaxError가 난다.
let this = 'Hello'; // SyntaxError
let if = 123; // SyntaxError
let break = true; // SynTaxError
3. 함수 (function)
- 특정 동작(기능)을 수행하는, 즉 명령들을 감싸고 있는 일부 코드의 집합(부분)이다.
// 함수 선언
function helloFunc() {
// 실행 코드
console.log(1234);
}
// 함수 호출
helloFunc(); // 1234
function returnFunc() {
return 456; // 반환, 즉 내보내기
}
let a = returnFunc(); // a라는 변수가 returnFunc 함수의 데이터를 받아서 저장
console.log(a); // 456
// 함수 선언 !
function sum(a, b) { // a와 b는 매개변수 (Parameters)
return a + b;
}
// 재사용 !
let a = sum(1, 2); // 1과 2는 인수 (Arguments)
let b = sum(7, 12); //
let c = sum(2, 4); //
console.log(a, b, c); // 3, 19, 6
함수 안에서 사용하는 데이터를 받아줄 매개체가 되는 변수를 '매개변수'라고 부르고, 그 변수는 함수 안에서만 사용할 수 있다.
그 매개변수가 받아줄 특정한 데이터들을 '인수'라고 부른다. 데이터는 꼭 숫자가 아니더라도 앞서 배운 '문자 데이터, 불린 데이터, undefined, null,
객체 데이터, 배열 데이터'까지 모두 인수 안에 전달해줄 수 있다.
// 기명(이름이 있는)함수
// 함수 선언 !
function hello() {
console.log('Hello');
}
// 익명(이름이 없는)함수 - 데이터로써 활용하거나 변수에 할당해서 사용하기도 함
// 이름이 없기 때문에 호출할 수가 없으니까 let이나 const에 사용하는 변수에다가 집어넣어 사용할 수 있음
// 함수 표현 !
let world = function () {
console.log('World~')
}
// 함수 호출 !
hello(); // Hello
world(); // World~
// 객체 데이터
const posey = {
name: 'Posey',
age: 77,
// 메소드 (Method)
getName: function () { // 익명 함수 - 함수 표현 !
// 속성 부분에 함수가 할당되어 있다면 그것을 메소드라고 부름.
// 객체 데이터 내부에 하나의 속성 부분에 일반적인 데이터가 아닌 함수라는 하나의 데이터가 들어있는 경우 그것을 메소드라고 함.
return this.name; // this가 소속되어 있는 객체 데이터를 의미
}
}
const herName = posey.getName();
console.log(herName); // Posey
// 혹은
console.log(posey.getName()); // Posey
함수를 데이터처럼 활용할 수 있고, 대표적으로 객체 데이터에 특정한 속성에다가 함수를 데이터처럼 삽입할 수 있다.
그 삽입된 속성은 더이상 속성이라 부르지 않고 '메소드(Method)'라고 부른다.
4. 조건문 (if, else)
- 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문이다.
let isShow = true;
let checked = false;
if (isShow) { // true - 실행 O
console.log('Show !'); // Show !
}
if (checked) { // false - 실행 X
console.log('Checked !')
}
let isShow = true; // false라면 else 뒷 부분이 출력됨
if (isShow) { // true
console.log('Show!'); // 실행 O
} else {
console.log('Hide?'); // 실행 X
}
5. DOM API (Document Object Model, Application Programming Interface)
: Document Object Model은 HTML에 들어있는 여러가지 Object Model을 말하는 건데, Object Model은 대표적으로 우리가 알고 있는 div, span, input 요소 등을 말한다.
이런 요소들을 Document에 들어있는 Object Model이라 하고, 줄여서 DOM이라고 한다.
Application Programming Interface은 어플리케이션, 웹 사이트가 동작하기 위해서 입력하는 프로그래밍 명령이라고 이해하면 된다.
즉, DOM API는 자바스크립트에서 HTML을 제어하는 여러가지 명령들이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS</title>
<script src="./main.js"></script>
</head>
<body>
<div class="box">Box !!</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS</title>
</head>
<body>
<div class="box">Box !!</div>
<script src="./main.js"></script>
</body>
</html>
브라우저는 위에서 아래로 코드를 읽어 나가기 시작한다.
브라우저가 script 태그를 읽었을 때 아직은 body 태그 부분은 아직 읽지 않은 상태이다.
main.js를 읽고 그 내용을 브라우저에 적용하려고 하는데 아직 내용을 읽지 않았기 때문에 브라우저는 box라는 클래스를 가진 요소가 무엇인지 모른다.
그런데 main.js 부분에서는 box라는 클래스를 가진 요소를 찾아서 개발자 도구 콘솔 창에 출력을 해달라고 하는 명령이 들어있다.
그러니 main.js가 실행이 될 때 해당하는 요소가 무엇인지 모르는데 찾아달라고 했으니 결국 찾지 못하고 콘솔 창에 null이라는 아무 의미 없는 데이터가 출력되는 것을 볼 수 있다.
이것을 해결하려면 두 가지 방법이 있는데,
script 태그를 body 태그의 가장 밑 부분에 작성을 하거나
head 태그의 title 태그 밑에 작성하고 나서 defer라는 속성을 추가해주는 방법이 있다.
다만, 이건 정보에 해당하는 내용이니 head 태그 안으로 올려 작성하는 것을 더 추천한다.
만약 HTML 부분의 코드를 정상적으로 찾지 못하면 script 태그의 위치라든지 defer라는 속성이 부여되어 있지 않은가를 꼭 확인해보아야 한다.
// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');
// HTML 요소에 적용할 수 있는 메소드 !
boxEl.addEventListener();
// 인수(Arguments)를 추가 가능 !
boxEl.addEventListener(1, 2);
// 1 - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);
// 2 - 핸들러(Handler, 실행할 함수)
// 두 번째 인수 부분에 데이터처럼 익명 함수를 추가
boxEl.addEventListener('click', function () {
console.log('Click~!');
});
let boxEl = document.querySelector('.box');
console.log(boxEl);
boxEl.addEventListener('click', function () {
console.log('Click!!');
});
클릭 이벤트가 실행되면 콘솔 창에 'Click!!'이라는 문구가 뜨게 된다.
// HTML 요소(Element) 검색/찾기
const boxEl = document.querySelector('.box');
// 요소의 클래스 정보 객체 활용!
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
// 해당 요소에 active 클래스 유무를 확인한 후 있으면 true, 없으면 false 반환
// 그 반환된 값이 isContains라는 변수에 할당됨
console.log(isContains); // true
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // false
let boxEl = document.querySelector('.box');
console.log(boxEl);
boxEl.addEventListener('click', function () {
console.log('Click !!'); // 클릭하면
boxEl.classList.add('active'); // active 클래스를 추가
console.log(
boxEl.classList.contains('active')
// boxEl라는 객체에 들어 있는 contains라는
// 명령을 통해 active 클래스가 들어있는지 확인하겠어
);
});
Box!!!를 클릭하게 되면 우선 개발자 도구에서 box 클래스 옆에 active 클래스가 추가된 것을 볼 수 있다.
contains라는 명령을 이용해 active 클래스가 있는지 확인해보면 true라고 콘솔 창에 출력된다.
let boxEl = document.querySelector('.box');
console.log(boxEl);
boxEl.addEventListener('click', function () {
console.log('Click !!'); // 클릭하면
boxEl.classList.add('active'); // active 클래스를 추가
console.log(
boxEl.classList.contains('active')
// boxEl라는 객체에 들어 있는 contains라는
// 명령을 통해 active 클래스가 들어있는지 확인하겠어
);
boxEl.classList.remove('active');
console.log(
boxEl.classList.contains('active')
// boxEl라는 객체에 들어 있는 contains라는
// 명령을 통해 active 클래스가 제거됐는지 확인하겠어
);
});
위의 과정에서 이번에는 active 클래스를 제거해보자 -
Box!!!를 클릭해서 active 클래스가 추가되어 true가 출력됐고 그 이후에 active 클래스가 제거되어 false까지 출력된 것을 확인할 수 있다.
// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);
// 찾은 요소들 반복해서 함수 실행 !
// 익명 함수를 인수로 추가 !
boxEls.forEach(function () {
// 배열 데이터로 만들어질 것. 정확히는 유사 배열(Array-like)
// box 클래스를 가진 요소 여러 개를 찾아 만든 배열을 forEach 메소드를 통해 반복시킬 수 있음
});
// 첫 번째 매개변수(boxEl): 반복 중인 요소,
// 두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {
});
// 출력 !
boxEls.forEach(function (boxEl, index) {
// boxEls는 forEach를 통해 반복적으로 해당하는 내용을 돌려가며 익명의 함수를 실행할 수 있는데,
// 그 익명의 함수는 한 번 실행될 때마다 boxEl과 index라는 매개변수로 그 내부에서 로직을 추가할 수 있음
boxEl.classList.add(`order-${index + 1}`);
// boxEls에는 반복중인 요소가 들어있고, 그 요소에 classList를 통해 클래스를 추가할 거임
// 추가되는 클래스는 ``을 통해 추가할 거고, 그 내용은 order-, 보간법을 이용해 index 부분에 1을 더해서 추가할 거임
console.log(index, boxEl);
});
- HTML
<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
<div class="box">Box4</div>
- JS
const boxEls = document.querySelectorAll('.box'); // 모든 요소의 배열
boxEls.forEach(function (boxEl, index) { // 그 배열을 반복적으로 돌려가면서 해당 요소들을 제어할 거임
boxEl.classList.add(`order-${index + 1}`);
// index 순서를 1부터 시작하도록 하기 위해 1을 더함
console.log(index, boxEl);
});
const boxEl = document.querySelector('.box');
// textContent의 용도 2가지
// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!!
// box 요소에 들어있는 텍스트로만 이뤄진 내용만 반환하는 textContent 속성 이용
// Setter, 값을 지정하는 용도
boxEl.textContent = 'Posey?!';
console.log(boxEl.textContent); // Posey?!
- HTML
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
- JS
const boxEl = document.querySelector('.box');
console.log(boxEl.textContent);
// box 클래스에 들어있는 요소들 중 가장 먼저 찾아진 box 클래스를
// 가진 첫 번째 요소에 텍스트로만 이뤄진 글자 하나를 추출해 콘솔 창에 출력
boxEl.textContent = 'Posey!!'; // 값을 얻는 것뿐만 아니라 값을 지정하는 것도 가능
console.log(boxEl.textContent); // 지정된 이후에는 지정된 값만 콘솔 창에 출력
브라우저에도 지정된 값이 출력되는 것을 확인할 수 있다 !
이유는 해당 요소의 실제 글자 내용이 바뀌었기 때문 !
6. 메소드 체이닝 (Method Chaining)
: 메소드를 연결해 붙여 작성하는 것을 메소드 체이닝이라고 한다.
const a = 'Hello~'; // 재할당 불가
// split: 문자를 인수 기준으로 쪼개서 배열로 반환
// reverse: 배열을 뒤집기
// join: 배열을 인수 기준으로 문자로 병합해 반환
const b = a.split('').reverse().join(''); // 메소드 체이닝...
// split 메소드를 이용해 Hello~를 배열로 쪼개고, split의 인수로 빈 문자열을 넣음
// 그 쪼개진 배열을 reverse 메소드를 이용해 뒤집어서
// join 메소드를 이용해 다시 문자로 합침
console.log(a); // Hello~
console.log(b); // ~olleH
[ Q & A ]
Q1 : The quick brown fox 위 문장을 camelCase(낙타 표기법)으로 작성하시오 !
A1 : theQuickBrownFox
Q2 : let fruits = ['Apple', 'Banana', 'Cherry'];
위 데이터를 활용해 'Banana'를 콘솔 출력하시오 !
A2 : console.log(fruits[1]);
Q3 : 불린 데이터(Boolean)에서 거짓을 의미하는 데이터는?
A3 : false
Q4 : '값이 의도적으로 비어있음'을 의미하는 데이터는?
A4 : null
Q5 : { } 위 데이터의 종류는?
A5 : Object(객체 데이터)
Q6 :
let obj = {abc: 123};
console.log(obj.xyz);
위 코드를 통해 콘솔 출력될 값(데이터)은?
A6 : undefined
Q7 : 값(데이터)을 재할당할 수 없는 변수 선언 키워드는?
A7 : const
Q8 : 함수에서 값(데이터)을 반환하기 위해 사용하는 키워드는?
A8 : return
Q9 : sum(2, 4);
위 함수 호출에서 2, 4를 무엇이라 하는가?
A9 : 인수(Arguments, 데이터)
Q10 :
function sum(a,b) {
return a + b;
}
위 함수 선언의 a, b와 같이 함수 호출에서 전달받은 인수를 함수 내부로 전달하기 위한
변수를 무엇이라 하는가?
A10 : 매개변수(Parameters)
Q11 : 이름이 없는 함수를 무엇이라 하는가?
A11 : 익명 함수(Anonymous Function)
Q12 : hello 이름의 함수 표현을 작성하고 호출하시오!
A12 :
let hello = function () {};
hello();
Q13 :
const user = {
getName: function () {}
}
위 코드의 getName과 같이, 함수가 할당된 객체 데이터의 속성(Property)을 무엇이라 하는가?
A13 : 메소드(Method)
Q14 : 조건이 참(true)인 조건문을 작성하시오!
A14 : if(true) {};
Q15 : 가져온 JS 파일을 HTML 문서 분석 이후에 실행하도록 지시하는 HTML 속성(Attribute)은?
A15 : defer
Q16 : <div class="box">Box!!</div>
위 HTML 요소의 내용(Content)을 콘솔 출력하시오!
A16 :
const boxEl = document.querySelector('.box');
console.log(boxEl.textContent);
Q17 : 값(데이터)을 재할당할 목적의 변수 선언 키워드는?
A17 : let
Q18 : const boxEl = document.querySelector('.box');
위 코드의 boxEl 요소에 클릭(Click) 이벤트를 추가해, 클릭 시 'Hello~'를 콘솔 출력하시오!
A18 :
boxEl.addEventListener('click', function () {
console.log('Hello~');
});
}
Q19 : <div>1</div>
<div>2</div>
위 2개의 DIV 요소에 JS로 class="hello"를 추가하시오!
A19 :
const divEls = document.querySelectorAll('div');
// div 태그라는 요소들을 전부 찾아서
divEls.forEach(function (divEl) {
// 찾은 요소들을 전부 다 반복적으로 실행해서
divEl.classList.add('hello');
// 각각의 요소들에다가 hello라는 클래스를 추가함
});
Q20 : 'Posey'.split('').reverse().join('');
위와 같이, 메소드를 이어 작성하는 방법을 무엇이라 하는가?
A20 : 메소드 체이닝(Method Chaining)
Q21 : const boxEl = document.querySelector('.box');
위 코드의 boxEl 요소에 HTML 클래스 속성의 값으로 'active'가 포함되어 있으면,
'포함됨!'을 콘솔 출력하시오!
A21 :
if(boxEl.classList.contains('active')) {;
console.log('포함됨!'); // true면 출력되고, false면 출력 안 됨
}