나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen slick slider 마우스 휠 스크롤 + 내부 콘텐츠 스크롤 by kimyangsun (@kimyangsun) on CodePen. slick 슬라이더에서 스크롤 기능을 추가한 예제입니다. 슬라이더 자체에 onwheel 이벤트를 사용하여 deltaY 값을 이용하여 슬라이드가 넘어가고 되돌아가는 기능을 구현한 상태입니다. 그리고 슬라이더 안에 스크롤이 있는 콘텐츠가 있는 경우도 넣어뒀는데 innerText에 stopPrapagation()을 줘서 상위요소의 스크롤이벤트가 적용되지 않도록 막아주었습니다. 여기서 추가로 추가해볼 수 있는 기능은 내부 콘텐츠의 스크롤이 최하단이나 최상단에 위치할때 slickPrev or slickNext로 슬라이드가 이동될 수 있도록 하는 부분이 있을 ..

2022. 1. 13.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen 이미지 팝업 커스텀 코드 (접근성 준수) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트를 이용한 이미지 팝업 만들기 자체 코드입니다. 라이브러리는 제이쿼리를 이용했고 자세한 코드는 위에 코드펜에 들어가서 확인하시면 됩니다. 포인트는 웹접근성 준수를 위해 키보드 접근성에 맞게 작업을 하였습니다. 즉, 키보드 탭을 누르면서도 팝업을 활성화 및 팝업창 닫기를 이용할 수 있도록 하였고 팝업창이 활성화되면 초점이 해당 팝업 내부로 이동됩니다. 그 후 x버튼을 누르게되면 팝업이 닫히면서 초점은 해당 이미지 팝업 목록으로 다시 되돌아갑니다.

2021. 12. 13.

코딩 기록/Node.js

백엔드 API 개발을 위한 node.js 를 시작해보려고 합니다. node.js의 사용을 더 편리하게 해주는 Express 프레임워크를 설치하여 이용하겠습니다. npm init 우선 해당 디렉토리에서 npm init으로 프로젝트를 시작하여 이름이나 버전, 설명등을 정해줍니다. 그러면 디렉토리에 package.json 파일이 생성됩니다. 다음으로 설치해주어야 하는것들이 있습니다. yarn add express yarn add -D typescript ts-node @types/node @types/express tsc-watch // 개발모드로 설치 설치가 완료되면 node_modeuls 디렉토리도 생성될거에요. 설치된것들 중에 ts-node는 타입스크립트를 실행주기 때문에 필요하고 tsc-watch는 저..

2021. 3. 9.

코딩 기록/리액트

리덕스 툴킷으로 리덕스 사가를 이용해보려고 합니다. 리액트 프로젝트를 하며 리덕스 툴킷을 이용하면 좋은 점은 액션 함수와 액션 타입들을 한번에 모아주는 createSlice가 있습니다. 이렇게 createSlice를 사용하며 필요한 기능을 구현할때 서버에서 데이터를 받아와야하는 경우에 Redux Thunk나 Redux Saga를 이용합니다. 리덕스 툴킷에 Redux Thunk는 createAsyncThunk라는 툴킷의 자체 기능이 있지만 Saga는 현재 시점에서 아직까지 그런 기능은 없어서 평소에 사용하는 Redux Saga를 그대로 적용시켜 사용해야 합니다. 이전 글에서 createSlice의 사용방법을 적었었습니다. 해당 링크는 Saga를 사용하지 않은 기본 상태관리 글입니다. kimyang-sun...

2021. 3. 8.

코딩 기록/자바스크립트

See the Pen 현재 날짜 표시하기 (JavaScript) by kimyangsun (@kimyangsun) on CodePen. new Date()를 이용하여 현재 시간을 추출해서 toLocaleDatestring() 을 사용하여 날짜를 상세히 표시해주었습니다. 리액트 프로젝트에서 게시글 작성이나 댓글작성을 하면서 구현하면서 작성시간을 표시해두려고 구현했었는데.. 얼마 후에 다시 구현하려고 하니까 살짝 까먹어서 그냥 정리해두기로 했습니다 😑.. 'en-US' 는 영어, 'ko-KR' 은 한글입니다. 위의 예제에는 날짜만 표시해두고 시간까지는 표시하지 않았지만 같은 방식으로 해주시면 될 것 같습니다. 밑에는 주요 옵션들입니다. year: 연도를 나타냄 - 'numeric'(예: 2020) - '2-..

2021. 3. 6.

코딩 기록/리액트

리액트 프로젝트를 진행하며 상태관리시에 프로젝트 규모가 작으면 Context API를 이용하고 그 외에 경우에는 Redux 또는 Mobx를 많이 사용하는것 같습니다. 리덕스는 액션 타입, 액션 실행함수, 리듀서 이렇게 만들어주고 관리하는 특성이 있어서 코드량이 많아진다는 단점이 있습니다. 그렇지만 Redux DevTools 등을 이용하여 상태변화를 하나하나 다 체크하고 확인할 수 있기 때문에 안정성은 높다는 평가가 많아요. 저는 리덕스의 Redux Toolkit이 리덕스의 코드를 확 줄여줘서 정말 편하다고 하길래 찾아봤습니다. 직접 테스트를 조금 해보니까 좀 많이 편한거 같아서 앞으로 자주 이용할 생각입니다. 리덕스 등 다른 필수 패키지가 다 설치되어있다는 가정하에 리덕스 툴킷을 설치해줍니다. yarn ..

2021. 3. 4.

코딩 기록/리액트

리액트로 회원가입과 같은 폼(Form)들을 만들기 위해 여러 고민을 한 결과 직접 하나하나 구현해서 할 수도 있겠지만 살짝 비효율적이라는 생각이 들어 라이브러리를 이용하여 구현했습니다. React Hook Form 라이브러리를 베이스로 하였고 디자인 ui는 Ant Desgin을 이용하였습니다. antd 자체에도 antd만의 Form 유효성 검사가 따로 있는것 같지만 저는 React Hook Form이 기능, 성능적으로 더 좋다고 생각하여 antd는 디자인 ui만 이용했습니다. https://react-hook-form.com/ Home React hook for form validation without the hassle react-hook-form.com ant.design/ Ant Design - ..

2021. 3. 4.

코딩 기록/타입스크립트

📌 - HTML - CSS - TypeScript 링크 https://kimyang-sun.github.io/memo-ts/ 설명 [메모 등록 및 삭제] - 링크 이미지, 유튜브 비디오, 직접 작성한 노트를 등록할 수 있습니다. - IMAGE, VIDEO, NOTE 세 개의 버튼을 통하여 등록할 수 있습니다. - 각각 메모의 우측 상단의 ❎ 버튼을 누르면 해당 메모가 삭제됩니다. [메모 드래그 앤 드롭] - 등록된 메모를 마우스로 드래그하여 옮길 수 있습니다. - HTML 드래그 앤 드롭 API를 이용하여 구현하였습니다.

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트로 큐(Queue) 기능을 구현해봤습니다. 큐는 FIFO로 First In First Out, 처음으로 들어온 데이터가 처음으로 나가는 구조입니다. // 큐 추상화 인터페이스 interface Queue { readonly size: number; enQueue(value: string): void; deQueue(): void; search(num: number): string; } // 추가될 노드 타입 생성 type QueueNode = { value: string; next?: QueueNode; } // 큐 클래스 class QueueImpl implements Queue { private _size: number = 0; // _size 값을 외부에서 접근하지 못하게 묶습니다. pr..

2021. 3. 4.