ㄱ 부터 ㅎ 까지

글로벌 스타일링 css 를 작성하면 공통적으로 적용할 reset style, global style 등이 있을겁니다. styled jsx에서는 scoped 된 스타일 작성말고 global한 스타일을 적용할수 있습니다. 놀랍게도 글로벌 스타일링을 아주 간단하게 작성할 수 있습니다. 다음과 같이 styled jsx 태그에 global 프로퍼티를 추가해주면 됩니다. export default function Home() { return ( hello ); } 그럼 다음과 같이 NavBar 안에 있는 a 태그에 white 색상이 적용이됩니다. 이것조차 scoped 된 스타일링 Home 컴포넌트인 index 페이지에서 만든 styled jsx global css는 인덱스 페이지에서는 적용이 되었지만, About ..

노마드코더님의 강의로 공부를 시작했습니다. 전체적인 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를 구현하려면? 우선 드래그와 함께 돌아가는 물체를 구현하기 이전에 드래그를 구현하는 방법에 대해서 생각해봅니다. 무언가를..

웹 개발을 하면서 주로 로컬 환경에서 테스트를 하게 됩니다. 로컬 환경에서 개발을 할 때 다른 외부 접근을 하도록 하는 일이 필요할 때가 있습니다. 그럴 때 외부에서 접근을 편하게 해주는 도구가 있습니다. Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels. 해석 : Ngrok은 NAT 및 방화벽 뒤에 있는 로컬 서버를 보안 터널을 통해 공용 인터넷에 노출합니다. Ngrok의 공식 문서에는 위와 같이 설명이 작성되어 있습니다. 즉 네트워크 환경 설정을 따로 해줄 필요 없이 로컬에서 실행되고 있는 서버를 외부에서 접근가능하도록 해줍니다. Ngrok 공식 ..