개발블로그

이전 글인 https://quail-han.tistory.com/21를 먼저 보고 오시는 것이 좋습니다 :) 도착지로 가는 길 - 2 첫 번째 길에서는 transform을 이용하여 무한 캐러셀을 구현하는 방법에 대해 설명 드렸습니다. 이번에는 scroll을 통해 구현해 보고자 합니다. 이번 글의 핵심 키워드는 처음 보실 수도 있는 css 속성인 scroll-snap-type 과 scroll-behavior 를 사용합니다. 잠깐 보시고 글을 읽으시는 것을 적극 추천드립니다. MDN scroll-snap-type: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type MDN scroll-behavior: https://developer.mozi..

도착지 이번 우아한테크캠프 3기 네번째 프로젝트의 요구사항 중 하나인 Carousel 구현 및 카테고리별 상품 리스트 섹션을 개발하면서 알게 된 점을 공유하려고 합니다. Carousel Requirements 먼저 Craousel의 요구사항을 설명드리겠습니다. 웹 페이지에서 흔하게 볼 수 있는 무한 캐러셀 기능입니다. 지정한 term마다 다음 메뉴로 슬라이드되어 보여지며, 마지막 페이지 이후에는 다시 첫 번째 페이지가 등장하여 메뉴가 무한히 있는 것 처럼 보입니다. 추가로 사용자의 액션을 고려해야 합니다. 사용자는 스와이핑 액션을 통하여 캐러셀의 슬라이드를 왼쪽, 오른쪽으로 조정할 수 있습니다. 도착지로 가는 길 - 1 Carousel을 구현하는 방법에는 정말 여러가지가 있을 텐데요. 처음의 저는 이전의..

아는 만큼 보인다. 이번 우아한테크캠프 3기 두번째 프로젝트의 요구사항 중 하나인 Drag & Drop을 진행하면서 가장 많이 느꼈던 말입니다. 실력이 출중한 팀원의 도움을 받아 구현을 성공한, 제 이야기를 하며 하나씩 설명드리고자 합니다. Drag & Drop Requirements 먼저 drag & drop의 요구사항을 먼저 설명드리죠. 카드를 누르면, 마우스를 따라다니는 반투명한 카드가 하나 생기며[ 1 ], 기존에 카드는 반투명해집니다[ 2 ]. 2번 카드는 현재 drag중인 1번 카드를 drop했을 때 놓일 위치를 간접적으로 보여줍니다. 따라서 마우스 위치가 변함에 따라 변화합니다. 같은 컬럼 뿐 아니라, 다른 컬럼으로도 카드를 옮길 수 있습니다. 모르기에 보이지 않는 길 dnd를 구현하는 방법..

Source Map 기존 코드에서 에러가 나도록 새 codeline을 추가하였습니다. 원본 소스코드에서는 7번 line에서 에러가 발생하였지만, 크롬 개발자도구는 28번째 줄이라고 말해줍니다. 이는 웹팩이 여러 파일 및 소스코드를 빌드하는 과정에서 여러 코드들이 추가되기 때문인데요, 프로젝트가 커지고 코드가 복잡해질수록 에러가 난 곳을 정확하게 찾기 힘듦니다. 이를 해결해 주는 것이 Source map인데요, 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. //webpack.config.js module.exports = { ..., devtool: "cheap-module-eval-source-map", ... } souremap을 추가하게 되면, ..

문제 정의 Node, Express 를 활용하여 서버를 구성하고, 페이지 접속 시 서버에서 .pug파일을 렌더링하는 구조의 프로젝트를 진행하고 있었습니다. tag에 담겨 client측에 serving 될 .js 파일에서 import 구문을 실행할 수 없다는 에러가 발생합니다. 문제 해결하기 이를 위하여 type="module"을 추가하였습니다. 다른 프로젝트에서는 잘 동작하던 module type이 제 프로젝트에서 동작하지 않습니다... Error: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for mod..

Cookie-parser 요청된 쿠키를 쉽게 추출할 수 있도록 해주는 미들웨어 cookie값 읽어들이기 cookie-parser 등록 // app에서 cookieParser를 사용하겠다! app.use(cookieParser()); app.get('/', function(req, res) { // cookieParser를 통해 쉽게 cookie값을 추출 할 수 있다. console.log('Cookies: ', req.cookies); }) 쿠키를 담아 요청 보내기 curl http://127.0.0.1:8080 --cookie "foo=bar;bar=baz" 출력된 cookie Cookies: { foo: 'bar', bar: 'baz' } 브라우저에 쿠키 생성하기 res.cookie('key', 'v..