홍준혁

먼저 프로젝트에 리액트를 설치를 해주도록 하자 vscode에서 기본으로 지원하는 터미널에 git bash를 연결하였다. create-react-app todolist create-react-app을 사용해서 todolist라는 파일에 react세팅을 해주도록 하자. 빌드에 성공하면 Happy hacking이라는 글이 뜬다. 이제 happy hacking글 위에 명령어(cd , yarn start)를 순서대로 치면 로컬호스트로 서버가 열린다. 이제 리액트 웹 서버가 열린것을 볼 수 있다. 브라우저를 보면 React App이라는 웹이 생긴것을 볼 수 있다. 이제 리액트 앱을 만들었으니 설정을 해주도록 하자. App.css의 내용을 모두 지워주고,App.js에서 이렇게 설정을 해주자. 그렇게 저장을 하고 리액..

팀 프로젝트인 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로 간단한 디자인..