웹 개발 검색 결과
15 개의 검색 결과가 있습니다.
웹 개발/Frontend

이미지 슬라이드 UI 라이브러리 slick

문서 https://www.npmjs.com/package/react-slick react-slick React port of slick carousel. Latest version: 0.29.0, last published: a year ago. Start using react-slick in your project by running `npm i react-slick`. There are 1923 other projects in the npm registry using react-slick. www.npmjs.com https://react-slick.neostack.com/ Neostack The last react carousel you will ever need react-slick.neosta..

2023. 10. 2. 16:04
웹 개발/Frontend

settimeout 사용시 URL 이동 후에도 함수가 실행됨

A URL에서 settimeout으로 걸어 놓은 함수가 실행되기 전에, A외의 다른 URL로 이동하는 경우에도 settimeout 함수가 실행된다. 이때 A URL에 component들과 관련 있는 코드가 함수에 있는 경우 오류가 발생한다. 텍스트 게임 사이트 개발 중 발생한 오류의 원인이어서 메모한다.

2023. 9. 3. 17:56
웹 개발/Frontend

... operation (js 점 세 개 기능)

졸업 작품에서 twine이라는 오픈소스를 뜯어 고치는 중 발견한 ... operation export const CodeArea: React.FC = props => { const {fontFamily, fontScale, label, ...otherProps} = props; //중간 생력 return ( //중간 생략 ) } 위와 같은 코드였다. 여기서 ...otherProps는 앞에 있는 props들의 묶음 역할을 한다고 볼 수 있다. 코드의 가독성을 위한 기능으로 CodeMirror에 {...otherProps} 는 곧 위와 같은 기능을 한다고 한다. 출처 https://stackoverflow.com/questions/31048953/what-are-these-three-dots-in-react..

2023. 6. 1. 23:53
웹 개발/Frontend

유저 로그인 정보 저장하고 활용하기

겉핥기 식으로 웹을 만들었던 예전과 다르게 유저 정보를 세션에 저장하고 활용해보려고 한다. 1. 세션 관련 함수 구현하기 abstract class SessionStorage { abstract setItem(key:string, value:T) :void; abstract getItem(key:string) : string; abstract clearItem(key:string): void; } class SessionStorageAPI extends SessionStorage { setItem(key:string, value:T) { //value에 무슨 값이 들어오던 string으로 변환 후 저장 window.sessionStorage.setItem(key, JSON.stringify(value))..

2023. 4. 25. 12:08
웹 개발/Frontend

게임 장르 선택 창 만들기

(구현 목표) 게임 dark 앤 darker의 게임 선택 창과 비슷한 UI를 개발하자 (구현 해야 할 것) 1. 게임 모드 창 component 분리 및 띄우기 애니메이션 2. 요소의 border에 이미지를 넣어서 디자인해보기 3. 버튼 디자인 4. 장르 선택 버튼 간격에 맞추어 배치 5. 장르 선택 버튼 React 컴포넌트로 리팩토링하기 (구현 과정 1번 완) 게임 선택 창 component 의 기본 구조를 만든건 다른 팀원. 디자인적인 부분을 수정해달라고 부탁 받아서 수정하는 김에 애니메이션을 추가하고 세련되지 않은 리액트 코드 부분을 수정해줄 생각이다. (구현 과정 2번 완) border에 이미지를 넣는건 패턴을 넣는 느낌이라 이미지 자체를 넣는건 실패.(추후 더 시도해봐야할듯) 그냥 svg로 선을..

2023. 4. 4. 00:41
웹 개발/Frontend

다른 component로 이메일 주소 넘기기

(구현 목표) 위와 같이 이메일 주소를 입력하면 다음 회원가입 페이지에서 이메일이 입력되어있는 상태로 회원가입을 진행할 수 있도록 하는 기능을 구현하려고 한다. 다만 위 예시는 다른 페이지로 넘어갔을 때 이메일이 저장되어 있지만, 나는 회원 가입 양식 component를 띄울 예정이므로, 띄워진 component에 이메일 정보를 넘길 수 있도록 코드를 짜야한다. (최종 구현) (구현 과정) 익숙하지 않은 타입스크립트에 + 리액트로 기능을 구현하자니 애를 많이 먹었다. 처음 input 창에 입력하는 이메일을 onChange로 받고 싶지 않아서 createRef를 사용하여 input의 value를 가져왔다. 타입 스크립트에서는 input에 createRef를 사용하여 값을 불러올 때 주의해야 할 사항이 있는..

2023. 3. 31. 15:05