프론트엔드 개발자 엄성준

오늘은 PostWrite 글 쓰기 페이지를 완성했습니다. 날짜 선택은 datepicker library를 이용하였습니다. https://www.npmjs.com/package/@types/react-datepicker @types/react-datepicker TypeScript definitions for react-datepicker. Latest version: 4.10.0, last published: a month ago. Start using @types/react-datepicker in your project by running `npm i @types/react-datepicker`. There are 272 other projects in the npm registry using @ty..

$ npm install react-daum-postcode 을 통해서 다음 우편번호 라이브러리를 설치해 줍니다. import DaumPostcode from 'react-daum-postcode' 이 문장을 import 해줍니다. import React from 'react' import {useState} from 'react' import PageTitle from '../Common/PageTitle' import styled from 'styled-components' import ThemeSlide from '../Common/ThemeSlide' import DaumPostcode from 'react-daum-postcode' import {FaMapMarkerAlt} from 'react..

오늘 처음으로 Github Desktop을 통해서 동료분과 main branch에 merge를 통해서 통합을 했다. 다행히 branch를 통해서 영역을 나눴고 충돌 또한 없었다. 내가 퍼블리싱한 영역은 header즉 nav bar인데 로그인을 하지 않은 상태는 아직 빽엔드와 연동이 되지 않았으므로 state를 이용해서 임의적으로 적용을 해두었다. 로그인 popup을 만들어 두긴 하였는데 아래와 같이 너무 무분별하게 state값을 관리하는 것 같다는 느낌이 드는 것 같다. 물론 로그인 popup component는 Popups폴더에 Login.tsx로 따로 분류를 해주었지만 그래도 만족이 되지는 않는 것 같다. const [searchSelect, setSerachSelect] = useState('검색'..

현재 Back-end 개발자 분들과의 소통오류가 발생했는데 그 문제의 원인을 알게 된 것 같습니다. 첫째 와이어 프레임을 팀단위로 회의를 통해서 제작한 것이 아닌 Front-end개발자들끼리 제작하다 보니 소통오류가 발생한 것 같습니다. 두번째로 와이어프레임으로 작성한 페이지들이 완벽한 것이 아니다 보니 Back-end개발자분들이 다소 혼란스러우셨던 것 같습니다. 그래서 프런트엔드 협업하시는 분과 내일 당장 와이프레임을 꼼꼼하게 다시 설계하기로 하였습니다. 또한 와이어프레임을 통해서 페이지를 설계하기 전에 먼저 어떤 페이지를 만들어야 할지 디렉터리 구조를 설계하였습니다. Components (컴포넌트 폴더) - Common (공통 컴포넌트 폴더) - Header(헤더) - PostList(글 리스트 컴포..

Intellj를 사용할 때는 빽 서버와 프론트 서버 가동을 쉽게 했지만 같이 협업하시는 프론트엔드 동료분은 VSC를 통해서 둘 다 실행시키고 싶어 하셔서 방법을 찾았습니다. 먼저 VSC에서 spring boot를 실행 시키기 위해선 Debugger for Java와 Spring Boot Extension Pack을 설치해 주었습니다. 그 후 settings.json에 jdk경로를 넣어줬습니다. "spring-boot.ls.java.home": "C:\\Program Files\\Java\\jdk-11.0.17" 그 후 Application.java에서 Run java를 실행시키면 됩니다. 다음으로 협업을 하기 위해서 팀원 분들을 프로젝트에 초대해 드렸습니다. 그 후 저는 Github Desktop을 통해..

우리 팀의 프로젝트는 Front는 React -- ts를 통해서 구성하고 Back은 Spring boot를 통해서 구상하기로 하였다. Back-end 분들은 작업 Tool로 Intellij를 이용하시고 Front는 VScode를 이용하기로 하였다. 먼저 Project를 구축하기 위해 https://start.spring.io/ 접속하였다. 예전에 김영한 선생님 강의를 볼 때 제외하고 처음이었다. Group명을 제외하고 나머지는 이렇게 작성한 듯싶다. 그 후 GENERATE를 통해서 파일을 내려받았다. 그 후 아래의 링크의 내용을 적어주신 분의 글을 참고하여서 개발환경을 구축하였는데 https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99..

Pre기획에서 와이어 프레임만 Update를 했었는데 전체적인 내용을 수정하였다. 먼저 우리의 웹 사이트 명칭은 나침반으로 정한 상태이다 기획 배경 및 기대 효과 https://www.figma.com/file/1koGclNNTmJZVIykCVl1JZ/1seok4jo?node-id=0-1 Figma Created with Figma www.figma.com 기술 스펙 초안 요구 사항 🛠 Back-end 회원가입 - 이메일(중복 제한), 비밀번호, 닉네임(중복 제한), 나를 소개하는 한 문장(ex : 저는 여행을 좋아하는 20대입니다.) 모든 기능을 사용하려면 회원가입이 전제 조건임 로그인 - 일반 로그인, 카카오 로그인 비밀번호 찾기 - 가입된 이메일을 통해서 초기화된 비밀번호 전송 글쓰기 - 카테고리(..

먼저 이전에 작성한 pre기획을 멘토님에게 컨펌을 받았는데 아래와 같은 답변을 받았습니다. 멘토 : 조금 더 구체적으로 와이어프레임과 서비스에 대한 기준으로 작성이 되고 나면 다시 한번 멘트 드릴게요~ 이렇게 되어서 협업하고 있는 다른 프론트엔드 개발자 분이랑 회의를 통해서 Figma를 통해서 와이어 프레임을 제작하게 되었습니다. https://www.figma.com/file/1koGclNNTmJZVIykCVl1JZ/1seok4jo?node-id=0%3A1&t=H5z5MrQVO2osZPOr-1 Figma Created with Figma www.figma.com 대학교 때는 이 작업을 power point를 통해서 진행했었는데... FIgma 사용법이 낯설긴 하지만 훨씬 수월하고 빨리 끝낸 것 같습니다..

제로베이스 프론트엔드 스쿨 10기 수강생 엄성준입니다. 처음으로 대학교 캡스톤 프로젝트를 제외한 첫 번째 프로젝트를 진행하게 되었습니다. 먼저 저희 팀원은 백엔드 개발자 4명, 프론트 엔드 개발자 2명으로 구성되었습니다. 기획 배경은 코로나 방역이 완화되고 날씨가 따듯해지는 지금 여행을 떠나고 싶으신 분들에게 도움을 줄 수 있는 커뮤니티 웹 사이트입니다. 먼저 와이어프레임을 통해서 팀원들과 어떤 페이지들로 구성할지 정했습니다. ()=> 요소는 정확하게 결정되지 않은 요소 - 로그인, 회원가입(카카오), (아이디 찾기), (비밀번호 찾기) - 전체 리스트 페이지 - 메인 - 카테고리별 페이지 - 글 상세 페이지 - 마이 페이지(작성한 글(수정, 삭제), 추천한 글) 프론트엔드 팀원과 상의를 통해서 구현할 ..