현실적인 개발자 로드맵(4) - Ajax의 등장

현실적인 개발자 로드맵 - Ajax의 등장

# 포스팅에서 사용된 코드의 전체 코드는 https://github.com/ITVillage-Kevin/roadmap-front-javascript 에서 다운로드 받으실 수 있습니다.

# 해당 포스팅은 IT Village 유튜브 채널(https://www.youtube.com/channel/UCSIvsntWA8aJ3Apoc7kTxig)에서도 시청하실 수 있습니다.

안녕하세요, 오늘도 여전히 금요일 저녁에 찾아뵙네요. 평일엔 일 하느라 바빠서 포스팅을 할 수 없어서 금요일만 되면 포스팅 할 수 있다는 설레는 마음으로 이렇게 컴퓨터 앞에 앉아있습니다. ^^;

자, 그럼 지난 시간에 이어서 개발자 로드맵에 대해서 계속 이야기 해볼까요?

지난 시간에는 JSP 모델1을 개선한 모델2까지에서 추출한 로드맵을 그려보았습니다. 바로 아래와 같죠?

[JSP 모델2 방식에서 추가된 개발자 로드맵]

자, 그런데 JSP를 사용해보신 분들이라면 다들 알고 계시겠지만 JSP에는 한가지 문제점이 있습니다. 사실 문제점이라기 보다는 JSP 등의 서버 사이드 언어를 사용하면 당연시 여기던 것이었는데요. 저희는 아래와 같은 TODO 애플리케이션을 만들고 있습니다.

[TODO 애플리케이션]

그림과 같이 할일과 날짜를 입력한 후 [등록] 버튼을 클릭하게 되면 할일 데이터를 서버로 전송하게 되는데요. 이때 화면이 깜빡 거리는것을 볼 수 있습니다. 깜빡임의 이유는 [등록] 버튼을 클릭하게 되면 서버에 데이터를 전송한 후, 서버에서 todo_model1.jsp로 다시 포워딩을 시키면서 화면이 바뀌게 되기 때문입니다. 이해 되셨죠? 

TODO 애플리케이션의 경우 서버에서 처리하는 시간이 얼마 되지 않기 때문에 잠시 깜빡거리겠지만 실무에서 많은 데이터를 처리할 경우에는 [등록] 버튼을 누른후에도 한참을 화면이 바뀌지 않거나 화면이 바뀌고 난 후에 서버에서 처리가 끝날때까지 브라우저에서 한참 동안 흰색 화면만 표시되는 경우도 있다는걸 아시는분들은 아실겁니다.

이렇게 페이지 전체를 refresh 하게되면 사용자들은 서버의 처리가 끝날때까지 아무것도 하지 못한채 기다려야 하죠. 이런 문제점을 개선하기 위해서 나온 기술이 바로 Ajax(Asynchronous Javascript and XML) 기술입니다. 

Ajax 기술을 통해 페이지 전체를 refresh 하지 않고, 페이지의 일부분에 표시되는 데이터를 서버측으로 부터 받아서 화면의 깜빡임 없이 데이터를 갱신하는것이죠. Ajax 기술로 인해 페이지의 특정 부분의 데이터 또는 UI만 갱신 되므로 페이지 전체가 refresh 될때까지 기다릴 필요가 없게 되었습니다. 

JSP가 처음 등장할 당시 클라이언트측에 표시되는 UI 화면을 구성하는 HTML + Javascript + CSS 소스코드들이 서버측 소스들과 함께 서버측에 위치하는 경우가 많았는데 Ajax 기술이 등장함으로 인해서 슬슬 HTML + Javascript + CSS 등의 소스 코드들은 웹서버에 위치시키고 서버측에는 순수하게 서버측 언어로 구성된 소스 코드들만 위치 시키는 소위 말하는 Front-end와 Back-end로 역할 구분을 하게됩니다.

자기 역할에 충실할 수 있도록 구성되는것은 어찌보면 너무나 당연한것이라고 볼 수 있는건데 말이죠. 

자, 그럼  HTML + Javascript + CSS로 구성된 Front-end 의 소스 코드를 보시겠습니다. Back-end 소스 코드는 여전히 서블릿으로 구성되어 있으므로 손대지 않겠습니다.

 
    
    
    
    


    
TO DO 등록
    

        

            
            
            
        
    
    

        
TO DO List
        

            

            

                
todo name
todo date
            
            

            

            
할 일이 없습니다.
            
        
    

[front_javascript.html]

26번 라인부터 45번 라인까지가 Ajax 기술을 이용해 Back-end 쪽에 할일 데이터를 전송하고 응답으로 할일 목록 데이터를 전송 받는 부분입니다. 조금 복잡해 보이지 않나요? 

어쨌든 여기서 저희는 로드맵에 하나의 기술을 더 추가할 수 있게되었네요.^^ 바로 아래와 같겠죠?

[Ajax 기술이 추가된 개발자 로드맵]

개발자 로드맵에 Ajax 기술이 추가되었습니다. ^^; 

사실 요즘에는 Javascript로 Ajax 기술을 직접적으로 사용하는일은 많지 않습니다. 소스 코드를 보시면 아시겠지만 처음 보는 분들한테는 소스코드가 결코 단순하지는 않습니다. 

그럼에도 불구하고 Ajax 기술을 로드맵에 포함시킨것은 순수 Javascript의 Ajax 기술을 사용하라는 의미는 아니고 최소한 Ajax의 원리는 이해를 해야한다는 의미에서 로드맵에 포함을 시킨거였습니다.

그럼, 다음 시간에는 순수 Javascript의 Ajax 기술의 복잡함을 극복하도록 Front-end 측 소스 코드를 개선해 보도록 하겠습니다.

모두들 즐거운 불금 보내시고 저는 이만 다른 공부를 좀 해야겠습니다. 그럼 다음시간에 뵐게요~

• [ Kevin의 알기 쉬운 Java 개발자 로드맵 이야기 ] 인프런 강의 바로가기