프로그래밍 공부하기

https://www.youtube.com/watch?v=F_vBAbjj4Pk Web Server vs WAS 1 https://www.youtube.com/watch?v=NyhbNtOq0Bc Web Server vs WAS 2 Web Server와 WAS의 차이가 궁금해져서 위 영상들을 찾아보게 되었다. 미리 정리하자면 Web Server와 WAS는 상황에 따라 변하는 정보를 제공할 수 있는가 라는 관점에서 차이가 있다. 1. Web Server Web: 인터넷을 기반으로한 정보를 공유/검색할 수 있게 하는 서비스 - URL(주소), HTTP(통신규칙), HTML(내용)으로 구성된다. Server: 클라이언트에게 네트워크를 통해 정보/서비스를 제공하는 컴퓨터 시스템 Web Server: 인터넷을 기반으..

1. HTTP 1.1 HTTP는 인터넷에서 문서를 교환하기 위하여 사용되는 통신규약(Protocol)으로, tcp를 사용한다. 과거 HTTP 0.9에서는 GET요청뿐이었으며, HTML 문서만 주고 받았다. HTTP 1.0에서는 헤더와 응답코드가 생겼으며, POST, HEAD 메소드가 생겼다. 헤더 'Content-Type'로 HTML 파일 이외의 다른 문서들도 전송이 가능해지고, 응답코드로 성공과 실패를 바로 확인할 수 있게 된 것이다. 그러나 같은 요청을 여러 번 하더라도 매번 새로운 연결을 하므로 성능이 저하되고, 헤더가 중복되므로 서버 부하 비용이 크다는 문제가 있었다. HTTP 1.1은 OPTIONS, PUT, DELETE, TRACE 메소드가 추가되었으며, Accept(클라이언트의 사용가능 미디..

https://www.youtube.com/watch?v=fMunhPQPZA4 영상1. UI/UX 차이 https://www.youtube.com/watch?v=GR375Na17hU 영상2. UX 디자인 과정 나는 개발자가 개발만 하는 것이 전부는 아니라고 생각한다. 개발자는 팀의 일원으로서 공동의 목표(제품으로 수익창출)를 위해 다른 팀과도 의견을 나누고 협업해나가야 한다. 여러 사람이 협업을 하는 이유가 무엇일까? 분업이라는 측면도 중요하지만 의견을 나누면서 혼자서는 발견하지 못하는 새로운 아이디어를 발견하고 발전시킬 수 있기 때문이라 생각한다. 기능 요구사항에 대해 기능은 구현했지만 UX를 해치게 된다면 무슨 소용일까? 혹은 UX에 대한 이해를 바탕으로 구현이 불가능한 요구사항에 대해 UX를 해치지..

Redis에 대해 소개하는 영상이다. 나는 평소 'Redis는 캐시로 사용되는 데이터베이스?', '어떻게 이렇게 빠른 속도가 나올 수 있을까?' 와 같은 막연한 생각을 갖고 있었고, 위 영상을 통해 이러한 궁금점들을 어느정도 해결할 수 있었다. 1. Redis(Remote Dictionary server) Redis는 외부에있는 Dictionary 구조의 서버라는 의미이다. 이 때 Dictionary란 key-value의 쌍으로 된 데이터 구조를 의미한다. Redis는 기본적으로 key를 입력하면 그에 해당하는 value(데이터)를 리턴하는 구조인 것이다. 2. 다양한 자료구조 지원 [Redis의 자료구조] string: 키 하나에 문자열을 저장한다. list: Linked List set: 순서가 보장..

2019년 FE 프레임워크를 배우는 기분(FE 인싸들이라면 알고 있어야 하는 프레임워크 기술들) NAVER Engineering tv.naver.com 모던 프론트엔드 개발에서 기본적으로 알고 있어야 하는 개념 혹은 모던 프레임워크들의 특징에 대해 한 번씩 짚고 넘어갈 수 있는 영상이다. 또한 새로운 기술에대한 교훈을 주는 영상이기도 하다. 1. 프레임워크의 분류 프레임워크는 얼마 만큼의 작업영역을 프레임워크가 처리하는지에 따라 분류할 수 있다. React: Small Scope >프레임워크가 비교적 적은 영역을 처리한다. >단순한 컨셉과 유연성 -> 활발한 생태계 >작은 메인터넌스 영역(개발자가 작은 단위로 개발/유지보수 가능) -> 개발팀이 새로운 아이디어 구현에 집중하게함 -단순한 컨셉은 오히려 복..

JavaScript Bundle Diet 웹사이트 기능이 많아짐에 따라 점점 커지는 JavaScript Bundle Size. 웹사이트 속도는 느려지고, 잠재 고객을 잃을 수도 있습니다. 라이브러리를 사용하는 그리고 제공하는 관점에서 Bundle Size가 커질 toss.im 웹 페이지 로딩속도를 줄이기 위한 방법 중 하나는 JS 번들의 크기를 줄이는 것이다. 위 영상에서는 Toss에서 어떻게 번들을 최적화 하는지 엿볼 수 있었다. 1. 번들 분석툴 번들 최적화에 앞서 번들의 상태를 알아볼 수 있는 번들 분석 도구를 선택해야 한다. 나는 Webpack Bundle Analyzer만 사용해 보았는데 위 영상에서도 bundle analyzer를 추천한다. 각 도구의 특징은 다음과 같다. Webpack Ana..

성능이슈를 맞닥드렸을 때 어떤 생각을 갖고 해결해나가야하는가에 관한 내용이다. 성능개선을 어떻게 시작하고 무엇을 고려해야할지 큰 그림을 어떻게 그려야할지 감을 잡게 해주는 강연이었다. 1. 성능 분석가의 관심사 서버 성능 분석가: 서버가 얼마나 많은 요청을 처리할 수 있는가(Transition Per Seconds) 사용자 입력에 얼마나 빠르게 반응할 수 있는가(Loading An Interaction) 초기 로딩 속도: 얼마나 초기 페이지를 빠르게 볼 수 있는가 인터렉션 속도: 애니메이션의 매끄러운 동작, 사용자 입력 시 버벅거림의 정도 2. 성능 개선 과정 1) 대상 선정하기 성능 개선을 했을 때 사용자의 만족도가 가장 올라갈 화면을 찾아 개선하는 것이 가장 효율적이다. 따라서 서비스에서 사용자가 가..

새로운 CSS 스펙에 대해 소개하는 영상이다. 최소 1년 전 영상임을 감안하자. 1. scroll-snap 기존 스크롤은 정밀도가 부족해서 스크롤 휠을 내렸을 때 애매한 위치에 멈춰있는 경우가 있고, 스크롤 위치에 따라 애니메이션이 보이도록 구현한 경우 사용자가 애니메이션을 못 볼수도 있었다. scroll-snap은 사용자가 스크롤조작을 마쳤을 때 어느 위치에 스크롤이 위치할지 오프셋이 조절 가능하다. 이를 이용하면 JavaScript 없이 캐러셀 UI를 만들 수 있다. 2. focus:within 기존 드랍다운메뉴는 마우스를 hover하면 하위메뉴가 펼쳐지지만 키보드(focus)로는 조작이 되지 않았다. 부모요소가 포커스를 잡고있을 때 하위메뉴를 보여주기 위해선 부모메뉴에서 이동하는 포커스 흐름을 잃고..

NHN은 이렇게 한다 소프트웨어 품질관리 『NHN은 이렇게 한다! 소프트웨어 품질관리』는 소프트웨어 개발의 전 과정에서 효과적으로 품질을 측정하고 향상시키기 위한 기술을 담고 있다. 눈에 보이지 않는 소프트웨어의 품질을 측정한 book.naver.com 프로젝트를 앞두고 협업에 대해 관심이 많아져 이전 도서관에서 빌렸던 'NHN은 이렇게한다 소프트웨어 품질관리' 라는 책을 읽게 되었다. NHN이 워낙 큰 기업이다 보니 책의 내용은 어느정도 규모가 있는 팀에게 도움이 될 내용이었으며, 책 자체가 조금 오래되어서 현재 사용할 수 없는 도구들을 소개하는 경우도 있어 솔직히 당장 소개된 도구를 쓸 수는 없을 것 같다. 그러나 SW 품질관리를 통해 이러한 툴들이 있구나를 알고 필요할 때 이런 도구들을 찾아서 도입..

1. MobX 데이터 처리속도가 빠르며, 쉽게 비동기를 처리할 수 있는 상태관리 도구이다. state를 관찰(Observable)하다가 변경이 되면 반응(Render)한다는 개념을 기반으로 동작하며, 자바 친화적인 표현법이 특징이다. 그러나 MobX의 데이터는 반응형으로 구성되어야 하기 때문에 프론트 엔드와 백엔드 간 데이터교환을 위해 Serialize-Deserialize 해야하는 단점이 있다. 데이터가 복잡한 구조일 수록 데이터 변환 작업에서 장애가 발생할 가능성이 커질 것이다. 또한 자체 엔진을 통해 데이터가 자동적으로 처리되므로 에러 발생 시 추적에 어려움이 있다. 2. FLUX FLUX란 데이터를 단방향으로 처리하자는 컨셉이다. FLUX에서 데이터는 항상 원본이 존재하고 원본을 하위 요소들에게 ..