프론트엔드 개발자 엄성준 블로그

$ 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명으로 구성되었습니다. 기획 배경은 코로나 방역이 완화되고 날씨가 따듯해지는 지금 여행을 떠나고 싶으신 분들에게 도움을 줄 수 있는 커뮤니티 웹 사이트입니다. 먼저 와이어프레임을 통해서 팀원들과 어떤 페이지들로 구성할지 정했습니다. ()=> 요소는 정확하게 결정되지 않은 요소 - 로그인, 회원가입(카카오), (아이디 찾기), (비밀번호 찾기) - 전체 리스트 페이지 - 메인 - 카테고리별 페이지 - 글 상세 페이지 - 마이 페이지(작성한 글(수정, 삭제), 추천한 글) 프론트엔드 팀원과 상의를 통해서 구현할 ..

문제 설명 코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다. 한 번 사용한 카드는 다시 사용할 수 없습니다. 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다. 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다. 예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한..

먼저 CRA(create react app)를 구축했다는 가정하에 진행하겠습니다. 첫 번째로 vsCode에서 터미널을 켜주시고 npm install -D prettier을 입력해 주시면 됩니다. 이 부분에서 -D를 붙이는 이유는 개발환경에서만 사용하겠다는 의미입니다. 두 번째로 npm i -D eslint-config-prettier를 입력해줍니다. eslint와 formating관련 설정 중에 prettier와 충돌을 방지하기 위해 입력해 주는 것입니다. 세 번째로 폴더에 제일 상위에. eslintrc.json파일을 생성해 줍니다. 그 후. eslintrc.json 파일 안에 아래 문장을 입력해 줍니다. { "extends": ["react-app", "prettier"] } 네 번째로 vsCode좌측..