주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

customPaging 옵션을 이용한 작업방식입니다. 슬라이드 2개로 페이징을 구현하려면 새로 작성한 글을 참고해주세요! 사진첩 작업을 하기위해 react-slick 라이브러리를 활용해보겠습니다. 그냥 slick을 쓴 경험은 있지만 react에서는 강의를 보고 예제 코드 만들어 본 이후 처음이네요.ㅎㅎ 라이브러리 설치를 먼저 해주시구요. npm i react-slick 대충 테스트해보기위해 slick 사이트에 있는 예제를 가져와서 간단히 뚝딱 만들어보겠습니다. 아래 사이트에서 docs를 확인해보세요. https://react-slick.neostack.com/ Neostack The last react carousel you will ever need react-slick.neostack.com 예제코드..

이쪽 분야는 거의 갓난아기 수준이라 강의에서 가르쳐준대로 진행했습니다. (따로 제가 검색해서 개선하거나 추가한 부분이 없다는 의미) 제가 만들고자한 테이블은 강의보다 단순해서리..ㅎㅎ; ++ back/app.js에서 라우터 연결할때 첫번째 인자 app.use('/guestbook', GuestbookRouter); 처럼 '/'가 있어야합니다. ++ back 폴더를 생성 front 폴더를 만들어 작업한 것처럼 root 폴더 하위에 back 폴더를 생성합니다. front 와는 별개로 서버를 돌리기 때문에 back 폴더에 들어가서 npm init을 해줍니다. npm init front 서버, back 서버 모두 run 시켜줘야 사이트를 정상 작동시킬 수 있습니다. express를 통해 라우팅을 진행 할 것이기..

기본 스티커 메모를 아시나요? 헤더 부분을 드래그하면 이동되는 것과 메모 입력하는 기능을 흉내내보았는데요. 제 사이트에는 딱 저 2가지 기능만 필요하여 저 부분만 작업했습니다! Memo.js import React, { useCallback, useRef, useState } from 'react'; import styled from 'styled-components'; const Wrap = styled.div` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; background: yellow; border: 1px solid #c0c0a4; box-sizing: border-box; `; c..

둘다 '없음'을 나타낼때 사용하고는 합니다. 의미는 같을 수 있으나 사용하는 목적을 정확히해야 혼란을 줄일 수 있습니다. undefined undefined는 사용자가 명시적으로 지정할 수도 있지만, 값이 존재하지 않을때 자바스크립트 엔진이 자동으로 부여하는 경우도 있습니다. 1) 값을 대입하지 않은 변수(데이터 영역의 주솟값이 없는 식별자)에 접근할때나 2) 객체 내부에 존재하지 않는 프로퍼티에 접근하려고할때, 3) return 문이 없거나 호출되지 않는 함수의 실행결과에서 자바스크립트 엔진은 undefine를 반환합니다. 1) 값을 대입하지 않았을 경우 var name; console.log(name); // undefined 2) 객체 내부에 존재하지 않는 프로퍼티에 접근 var person = {..