웹드루아 - 웹 개발자 드루아

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

22일차에 쓰는 것이지만 21일차에 한 내용에 대한 후기이기 때문에 21일차이다. 3주차는 월요일에 팀빌딩을 한 후에 1주일동안 프로젝트를 진행했다. 팀빌딩을 한 후에 상의를 하다가 헬스케어 페이지, SNS 정리 및 미디어 콘텐츠 추천 페이지, TO-DO-LIST 페이지를 통합한 Life Manager 사이트를 만들기로 결정했다. 아이디어를 선택하는 과정도 쉽지 않긴했다..하핳 그때 나온 아이디어들은 미디어 콘텐츠 추천 사이트, sns 통합 사이트, mbti 검사 사이트 동물 연관, 가계부, 투두 리스트, 운동 루틴 짜주는 사이트, 플래시 365, 밈을 모아놓는 웹사이트, 노션 클론코딩 (살짝 변형해서) 등이 있다. 이 중에 골라서 통합된 페이지를 만들기로 결정했다. 그리고 다시 정신 좀 차려야겠다고 진짜 절실하게 생각이 들었다.. 처음 계획은 

- 노션 페이지 정리 (포트폴리오와 이력서 미리 준비)

- 블로그 매일 정리(매일 메모에 적어서 1주일치씩 올리더라도)

- 꾸준히 운동하기

- 소설 작성 지속해서 하기

- 산업체 기업 탐색 후에 리스트업 해서 분석하기

을 할려고 했는데 4주차가 지났음에도 철저하게 실패했다..게으름과 나태함을 빠르게 죽이고, 부지런히 노력을 하는 것이 시급하다. 그리고 2주차동안 지나가면서 놓친 html css js를 다시 복습을 꼭 하고 다시 시작할 것이다. 오늘은 어제 했던 발표를 포트폴리오를 제작하는 시간을 가진다고 해서 이번주는 지금까지 해왔던 것들을 정리하고, 실습도 다시 해보며 복습하는 시간을 가질려고 한다. Node JS 수업도 같이 한다고 한다. 그리고 우리조가 투표해서 3등이 됐다!

 어쨌든 오늘부터 처음에 지킬려 했던 계획들을 무리하지 않고 차근차근 지켜나갈려고 한다. 화이팅!!

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

7월 26일에 진행한 프로젝트 발표 피드백

▷ 헤이큐브 - 쓰레기 가치 커뮤니티 웰라비 :

마틴 리더님

주제를 나타나기에는 조금 부족한 콘텐츠

발표태도 > 너무 대본만 읽은 것이 살짝 아쉬움

▷ 황이조 :

마틴 리더님

비슷한 프로젝트 존재

헬스 관련된 프로젝트가 많다.

비슷한 아이디어가 많기 때문에 경쟁력이 살짝 떨어진다고  생각함 

ppt 자료 배치가 살짝 혼란스러웠다.

chart.js 사용한 것은 잘했다 실무에서 많이 사용됨

▷ 두시에 뭐해 :

마틴 리더님

주제는 괜찮음 

괜찮은 주제에 비해 2% 부족한 느낌 

몇번째 페이지라고 하기 보다는 각 페이지가 가지고 있는 특성을 중심으로 이야기를 하는 것이 좋을 것이라 생각함

목차도 중요하다.

▷ 화장품 웹 :

마틴 리더님

리액트 sass 강의를 해서 살짝 당황함

3d 캐러셀 제작 잘함

요즘은 웹을 만들때 모바일 버전을 먼저 만드는 경우가 많음

▷ 개인 프로젝트

마틴 리더님

주제 선정면에서는 살짝 아쉬움

일상에 관한 주제는 면접관이 좋아하는 주제는 아님

ppt와 발표가 전체적으로 재밌음

▷트리플 A 헬스케어

마틴 리더님

주제가 반복되기 때문에 그 부분은 아쉬움

음식 넣었을때 칼로리 계산해주는 시스템은 좋았음

▷ 7조 날씨와 타이머 계획 사이트

마틴 리더님

레퍼런스와 전반적인 설명이 좋았음

▷ 부루마블

마틴 리더님

주제 선정이 살짝 아쉽지만

코드리뷰와 ppt 발표가 정말 좋았다. 7조와 부루마블 조가 제일 좋은 발표를 했던 것 같음

코드 리뷰보다는 코드에 대한 순서도를 제작하고 설명하는 것이 좋다.

▷ 육회함조 공연장 리뷰

마틴 리더님

프로젝트에 대한 주제 선정은 제일 좋음

하지만 그에 대한 설명이 살짝 부족한 느낌이 든다.

마틴 리더님 결론 : 흔히할 수 있는 주제는 지양하자

릴다 리더님 

ui/ux에 집중한 팀이나 기능에 집중한 팀

기능에 집중해서 ui가 부족한 조가 좀 많았다.

토이 프로젝트 느낌이 강했음

디자인적인 부분도 보완을 해야한다.

ui에 집종한 조는 기능 확인을 하기가 조금 힘들었다.

다음 프로젝트는 두개에 대한 조화가 잘 나타났으면 좋겠다.

반응형 > 핸드폰 테블릿 등 모바일 화면에 대한 반응형을 설정하는 것이 좋을 것 같다.

줄였는데 가로 스크롤이 생기는 것은 없애야한다.

코드 규칙을 정해서 프로젝트를 진행하는 것이 좋다.

통일성 있도록

호버는 PC에만 있는 기능이기에 모바일에서는 어떻게 할지 생각하고 적용해야한다.

[정리]

- Chart.js는 실무에서도 자주 사용되기 때문에 익히는 법을 알아두자- 목차에서 이목을 끌어야한다. 목차의 중요성을 잊지말고 발표할때 이목을 끄는 목차를 준비하자- 요즘 웹을 제작할때는 모바일이 제일 많이 사용되기 때문에 반응형으로 모바일, 테블릿, pc 모두 잘 준비하자- 일상에 관한 주제는 면접관이 좋아하는 주제가 아니기에 더 참신한 주제 선정을 위해 노력하자- 발표를 할때 코드를 직접적을 보여주는 것 보다는 순서도를 보여주며 설명하는 것이 좋다.- UI/UX와 기능적인면 두가지에 대한 조화가 잘 이루어지게 프로젝트를 제작하자- 가로 스크로를 사용자의 피로도를 높여주는 요소이다 철저히 배제하자- 코드 규칙을 정해서 프로젝트를 진행함으로써 코드의 통일성을 높이자.- 호버는 모바일에는 없는 기능이기에 모바일에서는 어떻게 할지 생각하고 적용하자 

오늘 나가는 Node.js에 관한 내용은 다음 페이지에서 작성할 것이다.

[블로깅 해야하는 내용들]

- html & 실습

- css & 실습

- css : flex & 실습

- js 기초 & 실습

- DOM 객체 &실습

- jQuery 실습

- 부트스트랩

- 개발문화 협업 방식

- Node.js

원래 하루하루마다 작성할 예정이었지만 그렇게 하지 못했다...하핳 2주차 동안 배운 내용을 정리하고, 다음주부터는 하루하루 작성하는 습관을 들이고자 한다..!!

일단 2주동안 배운 것은 html, css, DOM 객체, jQuery까지 배웠고, 2주차 마지막 진도를 아직 안나가서 그 부분은 따로 적고자 한다.(Bootstrap을 배운다.) 그리고 위의 내용들도 양이 많다 보니 나누어서 작성할 것이다. 그전에 최근에 배웠던 jquery객체와 부트스트랩에 대한 간단한 회고를 이번 페이지에서 작성하고, html/css/js기초/dom 객체/jquery/부트스트랩으로 나누어 작성할 것이다. 

일단 어제 배운 jQuery는 dom 객체 등 자바스크립트 언어를 간편히 사용할 수 있도록 단순화 시킨 js 라이브러리이다.

그 전날에 공부했던 dom 객체와 비교해보며 어떻게 사용하는 지를 배웠다.

1. jQuery CDN 가져오기

먼저 Jquery를 사용하기 위해선 다운로드를 받거나, CDN을 가져와서 사용한다. 여기서 CDN이란, 콘텐츠 전송 네트워크(CDN)이며, 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크이다. CDN은 콘텐츠 전송 네트워크 또는 콘텐츠 배포 네트워크를 의미할 수 있으며, 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동한다. 즉 다운로드 없이도 CDN을 HTML의 헤드 태그에 붙여준다면 편하게 사용할 수 있다. CDN 사용 과정을 간단히 설명하고자한다.

a. 구글에 jQuery를 검색하여 CDN으로 들어간다.

b. jQuery core에서 가장 상위에 있는 uncompressed를 누른다. 

c. Code Integration에서 코드를 복사하고 html의 head 태그에 붙여넣기한다.

위의 과정을 거쳐 html에 코드를 적용한 후에 jQuery를 사용할 수 있다.

2. DOM 객체와 비교해보며 jQuery 사용해보기

jQuery를 사용하기 위해선 필연적으로 DOM 객체의 사용법도 알아야한다. DOM에 대한 자세한 설명은 추후의 글에 추가할 것이고, 오늘은 jQuery를 사용하며 알아야하는 사용법 정도만 짚고 넘어가고자 한다. 일단 DOM에서 할 수 있었던

새로운 요소 추가, 삭제, 변경/ 속성 변경/ 스타일 변경/ 이벤트 제어를 jQuery를 통해 모두 할 수 있다. 그리고 HTML에 있는 요소의 값을 가져오는 과정도 DOM 객체보다 편하게 할 수 있다. jQuery의 기본 형태는 다음과 같다.

이런 형태를 기본으로하여 다양한 동작을 실행한다. 중요한 점은 jQuery를 통해서는 새로운 요소를 만들지는 못한다. 그러므로 새로운 요소를 만드는 것은 DOM 객체를 이용한다.

일단 값을 가져오는 과정을 선택자를 넣을 때 기존의 CSS 방법과 동일하다. 

속성 선택자나 복합 선택자 등은 CSS를 정리하는 페이지에서 더 자세히 설명할 것이다. 여기서 알아야할 점은

태그 < 클래스 < 아이디 순으로 우선순위가 있다는 것이다. 이는 CSS에서 중요한 점이긴하다.

- 값 가져오기

여기서 각 속성에 따라 방법이 살짝씩 다르다. 

input의 값을 가져올때는 val을 사용한다. DOM 객체에서는 아래와 같이 사용했다. 

(let value = document.getElementById("input").value;)

변수 value에 input에 있는 값을 가져와 넣어준다. 이를 jQuery를 사용하여 훨씬 간편하게 가져올 수 있다. 

(let val = $("#input").val();)// 인풋을 아이디로 설정했기 때문에 #으로 지정하여 값을 가져온다.

바로 이렇게 말이다. 훨씬 간단해 진 것을 눈으로 확인할 수 있다.

- 값 설정하기

위의 방법을 알았다면 값 변경하는 과정은 정말 쉽다.

DOM 객체 : document.getElmentById("input").value = "안녕";

jQuery : $("#input").val("안녕");

- 스타일 변경하기

기본 사용법은 다음과 같다 $(선택자).css("속성","속성값")

DOM 객체 :

let div = document.querySelector("div")

div.style = "border : 1px solid black"

jQuery : $("div").css("border","1px solid black");

DOM으로 사용하면 쿼리셀렉터로 선택하고, 선택한 태그가 들어간 변수에 .style을 이용하여 스타일을 변경했지만, jQuery를 사용하면 위와 같이 짧고 편리하게 적용할 수 있다.

- 속성 추가하기

DOM 객체 : 요소.setAttribute("속성명","지정할 속성 값")

jQuery : $(선택자).attr("속성",''속성 값')

원하는 속성을 지정하고 그 값을 넣을 수 있다.

- Text, HTML 변경하기

DOM 객체 : 

jQuery : $(선택자).text("변경할 문자 내용")

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

DOM 객체 :

jQuery : $(선택자).html("변경할 내용")

둘 다 선택한 요소의 내용을 바꿔준다. 하지만 text와 html의 차이는 text는 문자만 변경하지만 html은 작성한 태그까지 같이 적용해준다는 점이다. 즉 text로 변경한 내용은 <b></b>가 문자 그대로 들어가지만, html 변경할때는 <b></b>가 적용되어 볼드채로 바꾸어준다. 이점을 기억하고 사용하는 것이 좋다.

- 요소 제어

요소 내의 내용을 변경하는 것이 아니라 추가하고, 요소 자체를 선택한 요소에 추가, 삭제, 탐색하는 방법에 대해 알아볼 것이다. 요소를 추가할 때는 추가하기 전에 요소를 만들어줘야 한다.

추가

추가하는 방법에는 여러가지 방법이 존재한다.

.append(요소 or 변경할 내용); //선택한 요소의 자식 요소 중 마지막에 추가 문자열과 노드 객체 모두 삽입 가능하다.

.appendChild(요소); // 선택한 요소의 자식 요소 중 마지막에 노드 객체만 삽입할 수 있다.

.prepend( 요소 or 변경내용); // 선택한 요소의 자식 요소의 맨앞에 문자열과 노드 객체를 삽입할 수 있다.

.before( 요소 ); // 선택한 기준 요소의 앞에 요소를 추가한다.

.after( 요소 ); // 선택한 기준 요소의 뒤에 요소를 추가한다.

삭제

.remove(.클래스이름,#아이디 ); //선택한 요소를 DOM 트리에서 삭제한다. 조건을 걸어서 조건에 만족하는 요소만 삭제하는 것도 가능하다.

ex) $("h1").remove(".r1"); // r1을 클래스 값으로 가지는 모든 h1 요소를 삭제한다.

.empty(); // 선택한 요소의 자식 노드를 모두 삭제한다.

탐색

.parent().함수(); // 바로 위에 존재하는 하나의 부모 요소를 선택한다.

.parents().함수(); // 선택한 요소의 모든 상위 요소를 선택한다.

.next().함수(); // 선택한 요소의 바로 다음의 형제 요소를 선택한다.

.prev().함수(); // 선택한 요소의 바로 이전의 형제 요소를 선택한다.

.children().함수(); // 선택한 요소의 자식 요소를 모두 선택한다.

- 클래스 제어

.addClass(“클래스명”); // 선택한 요소에 클래스를 추가한다.

.removeClass(“클래스명”); // 선택한 요소에 클래스를 제거한다. 클래스를 제거해도 class=""는 남아있다.

.hasClass(“클래스명”); // 선택된 요소에 클래스가 있는지 없는지 판별하고 클래스가 있다면 true를 반환하고 없다면 false를 반환한다.

.toggleClass(“클래스명”); // 선택된 요소에 클래스가 있다면 제거하고 없다면 추가한다.

여기서 특별히 switchClass가 있는데 이를 사용할려면 jQuery uidml의 CDN을 가져와 헤드 태그에 넣어주면 사용할 수 있다.

$( 선택자 ).switchClass(“클래스명1”, “클래스명2”, 시간);

위에 적은 모든 것들의 . 앞에는 $(선택자)가 들어가지만 생략한 것이다. 어쨌든 이렇게 switchClass는 클래스 1에서 클래스 2로 바꿀때 걸리는 시간을 조정해주면 자연스럽게 클래스가 바뀐다. 보통 css에 클래스를 만들어 스타일을 바꾸는 데 사용한다.

- jQuery의 이벤트 리스너

이벤트 리스너란 이벤트가 발생했을 때 그 이벤트에 맞추어 실행할 함수를 지정해주는 것을 말한다.

기본적인 사용법은 다음과 같다.

 $(선택자).on("이벤트명",콜백함수)

그리고 자주 사용하는 이벤트의 경우에는 .on을 사용하지 않아도 바로 사용할 수 있는 이벤트들이 있는데 다음과 같다.

click, scroll, mousehover, hover, keyup, keydown

영어 뜻과 동일하게 각각의 이벤트가 발생했을 때, .on 없이 바로 $(생성자).click(function(){})으로 사용할 수 있다.

이들을 이용한 실습은 다음페이지에서 다루도록 할 것이다. 

결론적으로 부트캠프는 포스코x코딩온 KDT 8기와 테킷 프론트엔드 스쿨 7기를 지원했다. 각 부트캠프를 비교하여 왜 포스코x코딩온 KDT 8기를 수강했는지와 오늘 교육을 시작했기에 1일차 강의내용도 정리하여 올리고자한다.

[포스코x코딩온 KDT 8기]

지원 과정: 

1차 자유양식 자기소개서 작성

2차 3대1 대면 면접 30분

교육 일정: 7/3 - 12/23(6개월)

풀스택

60명 대면 수업

월~토 : 9시 - 14시

[테킷 프론트엔드 스쿨 7기]

지원 과정:

1차 자기 소개서 작성

2차 면접 영상 제출 & 기초 프로그래밍 테스트(부담 많이 가지지 않아도됨)

교육 일정: 7/3 - 11월 초(4개월)

프론트엔드

약 80명 온라인 수업

월~금 : 9시-18시

이 두가지 부트캠프에 모두 합격했는데 솔직히 고민이 많이됐다. 산업체 목표는 11월달에 넣어서 2024년에 다니는 것이 목표였기 때문에 멋사를 들을려 했지만 풀스택을 배운다는 점과 대면으로 수업을 들을 수 있다는 점이 끌렸기 때문에 최종적으로는 포스코를 듣기로 했다.

그래서 7월 3일 수업을 시작했다. 첫날은 간단한 자기소개와 깃 사용법 등을 강의하고 마무리 했다. 일단 일별로 학습 내용을 정리하고 에드센스 용으로 페이지를 꾸며 공개할 예정이다. 동시에 js와 리액트를 계속 공부해볼 것이다. 기간으로 따져보았을때, 단기간에 실력을 올려 취업을 할려면 프론트엔드로 가는 것이 옳은 선택이라는 생각이 들었고, 스타트업인 산업체에 들어가 개발 외의 기획이나 마케팅 업무도 하고 싶기에 프론트엔드 위주로 공부할 예정이다. 빨리 방도 구해야한다. 방 구하는 내용도 정리하여 적을 예정이다.

[수업 내용 정리]

수업에서 슬랙에서 핑을 찍어 완료된 것을 표시한다. 1:완벽 2:애매 3:모르겠음 이느낌이다. 오늘 배운 내용은 깃허브 계정 생성, 깃 설치, vscode 설치, add/commit/push/pull 방법에 대해 배웠다. 앞서 간단히 요약하자면 깃허브와 만지고 있는 코드를 연결하는 과정에서는

git config —global init.defaultBranch main

git config —global user.name

git config —global user.email

git config —global —list

git add .

git commit –m “메세지”

git push origin main

git status

 

 

 

git config —global init.defaultBranch main

git config —global user.name

git config —global user.email

git config —global —list//이걸로 제대로 연결되었는지 확인

 

화살표 위로 방향 누르면 위에서 적은 명령어 복사

 

작업공간(내 컴퓨터) >git add> Staging 영역 >git commit> 로컬 레파지토리 >git push> 깃허브

 

깃과 내가 작업중인 폴더를 연결하는 방법

 

깃 레파지토리를 새로 제작한 후 코드를 복사한다

 

 

 

 

 

 

 

복사한 코드를 깃에서 우클릭하여 붙여넣기한다

 

그럼 현재 위치한 폴더에 깃 레파지토리 폴더가 생긴다

그 폴더를 vscode에서 연 후에 README,md에 뭔가를 입력하고 컨트롤+s로 저장을 한다.

 

이후 git bash에서

cd 해당파일 명령어를 입력하여 이동한 후에 git status로 상태확인을 한다

 

빨간색이 나오는 경우는 수정된 사항이 추가되지 않았다는 뜻이다.

이후 git add .으로 추가한다

 

git commit –m “메세지”//수정할 때 적을 메시지 입력

git status 커밋 상태 파악

 

커밋은 수정한 것을 추가할 때, 메시지를 추가할 수 있다. 이렇게 커밋까지 한 이후에

git push origin main으로 깃허브에 올릴 수 있다.

로그인 창이 뜰 경우에는 로그인을 하면 되고 유저네임이 뜰 경우 토큰을 받아야한다.