swanzzz 님의 블로그

프론트엔드 개발을 실시하다 보면 이런식으로 타이핑 효과를 구현할 때가 있습니다. 그럴때 정확하게 타이핑 효과를 구현하는 방법에 대해 알아보겠습니다.1. 타이핑 텍스트 정하기우선 해당 타이핑 효과는 리액트에서 구현하였고 이를 위해서 타이핑할 글자를 먼저 작성해 주어야 합니다.const Home = () => { const text = "프론트엔드 개발자 SWAN`s 포트폴리오 입니다."; const [showText, setShowText] = useState(""); return ( {showText} )}export default Home;가장 기본구조 입니다.타이핑할 텍스트를 text로 설정해 주었습니다.전체를 컨테이너로 감싸주었습니다.2. 텍스..

보안 라우터 사용이유React로 웹페이지 개발을 진행하다 보면 로그인 보안처리가 필요한 웹페이지를 개발할 때가 옵니다.보통의 프론트엔드 개발자들은 페이지의 동작과정을 알기 때문에 주소에 직접 번호를 작성하거나 특정 글자를 작성하여 페이지 이동을 실시할 수 있습니다. 가장 간단한 예시로 꼬맨틀이 있습니다.꼬맨틀의 경우 단어 유사도를 이용해 해당 단어가 무엇인지 알아내는 간단한 게임인데 약간의 꼼수가 존재합니다. 여기서 주소 뒤에 1038이 적혀있는데 해당 숫자를 1큰 숫자로 바꾸면 다음날 정답 단어가 됩니다. 이렇게 주소에 특정 문자나 숫자를 직접 작성하여 페이지 이동을 하는 방법이 있는데, 개발 중인 웹페이지에서 허가되지 않은 사용자가 페이지에 접근하면 문제가 발생하기 때문에 이를 방지하기 위해 보안라우..

네비게이션바를 디자인 하고 디바이스별로 화면을 구상해 보겠습니다.우선 기본적인 헤더를 디자인 해보겠습니다.위 그림처럼 좌측은 이미지를 우측은 네브아이템들을 배치하는 형식으로 디자인 해보겠습니다.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..