본문 바로가기

49

CSS로 카드뒤집기 효과 만들기 - (사파리/크롬에서 사용할 수 있게 만들기) CSS로 카드뒤집기 효과 만들기 - (사파리/크롬에서 사용할 수 있게 만들기) 포스팅 1. 결과 영상 2. 코드 index.html 앞입니다. 뒤입니다. index.css .container{ width: 200px; height: 300px; margin: auto; position: relative; cursor: pointer; perspective: 100rem; } .card{ /*webkit을 사용해야지 사파리에서도 정상적으로 동작함*/ width: 200px; height: 300px; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -webkit-perspective: 0; -webkit-transiti.. 2021. 9. 27.
(React-Redux) 리액트 리덕스를 이용한 간단한 프로젝트 및 설명 리액트 리덕스를 이용한 간단한 프로젝트 리덕스를 사용하여 간단한 프로그램을 제작하면서, 리덕스를 더욱 잘 이해하기위해 포스팅을 제작하였습니다. 자료들을 참고하여 공부하며, 윗 쪽에는 버튼을 누르면 1씩 증가하게, 아랫쪽은, 제가 원하는 숫자를 넣으면, 그 숫자만큼 더해지는 프로그램을 제작하려고 합니다. 포스팅 요약 1. 프로그램을 만들기전 간단한 정리 더보기 1) Provider란? 2) combineReducer란? 3) useSelector란? 4) useDispatch란? 2. 프로그램 만들기 더보기 1) 리액트 리덕스 실행 2) Provider로 감싸기 3) 사용될 모듈 만들기 4) combinereducer로 리듀서 함수들 통합하기 5) 컨테이너 만들기 6) 화면에 보여줄 컴포넌트 7) App에.. 2021. 9. 14.
(Node.js-express) get, post요청 처리/body-parser deprecated (Node.js-express) post시 submit한 값 가져오기 포스팅 요약 1. body-parser deprecated에 관해서 2. post 요청 처리법 3. 간단한 예제 더보기 예제 1) 예제 2) 1. body-parser deprecated에 관해서 > 원래는 post시 get에서 값을 받아올 때 상단에 "var bodyParser = require('body-parser')" 로 모듈을 불러와야 됐지만, 현재는 모듈을 불러오지 않아도 된다. > 물론 npm install body-parser도 안해도 된다. > 4.16.0버전 이상부터, express.json() 및 express.urlencoded() 메서드 내부에 body-parser이 포함되어 있습니다. 2. post 요청 처리법.. 2021. 9. 11.
(Node.js) 파일 쓰기, 생성하기/ 파일 삭제하기 + 예제 파일 쓰기/삭제하기 + 예제 포스팅 요약 1. 최종 미니 프로젝트 설명 + 결과 2. 파일 쓰기: fs.writeFile 설명 + 간단한 예제 3. 파일 삭제: fs.unlink 설명 + 간단한 예제 4. writeFile + unlink 를 사용한 미니 프로젝트 코드 1. 최종 미니 프로젝트 설명 + 결과 >localhost:3000/ 페이지 윗부분에는 생성할 파일의 타이틀과, 파일 내용을 적는 입력란을 준다. > 제출버튼 클릭시, 디렉토리에 파일이 생성되며, 페이지 아랫부분에 파일 목록을 보여준다. > 파일 목록 클릭 시 파일 삭제를 한다 2. 파일 쓰기: fs.writeFile 설명 + 간단한 예제 > fs.writeFile("파일경로", "파일안에 적을 내용", "utf8", callback); .. 2021. 9. 10.
(Node.js) 파일 읽기 + 예제/ readFile과 readFileSync Node.js 파일 읽기 + 예제 포스팅 요약 1. readFile vs readFileSync 2. readFile 사용법 3. readFileSync 사용법 4. 예제 5. 그 외 추가 자료 링크 1. readFile vs readFileSync > readFile은 비동기, readFileSync는 동기 > 사용 형식 fs.readFile("파일경로", "encoding", callback) fs.readFileSync("파일경로", "encoding") > fs.readFile 동작 과정 파일명: server2.js const http = require("http"); const fs = require("fs"); const app = http.createServer((request, respon.. 2021. 9. 9.
(Node.js) 파일 목록 불러오기/ 파일 이름 불러오기 + 예제(간단함) 파일 목록 불러오기/ 파일 이름 불러오기 Node.js에서 파일 목록 불러오기는 매우 쉽습니다. 포스팅 요약 1. 파일 불러오는 형식 2. Node.js로 파일목록 읽어오는 방법 3. fs.readdir 을 사용한 간단한 예제 1. 파일 불러오는 형식 const fs = require("fs"); fs.readdir(파일명, (err, files)=>{ }); 2. Node.js로 파일목록 읽어오는 방법 data파일을 생성하고, 파일안에 원하는 이름, 원하는 형식의 파일들을 생성해 줍니다. 저는 그냥 txt파일로 생성했습니다. 파일명: server.js const http = require("http"); const fs = require("fs"); const app = http.createServer.. 2021. 9. 8.