회고를 떠나 velog에 게시글을 올린다는 것 자체가 매우 오랜만인것 같다. 그도 그럴 것이 2021년 12월 31일에 막바지로 올린 회고가 마지막 회고였다...

2022년에는 지금 다니고 있는 회사 입사와 함께 나름대로 자격증 시험도 보고, 비단 커리어 부분에서 뿐만이 아닌 개인의 삶에서도 새로운 경험이라면 경험이지만 썩 좋은 경험이 아니였고 그 경험으로 인해 상처를 받아서 힘들었던 한 해여서 벨로그 자체를 잊고 있었던것 같다.

(물론 이때의 상처는 지금 싹 극복하였고 설령 비슷한 일이 발생해도 받아들이는 데미지가 약화되었달까..!)

프로젝트 부분에서만 22년을 잠깐 상기시켜 본다면 21년에 시작한 워드프레스를 활용한 자사 제품의 브랜드페이지를 구축 마무리에 들어가는 것으로 간단하게 마무리 지었던 것 같다.

23년에서의 회고에서는 "개인적으로 해봤던 것들을 실제 실무에서 시작해 보고 처음으로 컨퍼런스도 가본 한 해" 가 된 것 같다.

일단은 알음알음 기억나는대로 써보고..느꼈던 점과 앞으로의 다짐(?) 정도 써볼려고 한다.

1. 컴퓨터그래픽스 자격증 취득

사실 컴퓨터 그래픽스의 경우에는 원래의 시작이 디자이너로 시작 했다보니 부담이 없다면 거짓말이고 실기보다는 오히려 필기 쪽에 부담이 있었다.

무엇보다 외우는걸 그닥 잘하는 편도 아니였고 개인적으로 문제를 풀면서 느꼈던 것은 디자인실무에 있어서의 지식 보다는 디자인의 역사 + 미술사(史)의 비중이 더 많았던 것 같다.

그래도 한큐에 합격했으니까 이건 이 정도로만 집고 넘어가겠다.

2. 2023 AWS SUMMIT SEOUL 컨퍼런스 참석

AWS라면 21년 하반기 부터 22년 상반기에 구축했던 빔프로젝터의 브랜드 페이지를 구성할 컨텐츠들을 배포할 때 어느 서버를 사용할까 혼자 고민하던 중 AWS S3이 파일 서버 역할을 해줄 수 있다고 하여 채택할려고 했었다.

단순히 제품의 이미지와 영상을 저장 할 공간이 필요했고, 노출 시키기 위한 서버가 필요하였고, 그렇다고 영상 서버로 유튜브를 사용하고 싶지는 않았다.

무엇보다 키샷(keyshot) 에서 추출한 인터렉티브 모션 코드도 활용할 수 있다면 적극적으로 활용해보고 싶었는데 이게 추출이 html로 추출되다 보니 코드를 그대로 복붙해서 사용한다기 보다는 어딘가에 백업을 해두고 이 백업본을 불러오는 방식으로 사용을 해야 할 것 같아서 AWS를 도입하려 했으나 단기간에 서비스를 구축하기에는 나만의 계획과 의지로는 어려움이 있었다.

keyshot(이하 키샷)에서 추출한 인터랙티브 코드란, 키샷에서 오브제를 렌더링 할 경우 보통 오브제 자체를 렌더링 하기도 하지만 랜더링 하고 XR이라 하여 모션을 렌더링 할 수 있는 기능이 있다.

Keyshot(키샷) 공식 설명영상 "24분34초" 부터 참고하면 렌더링 하는 방식과 함께 추출 결과물에 대한 자세한 설명을 볼 수 있다.

내가 필요했던 모션은 스크롤 이벤트가 발생했을 시, 제품이 회전을 하는 모션이 필요하였고 기본적으로 지원되는 모션으로 회전 모션이 있었기에 추출하는데는 별 문제는 없었다.

생각해보니 사무실 컴퓨터에 HTML 파일 있을텐데 깃허브에 올려둘껄;;; 월요일에 출근하면 push 해두고 벨로그에 적용할 수 있을지 체크해 봐야겠다

하지만 구현 방식은 알아냈다고하여 실전에 도입을 할 수 있는 기회는 쉽사리 찾아오지 못하였고 무엇보다 "워드프레스를 활용"해보자는 의견이 나옴에 있어 한큐에 묵살당했다...ㅠ

워드프레스의 경우 기본적으로 지원되는 것도 지원되는 거지만 패럴렉스 라던가 인터렉티브 페이지를 만들기에는 원래의 기능(?)을 생각해 보자면 조금 부족하지 않나 싶었지만 지원되는 플러그인에서 나름대로 찾아보니 대체될 만한 플러그인을 찾았다.

ScrollSequence(스크롤시퀸스) 공식 홈페이지 단점은 기능을 제대로 사용하고 싶다면 유료결제를 해야한다는 것이다.

이 프젝을 마무리하면서 느꼈던 점은,

1. 인터랙티브 웹사이트의 구축 메뉴얼을 "입문"부터 찾아봐야 할 것 같다.
2. 워드프레스로 인터랙티브를 구현 못하는건 X
3. 아...개발 공부 열심히 하자 ^q^...

결과물 페이지 그렇게 나온 결과물, 근데 조만간 닫힐 수도 있다.

아무튼, 다시 AWS의 이야기로 돌아오자면 위의 일련의 과정에 의해 "필요에 의해서 + 개인적인 흥미 + 타이밍에 맞춰 페이스북 광고 노출" 이 조합되어 속된 표현으로 아묻따(?) 가게 되었다.

세상 정직한 직함ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 근데 틀린 건 아니라서 신청양식에 있는 그대로 적었다.

근데 막상 현장에 도착하니 다들 소프트웨어 엔지니어, 프론트엔드 엔지니어, OO소프트 데이터 매니저(대리), 대학교 교수, 혹은 ~대학교 학생 이런 직함들이셨는데 나만 (심지어 관련 회사도 아니야ㅠ) 저 직함이라 뭔가 이러지도 저러지도 못했달까..

이걸 보는거 같기도..

아니다 이건가?

아무튼...인트로 영상에서 S3가 나오는 걸 보고 내심 반가웠다.

이때 내심 기억나는 부분이 있는데 코엑스에 도착하고 나서 점심티켓팔찌랑 식수 받고 오라토리움(?)강연장에 기조연설 자리배석 때 뭔가 내 자신이 많이 쭈굴어지는거 같기도 하고 부끄러워서 일부러 구석자리에 갈려고 하니 스태프 분께서 "선생님! 거기 가지 마시고 여기로 앉아주세요!" 라고 하셔가지고 정중앙에 착석했었던 기억이 난다.(머쓱)

트위터에서 유명하신 분을 실제로 영접하니 연예인 보는 것 같고 신기방기

EC2 강의 중

그리고 점심도시락이 인상 깊었다...기억만 알음알음 남은듯. 저 샌드위치들 내 입맛엔 맛있었는데 치즈도 맛있었고

강의들은 입문레벨 위주로 듣고 왔었는데 한가지 아쉬웠다면 입문이 입문이 아닌듯한 느낌...? 물론 이 부분은 사전에 가볍게라도 기초 지식을 익히고 갔어야 했는데 그러지 못한 나의 과오였기에 반성한다.

그래도 한 가지 인상에 남는 강의가 있다면 한정호 솔루션즈 아키텍트 님께서 강연해주셨던 AWS의 개발자를 위한 신규 서비스 소개 Amazon CodeCatalyst & Amazon CodeWhisperer 챕터가 기억에 남았다.

전체적인 흐름들만 알음알음 파악해봤을 때 깃허브와 곂쳐보이는 면이 있었달까? 강연에 일부분을 현재 일하고 있는 백앤드 사수님께 보여드렸더니 사수님도 비슷한 내용이긴 할꺼에요 라고 설명해주시기도 하셨고...음..!

그리고 굿즈도 알음알음 받아왔고 아주 잘 쓰고 있다. 거의 끝나갈 때 즈음에는 갑자기 오시더니 남은 굿즈 퍼주시는 기업부스들도 계셨음.

여러모로 어려웠지만 재밌었고 컨퍼런스들은 기회가 온다면 지속적으로 참여해보고 싶었다. 그리고 2023 인프콘은 광탈했다

3. 카페24 내 스마트에디터를 통한 웹개설 및 유지보수

결과페이지

단도직입적으로 얘기하면 지금의 홈페이지는 단순히 "내용전달" 만 우선 시 되어 있고 이에 대한 보완 필요성은 비단 개발직군의 팀원들 이외의 마케터, 경영 측 팀원들에게도 지속적으로 의견 제시를 하고 있다.

일단 내 관점으로 파악 했을 때 JQuery의 사용은 차후 문제인 것 같고 문제점들을 나열해 보자면

1. "내용"에만 치중해 있다 보니 심미적으로 안 예쁨.

2. "급하다" 라는 사유 많으로 컨텐츠의 코드부분을 지우고 통이미지, 즉 백그라운드 이미지로 넣어버린 영역들도 있음.

3. "일단 작동만 되면 된다" 라는  접근성과 웹표준을 많이 놓친 것 같음.

4. 이 부분은 문제점이라기 보단 아쉬운 점에 가까운데 HTML 상품코드여도 
깃허브로 협업을 할 수 있는 기회가 생길 수 있었는데 불발됨 ㅠㅠㅠㅠㅠ

--------------------------------------------------------------------

특히 통이미지의 경우, 오히려 통이미지로 넣었을 때 오류가 발생하는 경우가 있어서 
급작스럽게 HTML 추가하고...CSS 추가하고..

거기다 한편으로는 현재 디자인(웹페이지 시안, 상세페이지 등등)과 퍼블리셔를 혼자서 진행하다 보니 놓치는 부분도 많고 해서 외주업체의 힘을 빌릴 때도 부지기수였지만 이것이 오히려 기회인게

일단은 "카페24의 전체적인 메뉴얼(대시보드의 구조라던가, 상품의 페이지 수정은 어디서 진행해야 하고 등등..)"을 파악하는데 도움이 되었고, 디자인 및 기능 추가 시의 접근 방식과 또 나름대로의 내 스스로 평가를 해보자면 "질문하는 방식과 업무 순서"에서 조금의 성장이 있었던 것 같다.

"질문방식"의 형태변화

[과거의 경우]
나 : 사수님(실제로는 영어이름으로 부름) 이거 왜 이런걸까요? 혹은 사수님~ 이거 어떻게 풀어요?

[지금의 경우]
나 : 사수님, as 프로세스 페이지에 추가해야 할 기능이 하나 있어요, 해당 버튼을 모바일에서 클릭 했을 때,
바로 어플이 실행되는 기능 구현이 필요한 경우인데 일단 구글링으로 사전지식을 먼저 찾아보니 
자바스크립트로 구현해야 할 경우 "딥링크"를 참고하라는 내용을 확인했어요. 
다만 이 딥링크가 자체적으로 사용할 수 있는 건 아닌거 같아 보이는데 현재 상황에서 도입이 가능할까요?

이런 식으로 질문을 리스트화 시키는 습관을 들였던 것 같다. 이는 나와 사수님의 개인적인 소통에서 뿐만이 아닌 외주분들과의 소통에 있어서도

1. 필요한 기능(비단 내가 생각한거 뿐만이 아닌 오더여도)이 무엇인지 파악하기.
2. 틀린 정보던 맞는 정보던 먼저 개인적으로 기초 지식을 찾아오기
3. 구현되어야 할 기능, 내가 찾아온 내용(이게 근거의 역할)을 순차적으로 정리하여 보고하기

순서로 질문하고 피드백을 받아온 것 같다.

var hiddenTimer = document.getElementById('toggleCloser');

    $(document).ready(function(){

      $(hiddenTimer).click(function(){
        $('body').toggleClass('alert_close');

        if($(this).html()==='닫기'){
          $(this).html('열기');
        }
        else{
          $(this).html('닫기');}
      });

    });

프로젝트에 있어서 구현했던 디자인들과 전체적인 페이지 코드는 전부 가져오기 어려워서 그냥 간단한 조건문을 사용한 toggle창 JQuery 코드.

구현한 기능들 중에서 타이머기능과 카카오 로그인 연동을 구현해봤는데 이것도 어려웠지만 재밌었고...
그래서 현재 구현의 정도를 %화 시켜보면 실질적인 업무기준에서의 %는 100% 중 90% 이지만 내 만족도를 기준으로 잡으면 100% 중 60% 정도랄까? 다만 고가의 제품이고 지속적인 이벤트 발생 등 이슈가 발생할 부분까지 생각하면 당분간은 계속 잡고가야 할 프로젝트이지 않을까 싶다.

내년에 가지고 가야할 목표

뭔가 급 마무리 되는 느낌인데?!

아무튼간 이렇게 큰 이벤트와 2개(정확히 1.5개)의 프로젝트를 마무리, 진행하고 있으면서 좀 더 성장시켜야 한다고 느꼈던 것은...

- 개발공부는 끈을 놓지 말아야 할 것
- 웹(Web) 자체에 대한 이해도 향상
- 백앤드 상사님과의 지속적인 소통(이거 진심)
- 사족이지만 일에 감정을 주입하지 말기

일단은 이 4개는 성장시켜야 하지 않을까... 그리고 다시 가지고 가야할 게 다른건 몰라도 "정보처리기사 자격증".
원래라면 이번년도에 필기라도 봤어야 하는데 첫 신청에는 지역구 밀려서 취소하고, 두번째 신청에서는 타이밍 잘못들어가서 이번년도는 그대로 날렸는데 내년에는 다시 기강 잡고 무엇보다 이제 야근의 빈도도 줄어들 것 같으니 시간을 효율적으로 사용하고 내가 실현할 수 있는 한에서 계획을 슬기롭게 짜보는 습관을 길들여야 할 것 같다.

우당탕탕 얼레벌레 회고 끝!

사실 요즘 한창 포트폴리오에 열을 가하고 있어서 그 동안 공부해둔 이론 필기들 정리도 못하고 언젠간 올리겠지 하고 미뤘던 느낌이 가득..

아무쪼록 개발 공부한지 6개월(실상은 2개월)이 지난 지금 2021년에는 어떤 일이 있었는지 회고 해볼까 한다. (이젠 회고록도 벤치마킹 하게 생긴듯...)

1. 퇴사

어찌 보면 내가 개발자의 길을 걷게 해준 시발점이지 않을까 싶은데 3년이란 시간을 겪어오면서 디자이너로서의 퀄리티 향상과 인맥 생성? 여러모로 다사다난한 여정을 마무리하고 그만큼의 성장을 가지고 퇴사를 하게 되지 않았나 싶다.

2. 15kg 감량

회고에는 전혀 상관없고 굳이 왜 써야 하나 싶은 키워드로 보이겠지만, 나에게 있어서는 전환점이라고 해야할까? 정말로 콜라병몸매가 된건 아니지만 1의 회사를 다니면서 너무나도 관리소홀한 내 신체를 되돌리고, 새로운 발돋움에 있어 외모관리의 필요성을 느끼기 시작해 본격적으로 다이어트를 시작하고 15kg을 감량하였다.

지금은 잠깐 쉬면서 걷기 유산소로 유지하고 있지만 희망하는 GX 클래스가 열리면 등록할 예정. (아랫뱃살만 빠지면 진짜 끝인데..)참고로 다이어트 전에는 거진 36인치였던 허리사이즈를 지금은 30~29인치로 만들었다. 참고로 키는 174cm 인데 헬스하면서 굽은 어깨를 교정한지라 웬지 더 커진 느낌이 든다. 담당 헬스트레이너 선생님도 숨은 키가 있어보인다고 하셨고.. 재보진 않았지만 육안상으로는 한 176cm도 가능해 보이지 않을까...?싶은 건강검진 받으러 가봐야겠다.

3. 깃허브 개설

내 깃허브 잔디.jpg

처음으로 개설한 깃허브. 벌써 잔디를 이만큼이나 심었다. 사실 미술관 홈페이지 리뉴얼을 진행하면서 코드를 수정하는 대로 커밋을 했다. 처음 깃허브를 만졌을 땐 당연하게도 오류를 남발했고 그로 인해 제대로 만져보지도 못하고 방치해뒀지만 개발에 있어서 거진 필수요소라고 불릴만한 깃허브를 그저 어렵다고 포기할 수는 없는지라 정말 말 그대로 망가트려 보면서 기본적인 명령문들을 공부해 나가 지금은 가장 기본적인 원격저장소 연결과 푸시, 커밋, 로그 출력 등을 할 수 있게 되었다. 깃허브로 협업하는 방법도 익혀둬야지.

4. 국비지원 수업과 함께 시작된 미술관 홈페이지 리뉴얼, 그리고 HTML과 CSS, JQuery

쌓여가는 HTML 파일들.jpg

사실 이번 국비수업이 첫번째 수업은 아닌지라 html에 대한 기본적인 태그들은 알고 있어서 초반기에는 별탈 없이 수업을 수강했지만 뒤로 가면 갈 수록 어려워져서 어찌 풀어나가야 할까 지금도 현재 진행형으로 고민하고 있다. *특히 CSS를 성공적으로 마무리 했다면 HTML이 엉망이고 혹은 반대로 HTML을 올바르게 짰다면 CSS가 틀어지는 경우가 많았다. *

하지만 header, nav, main, section, aticle, aside, footer 등 시맨틱 태그들을 사용하면서 HTML들의 섹션을 나눠 보다 체계적이고 헷갈림 없이 코드영역을 분리할 수 있다는 점을 배웠다. 하지만 아직까진 웹 표준과 웹 접근성을 준수하는 것이 어려워 웹 표준과 접근성을 준수하면서 코드를 짜는 법을 연습해야하지 싶다.공부거리 추가!

CSS의 경우 벨로그에 정리해둔 일부의 내용들도 내용들이지만 그 동안 애먹었던 Position의 정의를 체계적으로 잡아가게 되었고, 무엇보다도 display : flex!!! 라는 신세계를 만나며 이번 리뉴얼을 마무리하면 반응형 웹사이트도 만들어 보기로 계획을 잡았다.

JQuery의 경우 홈페이지에 모션을 입히는 라이브러리이다 보니 입혀보면서도 계속 오! 오이랬던거 같다 ㅎㅎ 모언어가 자바스크립트인지라 원래의 경우 자바스크립트를 먼저 익히고 제이쿼리를 익혀야 하는게 정석이라는데 이상하게 나는 자바스크립트보다 제이쿼리를 더 재미있게 공부했다. ~근데 문제는 이제 제이쿼리보단 리액트를 위주로 공부해야 하지만 ㅎㅎ~~

5. GTQ 일러스트 1급 자격증 응시

진짜 GTQ만 보면 할 말 많은데... 일단 포토샵 1급 자격증이 있는 만큼 GTQ 일러스트와 인디자인도 같이 따두면 그래픽 마스터 자격이 생기니까 일단은 일러스트 1급을 응시했는데...ㅋㅋㅋㅋ 사실 GTQ는 공식 홈페이지에 올라오는 기출 문제를 가지고 연습하는 것이 정석이라고 생각해 연습은 많이 했는데..일단 내 컴퓨터에 깔려있는 일러스트는 한글판이라는것도 문제라면 문제(?) 였겠지만 응시일이 크리스마스라는 것을 생각했어야 했다ㅋㅋㅋ

오브제가 나와도 사람은 안나오게 해주세요. 라고 빌었는데 사람을 넘어서 산타가 나오지 뭐람... 그래도 정석대로 3, 2, 1번 순으로 문제를 풀어나갔지만 결국 1번은 미완성으로 제출했다...결과가 어찌될 진 모르겠지만 내년을 기약하며 재응시를 준비해 나가야겠다. 시간 분배에 있어서 안좋은 버릇이라고 생각된 부분들을 뽑아보자면 제한시간 안에 완성이 중요한데 쓸데없이 디테일을 너무 많이 잡았다는 점, 그리고 한글판으로 연습했다 보니 브러쉬를 찾는데에 시간을 너무 많이 사용했다는것.. 그래도 제일 큰 점수인 3번문제는 전부 다 풀었으니 조금이나마의 안심이 생긴달까?

일단 개발 관련 회고는 이 정도 일까나...? 이제 막 알을 깨고 나온 개발자이기에 공부해야 할게 수두룩하지만 할 수 있는 한에서는 최선을 다해볼려고 한다. 그래서 2022년의 플랜을 간략하게 정리해 보자면

- 아직 많이 부족한 자바스크립트 공부와 함께 리액트 공부를 병행할 것 ** **- 개인 포트폴리오 홈페이지를 반응형으로 코딩해볼것 - 피그마(FIGMA) 연습 - 아랫뱃살 타도(?)

일단은 이 정도만 생각해두고 있다. 하다 보면 조금 씩 추가되겠지 ㅎㅎ 그럼 2022년에도 달릴 수 있는 만큼은 달려보자고! 나 자신 파이팅...!!

수업과정중 하나인 기업 홈페이지 리뉴얼 작업중인데 HTML도 HTML이지만 역시 CSS가 제일 어렵다 ㅠㅠ 이와중에 footer영역은 하단 여백 왜 생기는건지...ㅠㅠ

그래서 오늘은 그 동안 학원에서 공부하면서 적어두었던 CSS 정의랑 사용 예시? 를 정리해볼까 한다...! 언제나 두서 없는 벨로그에 글쓰기...!

CSS(Cascading Style Sheet)

HTML을 이용하여 문서의 뼈대 구조를 작성하였다면 CSS는 그 구조의 살을 입히는 과정이라고 볼 수 있다.

🎨작성방식

selector(선택자 : tag, id, class){
     property(어떤 효과) : value(얼만큼);
}

※ 선생님이 말씀해주신 tip - 불필요한 여백을 최대한 줄이는 연습을 하자.

✨ 스타일 적용 방법

HTML에서 직접 작성해도 되고, 혹은 "link"태그를 이용하여 외부의 css파일과 연동해주는 방법을 사용할 수 있다. 태그가 많아지는 경우에는 외부css파일을 링크로 연동해주는 것이 좋다.

HTML에 head 영역 안에 직접 작성하는 내부스타일 작성법

#### 별도의 css파일을 생성하여 link로 연동하는 외부 작성법
> ``` html
<link rel="stylesheet" href="./css/style.css" type="text/css">

보통의 경우에는 위의 2가지 방법을 사용하지만 CSS 적용 방법은 이것 말고도 2가지의 방법이 더 있어 총 4개의 방법이 있다고 할 수 있다.

Inline Style

<div.main_title style="color: red;"><h1>안녕하세요!</h1></div>

태그 안에 직접적으로 적용하는 Inline Style은 주로 스크립트 문에 적용하는 경우가 많으며 Inline Style로 CSS를 적용할 경우 최우선순위로 적용되어 절대 바뀌어서 안되는 스타일의 경우 사용하는것이 좋다.

inport style

inport 방식에 대해선 내가 놓친건지 따로 설명을 안해주신건지...ㅠㅠ 다만 사양 낮은 브라우저의 경우는 지원하지 않을 수 있다고...

✨ CSS 선택자

태그(재)정의 스타일

1. 태그 선택자

• html 태그에 직접 효과 적용
• 해당 태그 작성 시 자동으로 효과 적용

사용자 정의 스타일

2. 클래스 선택자 <태그 class="name"> 스타일이 필요한 곳에선 가급적 이쪽 선택자

• .(class선택자)
• 중복 가능
• .name{효과}

3. 아이디 선택자 <태그 id="name">

• #(ID선택자)
• 중복 불가
• #name{효과}

4. 다중 선택자

• a, b, c{효과}

5. 후손 선택자

• a b{효과}

6. 자식요소 선택자

• a > b{효과}

근데 나는 막상 "자식요소" 여도 "후손 선택자" 쓰는 방식처럼 쓰는거 같다... 예를 들어

 <body>
  <div class="box">
    <div class="title">
      <h1>안녕하세요 히카루 벨로그입니다.</h1>
      <p>코린이 of 킹코린이로써 아직 많이 부족합니다.
        잘 부탁드립니다!</p>
    </div>
    <div class="intro">
      <h2>자기소개</h2>
      <ul>
        <li>나이</li>
        <li>성별</li>
        <li>취미,특기</li>
        <li>보유스킬</li>
      </ul>
     </div>
   </div>
 </body>

이렇게 HTML 태그들을 작성했다고 하면...자식요소에게 스타일을 입힌다면...

  .box > .title > h1{color:blue;}

이렇게 써야하는거...잖아요? 정리하는 내용대로라면? 근데 필자의 경우라면...

  .box .title h1{color:blue;}

이렇게 후손 선택자 방식으로 각 태그에 스타일을 준다는 점.... 아니 그렇다고 스타일 적용이 안되는건 아니잖....

** ★ pseudo class > 의사클래스**

div : hover{} 
    : nth-child{}

hover : 커서를 올리는 등의 행동을 실행하면 색상, 이미지등을 변경할 수 있다.(일단 이렇게 기억하고 있다.)

nth-child{} : 형제요소, 혹은 li같은 리스트 항목에서 임의의 순서를 지정할 수 있는 의사 클래스

현재 수업중에 기록해둔 내용대로 정리하고 있는 게시글이긴 한데...이게 맞는건가 싶은 면도 없지 않아 있다...ㅠ_ㅠ 도중에 빼먹은 부분이 왜이리 많은건지

필요한 부분들은 계속 보충해줘야 할거 같다. 사실 보충해야할 공부들이 한 두개가 아니지만...

다음 편에서는 CSS에서 사용되는 property(어떤 효과) : value(얼만큼); 의 속성과 타입에 대해서 정리할 예정이다..! 현재 수업 상황은 홈페이지 시안 짜는 중!

맛뵈기 시안.jpg

참고로 기업 홈페이지를 리뉴얼 하는 포폴 작업중인데, 나는 삼성계열사의 리움미술관을 채택했다! 그런데 오늘도 디자인 시안 짤려고 사이트 접속해보니 진짜로 리뉴얼에 들어간것이 아닌가....그와중에 다행히? wayback machine에 21년 08월 사이트가 백업되어 있어서 이쪽 경로를 통해서 체크하고 있는데...

사실 리뉴얼이 어떻게 진행될지 몰라서 리움측에 전화통화 해봤더니 8일부터 개관하면서 기획전을 개최한다고...소식 듣고 내용을 똑같이 나가야하나...지금이라도 주제를 바꿔야 하나 싶었는데 그러기엔 수업 일정이 긴 편도 아니고 휴관중에 작업한 작업물들이여서 내가 임의로 각색한 부분들도 없지않아 있기에 기존의 내용을 따라가는걸로 결정 했는데 학원 출석할때 선생님에게 어떤 방향으로 나가야 할 지 자문을 구해봐야 할거 같다.

디자인적 면에서는 PC 끝나면 모바일 시안 들어가야하는데 PC 코딩 끝난 페이지들은 중간중간 모바일 시안으로 리사이징 들어가야 할듯 싶다.

05일 부터 스크립트 수업들어간다고 하는데 정말 정신 단디차려야 할듯 싶어요... 힘들고 지루하겠지만 견뎌봅시다...! 파이팅야~!

학원수업과 함께 예습중인 자바스크립트! 사실 자바스크립트는 커녕 제이쿼리도 제대로 다룰줄 몰라서 처음엔 지레 겁먹었는데...점점 공부하면서 조금씩 보이기 시작하는거 같다...는 사실 오늘 Return 문 공부하는데 이해가 하나도 안되서 멘탈이 붕괴됬지만 ㅠㅠ...

이해가 안되는 경우에는 한번만 보고 넘어가는게 아니라 같은 강의를 파악될때 까지 돌려보는데...이번 Return문 같은경우는 돌려봐도...응? 싶어서 ㅠㅠ 이부분은 따로 킵해놨다 따로 내용을 찾아서 정리해봐야겠다라고 생각했다.

그래서 오늘 쓰는 내용은 뭐냐면 그 동안 배운 내용들 정리하는 개념으로 일기(?)를 써볼려고 한다. 복습하는 개념이라고 생각하면 좋기도 할꺼 같아서 앞으로의 공부내용을 기록해볼까 한다.

참고로 인강수업은 노마드코더(NOMAD CODER)의 니콜라스 쌤의 바닐라 자바스크립트를 공부하고 있고, 서문(書文)으로의 공부는 모던 자바스크립트 사이트를 통해서 공부하고 있다.

이와중에 니콜라스 쌤 너무 잘생기셨다...

그럼 시작!

Chapter 01 - 자바스크립트(JAVASCRIPT)란?

자바스크립트란 HTML, CSS, JAVASCRIPT 3가지 구성 요소중 한 축으로써 HTML은 문서의 구조, CSS는 표현을 담당한다면 JAVASCRIPT는 문서의 동작을 담당을 말할 수 있다.

이름	역할	의미
HTML	문서의 구성(뼈대)	내용
CSS	문서의 표현	디자인
JAVASCRIPT	문서의 동작	모션

라고~정의는 이렇게 외워뒀다. 현재 거진 1개월? 아니야 1개월까진 아니고 가까워질려고 하는데...NOMAD CORDER의 니콜라쓰 쌤 강의 들으면서 공부중에 있다만...점점 어려워지는건 불가피한거 같다 ㅠ

하지만 확실한건 숫자와, "문자"의 표기법과, "변수(variable)"의 개념과"배열(Array)", "Object(객체)"의 개념은 어렴풋이 잡힌거 같달까?

Chapter 02 - 문자와 숫자, 그리고 변수(variable)

1. const(상수) - 변할 수 없는 값을 지정할 때 사용하는 변수.
   ex) const myBloodType = "B"; (나는 B형이니까)
2. let - const과 비슷하지만 차이점이라면 변수 값을 업데이트 할 수 있다.
   ex) let fruit = "apple";
   fruit = "banana"; 이때 맨 처음에 기입한 변수 값은 없어진다.
3. var - 오래된 변수, let과 비슷한 역할을 하지만 사용빈도가 줄고 있어 최근엔 사용하지 않는다.

사용빈도 : 1. const / 2. let / 3. var(니코쌤 피셜 그냥 사용하지마!)

Chapter 03 - True & False and null

true / false / null / NaN / underfine등 Boolean(불리언)이라고 불리며, 1과 0, on&off 처럼 2가지의 옵션으로만 나타낼 수 있다.

null은 비어있음이란 뜻으로 내가 직접 코드 안에서 작성, variable안에 아무것도 없다는걸 확실시 할 경우 변수에 해당되는 값, 말 그대로 비어 있음.

underfined는 변수에 값을 부여하지 않은 상태 ex) let hello; console.log(hello);

Chapter 04 - Array(배열)

하나의 variable에 여러가지 데이터를 넣고 싶은 경우에는 "Array"를 사용한다. 이 Array의 경우는 하나의 변수 값에 여러 리스트를 추가할 수 있는 객체이다.

ex) const content = ["string", 1, true, false, null, underfine...] ← 중괄호 안에 추가하고 싶은 리스트를 적는다. 리스트는 숫자, 문자, 불리언 값 상관 없이 추가할 수 있다.

[예시문-01] const Fruit = ["apple[0]", "banana[1]", "strawberry[2]", "orange[3]", "watermelon[4]"...]

※ 자바스크립트 같은 경우 1,2,3...순서가 아닌 0을 시작으로 순서를 정한다.
즉, 예시문에서 보이는 strawberry(딸기)의 경우 일반적인 순서로는 3번째 이지만 자바스크립트 안에서의 실질적인 순번으로는 2번째 항목이 된다.

※ Array항목에서는 아이템을 업데이트 할 수도, 추가할 수 있다. 이때 사용되는것이 "push"를 사용하는데 이 push의 경우는 메서드(method)라 말하며 변수에 동작을 부여한다고 의미할 수 있다.

[예시문-02] const buylist = ["apple", "beef", "tomato", "egg", "milk"]
buylist.push("bread");

결과 : buylist =["apple", "beef", "tomato", "egg", "milk", "bread"]

※ 그 다음으로는 기존의 리스트에서 항목을 업데이트할 수 있는데 이런 경우에는 업데이트를 해야할 항목의 순번을 기준으로 항목의 인덱스값을 설정해 준다.

[예시문-03] const buylist = ["apple", "beef", "tomato", "egg", "milk"]
buylist[2]="mango";

<p> 처음에는 수업 자체에 지레 겁먹고 도전자체를 무서워 했는데...그래도 나름대로 계속 돌려보고 모던자바스크립트 내용들 체크하면서 정리해 보니까 나름대로 이해가되는게 신기할 따름이다. 그런데 이게 언제까지 이럴 수 있을까 아직까지 겁먹고 있는중...있는 그대로 부딪히는게 중요한거 같다. 다이어트도 하는데 공부라고 못할소냐...<br><br>
  <em>그리고 이걸 키다리 쌤에게 6일만에 들을 수 있을거 같은데요?</em> 라고 내가 정말 멍청이였고 무리수 오지게 던졌다라고 밖에 생각이...!!<br>워낙 관련 지식이 전무했으니까 던질 수 있었던 "희대의 드립"이지 않을까 싶다. 겸손한 태도를 가지고 수행하듯이 꼼꼼히 들어야겠다.</p>