전체 글
-
렌더링 최적화 방법 - 초기 렌더링 최적화개발자 이야기 2021. 6. 28. 10:49
프론트엔드 성능 최적화 = 로딩 최적화 + 렌더링 최적화 성능 최적화를 통해 빠른 로딩 속도가 구현된다면 사용성 개선과 더불어 사업지표 향상에도 도움된다. 이번 포스트에서는 로딩 최적화와 렌더링 최적화 중에서도 렌더링 최적화를 소개하려 한다. 렌더링 최적화는 크게 초기 렌더링 최적화와 렌더링 업데이트 최적화로 나뉘는데, 이 중 '초기 렌더링 최적화'에 대해서 정리해 보았다. 초기 렌더링 최적화 방법 Critical Rendering Path 최적화 Critical Rendering Path(중요 렌더링 경로, CRP) 브라우저가 페이지의 초기 출력을 위해 실행해야 하는 순서(브라우저가 HTML, CSS, Javascipt를 화면에 픽셀로 변화하는 일련의 단계)로, 이를 최적화하는 것은 렌더링 성능을 향상..
-
브라우저 렌더링개발자 이야기 2021. 6. 25. 20:09
렌더링이란? HTML, CSS, JavaScript 등 개발자가 작성한 문서를 *브라우저에서 그래픽 형태로 출력하는 과정을 말한다. 대부분의 브라우저는 렌더링을 하는 렌더링 엔진을 가지고 있다. 크롬 : 블링크(Blink) 사파리 : 웹킷(Webkit) 파이어폭스 : 게코(Gecko) *브라우저 월드 와이드 웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어 주요 역할 사용자가 입력한 웹페이지, 이미지, 동영상 등의 자원을 서버에게 요청 서버로부터 전달 받은 자원을 화면에 출력 HTML, CSS는 브라우저에서 렌더링 하는데 있어서 필요한 전부다. 그렇다면 자바스크립트는? 자바스크립트는 HTML 태그를 동적으로 움직이게 만들어 주는 역할을 하는 프로그래밍 언어다. 브라우저 구성 요소(Brows..
-
[VSCode] html 확장자가 인식되지 않을 때 해결 방법개발자 이야기/VSCode 2021. 6. 22. 11:51
리액트 위주의 프로젝트들을 마친 후, 오랜만에 바닐라 자바스크립트만으로 프로젝트를 진행하기 위해 새로운 index.html 파일을 생성했다. 그런데 html 파일을 인식하지 못하고 django로 인식하여 파일이 생성되는 것이다. 적잖이 당황하여 구글링해 보았다. 1. Settings 2. files associations 검색 > Add Item 클릭 > Item : *.html / Value : html 참고 자료 [VSCode] html 확장자 인식 안 되는 문제 1) 위와 같이 html 확장자가 django와 같은 다른 확장자로 인식되는 문제의 경우 오른쪽 하단의 톱니모양 > Settings을 눌러준다. (확장자별 아이콘 위와 같이 바꾸는 법) 2) files associations 검색 후 Add..
-
WIL_09 : "OKU"_실전 프로젝트개발자 이야기/Weekly I Learned(WIL) 2021. 5. 2. 23:58
드디어 항해99의 꽃이라 할 수 있는 실전 프로젝트를 시작했다. 팀을 이루어 5주 후 실제 서비스를 배포하여 사람들의 반응을 살펴보게 된다. 이번에 진행하게 된 서비스의 이름은 'OKU(오쿠)'다. 'OKU'는 오타쿠(덕질) 경매 서비스다. 즉, 주류 문화가 아닌 덕질 문화가 활발히 이루어지는 플랫폼 역할을 맡게 된다. 브랜드 키워드는 '취향 존중'이다. 'OKU'란 네이밍에도 오타쿠들의 옥션 사이트란 의미와 'It's OK' 취향 존중이란 의미 두 가지를 내포하고 있다. 우리 팀의 디자이너분들이 만들어주신 마음에 쏙 드는 로고들이다. 디자인 뿐만이 아닌 브랜딩까지 맡아 주셔서 서비스 완성도가 높아지게 되었다. 서비스 개발을 시작한지 1주가 지난 지금 메인페이지, 로그인/회원가입, 상품 상세페이지, 상품..
-
WIL_08 : "Movie Book"_미니 프로젝트_3개발자 이야기/Weekly I Learned(WIL) 2021. 4. 25. 13:18
미니 프로젝트를 완성했다. 점점 프로젝트의 완성도가 높아지는 걸 보니 코딩에 대한 재미가 더욱 커져만 간다. 이번 미니 프로젝트의 기획의도는 내가 보고 싶은 영화나 기억하고 싶은 영화를 나만의 영화 리스트 보관함에 담아 관리할 수 있는 서비스를 만들어 보는 것이었다. 지금까지 배운 로그인&회원가입 기능과 더불어 CRUD 기능 구현을 복습하는 차원에서 기획한 프로젝트다. 위 이미지는 메인페이지로, 오늘의 영화와 누구누구의 영화 리스트는 새로고침이 될 때마다 별점을 기준으로 랜덤하게 보여준다. 영화 상세페이지에서는 해당 영화의 간단한 정보와 '+ 내 리스트에 담기' 버튼, 영화 관련 댓글을 확인할 수 있다. '+ 내 리스트에 담기' 버튼을 누르면 로그인한 유저에 한하여 내 영화 리스트에 담을 수 있다. 그 ..
-
WIL_07 : "Movie Book"_미니 프로젝트_2개발자 이야기/Weekly I Learned(WIL) 2021. 4. 18. 21:39
"Movie Book"을 만들기 시작한지 벌써 1주가 흘렀다. 클론 코딩 때의 삽질이 빛을 발하기 시작했는지.. 로그인/회원가입 및 CRUD 기능들의 구현에 속도가 붙기 시작했다. 왼쪽 디자인 예시를 기반으로 비슷하게 구현하려 노력했다. 다른 사람들의 영화 평점 및 리뷰들을 살펴볼 수 있도록 하여 다음 영화 시청 고민을 덜어준다는 기획의도를 완성시키기 위해 별점을 포함한 리뷰 작성 기능도 추가로 구현해 보았다. 사실... 저 작은 별점이 그렇게 어려운지 몰랐는데... 5점이 아닌 10점을 꼭 만들어 내리라는 똥고집이 나를 이렇게나 힘들게 할 줄은.. 하지만 구현해냈을 땐 어느 때보다도 전율이...ㅋㅋㅋ 왼쪽의 메인 페이지는 크게 '오늘의 영화'와 회원들 각자의 '내 영화 리스트'로 나뉜다. '오늘의 영화..
-
WIL_06 : "Movie Book"_미니 프로젝트개발자 이야기/Weekly I Learned(WIL) 2021. 4. 11. 12:32
지난 주에 진행했던 클론 코딩을 마치면서 너무 힘들었지만 힘든 만큼 성장했다는 걸 느낄 수 있었다. 이번 주에 새롭게 시작된 2주 간의 미니 프로젝트에서는 클론 코딩에서 배우게 된 내용들을 복습 차원에서 최대한 활용하고자 팀원들과의 의견 조율 끝에 "Movie Book" 프로젝트를 기획했다. "Movie Book"은 내가 보고 싶은 영화나 기억하고 싶은 영화를 나만의 영화 리스트 보관함에 담아 관리하는 서비스다. 내가 아닌 다른 사람들의 영화 평점 및 리뷰들 또한 살펴볼 수 있으며, 이를 통해 다음 영화 시청 고민을 해결하는데 도움을 줄 수 있다. 앞서 언급했듯이 2주 후에 진행될 실전 프로젝트를 앞두고 지금까지 항해99에서 배운 것들을 다시 익혀보기 위해 로그인/회원가입 및 CRUD의 구현을 기본 기능..
-
"Movie Book"카테고리 없음 2021. 4. 9. 20:20
프로젝트 제목 - Movie Book 기획의도 내가 보고 싶은 영화나 기억하고 싶은 영화를 나만의 영화 리스트 보관함에 담아 관리하는 서비스입니다. 내가 아닌 다른 사람들의 영화 평점 및 리뷰들 또한 살펴볼 수 있으며, 이를 통해 다음 영화 시청 고민을 해결하는데 도움을 줄 수 있습니다. 더불어 2주 후에 진행될 실전 프로젝트를 앞두고 지금까지 항해99에서 배운 것들을 다시 익혀보기 위해 기본 기능들을 포함시키는데에 집중하였습니다. 와이어프레임 개발 해야 하는 기능들 페이지 기능 API URL Method request (가져 갈 데이터) response (서버로부터 받아올 데이터) 메인 평점순 영화 목록 가져오기(10개정도) /api/movies GET { "ok": true, "result": [ {..