전체 글 (59) 썸네일형 리스트형 웹 퍼블리셔 - 웹퍼블리싱 (Logitech 웹페이지) 두번째 웹페이지 제작에 들어갔다 두번째로 만들 웹페이지는 Logitech이다. 평소에 로지텍 물건에 관심이 많았기에, 해당 웹페이지의 UI는 어떻고 어떻게 구현되는지 궁금해서 만들어보았다. 먼저 오늘 코드를 진행하면서 여러 코드의 반복성을 어떻게 해결 할 수 있을까? 였다. 마우스 over와 leave 되었을때의 스크립트를 어떻게 더 줄여서 쓸 수 있을까? 이부분과, slide 메뉴를 만들기위한 grid작업이 오늘 작업시간을 많이 차지 한 것 같다. 그래도 만족스러운 결과가 나와서 좋다. 먼저 html를 확인해보면 {/*Header*/} {/*Logo*/} {/*Brand*/} 우리 브랜드 {/*화살표 아이콘*/}{arrow} {/*language*/} {language} 대한민국 header부분의 메뉴.. 웹 퍼블리셔 - 웹퍼블리싱 (Tesla 웹페이지) 약 일주일동안 포트폴리오에 필요한 첫번째 웹페이지를 만들어보았다. 지금 구성 중인 포트폴리오는 만들어보고싶은 웹페이지의 UI만 참고하고 나머지는 다 스스로 만들어 보는것이다. 그것을 총 6개의 웹페이지를 만들어보고 해당 웹페이지를 보여주는 이력서 포트폴리오를 만들어 볼 것이다. 그 중 첫번째 Tesla 웹페이지를 완성했다. 먼저 Tesla 웹페이지를 만들면서 많이 힘들었던 부분이 Full page 웹이였던 점이다. Full Page라는 점은 그렇게 크게 힘들지 않는데, 스크롤을 부드럽게 하는 부분들과, 스크롤 위치에 따른 효과를 주기위해서 조금 어려운 부분들이 있었다. 처음 사용해 보는 scroll-snap 기능들과 animation의 transition효과들 내가 만들어야하는 것에 있어서 중요한것들을 .. 웹 퍼블리셔 - 웹퍼블리싱 (Netflix 웹사이트 만들기 2) 오늘은 netflix 웹사이트 만들기 마무리 단계이다. 리액트 컴포넌트를사용해서 무엇이든지 만들어보자고 한 첫번째가 netflix였다. html 과 css부분에서는 어려운 부분은 없었다. 자바스크립트와 리액트를 공부하는 동안 css에대해서 조금 미숙해지는 부분이 있었는데 이번기회에 다시 상기가 되었다. 바로 컴포넌트들을 확인해보면 function Home(){ return( ); } 보시다시피 banner 컴포넌트 다음에 main컴포넌트를 만들어주었다 해당 페이지의 메인 부분이다. import "../css/Main.css" import downroad from "../img/down.png" import plus from "../img/plus.png" function Main(){ const img .. 웹 퍼블리셔 - 웹퍼블리싱 (Netflix 웹사이트 만들기) 오늘은 html, css Javascript, react를 사용해서 넷플릭스 웹사이트를 만들어보았다. 넷플릭스 디자인을 참고하여서 처음부터 끝까지 만들어 볼 생각이다. 홈페이지의 소스코드는 따로 보지 않고 디자이만 참고하였다. 먼저 App.js에 Router을 사용해주어서 기본 페이지인 Home페이지를 만들어주었다. import {BrowserRouter as Router, Routes, Route} from "react-router-dom" import Home from "./routes/Home" function App() { return ( ); } export default App; 기본적으로 만들어준 Home 페이지이고 추후에 로그인페이지, 상세페이지를 Router로 연결해놓을 것이다. 그러면 .. 프론트엔드 - 리액트 (Router, useParams, Link) 오늘은 react의 장점인 SinglePageApplication 을 만들기위해서 꼭 필요한 Router를 사용해보았다. Router란 사용자가 입력한 주소를 감지하는 역활이다. Router component에는 BrowserRouter 와 HashRouter가 존재한다. BrowserRouter는 html이 지원하는 브라우저의 주소를 감지한다, HashRouter는 해시 주소를 감지한다. router component는 npm install react-router-dom을로 설치가 가능하다. 코드에서는 App부분에 router를 적용해주었고, Router 안에 Routes 그 안에 Route로 정의가 가능하다. function App() { // Router => Routes => Route path .. 프론트엔드 - 리액트 (create-react-app, Effect, map, ...Array) 자바스크립트로 리액트 스크립트를 불러와서 리액트를 사용했다면 이번에는 node.js를 설치한후 create-react-app를 사용하였다. create-react-app을 사용하면 우리가 기본적으로 설정해야하는것들이 다 설정되어서 나오기때문에 아주 편리하다. 하지만 리액트가 어떻게 실행 되고 어떻게 움직이는지를 먼저 알고나서 create-react-app을 사용하는것이 좋은것같다. 옛날에는 리액트를 처음 공부할때에는 자바스크립트도 약하고 create-react-app를 사용해서 이 js가 어떤것이고, render가 어떤것을 의미하는지 잘 몰랐었는데 이제는 확실하게 알 게 되었다. cmd 즉 터미널을 열고서 create-react-app 폴더명 을 입력하면 해당 폴더명으로 생성이 가능하다. 생성되는 폴더 .. 프론트엔드 - 리액트 (Props, React.memo, PropTypes) 오늘은 두개의 버튼태그를 만드는데 같은 style을 갖고싶어서 props를 사용했다. props를 통해서 컴포넌트에게 값 전달 해주었다 function Btn({text, changeValue, fontSize = 16}){ return( {text} ); } function App(){ const [value, setValue] = React.useState("Save Changes"); const changeValue = () => {setValue("Revert Change")}; return( ); }; 여기 App함수의 Btn태그를 보면 text={value}라는 값들이 있는데 이것들이 바로 props들이다 이 props들을 사용해서 다른 컴포넌트에 값을 전달 해 줄 수 있다. value값은 R.. 프론트엔드 - 리액트 (React method, ReactDOM, React.useState) 리액트를 이용하여 클릭버튼과, 분을 시간으로 바꿔주고, 반대로 시간을 분으로 바꿔주는 것을 만들어 보았다. 먼저 자바스크립트로 이것들을 할려면 CreateElement를 이용하여 태그를 만들어주고, 이벤트 리스너, 해당 이벤트리스너에 함수 등등 여러가지를 만들어야 하는데, 리액트는 이러한 것들을 단축시키는 아주 좋은 라이브러리이다. 리액트를 시작하면서 느낀점은 리액트도 결국엔 자바스크립트 라이브러리 이기때문에 자바스크립트의 숙련도가 매우 중요 한 것 같다. 리액트를 시작하기 위해서 script로 react, reactdom을 사용할수 있게 불러왔고, jsx를 사용하기 위해서 babel또한 불러왔다. 바벨을 사용할려면 작성할려는 스크립트에 type="text/babel"를 입력해줘야지 잘 작동 된다. 먼저.. 이전 1 2 3 4 5 6 ··· 8 다음
