Wisdom

1.자바스크립트 변수&연산자&타입

1) 변수

변수는 var, let, const로 선언할 수 있습니다.

어떤 것을 사용하는 가에 따라 scope가 달라집니다.

chrome의 개발자도구의 console창을 사용해서 var의 동작을 확인해 보았습니다.

2)연산자

연산자 우선순위를 표현하기 위해서는 ()을 사용하면 됩니다.

수학연산자는 +,-,*,/,%등이 있습니다. 이외에도 논리 연산자, 삼항 연산자, 관계 연산자도 있습니다.

or연산자를 살펴보겠습니다.

result는 or연산자에 의해 name의 변수 값이 있으면 name을, 없다면, "codesquad"를 저장하는 변수입니다.

삼항 연산자를 살펴보겠습니다.

result는 삼항 연산자에의해 data가 11보다 크면 ok를, 작으면 fail을 저장하는 변수입니다.

비교 연산자를 살펴보겠습니다.

자바스크립트에는 === 라는 비교 연산자가 있는데요 기존에 우리가 많이 쓰던 ==연산자와 비슷하지만, 자바스크립트에서는 === 연산자를 더 선호합니다. 왜냐하면 == 연산자는 오류가 존재하기 때문인데요! 

이런 오류들이 존재합니다. 세번째 예제를 보면, 숫자 0과 문자열 0을 같은것이라고 비교해놓았습니다.

반면, === 연산자는 비교의 타입까지 비교합니다.

3)타입

undefined, null, boolean, number, string, object, function, array, Date, RegExp

등이 있습니다.

Javascript의 타입은 선언할 때가 아니라, 실행타임에 결정됩니다.

function에 a변수를 선언할 때가 아니라, a가 선언된 function이 실행될 때!!!!a의 타입이 결정됩니다.

이것을 Dynamic type이라고 합니다.

2. 자바스크립트 비교&반복&문자열

1)비교문

if, else if, else를 통해 비교문을 작성한다.

짧은 비교문을 작성할 때에는 삼항 연산자가 유용하게 쓰입니다!

2)분기 - switch

로직의 분기를 나누기위해 if문의 나열 대신 switch문을 사용해 나타내기도 합니다!

3)반복문

for문이나 while문을 사용해서 반복문을 구현할 수 있습니다.

for문의 성능 개선을 염두하고 작성하면 위와같이 코딩할 수도 있습니다.

배열의 경우 forEach와 같은 메서드도 있습니다.

3)문자열 처리

자바스크립트에는 문자와 문자열은 같은 타입입니다. 모두 문자열로 통일됩니다.

위와같이 single quotation 이나 double quotation이나 string타입으로 처리됩니다.

문자열에는 다양한 메서드가 있습니다. 자바스크립트가 string을 내부적으로 객체로 보기 때문입니다.

3. 자바스크립트 함수

1) 함수의 선언

함수는 여러개의 인자를 받아서, 그 결과를 출력한다.

파라미터의 개수와 인자의 개수가 일치하지 않더라도 오류가 나지 않습니다.

만약 파라미터 1개가 정의된 함수를 호출할 때, 인자를 0개 넣어서 실행하면, 이미 정의된 파라미터는 undefined라는 값을 갖게 됩니다.

2) 함수 표현식

함수를 함수 안에서 선언 할 수 있습니다.

이렇게 표현하면 함수선언문과 달리 선언과 호출순서에 따라서 함수가 정상적으로 실행되지 않을 수 있습니다.

위의 코드에서 result의 선언을 inner의 선언보다 먼저하면 오류가 발생합니다.

3) 표현식과 호이스팅

위의 코드는 신기하게도 잘 실행됩니다.

inner()은 이름만 있는 함수인데 어떻게 오류가 나지 않을까요?

자바스크립트에서 함수가 한번 실행될때, js parser가 코드를 한번 쫘악 훑으면서 얘는 변수, 얘는함수...이렇게 기억을 해둡니다. 이것을 호이스팅이라고 합니다.

이 코드에서는 inner정보가 함수라는 것을 함수 실행 전에 기억해 두고 실행시켜준 것입니다.

이 과정에서 자바스크립트가 이해한 funcTest의 코드는 다음과 같습니다.

4) arguments객체

함수가 실행되면 그 안에서 arguments라는 특별한 지역변수가 존재합니다.

자스 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있습니다. 이때, 넘어온 인자를 aruments로 배열의 형태로 하나씩 접근할 수 있습니다. (Python에서 args, kwargs같은 느낌...?!)

그러나 arguments는 배열타입이 아니라서 배열의 메서드는 사용할 수가 없습니다.

이 객체는 활용할 수 있는 방법이 여럿있습니다. 그중, 다음과 같은 경우에 활용 가능합니다.

4. 자바스크립트 함수 호출 스택

**자바, C등 언어와 유사**

1. servlet 이란?

앞선 포스팅에서는 이클립스에서 Dynamic Web Project를 생성하고 (자바 웹 어플리케이션)

해당 프로젝트에서 HelloServlet이라는 서블릿 클래스를 작성해 보았습니다.

작성된 서블릿은 이클립스 내부에서 설정한 runtime (즉, 우리는 톰캣이라는 WAS를 설정했죠!) 톰캣에 의해서 동작이 됩니다.

그 이후 웹브라우저를 이용해서 톰캣 서버에 URL 요청을 보내고

HelloServlet이 실행되는 결과를 웹 브라우저로 확인해 보았습니다.

과정을 정리하자면,

Dynamic Web Project(eclipse) > servlet class > 톰캣(WAS)서버에 URL요청 > servlet실행

입니다.

여기에서 우리가 만든 프로젝트가 자바 웹 어플리케이션 입니다.

웹 어플리케이션 이란 인터넷으로 연결된 웹 환경에서 사용자들 간의 연결을 통해 서비스를 제공하고 제공받는 어플리케이션을 의미합니다. 

우리가 사용하는 쇼핑몰, 블로그, 카페등이 이에 해당합니다.

* 클라이언트가 웹브라우저의 주소창이나 하이퍼링크, 서브밋 버튼 등을 사용하여 서비스를 (요청)하면 서버쪽에서 그 요청 정보를 처리하여 결과를 HTML 형태로 사용자의 웹 브라우저에 보내줍니다.(응답)

웹 어플리케이션의 구성요소

모두 앞서서 정리했던 내용 입니다.

WAS에 의해서 동장하는 웹 어플리케이션은 폴더 구조를 잘 지켜주어야합니다.

자바 웹 어플리케이션의 폴더 구조

Servlet은!!

자바 웹 어플리케이션의 구성요소중 동적인 처리를 하는 프로그램의 역할을 수행합니다.

서블릿의 특징을 살펴보자면..

- 서블릿은 WAS에서 동작하는 Java클래스

- 서블릿은 HttpServlet 클래스를 상속받아햐 함

- 서블릿과 JSP로부터 최상의 결과를 얻으려면, 웹 페이지를 개발할 때 JSP와 서블릿을 조화롭게 사용해야함

  (ex : 웹 페이지를 구성하는 html은 jsp로 표현, 복잡한 프로그래밍은 서블릿으로 구현)

2. Servlet 작성 방법

servelt 작성 방법은 버전에 따라 달라집니다.

버전에 따른 Servlet 작성 방법

1. Servlet 3.0 spec 이상에서 사용하는 방법

• web.xml 파일을 사용하지 않습니다.
• 자바 어노테이션(annotation)을 사용합니다.
• 앞에서 실습했던 first web에서 사용합니다.

2. Servlet 3.0 spec미만에서 사용하는 방법

• servlet을 등록할 때 web.xml 파일에 등록합니다.

3.0이상 버전의 servlet작성 방법부터 살펴보겠습니다.

프로젝트 만들고 서브렛 3.1버전을 선택해서 만듭니다.

저번 포스팅에서와 마찬가지로 doGet 메서드 부분을 고쳐서 작성해보겠습니다.

html은 enter입력으로 줄바꿈이 안되기 때문에 br태그를 사용해서 줄바꿈 해줍니다.

16번째 줄에서 서블릿 클래스가 HttpServlet을 상속받아서 작성한것을 확인할 수 있습니다.

만약 상속 받지 않았다면, response와 같은 메소드를 직접 만들어서 사용해야겠죠..??

3.0이상의 버전 서블릿은 annotation을 사용합니다. 

형광펜 친 부분을 바꾸면 어떻게 될까요?

바꾸기전의 url입니다.

바꾼 후의 url입니다.

이렇게 3.0이상의 버전은 자바 annotation을 사용해서 servlet을 생성하는 것을 살펴보았습니다.

3.Servlet life-cycle

전에 만들었던 firstweb 프로젝트의 example 패키지에 LifeCycleServlet을 하나 만들어줍니다.

위와 같은 설정으로 세개의 메소드를 오버라이딩 할 수 있게 설정하고 finish합니다.

이렇게 코드를 오버라이딩 해줍니다.

실행 시키면 다음과 같이 콘솔창에 뜹니다.

처음 실행을 시킨것이기 때문에 메모리에는 해당 서블릿 객체가 없는 상태였습니다.

그래서 servlet을 생성한 후, init과 service를 호출한 것을 확인할 수 있습니다.

브라우저를 새로고침하면 이미 메모리에는 servlet객체가 있기 때문에 다시 생성하지 않고,

service만 다시 호출한 것을 확인할 수 있습니다.

!!참고!!

Servlet 생명주기

• WAS는 서블릿 요청을 받으면 해당 서블릿이 메모리에 있는지 확인합니다.
•  if (메모리에 없음) {
   - 해당 서블릿 클래스를 메모리에 올림
   - init() 메소드를 실행
  }
   - service()메소드를 실행
• was가 종료되거나, 웹 어플리케이션이 새롭게 갱신될 경우 destroy() 메소드가 실행됩니다.

위의 내용에서 우리가 실제로 동작을 구현할 때에는 service메소드에 구현하면 되겠구나..!!라는 것을 알 수 있습니다.

1. 자바 웹 어플리케이션 생성하기

eclipse에서 File > New > Dynamic Web Project를 클릭합니다.

project name을 입력 후, New Runtime을 클릭합니다.

저는 이미 프로젝트를 만들어서 Tomcat을 설정해 놓은 상태라 8.0버전으로 설정되어 있습니다.

8.0버전을 선택 후, Next를 클릭합니다.

Browse를 클릭 후, Tomcat을 설치한 경로를 입력해 줍니다.

여기서 문제가 발생합니다!!

설치한 Tomcat은 8.0버전인데 eclipse는 8.0버전까지밖에 지원을 하지 않는다고 합니다.ㅜ

그래서 저는 이걸 https://sarc.io/index.php/tomcat/582-eclipse-tomcat-8-5-x

이 블로그를 참고해서 고쳤습니다. 저는 야매같지만 첫번째 방법으로 수정했습니다.

잘돌아갑니다.ㅎㅎ

2. 자바 웹 어플리케이션 작성

방금 만든 웹 어플리케이션을 클릭 후, New > Servlet을 클릭합니다.

다음과 같이 패키지와 클래스 이름을 입력하고 next를 클릭합니다.

다음과 같은 창이 뜹니다.

여기에서 제일 중요한 부분은 URL mappings입니다.

이 HelloServlet클래스가 WAS에 배포될 때 사용할 이름을 지정한 부분입니다.

지금은 eclipse가 자동으로 생성한 이름으로 설정되어 있는 상태입니다.

기본적으로 URL은 다음과 같은 규칙으로 생성됩니다.

http://localhost:8080/{프로젝트이름}/{URL Mapping값}

따라서 위와같이 어플리케이션을 만든다면 URL은 

http://localhost:8080/firstweb/HelloServlet 이렇게 되겠죠?

그다음 next를 누르고

doGet만 체크되게하고 finish해줍니다.

기본 코드에서 doGet 메소드를 변경해 줍니다.

이제 이 코드를 실행해봅시다.

src > servlet파일 > 우클릭 > run as 를 클릭해 줍니다.

항상 Tomcat을 사용할 것이기 때문에 밑에 always....체크박스를 체크해줍니다.

그후 실행하면

이렇게 잘 돌아갑니다!!!! :)

1. eclipse 설치

eclipse는 이미 설치되어 있어서 따로 설치할 필요 없었습니다.

perspective는 Java EE로 설정했습니다.

Java는 Java프로그래밍을 할때, JavaEE는 Java로 웹 어플리케이션을 만들때 더 유용한 perspective입니다.

2. Tomcat 설치

Apache Tomecat이란??

아파치 톰캣은 아파치 소프트웨어 재단에서 개발한 세계에서 가장 많이 사용되는 WAS(Web Application Server)입니다.

자바를 이용하여 작성되는 웹 어플리케이션은 WAS가 있어야만 실행할 수 있습니다.

톰캣은 처음 사용해보는거라 다운 및 설치 과정을 적어보겠습니다.

http://tomcat.apache.org로 이동한 후 "Tomcat 8"을 선택합니다.

Tomcat 8버전은 JDK 7이상에서 동작하며 Servlet Spec 3.1을 지원합니다.

Tomcat 9버전은 JDK 8이상에서 동작하며 Servlet Spec 4.0을 지원합니다.

zip 파일을 다운 후, 압축을 해제하여 파일을 엽니다.

다운받은 파일이 이렇게 생성되어 있습니다. 이중, bin파일을 클릭합니다.

저는 window라 window버전으로 진행해 보겠습니다.

startup.bat파일을 실행시켜 줍니다.

그럼 cmd창이 띄워지고 뭔가 촤라라라락 실행됩니다.

우리가 할 것은 잠시 기다린 후, 새로운 브라우저를 켜고

주소창에 http://localhost:8080 나 http://127.0.0.1:8080를 입력해 들어가보는 것입니다.

만약 잘 동작한다면,

다음과 같은 창이 띄워집니다.

Tomcat을 종료하려면, 다시 bin폴더로 들어가서 shutdown.bat을 더블클릭합니다.

종료후 다시 위의 주소로 들어가면 "사이트에 연결할 수 없음"오류가 뜹니다.

저는 8080포트 서버에 접속할 때,

다음과 같은 오류가 발생 했습니다.

https://monny.tistory.com/42

위의 티스토리에 오류 해결과정이 자세이 나와있어서 참고해서 오류를 수정했습니다.

8주간의 피로그래밍 활동이 끝났다.

HTML&CSS

Python

Django

세가지를 속성으로 정말 알차게 배웠다!!

멋진 선배분들의 강의와 온라인 강의로 기본 지식을 쌓아나갔다.

온라인 강의를 집중적으로 들은 후, 선배 기수분들의 강의로 실습하고 추가적으로 필요한 지식을 채웠다.

온라인 강의를 들을때 지루함을 조금 느꼈지만, 외부의 압박이 없었다면 그 많은 강의는 나 혼자의 의지로 절대 완강하지 못했을 것 같다.

또한 이 과정을 함께한 동기들이 없었다면 더더욱 불가능했을것 같다.

주 3회의 강의이외의 시간에는 매일 과제가 나갔다.

과제의 난이도가 어려운 듯 했지만, 열심히 하면 충분히 멋지게 완료하여 제출 할 수 있을 정도였다.

과제를 통해서 학습한 내용을 거의 완벽하게 체득했다고 보아도 무방할 정도로 과제의 퀄리티가 좋았다.

과제를 통해 구글링하는 실력도 많이 상승한것같다.

무엇보다 가치있었던 것은 일주일에 한번 있는 팀과제였다.

팀을 꾸려 하루동안 과제를 수행한 후 제출하는 방식이었다. 

혼자 틀어박혀 과제를 하는것이 아니다보니 장소 지정부터 과제 수행의 방향성, 아이디어 까지 의견을 조율할 것들이 생각보다 많았다.

그러나 모두들 열심히 하고자 했기 때문에 항상 좋은 방향으로 팀과제가 진행되었다.

팀과제를 통해 협업에 대한 양질의 경험을 쌓았다.

마지막 3주는 최종 팀프로젝트를 진행했다.

12기 동기들 모두가 각자의 프로젝트 아이디어를 발표하고 투표와 선배 기수분들의 심사로 최종 6개의 프로젝트 주제가 결정되었다.

자신의 아이디어가 채택된 사람은 팀장으로한 팀이 꾸려저 3주간 프로젝트를 완성했다.

감사하게도 나의 아이디어로 팀 프로젝트를 진행할 기회가 주어졌다.

팀장이라는 타이틀이 조금 부담스러웠지만, 응원해주고 열심히 참여해준 팀원들 덕분에 프로젝트를 성공적으로 마무리할 수 있었다.

팀프로젝트의 진행 과정과 결과물에 대한 포스팅을 추가로 작성할 계획이다.

피로그래밍 12기는 방학 뿐만아니라 학기중에도 각종 스터디로 모임을 계속해 나갈 예정이다.

피로그래밍을 통해 코딩을 배우고자 하는 열정 넘치는 좋은 사람들과 계속해서 공부할 수 있는 기회를 가질 수 있어서 너무 감사하다. 

이 소중한 인연을 계속해서 이어나가고 싶다!!

피로그래밍 13기에는 운영진으로 활동할 예정이다. 13기에는 어떤 멋진 사람들을 만나게 될 지 벌써부터 기대가 크다.

2학년이 끝나고 맞은 겨울 방학을 피로그래밍 활동을 통해 아쉬움 하나 없이 알차게 보낸것 같다.

대학생활 내내 이렇게 열심히 방학을 보낸 적이 없는데, 이제까지 왜 이렇게 방학동안 열정적으로 공부하지 않았나 약간의 후회가 든다ㅎㅎㅎ

앞으로의 방학 뿐 아니라 학기중의 시간들도 나의 미래를 위해 건전한 투자를 아낌없이 하고싶다!!

피로그래밍 너무 고마웠고, 우리 12기 동기들 너무 감사하고 사랑한다....♥

1. HTML layout태그

layout태그는 웹 페이지의 개요을 설정하는 태그입니다.

laydout태그를 사용한다고 해서 특별한 기능이 추가되는 것은 아닙니다.

기능은 div태그와 동일하나, 코드의 가독성의 높여줍니다.

종류로는..

- header

- section

- nav

- footer

- aside  등이 있습니다.

화면은 위와같이 구성하면 개요가 어떤지 한눈에 알기 쉽습니다.

2. HTML 구조설계

웹페이지를 만드는 것은 문서의 잡는 것이기 때문에 문서구조를 만드는 것이 가장 먼저 할 일 입니다.

이런식으로 큰 layout을 먼저 잡습니다.

ul, li, button, img등의 태그를 사용하여 내용을 채워줍니다.

브라우저에서 실행하면 다음과 같이 보여집니다. 아직 CSS작업을 하지 않았기 때문에

흰바탕에 검은 글씨 이지만, 문서의 개요는 다 짜여졌습니다.

3. class와 id 속성

위의 실습에서 li태그, div태그, img태그들이 여러번 중복되어 사용된 것을 확인 할 수 있습니다.

그런데 만약 이 태그들을 구분하여 사용하고 싶다면 어떻게 해야할 까요??

- id 속성

• 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
• 고유한 id값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도  용이합니다.

- class 속성

• 하나의 HTML 문서 안에 중복해서 사용 가능합니다.
• 하나의 태그에 여러개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
• 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.

위의 실습 코드에서 <li><h3>What we do 를 일관성있게 관리하기 위해서는 id가아닌 class속성을 부여해야 합니다.

왜냐하면, 위의 태그는 문서에서 3회 사용되었기 때문입니다.

이렇게 id는 문서당 하나만 사용가능하기 때문에 제약이 많습니다.(id를 중복 사용한다고해서 오류가 발생하지는 않습니다.)

그래서 실제로 HTML문서를 작성할 때에는 id보다 class 사용을 지향합니다.

1. CSS 선언방법

먼저 CSS의 구성에 대해 알아보도록 하겠습니다.

선택자는 HTML의 태그, class, id속성 등을 통해 어떤 것을 꾸며줄지 선택합니다.

CSS를 HTML안에 선언하는 방식은 크게 3가지가 있습니다.

• inlineHTML 태그 안에다 CSS를 선언하는 방식입니다.
• internalstyle 태그로 지정합니다.
• external외부파일(.css)로 지정하는 방식입니다. 가급적 이 방법으로 구현하는 것이 좋습니다.

위의 세 방식으로 같은 속성 값에 다른 value를 준다면,

inline > internal > external 순으로 가중치가 주어져서 적용됩니다.

만약, inline엔 빨강, internal엔 초록, external엔 보라색 value를 주었다면, 빨강색이 적용되는 것이죠!

3. 선택자

- tag로 지정하기

- id로 지정하기

- class로 지정하기

위의 3가지가 가장 대표적인 선택자 입니다. 위를 잘 응용하여 선택자를 다양하게 활용할 수 있습니다.

추가로, 상속관계를 표현하기 위한 자손 선택자와 후손 선택자가 있습니다.

자손이나 후손이나 그게 그말아니냐 하실 수 있습니다. 그러나 둘은 큰 차이점이 있습니다.

자손 선택자는 바로 직계 상속관계의 자식만 선택합니다.

후손 선택자는 직계 자식이 아니더라도 후손이라면 선택합니다.

자손 선택자를 사용한다면 div태그 바로 아래 p태그만 red가 적용됩니다.

그러나 후손 선택자를 사용하면, div태그 아래의 모든 p태그에 red가 적용됩니다.

5. Element가 배치되는 방법(CSS layout)

element를 화면에 배치하는 것을 layout 작업, Rendering과정이라고 합니다.

엘리먼트는 위에서 아래로 순서대로 블럭을 이루며 배치되는 것이 기본입니다.

그러나 웹 사이트는 보다 다양한 표현을 해야하기 때문에 css에서 추가적인 속성을 제공합니다.

• display(block, inline, inline-block)
• position(static, absolute, relative, fixed)
• float(left, right)

- display

각태그는 기본으로 가지는 display속성을 가지고 있습니다. 거의 대부분의 태그는 block속성이지만,

span, a태그 등의 소수의 태그는 inline속성을 가지고 있습니다.

우리는 display 속성을 사용하여 css를 통해 display를 임의로 변경할 수 있습니다.

display속성을 사용하여 배치가 위아래, 좌우로 흐르면서 쌓이기만 하면, 다양한 배치가 어렵습니다.

그래서 position속성을 사용합니다.

- position

position속성을 기본으로 static입니다.

absolute는 기준점에 따라 특별한 위치에 배치합니다.

기준점은 top/left/right/bottom으로 설정합니다.

기준점을 어떤 엘리먼트로 하느냐는 상위 엘리먼트를 단계적으로 찾아가 결정하는데,

static이 아닌 position이 기준입니다. 즉, 상위 엘리먼트를 확인했는데 static이면 넘어가고, 상위엘리먼트를 확인하고......이런식으로 기준점을 찾습니다.

relative는 원래 자신이 위치해야 할 곳을 기준으로 이동합니다.

top/left/right/bottom으로 설정합니다.

absolute를 사용하기 위해 상위 엘리먼트에 relative를 선언하는 경우가 많습니다.

 fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작합니다.

- float

float속성을 통해서 원래의 flow에서 벗어나 둥둥 떠다닐 수 있습니다.

일반적인 배치에 따라 배치된 상태에서 float는, 벗어난 형태로 특벌히 배치됩니다. 

따라서 block엘리먼트가 float엘리먼트를 인식못하고 중첩되서 배치됩니다.

- 엘리먼트가 배치되는 방식 (box-model)

블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정합니다.

margin, padding, border, outline으로 생성되는 것입니다.

box-shadow 속성도 box-model에 포함지어 설명할 수 있습니다.

box-shadow는 border 밖에 테두리를 그릴 수 있는 속성입니다.

- box-sizing과 padding

padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있습니다.

box-sizing 속성으로 이를 컨트롤 할 수 있습니다.

box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 값만 늘릴 수 있습니다.

학습을 마치며..

복잡한 layout을 직접 많이 만들어보는 것만이 자유자제로 element를 배치할 수 있는 실력을 갖추는 길인것 같다.

당연히 될 줄 알았던 것이 안되는 것을 경험하고,

생각한 방향으로 고치는 과정에서 많은 배움이 있었다.