kyunghwan1207

모각코 회고 정보통신공학과 3학년 고경환 매주 목표 및 실행결과 수요일(팀 프로젝트 진행) 주차 목표 실행내용 성공여부 7월 1주차 리액트 소개 및 개발환경 설정 React 공식 사이트 소개, 개발환경 및 폴더구조 소개 성공 2주차 React + Sprin Boot + MongoDB 전반적인 소개 Spring과 Spring Boot의 차이 성공 3주차 로그인 및 회원가입 구현 JWT인증 방식을 통한 권한 인증-허가 기능 추가예정 성공 4주차 예약하기 및 예약확인 페이지 구현 관련 API 추가작성 필요 성공 5주차 개인정보 수정 페이지 구현 image업로드 및 미리보기 성공 8월 1주차 리뷰작성 기능 구현 별점 기능 추가예정 성공 2주차 별점 기능 구현 sass 모듈 사용 성공 3주차 JWT를 활용한 로그..

Reactjs/kediTalk 2021. 8. 28. 20:44

인트로 앞서 구현했던 Write.js에서 해당 의료기관을 방문한 사용자가 리뷰를 남길수 있는 페이지를 구현했었다. 이 페이지에 별점을 매기는 기능을 추가해서 나중에 다른 사용자가 이 의료기관을 보았을때 다른 이용자들의 만족도를 볼 수 있는 척도를 제공하기 위해 해당 기능을 구현하게 되었다. 코드 기본값을 별이 비어있는 경우로 잡았다.(false 로 기본값 할당해줌) 이후 선택한 별의 index만큼 하위 index의 값을 true로 바꿔준다. 만약 위 코드를 실행하다가 Cannot find module 'sass' 이 에러가 뜬다면 아래 두 방법중 하나의 방법을 실행해주시면 됩니다. Globally: npm i -g sass Locally: npm i sass --save-dev 위와 같이 sass 모듈을..

Reactjs/kediTalk 2021. 8. 14. 12:47

인트로 유저가 병원방문 후 자신의 리뷰를 남길때 사용하는 페이지를 구현했습니다. 제목, 본문으로 크게 나뉘고 추가적으로 사진과 병원의 종류를 기입할 수 있게 구현했습니다. 코드 신경외과(NS): Neuro Surgery 일반외과(GS): General Surgery 산부인과(OB & GY): OBstetrics & GYnecology 소아과(PD): PeDiatrics 정형외과(OS): OrthoSurgery 성형외과(PS): Plastic Surgery 피부과(DR): DeRmatology 이비인후과(ENT): Ear, Nose & Throat 안과(EY): Eye 신경정신과(NP): Neuro Psychiatry 흉부외과(CS): Cheat Surgery 비뇨기과(UR): URology 내과(MG):..

Reactjs/kediTalk 2021. 8. 13. 21:43

인트로 외국인들을 대상으로 하기에 개인정보를 수정할때 First Name, Last Name을 수정할 수 있게 할 것이다. 추가적으로 변경될 수 있는 부분으로 개인프로필 사진, nickName, phoneNumber, country, language 를 수정할 수 있게 만들겠다. 코드 구현 및 설명 css를 제대로 공부하지 않았다는 느낌이들어서 좀더 공부하고 나서 css를 적용해보기로 하고 그전에 JavaScript코드먼저 간단하게 구현해보겠다. 로그인을 통한 인증방식, 몽고DB와 연동 등 선행되어야 할일이 많이 남아있지만 페이지먼저 구현해보았다. 이미지 업로드 및 미리보기 기능을 눈여겨 볼만하다. 내가 구현하고 싶은 기능이 사용자의 프로필을 수정하는 작업이기 때문에 이미지를 업로드를 할 뿐만 아니라 사..

Reactjs/kediTalk 2021. 8. 6. 19:12

앞서 로그인 및 회원가입 페이지를 만들었었습니다. 이번엔 예약하기 및 예약확인 페이지를 구현해보겠습니다. 의료기관과 관련된 필요한 정보들을 볼 수 있도록 간단하게 구현했습니다. Reactjs에서 제공하는 react-datepicker를 활용해서 달력을 구현했습니다. 이곳에는 달력으로 날짜 선택 기능만 사용했지만 사이트를 참고하면 시간과 날짜 한번에 선택할 수도 있고, 특정 날짜 범위를 선택할 수도 있으니 참고해서 활용해보시면 좋을것 같습니다. 예약이 잘 되었는지 확인할 수 있는 페이지입니다. 지금은 직접 타이핑해서 정보를 입력했지만 추후엔 DB에서 해당 사용자의 정보를 조회해서 예약한 의료기관과 예약시간등을 불러와서 render할 생각입니다. 참조 https://zkim0115.tistory.com/15..

Reactjs/kediTalk 2021. 7. 30. 21:10

ASOS 사이트의 로그인 & 회원가입 폼을 참고해서 구현해 보았다. 작성한 코드를 부분적으로 올리면 블로그가 좀 더 예쁘겠지만 그것 보다 더 중요한 것은 독자들의 이해라고 생각하여 코드 전체를 올린 것이므로 양해부탁드립니다. Spring Boot와 연동해서 로그인 및 회원가입시 필요한 정보를 주고받기 전에 원래 혼자서 프로젝트를 진행할때는 Spring 서버를 열고 localhost:8080으로 접근할 수 있었겠지만, 프론트엔드 팀과 벡엔드 팀이 원격지에서 작업을 진행할 것이므로 벡엔드 팀에서 서버를 열어주고 프론트엔드 팀이 그 서버url에 접근해서 정보를 주고받을 수 있다. 벡엔드 팀은 ngrok사이트를 통해서 서버를 열어서 url을 제공해주었다. 이 사이트는 포트포워딩없이 외부접속을 가능하게 해줄 수 ..

Reactjs/kediTalk 2021. 7. 23. 18:58

리액트에서 사용하는 node.js와 현업에서 많이 쓰인다는 Spring의 차이는 무엇일까? 또 Spring과 Spring Boot의 차이는 무엇일까? 프로젝트를 시작하기 앞서 궁금증이 많았다. 이번 기회에 확실하게 알아보고 진행하려고 한다. 먼저 node.js와 Spring의 차이 부터 알아보자. 항상 그렇듯 새로운 것을 접할땐 공식적인 자료로 부터 시작하는 것이 좋다. Node.js란? Node.js 공식 사이트에 들어가보면 아래와 같은 문구가 쓰여있는 것을 확인할 수 있다. "Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 1. Chrome V8 JavaScript 엔진이란? : JavaScript를 컴파일(사람이 이해하는 프로그래밍언어( ex..

Reactjs/kediTalk 2021. 7. 16. 17:53

리액트 프로젝트를 진행하기에 앞서 먼저 리액트란 무엇인지 설명해보겠다. https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org https://reactjs.org/ React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org 어떤 언어, 라이브러리를 사용하기 전에 항상 해당 언어나 라이브러리의 공식 사이트를 알아두고, 그 사이트를 통해 공부하는 습관을 들이면 좋다. 리액트의 ..

Reactjs/환경설정 2021. 7. 7. 23:31