swanzzz 님의 블로그

네비게이션바를 디자인 하고 디바이스별로 화면을 구상해 보겠습니다.우선 기본적인 헤더를 디자인 해보겠습니다.위 그림처럼 좌측은 이미지를 우측은 네브아이템들을 배치하는 형식으로 디자인 해보겠습니다.1. html 구조 잡기 Home Link A Link B Link C 위 코드블럭 처럼 구조를 잡아줍니다.기본적인 헤더에 이미지와 네브 아이템들이 들어갈 것이고 각각의 로고와 네브 아이템은 클릭이 가능해야 합니다.따라서 위와 같은 형식으로 구조를 잡아줍니다.2. CSS 설정사실 구조만 잡아도 이미 반은 끝난거나 마찬가지 입니다.위와 같은 모습에서 네브 아이템들만 오른쪽으로 이동 후 네브 아이템에 CSS만 설정해 주면 되기 때문입니다.2-1. 네브 플로팅n..

무한스크롤이란?연속적인 스크롤을 제공하는 UI/UX 요소를 의미합니다.웹이나 앱에서 스크롤이 페이지의 끝에 도달했을 때, 자동으로 다음 데이터를 요청하여 받아오는 방식 으로 별도의 페이지 이동없이 데이터를 계속 요청하기에 자주 사용되는 기능으로 유튜브에서 화면 가장 아래로 이동 하였을 경우 잠시간의 로딩효과와 함께 새로운 데이터를 받아오는 데 이게 무한스크롤 이벤트를 활용한 것 입니다.구현우선 무한 스크롤을 구현하기 위해서는 API 통신이 필요하므로 간단한 예시를 위해 The Dog API를 이용하여 구현해 보겠습니다.Dog API 사이트에 접속하면 하나의 url 주소가 보이는데 이 주소에 GET 요청을 보내면 IMAGE에 있는 귀여운 강아지 그림을 받아볼 수 있습니다.1. API 통신 설정해당 url ..

React + Typescript 를 하기 위해서는 우선 프로젝트 생성 부터 주의해 주어야 합니다. React Docs 에 따라 npx create-react-app "프로젝트이름" --template typescript 로 bash 창이나 cmd 창에서 실행시키면 됩니다. 생성이 완료된 React + Typescript 프로젝트는 tsconfig.json 파일이 생성되는데 이 파일을 수정해 주어야 합니다. 해당 사진에서 target: es5 와 lib: [] 설정 부분이 보이는데 해당 부분을 수정해 주어야 합니다.현재 개발환경에서 많이 사용되는 ECMAscript는 6이니 es5 를 es6로 수정해주고 lib에도 es6를 추가해 줍니다. 이렇게 설정을 완료하였다면 React + Typescript의 시..

모듈 없이 JavaScript 와 CSS 만을 이용해서 react의 슬라이더 효과(cauousel) 효과를 구현해 보겠습니다.1. 기본셋팅 박스 4개를 준비하고 그 박스들을 감쌀 slider 와 그 slider를 감쌀 container를 준비해 줍니다.1.1 CSS 설정여기에 css를 이용하여 각각의 박스에 색상과 크기를 지정해 주겠습니다..box-1 { background-color: red; width: 300px; height: 300px;}.box-2 { background-color: blue; width: 300px; height: 300px;}.box-3 { background-color: green; wid..