초보 개발자의 성장 일기

시간이 너무 아쉽다. 9팀 - 아침엔 날짜: 23-11-09 오늘 작업 내용 회원가입 구현 - API import axios from 'axios'; // 유저정보 목록 불러오기 (로그인, 회원가입 중복 확인) export const getUser = async ({ email, password }) => { try { const getItem = { id: email, password: password }; const response = await axios.post('/api/auth/login', getItem); return response.data; } catch (err) { if (err.message === 'Request failed with status code 504') { retur..

오류 해결은 쉽지 않다. 9팀 - 아침엔 날짜: 23-11-06 프론트엔드 회의 폴더 구조에 대한 논의 component: header, footer component: 페이지 이외 컴포넌트 API 활용한 카테고리 구현과정 공유 진행할 상황 이슈, 해결이 어려운 부분 진행 완료 상황 진행 중인 상황 공유 정확한 의사소통을 위해 서로 공유를 많이 하고 틈틈히 git push를 해서 다른 팀원과 겹치는 내용을 활용할 수 있도록 하였다. 오늘 작업 내용 오류 해결 갑자기 오류가 떠서 오류를 해결하느라고 시간이 너무 많이 걸렸다. 몇시간 동안 오류를 해결하기위해 다른 분께 여쭤도 보고 검색도 하였으나 이슈를 정확하게 파악하지 못해서 이전에 깃에 올려둔 작업을 다시 가져와서 새로운 내용만 다시 복사해서 겨우 해결..

내 손으로 직접만든 서버와 API 연결 9팀 [아침엔] 날짜: 23-11-02 작성자: 하윤아 오전스크럼 1. 화면설계서, 기능명세서 작성하기 2. 피쳐브랜치 만드는부분 설명 기능단위 - 장바구니 bascket, 상품목록 product, 상품상세 클론-(클론해온 파일 폴더에서 작업)-장바구니기능 개발-feature브랜치 만들어서 등록 프론트엔드 회의 1. 역할 재분배(컴포넌트별 분배) 2. SASS 사용 논의 : 오피스아워때 조언을 구함 사용하면 편하고, 코드의 가독성이 좋아질 것으로 생각하지만 아직 리액트를 익숙하지 않아 사용하는 것 조차 공부를 해야해서 버거울 수 있다. 3. 리액트에서 CSS 사용은 기존의 자바스크립트의 방식대로 사용 오늘 배운 내용 - 리액트 사용방법 - 프론트엔드 서버 제작 -..

새로운 개념 css box model ? Sass ? css box model box-sizing content-box의 크기를 말하며 크기를 정의하기 위해 width, height가 디폴드 값이 된다. 예를들어 width: 150px, heigh: 300px로 정의해보자. 이 때 content의 크기가 위와 같이 정의가 되고, padding 100px을 넣었을 경우 content-box는 양옆, 위, 아래 각각 100px이 추가되어 width: 150px + 200px = 350px, height: 300px + 200px = 500px이 되는 것이다. 이렇게 하면 레이아웃 구성시 이렇게 따로 계산하게 되면 레이아웃 작성 시 이해하기 어려움 (코드랑 보여지는 부분이 다름) 쉬운 레이아웃을 정의하기 위해..

새로운 개념 스타일링? Sass? styled-components? 번들사이즈? 스타일링은 왜 하는가? 웹이 스타일링 없이 글만 작성되있으면 한눈에 알아보기 힘들고 당황스럽다. 효율과 사용성을 위해 사용, 좋은 앱을 만들기 위한 것, 결국 사용자에게 더 나은 UI를 구현하기 위한 방법이다! 정말 말 그대로 웹을 스타일링 하는것을 의미! 스타일링의 방법 1. CSS import : css 파일을 따로 만들어 import해서 css 파일을 가져옴 Button.JSX import 'button.css' // button.css를 가져옴 funtion Button({ children }) { // chidren이라는 컴포넌트를 사용될 때 함수 구현 return ( // html button태그 생성, class..

기대반, 걱정반 새로운 시작! 9팀 [아침엔] 날짜: 23-11-01 작성자: 하윤아 오전 스크럼 1. 백엔드쪽에서 포스트맨 api명세서 안내 (return 값으로 오는 json은 카테고리부분 수정으로 오후중 데이터 틀 공지해주실 예정) 2. 페이지 이동및 뷰관련해서 spa와 이미 만들어주신 폴더구조(express.static) 환경의 차이에 대해 프론트엔드에게 대건님이 설명해주실예정. Spa를 문의했는데 리액트에서 적합한 방법임을 안내해주심 3. 현재 백엔드와 프론트엔드 진행상황공유 4. 백엔드에 api를 get요청으로 보낼시 검색어 query를 어떻게 보내야 하는지 문의. 추후 안내예정. 5. 백엔드 팀 오피스아워 후 변경사항 공지해주심 6. 프론트팀 오피스아워때 질문할점 공유 (코드 점검받고 뷰구성..

드디어 개발 시작.. 9팀 [아침엔] 날짜: 23-10-31 작성자: 하윤아 오전 스크럼(10:00~11:30) 프론트 역할 재분배 (하윤아, 신영재: html,css 후 장바구니 시작, 김진주: vmp구성) vm띄우기, 레포지토리만들기 웹서버는 띄우지 않음 백엔드쪽이 웹서버 설명 해주었으나 프론트의 서버지식 부족, 향후 proxy설정(?)등의 어려움으로 백엔드에만 서버를 띄움. API 호출 방법 :fetch 백엔드쪽에서 axios설명해주었으나 익숙한 fetch로 진행 프론트회의 1. MVC패턴 - controller 부분을 마무리 - view 부분이 구현(html, css 완성) 2. 상품 목록부분 이슈 - javascript로 forEach문을 작성해 임시 목록 구현 3. 진행이 어려워 하는 팀원 -..

전체적인 기획, 설계 9팀 [아침엔] 날짜: 23-10-30 작성자: 하윤아 스크럼 1. 주제: 신발 쇼핑몰 2. 쇼핑몰 이름: 신밧드(SHINB_D) 3. 서비스 목적: 신발을 좋아하는 사람을 위한 신발 판매 플랫폼 4. 프론트 엔드 사용 언어: HTML, CSS, JAVASCRIPT → 리액트를 쓰는게 좋겠으나, 익숙하지 않아 바닐라 자바스크립트로 진행 5. 깃랩 프론트엔드 폴더 구조 src public css img js API 6. 기능구현 계획 (~10/31 화요일까지) VM에서 서버 배포 각자 완료. (~ 금요일) 상품기능, 장바구니기능 일단 모든 사용자가 상품crud, 카테고리crud 가능하게 한 후 나중에 관리자체크 백엔드에서는 crud기능을, 프론트는 상품 레이아웃과 장바구니기능 구현 로..