일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- CSS
- VUE
- let
- react
- todolist
- 모던 자바스크립트
- 리액트
- 스코프
- const
- typescript
- null
- Number
- ES6
- 자바스크립트
- var
- BIND
- js
- 라우터
- 데이터 타입
- 객체
- 뷰
- function
- 모던
- Interface
- 타입스크립트
- redux
- 함수
- this
- 투두리스트
- 컴포넌트
- Today
- Total
목록전체 글 (83)
홍준혁
팀 프로젝트인 HongLim(친구 재현이와 나)에서 TodoList를 만들기로 했다. 저번에 만들었던 ToDoList를 개편하고 쌓인 지식으로 더 좋은 웹사이트를 만들려는 취지로 개발을 시작한다. honglim001.github.io/html-project 1/start.html Start_ToDoList honglim001.github.io 위의 웹사이트는 전에 재현이와 만들었던 웹사이트이다. 코드도 더럽고 이상하지만 그래도 아무것도 모르던 우리가 뭔가를 만들었다는 것에 만족한다. (제이쿼리도 써가면서 ㅋㅋ) 이번에는 리액트를 활용해서 개발하려고 한다. 리액트는 깊게 공부하지 않고 가볍게 보기만 한 정도라서 이해 못할 부분이 많겠지만 그래도 한번 배워본다는 목적과 부딪혀본다는 느낌으로 개발해보려고 한다.
저번에 레이아웃을 설계했으니까 이번에는 메인화면을 꾸며보는 작업을 할것이다. 먼저 해볼것은 header에 로고를 넣는 작업을 할것이다. 하지만 우리의 로고는 아직 정해진것이 없기때문에 그냥 임의의 로고를 넣기로 했다.(텍스트) 이제 프로토타입을 보면 백그라운드가 조금 회색계열인것을 볼 수 있다. 그래서 색을 바꾸는 작업을 하겠다. 폰트도 바꾸는 작업을 했다. (폰트는 아직 정해진것이 없기때문에 임의로 설정을 해주었다. ※폰트는 Jua폰트이다.※) 그다음 content에 제목을 꾸며주는 작업을 진행하였다 border-bottom값을 줘서 제목과 내용을 나누었고 font-size값을 증가시켜서 글씨가 눈에 더 잘 보이게 꾸몄다 그리고 이모지를 넣어 더 꾸며주었다 (나중에 사진으로 대체할 예정이다.) 오늘은 ..
저번에 로그인폼을 만들었으니 이제 로그인 버튼을 누르면 메인화면으로 이동할 수 있도록 코드를 작성하였다. 먼저 Vue를 이용해서 새로고침을 방지하는 코드를 작성하였고 methods에 메인화면으로 이동하는 코드를 추가해 주었다. new Vue({ el: ".login_wrap", methods: { goto_main() { window.open("/main/main.html", "_self"); }, }, }); 이 goto_main을 v-on:submit.prevent="goto_main" submit이벤트가 발생할때 새로고침을 방지하는 prevent수식어를 사용하고 goto_main의 함수를 실행하라는 내용이다. 그래서 로그인 버튼을 누르면 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 위에 메인화면은 설계..
저번 시간에 이어 디자인을 조금 다듬고 기능 구현을 해볼 것이다 팀 회의결과 남여정보도 받도록 결정났다. 그래서 radio태그를 사용해서 기능을 구현하도록 하겠다. 조금 더럽지만 html코드를 공개하겠다 이름 이메일 비밀번호 기수 1기 2기 3기 4기 5기 성별 남 여 이제 어느정도 로그인 폼을 구현했으니 로그인 화면을 구현해보도록 하겠다.
학교 동아리인 바인드에서 팀 프로젝트를 진행하기로 했다. 일정관리 프로그램인데 프로젝트에서 로그인 기능을 구현하는 게 가장 먼저 해야겠다는 생각이 들어서 로그인 기능을 한번 구현해 보려고 한다. 먼저 간단한 로그인 코드 HTML만 구현해 보면.. 아이디: 비밀번호: 회원이 아니신가요?회원가입 이런 식으로 입력만 가능하고 제출할 수 있는 기능은 넣지 않았다. 그리고 회원가입 사이트에서 받는 회원의 정보는 이름 / 이메일(학교 이메일 계정, 아이디) / 비번 / 기수 선택 이렇게 입력을 받는다. 간단한 signUp, html 코드를 작성해 보면 이름 : 이메일: 비밀번호: 기수: 1기 2기 3기 4기 5기 이런 식으로 설계를 했다. ※아직 초기 설계이고 나중에 변할 수 있습니다. 일단 css로 간단한 디자인..
watch는 감시자라는 뜻이다. 특정 데이터를 감시하고 있다가 그 데이터가 변경이 일어났을때 watch속성이 자동으로 실행이 된다 아래의 코드를 보고 분석해보도록 하자 {{ message }} Click {{ update }} 위 코드를 하나하나 톺아보도록 하자 message data와 update data를 만들고 Vue인스턴스에 watch속성에 message를 만든다. 그럼 이때 message는 data에 있는 message를 감시하고 있다는 의미가 된다. 이떄 message를 지켜보고 있다가 변화됨을 감지하면 watch에 있는 message가 실행된다. 이때 message는 두가지 인자값을 받게 되는데 바뀐 값과 바뀌기 전의 값을 받게 된다. 그래서 console.log를 통해 그 값을 확인할 수 ..