본문 바로가기

전체 글

(38)

#4. 캐로셀(Carousel) 구현하기 #4-0 들어가는 말 메인 홈페이지 상단영역에 들어갈 캐로셀 기능을 직접 자바스크립트로 기능을 만드려다가 react-slick 라이브러리를 이용해 구현해보았다. 처음 사용해보는 라이브러리였는데 다행히 잘 적용되어 기뻤당. #4-1 Carousel 만들기 (https://react-slick.neostack.com/docs/get-started) 1) 먼저 react-slick과 slick-carousel 설치하기 npm install react-slick npm install slick-carousel 2) Carousel.js 파일에 아래의 코드를 임폴트 하기 import Slider from 'react-slick'; import "slick-carousel/slick/slick.css"; impor..

#3. 모달창 구현( feat. 영역 밖 클릭 시 닫기) #3-0 들어가는 말 Header 영역을 작업하던 중 모달창 닫기 부분에서 잠시 막혔었다. 모달창 닫기 버튼이 따로 없고, 모달창 영역 밖을 클릭했을 시 모달창이 닫히는 구조였기 때문이다. 구현하기 쉬운 기능이라고 생각했는데 생각보다 조금 시간이 걸렸다. 그래도 해내었다는 것에 기쁨을 느꼈다. #3-1 useRef 이용하기 특정한 Element를 선택하고 싶을 때 자바스크립트로 getElementById나 querySelector 등을 사용하듯이, 리액트에선 어떻게 사용할 수 있을까? 정답은 useRef Hook 함수 사용하기! 모달창 영역 밖에 해당하는 부분을 useRef를 통해 선택한 후, 해당 Element가 클릭 되었을 때만 모달창이 닫히도록 이벤트를 주면 된다. *예시 코드 import Reac..

#2. 로그인 기능 개념잡기 #2-0 들어가는 말 내일의 집 프로젝트의 로그인 기능을 토큰방식으로 구현하기로 결정했다. 그래서 토큰방식이 어떤 것인지, 또 코드를 어떻게 짜야할지 검색 해보았다. 먼저 개념부터 이해해보자. #2-1 JWT (JSON Web Token) JWT는 클라이언트와 서버 간에 정보를 주고 받을 때 HTTP 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해 인증 처리하는 방식이다. 클라이언트와 서버 간의 인증 절차는 아래와 같다. 1) 클라이언트가 서버에 ID와 비밀번호를 보낸다. 2) 서버가 ID와 비밀번호를 검증하고 Access Token과 Refresh Token, Access Token의 만료시간을 반환해준다. 3) 클라이언트는 반환받은 Acc..

#1. 첫 프로젝트 시작과 준비 #1-0 들어가는 말 그동안 여러 강의들을 통해 HTML, CSS, JavaScript, React를 배웠다. 아직 완벽히 마스터 했다라고 말하긴 어렵지만, 그래도 그동안 열심히 공부했으니 이젠 나만의 프로젝트를 시작하여 진짜 내 것으로 만들어 보자! 나는 '사람들이 컴퓨터로 가장 많이 하는 게 무엇일까?'를 생각했을 때, 인터넷 검색, 게임, 그리고 쇼핑이라고 생각했다. 그래서 첫 프로젝트로 인테리어 쇼핑몰인 '오늘의 집' 사이트를 클론코딩 해보고자 한다. 기존에 '오늘의 집' 사이트는 크게 커뮤니티, 스토어, 인테리어 시공이란 주제로 나뉘는데 , 나는 이 중 스토어를 중심으로 메인 페이지, 상품 디테일 페이지, 로그인 페이지 등을 제작할 것이다. 나는 프론트 작업을 진행하고, 백엔드 작업은 친한 친구..

npm ERR! cb.apply is not a function npm 버전을 이것저것 뭐 만지다가 갑자기 에러가 발생했다. npm ERR! cb.apply is not a function 위 에러를 만났을 땐 C:\Users\user\AppData\Roaming 경로에 들어가 npm과 npm-cache 파일을 삭제해준다. (**경로는 조금 다를 순 있는데 아무튼 AppData 폴더를 찾으면 된다.) 아래의 코드를 순서대로 cmd 창에 입력한다(**나는 윈도우 사용자!) npm clean cache -force npm cache cleannpm cache clean --force 그 후 다시 npm을 설치한다. npm install 설치가 정상적으로 완료되었다면 npm -v를 입력하여 버전까지 확인하면 끝! ※위 내용은 해당 유튜브 영상을 보고 에러를 따라 고쳤습니다..

babel 실행 1. 터미널에 두개의 패키지를 실행시킨다. npm i -D @babel/core @babel/preset-env 2. 루트경로에 .babelrc.js 파일생성 후 아래의 코드 작성한다. module.export = { presets: ['@babel/preset-env'] } 3. package.json 파일에 아래 내용 추가한다. "browserslist": [ "> 1%", "last 2 versions" ] 4. js 파일에 async, await 문법을 쓰려면 추가로 터미널에 아래코드 설치해야 한다. npm i -D @babel/plugin-transform-runtime 5. .babelrc.js 파일에 아래 내용 추가한다. module.exports = { presets: ['@babel/pr..

Vender Prefix(공급 업체 접두사) 1. 터미널에서 패키지 두개를 설치한다. npm i -D postcss autoprefixer 2. package.json 파일에 browserslist 옵션을 추가한다. "browserslist": [ "> 1%", "last 2 versions"] (browserslist 옵션은 현재 npm 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도이다. 그 명시를 autoprefixer 패키지가 활용하게 된다) ( "browserslist": ["> 1%", "last 2 versions"]는 전세계에 점유율이 1% 이상인 모든 브라우저의 마지막 두개의 버전까지는 지원을 하겠다는 말) 3. 루트경로에 .postcssrc.js 파일을 작성한다. 해당 파일 안에 아래 내용 입력한다. module.exports..

favicon 등록 1. 일반 png 이미지 하나랑 ico 이미지 하나를 준비한다. 2. ico 이미지는 ico converter(https://www.icoconverter.com/) 사이트를 이용해 png 이미지를 ico 이미지로 만들면 된다. 3. 터미널에 npm install -D parcel-plugin-static-files-copy 입력하여 설치후 package.json 파일에 "staticFiles": { "staticPath": "static"} 내용 추가한다. 4. images 파일생성 후 png 파일 넣어두고, static 파일생성 후 ico 파일 넣어두어 터미널에 npm run dev 재작동 시키면 파비콘이 사이트에 제대로 들어간 것을 확인 할 수 있음. **3번을 진행하는 이유: 번들러를 작동시키면 ..

목록 더보기

티스토리툴바