본문 바로가기

전체 글

 (102)
3. TEAM 프로젝트: 사전 협의 1. 개발 도구는 어떤 것을 사용할까? 우리는 대부분 JAVA를 기반으로 프로그램을 공부하였다. 물론 웹에 필요한 HTML, CSS, Ecma Script, JSP, JSTL, JQuery, Servlet, XML, JSON 등 부가적인 항목도 공부를 진행하였으나 기본적으로 Eclipse에 익숙한 상태였다. 그래서 기본적인 개발툴은 Eclipse를 사용하는 것은 자명하였다. 문제는 프로젝트를 진행하면서 부가적으로 사용해야하는 라이브러리, 브라우저, 협업도구, 스케줄 도구를 정하는 것이었다. 1) 소스코드 형상 관리 모두 입문 개발자이고 협업 도구는 사용해본적이 없기 때문에, Google 드라이브와 같은 원격 저장소에 저장하고 다운받는 식으로 개발하는 것이 일반적인 방법이었다. 하지만, 실제로 현업에서는 ..
2. TEAM 프로젝트: 주제 정하기 1. 주제는 어떻게 정할까? 6명의 인원으로 Team 프로젝트를 진행한다면, 각자 원하는 기능이나 구현하고 싶은 프로그램의 방향이 다를 것이다. 더구나 학원에서 모여서하는 경우엔 다들 입문 개발자이기 때문에 어떠한 주제나 프로그램을 만들겠다고 정하고 모이는 경우와는 또 다르다. 물론 누군가 주도해서 주제를 정하는 경우도 있지만, 그렇게 할 경우 각각 어떠한 어드밴티지를 취할 수 있는지를 계산하면서 프로젝트를 진행해야 한다. 팀으로 진행하는 프로젝트여도 각자 자신이 하는 역할이 분명하고, 개발 범위가 잘 설정되어야만 그 의미가 있기 때문이다. 물론 나도 입문 개발자라 미숙하지만, 지금까지 사회생활을 하면서 하나의 팀에 소속되고, 팀이라는 하나의 협업체계에서 자신의 역할을 찾는 것은 시간이 필요한 일이다. ..
1. TEAM 프로젝트: 서문 공부하는 기술원에서 교수님께 팀을 구성해서 프로젝트를 진행해 볼것을 권유받았다. 코로나의 여파로 ZOOM 수업을 진행하면서 커리큘럼에 많은 변화가 있었는데, 팀프로젝트 또한 이 변화에 휩쓸려 진행하지 못하고 있었다. 나는 당연히 팀 단위 프로젝트를 진행하고 싶다는 열망이 있었고, 마침 개인 프로젝트가 마쳐진 인원들이 있어 이를 시작할 수 있었다. 이 주제의 포스팅은 우리의 개발 과정과 시행착오를 기록하기 위해 작성하는 글이다. 각각의 포스트는 사용한 코드에 대한 내용이다. 만약 전체적인 개발 과정, 고려한 사항 등 개괄적인 데이터가 필요하다면 15 번 글을 보셨으면 좋겠다.
[JavaScript] 공튀기기
[JS] Chapter 1. JavaScript 개요 1. 개요 브라우저에서 사용할 수 있는 Programming Language 이다. 별도의 설치 없이 브라우저 만으로 동작하여 쉽고 편하게 구현이 가능하다. 또한 html 태그를 데이터로 사용할 수 있어, 활용도가 높고 특정 OS를 따라 구동되는 방식이 아니기 때문에 비교적 플랫폼에 자유로운 장점이 있다. 2. 역사 Netscape 개발자가 만든 언어로 초기 모델은 mocha라고 불렀다. Netscape2.0에 도입되면서 livescript로 발전한다. 이후 사업 규모의 확장으로 개발자 1명이서 감당을 할 수 없게되고 java를 만든 Sun microsystems의 허가로 JavaScript라고 이름을 변경한다. 산업 표준이 정해져 있지 않아 회사마다 다른 방향으로 발전하게 되고, 브라우저 별로 호환성에..
[CSS] Chapter 15. Animation 1. 개요 Animation은 CSS3에 추가된 기능으로 오브젝트의 모양을 동적으로 변화시키는 '기능'을 한다. 본래 JavaScript를 통해 구현하던 동적인 움직임을 CSS에서 부여할 수 있다는 강점이 있으나 CSS3에서 지원하는 기능이므로 호환 브라우저가 상대적으로 적다. 물론 HTML5를 지원하는 브라우저라면 해당 기능을 대부분 지원하고 있으며, 지속적으로 브라우저가 발전하면 범용성 있게 사용할 수 있는 기술이므로 익혀두는 것을 권장한다. 2. 애니매이션을 적용하는 방법 CSS 애니매이션은 여느 스타일과 같이 특정 속성을 부터하는 것으로 진행한다. 사용하는 속성은 animation 속성이며 animation에 대한 자세한 값을 할당하여 동적인 움직임을 부여한다. 다만 animation은 상태의 변..
[CSS] Chapter 14. transform 의 사용 1. 모양을 변화시키는 transform transform은 html에서 보이는 화면에 적용한 객체를 변화시키는 역할을 한다. CSS3 이전에는 JavaScript를 이용하여 동적 움직임을 부여했지만 CSS3가 나온 이후로 CSS 명령어를 통해 객체의 움직임을 변화시키거나 애니메이션 효과를 줄 수 있다. transform은 객체의 모양을 자신이 원하는 대로 변화시킬 수 있고, 변화하는 시간을 설정하여 애니메이션 효과를 줄 수 있다. 하지만, 실제 디자이너가 이러한 동적 움직임을 직접 부여하거나 영상을 삽입하는 것이 더욱 쉬운 것이 사실이며, 애니메이션 특성상 반응에 따라 하나하나 변화하는 것을 관찰하는사용자가 있을리 만무하므로 ‘기능’ 정도만 인식하도록 하자. (YouTube에서 5초 광고 나오는 것도 ..
[CSS] Chapter 13. HTML에 동적 움직임을 부여하기 1. :hover{} CSS에서 hover는 특정 id나 class, 태그 뒤에 붙여 마우스 커서가 위치했을 때의 모양을 변경하는 기능이다. 객체:hover{적용할 스타일} 마우스 커서의 위치에 따라 사진이 조금 커지는 등의 동작을 설정할 수 있다. NAVER 등에서 자주 사용되는 모양을 확인할 수 있으니 참고하자. 2. JavaScript: DOM 구조를 이용하여 태그의 style을 설정하기 CSS는 style에서 지정하는 모양에 따라 태그의 표현 방식을 조정하는 기법이다. 이러한 조정 과정에서 DOM 구조를 이용하면 특정 태그나 id, class의 모양을 변경할 수 있다. 객체.style.backgroundRepeat="no-repeat"; 위와 같이 style의 모양을 변경할 수 있는데, Css에서..

티스토리툴바