Code like a code

ㅇㅇ

JS문법이 이전에 썼던거랑 다르게 많이 바뀌고... 여러기능들이 생기면서 활용하는 범위가 넓어져서 공부할 범위도 넓어졌답니다.

코드도 그만큼 복잡해졌구요...ㅠㅠ 그래서 이런 난이도의 JS를 사용하는 곳이라면 프론트엔드 개발자가 필수로 있어야겠다는 생각이 들더라고요..휘유.... 

JS선행(1) 

1. 배경지식 

변수나파일명생성할떄: dash-case(kebab-case), snake_case, camelCase, PascalCase

zero-based Numbering: 0 부터 시작

주석 종류: 한줄 // , 여러줄 / * 이안에내용 * /

2. 자료형: String, Number, Boolean, Undefined, Null, Object, Array

특이한경우, ${} 보간법의경우 안에 값에 상관없이 String으로 나옴 

3. 변수:  var, let, const (보통 const로하고 값이바뀌는거면 let으로 변경)

4. 함수: 기명함수 function hello(){) -> 

익명함수 let world = function(){} -> 호출법: world() -> 함수

5. 매소드: 객체내부의 속성에 함수가 할당되어있을때

JS선행(2)

boxEl.addEventListener('click',function(){
	console.log('~~')
}):

Document object model(DOM), application programming interface

const boxEl = document.querySelector()

boxEls.forEach(function (){}); //찾은 요소들을 반복해서 익명함수를 실행한다.
boxEls.forEach(function(boxEl, index){
boxEl.classList.add(`order-${index+1}`)
console.log(index, boxEl)	})

html과 css에서는 0이아닌 1부터시작임. 값을 1부터 시작하도록 index에 +1을 해야함

메소드체이닝 전 VS 후 

const dbc = new DBConnector();
dbc.setHost('127.0.0.1');
dbc.setPort('8080');
dbc.setUser('username');
dbc.setPasswd('passwd');
dbc.connect();

const dbc = new DBConnector().setHost('127.0.0.1').setPort('8080').setUser('username').setPasswd('passwd').connect();

2주차 강좌는 CSS에 대한 심화 과정을 진행했어요

JSP 개발자였던 저는 CSS 풋. .이미 알고있지.. 라고 생각했는데... 허걱.. 놉.. 

CSS를 직접 기준을 잡아본적이없더라고요...ㅎㅎ 

그리고 이전에 했던 경험들이 모두 PC기반이라 그런지 과거의 기술들이 많아서  

심지어 flex같은건 써보지도 않았더라고요.. 

그리고정말.. CSS 하시는분들 존경하고 싶어요.. 정말 왜 그동안 퍼블리셔라는 직군이 

따로 있었는지도 알것같은 기분이 들어요 ... 

마지막 프로젝트가 미세먼지 알람서비스를 만드는 일이었는데요 

이 서비스에대한 요구사항은 강의 초반부터 명시가 되어있더라고요. 

진짜 A-Z까지 혼자 짜야하고, 짠코드를 제출하면 검토후에 피드백도 해주시니 

기왕이면 수강과 함께 진행을 하면 좋겠다고 생각이 들었어요. 

하고싶긴 한데 어디서부터 해야할지 모르겠어서 난감한 마음이 컷는데 슬랙에 멘토님께 여쭈어보니 

화면부터 종이에다가 그려보라고 하시더라고요 ㅎㅎ 설계의 첫걸음 아장아장아장 

그래서 이렇게 모바일 화면 기준으로 만들어 보았어요. 생각해보니까 디자인을 반응형으로 해야겠네요? 휴... 갈길에 머네요.. 

이렇게 해야할일이 명확히 눈에 보이니까 CSS공부할때 조금 더 도움이 되었던것 같아요 

내가 필요한 기능을 구현하기 위해서는 어떤 CSS 속성 이해해야할까? 고민도 하고요 

그리고 수강에 대해서 한가지 꿀팁을 알게되었어요!! 

주차별로 맞춰서 강의를 듣지 않아도 된다는점..!! 

주차별 진도에 상관없이 그냥 쭈욱 들으면 끝까지 쭈욱 열린답니다. 

그래서 html, css, js까지 한번에 쭈욱 달렸답니다. 

그리고 슬랙을 통하여 파이널프로젝트를 함께할 사람도 모집했어요. 

전 패스트캠퍼스 국비지원 프론트엔드강좌 리액트 4기이고, 함께하시는 분은 3기 학생분이더라고요 ㅎㅎ 

물론 진행만 함께하는거지 코드를 쉐어하지는 않고 각자 코딩 할예정이에요. 

파이널 프로젝트를 제출하면 코드리뷰를 해주신다고 하셔서요! 

그리고 동료가 있는 편히 고민상담하기도 좋잖아요? ☺️

그래서 다음주 토요일 2회차 회의(?)에서는 html, css코딩까지 함께 체크해보기로 하였습니당 

호다닥 js단계가 끝나고 리액트 강좌를 보고 미세먼지 알라미를 만들 수 있는 날이 오면 좋겠네요. 

한글로 "속성"이라는 표현은 html에서는 Attribute이고 css와 js 에서는 Properites라 부른다. 

01) 개요

CSS가 화면을 꾸미는 역할을 하는데 아래와 같은 기능을 한다.

  1) 박스모델 

  2) 글꼴,문자

  3) 배경

  4) 배치

  5) 플렉스(정렬)

  6) 전환(요소의 전상태와 후상태 애니메이션)

  7) 변환(2d변환 3d변환이 있음),

  8) 띄움(신문기사처럼 사진을  제외한 공간에 기사글자가 나올수 있는 구조)

  9) 애니메이션, 그리드(행과 열을 갖고있는것), 다단(신분다단스타일)

10) 필터(그림위에 Blur흐림처리, 흑백효과 Grayscale, 이미지 반전 Reverse)

02) 너비 

width, height (max-width, max-height, min-width, min-height)

단위: px, em, vw

<span></span><span></span>  : 최대한 작은 영역잡힘

<div></div><div></div> : 최대한 (가로)로 넓은영역이 잡힘

Q) width, height 속성의 역할은?  width : 요소의 가로 너비, height: 요소의 세로 너비

Q) width, height 속성의 기본값은?  auto

Q) max-width, max- height 속성의 기본값은? none

Q) min-width, min- height 속성의 기본값은? 0

03) 표현단위

px : 픽셀, % : 상대적 백분율, em: 요소의 글꼴 크기(10pt이 글꼴의 크기라면 1em은 10px이다),

rem: 루트 요소(html)의 글꼴 크기(최상위요소),

vw: 뷰포트 가로 너비의 백분율, vh:뷰포트 세로너비의 백분율 

Q) 0px, 0vw중 더 큰값은? 같다. 0은 단위를 붙이지 않음

04) margin 여백 - 외부여백

Q) margin의 속성은 무엇인가? 요소의 외부여백 

Q) margin: 40px 30px 20px; 에서 30px은 어느 방향을 의미하는가? left, right 

Q) margin: 20px 10px; 에서 20px은 어느 방향을 의미하는가? top,bottom 

05) padding - 내부여백 

요소 내부에 여백이 생기는 만큼 요소자체의 크기가 커지게된다 

Q) padding 속성의 역할은? 요소의 내부여백 

Q) padding: 20px 10px 40px 30px; 에서 30px은 어느방향인가? left 

Q) padding 속성의 특징 ? 요소의 크기가 늘어남

06) 테두리선 (border)과 색상 표현 

border: border-width(선-두께)  border-style(선-종류) border-color(선-색상);

ex) border: 4px solid black; 

패스트캠퍼스 국비지원 강좌는 처음 강좌페이지로 가서 수강신청버튼을 누르면 hrd-net 홈페이지로 이동하게되고, hrd-net에서 수강신청을 하고나면 하루정도 뒤에 문자로 수강관련 안내 메세지가 온답니다. 

이 문자를 받고나서 hrd-net에 접속해서 자부담결제관리에 들어가서 공인인증서로그인을 한뒤에 결제를 하면됩니다. 

결제는 SK페이(11번가에서쓰는..)에 내일배움카드를 등록하고 결제하면됩니다 (나중에 11번가에서 SK페이쓸때도 사용이 가능하더라고요)

결제까지 마치면 저 문제가 나오게되고 수강이 확정된거랍니다 ㅎㅎㅎ 

국비지원 패스트캠퍼스 React 프론트엔드 강좌는 강좌에대한 질문과 답변 그리고 수강생끼리의 커뮤니케이션을 slack이라는 서비스로 진행을 하게 된답니다. 

다른 모든 국비지원 강좌가 이런 형식으로 운영이되니 참고하시면 좋을것같아요 ㅎㅎ

그리고 수강안내 메일이 오게됩니다.

패스트캠퍼스 사이트가 아닌 국비지원 강좌만의 사이트에서 강좌를 수강하실수있어요  ㅎㅎ 

이전 포스팅을 보셨다면 제가 패스트캠퍼스 강좌중에서 처음에 듣고자 한 강의가 [초격차 힌번에 끝나는 프론트엔드 개발] 이라는것을 알 수 있으실텐데요. 이번 국비지원강좌랑 커리큘럼차이가 있나 한번 비교를 해보았어요. 

국비지원 VS 초격차 힌번에 끝나는 프론트엔드 개발 

https://docs.google.com/spreadsheets/d/1ZvIAdXNYnPha3MCzchO6VcRabO8x4MBp/edit#gid=958320484

HTML/CSS/Javascript/React/Redux까지는 동일해보이고 초격차패키지의 경우 TypeScript와 MobX, GraphQL, Next.js, Svelte 를 추가로 배우게 되더라고요. 또한 Bundler라는 것도 배우지 않아요. 

학습에 대한 결과물도 스타벅스 홈페이지 + 미세먼지 알리미의 코드가 끝인데, 

초격차 패키지의 경우는 스타벅스홈페이지, 영화정보 웹사이트만들기, 독서기록 온라인책장, 그리고 쇼핑몰 사이트 만들기까지 강좌가 들어있답니다. 

그래서 아쉬운 마음이 큰 찰라..!! 

패스트캠퍼스에서는 끝까지열공챌린지를 운영하더라고요 !! 

주당 1개의 블로그 학습일지를 작성하고 진도율 80%이상을 달성하면 모든강의 자유이용권을 3개월!!! 지급한다는것!! +_+ 

그러면 이후 버전을 학습할수있어서 정말 좋은것 같더라고요. 걱정이 한시름 놓아지네요. 

어차피 블로그 기록은 남기기로 했던거니! 더욱 열심히 남기게 되겠는걸요!?!? 

그리고 사이트로 접속을 해보았답니다. 

1주차 강좌는 VSCode 환경설정부터 시작해서 HTML과 CSS를 알려주네요.

CSS중에서도 문법과 선언방식등 기초적인거라서 이미 다른 개발경험이 있는 저에게는 비교적 쉬웠답니다. 

중간부터 듣고싶지만 선행을 듣지않으면 열리지 않더라고요...🥲 

아래는 강의들으면서 정리하면서 메모하듯이 적은 후기입니다. 

웹프론트엔드는 HTML, CSS, JS로 이루어져있다 

HTML 웹구조담당

CSS 시각적 표현 담당

JS 동적 처리 담당 

웹표준 '웹에서 사용되는 표준 기술이나 규칙' W3C 

크로스브라우징: 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법

웹접근성 : WA 고령자, 장애인 등 예외없이 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법 

이미지 종류

Raster: 비트맵 형식으로 픽셀들이 모여 만들어진 정보의 집합 (확대/축소시 품질저하)

-> 확장자 JPG, PNG(투명가능), GIF(움직임), WEBP 세개모두를 대체할 수있지만 IE를 지원하지 않음. 구글이 개발한 이미지 포맷

Vector: 점,선,면 위치 좌표 색상등을 수학적 정보의 형태로 이루어진 이미지 (확대/축소시 자유로움, 인물 및 풍경사진등은 표현하기 어려움, 주로아이콘) 

-> 확장자 svg  

기호영어(발음)한글

상대경로: ./  ../  

절대경로: http /

localhost 는 로컬프로젝트 이다. 

로트경로 : image, css, js 뎁스를 말한다. 

html 태그 종류 및 설명 

DTD(Document Type Definition) 

html 5 (표준)

xhtml 

CSS

1. 문법: 선택자{속성:값;속성:값;}

2. 선언방식:

내장방식 <style></style>, 인라인방식, 링크방식 <link / >, import방식 @import url(./box.css)

3. 선택자 

ABCXYZ : 태그선택자 하고 CSS선택자를 써야함. 안그러면구분이안감

ABC>XYZ : 자식 선택자 

ABC XYZ : 하위선택자

ABC+XYZ : 인접한거 하나선택

ABC~XYZ : 인접한거 모두 선택

4.가상 클래스 

정의 .box:hover : 콜론 이후에 있는 것을 가상 클래스라고 함

ABC:hover 👉🏻 마우스커서 올라간동안

ABC:active 👉🏻 클릭하고 유지하는 동안

ABC:focus 👉🏻 입력하고있는 동안 혹은 입력을 위해 클릭해서 커서가 깜빡이고있는 상태, 클릭해도 이런효과를 원하지 않으면 tabindex속성을 -1로 주면된다 

ABC:first-child 👉🏻 요소중 첫번째 

ABC:last-child 👉🏻 요소중 마지막

ABC:nth-child(2) 👉🏻 요소중 2번째 | 응용: ABC:nth-child(2n)  으로 입력시 짝수값만 가져옴

ABC:not(XYZ) 👉🏻  XYZ빼고 

ABC::before 👉🏻 ABC 앞에 삽입

ABC::after 👉🏻 ABC 뒤에 삽입

[ABC] 👉🏻 ABC를 포함한 요소 선택 

[ABC="XYZ"] 👉🏻 ABC를 포함하며 XYZ인 요소 선택 

5.스타일상속

글자/문자 관련 속성들 전부 상속, 이거말고 다른거 상속받고싶을때는 inherit이라고 적으면 부모요소에서 값 가져옴 

6.우선순위 

!important(중요도) > 인라인선언 > ID선택자 > CLASS선택자 > 태그선택자 > 전체선택자 body

중간에 코치님이 퀴즈 내심..ㅋㅋㅋㅋ 다행히 정답도 주심.. 

저는  JSP-SPRING 풀스택 웹서비스 7년자 개발자에요. 저의 대부분의 커리어는 N사에서 SI프로젝트를 진행하였답니다. 

대기업 SI개발은 데이터 보안이 중요하다보니 여러 설정들 위에서 한정적인 일만 하게되고 그렇다보니 혼자서 A-Z까지 못한다는 생각이들어서 내가 7년이나 일했는데 사이트하나 구축하지못한다는 점에서 큰 회의를 느꼈답니다. 

그래서 최근에는 꼭 사이트 하나를 처음부터 끝까지 만들어보겠노라 다짐을 하고 개인공부를 하고 있습니다. 

드림코딩이나 노마드코더처럼 신기술이나 기초 웹지식들을 알려주는 유튜버들 덕분에 세상의 웹기술이 정말 많이 편리하고 합리적이게 변했다는것을 알게되었어요 ㅎㅎ

최근 개발자라는 직업이 정말 핫해지고, IT타직군에서 근무하던 친구들도 개발지식을 배워서 취직을 하겠다고 하여서 저도 신기술하나쯤은 공부해야겠다 생각이 들었답니다. (또, 포트폴리오를 잘 꾸며서 React JS로 사이드잡을 얻고싶은 마음도 있어요 ㅎㅎ)

ReactJS공부에 앞서 맛보기를 보고싶어서 선택한 인프런강좌! 쇼핑몰을 만드는 것이랍니다. 그와 관련된 결과물은 아래 👇🏻👇🏻

https://goodbuymarketweb.vercel.app/

엄청 간단하게 구축하고.. 시간은 하루 4시간 5일정도 걸린것 같아요 ㅎㅎ 

그 강좌에서 배운 내용중 가장 인사이트를 주었던게 바로 프로젝트 구조랍니다. 

기존에 제가 코딩했던 방식이 그림1. 처럼 DB - WAB/WAS-화면 구조인데 반하여 ReactJS는 그림2. 처럼 다른 구조를 갖고있더라고요 

리액트 영역과 스프링영역이 서로 api통신을 통해 송수신하기 때문에 추가적으로 모바일앱에서도 호출하거나 하는 형태로 확장이 가능해서 최근에는 후자의 구조를 더 많이 사용하는 것 같더라고요 ㅎㅎ 

지금 제가 회사에서 맡은 업무도 웹과 앱이 공존하기때문에 관리하기 간편하고 확장이 가능한 서버구조가 필요한데 React의 구조가 딱 좋다는 생각이 들어서 본격적인 학습을 결정하게 되었답니다.

React.js - Node.js로 웹앱을 구성하고, SQL의 활용을 위하여 JSP - SPRING으로 백오피스 기술을

그리고 웹앱을 React -Native 혹은 Flutter를 사용해서 웹뷰로 쇼핑몰을 띄워 앱으로 배포를 할 예정입니다. (아마도 내년까지 ..ㅎㅎ)

기초부터 차근차근! React 수업을 찾다가보니, 패스트캠퍼스의 강좌를 찾게되었어요.

초격차패키지에 대해서 눈여겨보다가 국비지원 온라인과정이 있다는걸 확인하고는 호다닥!! 내일배움카드로 수강을 했답니다. 

앞으로는 국비지원강좌 수강에 대한 내용을 포스팅할 예정인데요 혹시 이 글을 보시는 분 중에 패스트캠퍼스 프론트엔드 과정을 연달아 수강하고 싶으신분에게 추천하는 패스트캠퍼스 강좌 3개는 바로  아래의 것이에요 

1. 한번에 끝내는 프론트엔드 개발 초격차 : https://fastcampus.co.kr/dev_online_frontend

2. 한번에 끝내는 React의 모든 것 초격차 : https://fastcampus.co.kr/dev_online_react

3. 30개 프로젝트로 배우는 프론트엔드 웹 개발 (with React) : https://fastcampus.co.kr/dev_online_fefinal

재직자들은 1개당 2개월(8주)씩잡고 공부하면 좋지않을까 싶답니다. 

이거 다사면 할인이다뭐다 다 적용한 후에도 강좌당 약 20만원 합계 60만원이랍니다.. 그리고 6개월..!

강좌커리큘럼을 보면 정말 알차셔 다 수강 한다면 정말 마스터할 수 있는 실력이 생기지 않을까 싶어요..!! 

저는 원래 저 위에 플랜으로 학습을 하려고 하였는데요. K디지털기초역량훈련이라고 하여 처음 45만원 강좌에 대해 45000원만 결제를 하고 100% 수강을 할경우 이것도 환급하는 것이 있어서.. 공짜를 좋아하는 저는 머리숱이없는데다가 이것을 하기로 결정했답니다. 

또 제가 한 4기 수강생중 수강률이 100%라면 2번째 한번에 끝내는 React의 모든것이라는 강좌를 3개월동안 무료로 볼수있게 열어준다고하니 1번과 2번을 무료로 공부할수있지 뭐에요!! 😀😀

계획대로만 된다면 12월즈음에는 리액트 마스터가 되어야 할텐데요.. 과연 제대로 할수있을지..!!!! 

앞으로 K디지털기초역량 패스트캠퍼스 React & Redux강좌 수업과정에 대한 내용을 연재할 생각입니다  

8주동안 8개의 글을 기재할 예정이에요! 

어쩌면 기술에 대한 기록보다는 하소연과 후기가 더 많을 것 같은 프론트엔드 8주강좌 with 리액트 ! 

가보자고 ~ 😉