목록온라인코딩부트캠프 (19)
초보 개발자의 성장 일기
Hooks 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기위해 사용한다. Hook의 이름은 반드시 ‘use’로 시작해야 한다. 최상위 Level에서만 Hook을 호출 할 수 있다. State Hook const App = () => { const [state이름, setState이름] = useState(초기값) } useState는 컴포넌트 내 동적인 데이터를 관리할 수 있다. 최초에 useState가 호출 될 때 초기값으로 설정되며 이후 재렌더링이 될 경우 무시된다. state는 읽기전용 이므로 직접 수정하면 안된다. state를 변경하기 위해서는 setState를 이용한다. state가 변경되면 자동으로 컴포넌트가 재렌더링된다. state를 변경하기 위해..
Props Component에 원하는 값을 넘겨줄때 사용하며 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열등 JavaScript의 요소라면 제한이없다. 주로Component의‘재사용’을 위해 사용한다. props는 읽기 전용으로 임의로 값을 변경해 사용해선 안되고 변경하고 싶다면 새로운 변수를 생성해야 한다. props를 활용해 component 만들기 const Greeting = (props) => { return { props.username } } export default Greeting; const Greeting = (props) => { const { username } = props; return { username } } export default Greeting; const Gree..
React란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 Component: React에서 서비스를 개발하는데 있어 독립적인 단위로 쪼개어 구현 Virtual DOM: 가상적인 표현을 메모리에 저장하고 ReactDOM과같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 JSX: JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경 제공 HTML과유사 npx 명령어 npm create-reaxt-app [디렉토리명]: 패키지를 1회성으로 내려받아 실행할 때 사용한다. cd [디렉토리명]: [디렉토리명]으로 이동한다. npm start: 현재 디렉토리의 프로젝트를 실행한다. npm build: 파일을 압축하고 번들링 하는 과정이다. 라이브러리 npm inst..
방향성 사실 처음엔 불가능이라고 생각했지만 지금은 어떻게서든 내가 맡은 로그인, 회원가입, 카테고리 부분은 완성했다. 코드만 봤을때는 부족해 보일 수 있지만 처음 배우는 리액트니까, 가독이나, 재사용성에 중점을 두지 않았다. 나처럼 코드를 직접 짜는 프로젝트는 처음이라면 우선 생각을 해본다. 어떻게 로직을 해야 이런 결과가 나올까? 머릿속으로 그리기 어렵다면 그림을 그리는것도 도움이 된다. 나같은 경우에는 아이패드로 그려서 이렇게 짜봐야겠다는 설계를 했다. 모든 작업을 할때 무작정 하는건 없다. 모든 결과물에는 설계가 이루어진다. 개발도 마찬가지이다. 처음엔 시간이 없으니 일단 뭐라도 써보자는 생각으로 코드를 짜내려갔던 과거의 나를 반성하게 된다. 그렇게 하다보면 빠르다고 느낄 수 있지만 원하는 값이 잘..
시간이 너무 아쉽다. 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 사용은 기존의 자바스크립트의 방식대로 사용 오늘 배운 내용 - 리액트 사용방법 - 프론트엔드 서버 제작 -..
기대반, 걱정반 새로운 시작! 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. 진행이 어려워 하는 팀원 -..