본문 바로가기

전체 글291

소개 Web frontend Engineer parkhj062@gmail.com 2020. 7. 8.
악세사리 브랜드 Le navut 사이트 제작 디자인 시안이 따로 없어 여러 번의 미팅을 통해 레이아웃과 디자인을 정해나가며 진행한 작업이었다. 최대한 심플한 디자인을 원하셔서 white color 배경으로 진행하였으며 반응형 사이트로 제작되었다. 제작 기간은 2주 정도 소요 되었고 주요 기능은 상품 정보 확인, 슬라이드 이미지, 모바일과 피씨 버전을 한 번에 사용할 수 있는 반응형이다. 사용한 기술스택: HTML5, CSS3, JAVASCRIPT(ES6), github 사이트 시안 페이지 https://parkhojeong.github.io/lenavut/product.html Lenavut parkhojung.github.io https://github.com/Parkhojung/lenavut 2020. 7. 8.
hello world vue 를 사용하여 hello world를 해보자. 1. node.js를 검색하여 설치 2. Vue CLI 설치 윈도우는 cmd, 맥은 terminal을 켜서 다음을 입력 > npm install vue-cli -global 3. 작업폴더를 만든 후 경로 변경 > cd 디렉토리 4. 뷰 CLI로 프로젝트 생성 > vue init webpack-simple 5. 4번 이후 질문 사항들에 대답 6. 뷰 애플리케이션 관련 라이브러리 다운 > npm install 7. 실행 >npm run dev 위 과정을 거치면 실행이 되고 작업을 위한 세팅이 완료된다 ! 2020. 7. 6.
리액트에서 배열 데이터를 화면에 출력하는 방법 사람에 대한 이메일 정보가 여러 개 등록되어있다고 하면 javascript을 이용하여 객체를 만들고 반복문으로 객체를 만드는 작업을 해야했다. 리액트에서는 더 쉽고 간편하다. 다음과 같은 데이터가 있고 화면에 아래와 같이 나타내고 싶다. const users = [ {id:1,username:'bob',email:'bob@gmail.com' }, {id:2,username:'aoa',email:'aoa@gmail.com' }, {id:3,username:'bob',email:'coc@gmail.com' } ]; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList({ users }) { return .. 2020. 7. 4.

티스토리툴바