ㄱ 부터 ㅎ 까지

공부 시작 배경 그동안 웹 프론트엔드 개발을 하면서 결과물을 보여주는 웹 브라우저가 어떻게 동작하는지, 그 원리에 대해서 무심하게 지나치는 경우가 많았는데요. 제가 이 일을 하면서 "원리조차 모르고 있으면서 제대로 된 개발을 할 수 또는 하고 있을까?" 라는 생각이 들 때즘 "차근차근 공부해 나가야겠다" 라는 생각을 했습니다. 공부는 " 모던 자바스크립트 Deep Dive "라는 책을 바탕으로 진행하였습니다. 브라우저의 렌더링 과정 브라우저는 간단하게는 HTML, CSS, 자바스크립트 문서를 파싱하여 브라우저에 렌더링하는 순서대로 브라우저에 페이지를 띄워줍니다. 좀 더 세부적으로 과정을 살펴보자면 다음과 같은 순서입니다. 1. 브라우저의 렌더링에 필요한 리소스인 HTML, CSS, Javascript, ..

노마드코더님의 강의로 공부를 시작했습니다. 전체적인 next js의 원리와 사용법을 익힌후 심화해서 공부할 계획입니다. next js 설치 설치하고 싶은 폴더에서 터미널 또는 cmd 창을 열어 다음 명령어를 입력해줍니다. 뒤에 --typescript를 붙이면 타입스크립트 프로젝트로 설치할 수 있습니다. // 1. 최신 버전 설치 npx create-next-app@latest // 타입스크립트와 함께 설치시 npx create-next-app@latest --typescript // 2. 프로젝트 이름 설정 What is your project named? 내 프로젝트 이름입력 next js 실행 성공적으로 설치가 되면 위와같이 해당경로의 폴더를 코드 에디터를 통해서 열어주고 package.json의 s..

HTML 삽입 미리보기할 수 없는 소스 위와 같이 마우스 클릭 또는 터치로 돌렸을때 돌아가는 인터랙션을 만들었습니다. 네이버 모바일 앱 브라우저의 그린닷이 위와 같은데 위와 같은 인터랙션을 구현해야할 일이 있어서 만들게 되었습니다. 방법 생각하기 1. 원형 중심의 좌표 구하기 2. 원형 중심을 기준으로 처음 클릭 지점과 포인트(마우스 움직임, 터치 움직임)의 사이 각도를 계산하기 3. 구한 각도를 바탕으로 원을 돌리고 마우스를 땔때 현재 돌아가 있는 각도 저장 4. 다시 돌릴때 이전에 저장되어 있는 각도를 더한 각도로 돌리기 5. 반대 방향으로 탭 네비게이션들의 각도를 돌리기 drag를 구현하려면? 우선 드래그와 함께 돌아가는 물체를 구현하기 이전에 드래그를 구현하는 방법에 대해서 생각해봅니다. 무언가를..