hwlink

HINED (House In Decades) 프로젝트 소개 몇 십년 후에 지구가 아닌 다른 행성에서 살아갈 인류를 위한 홈 데코 및 전반적인 물품 판매, 인테리어 전문 업체 추천 및 알선 테라포밍이 완료되어 살 수 있는 부지 소개 각종 실내외 도구, 이동수단 판매 가구, 의류, 식자재 판매 전문 인테리어 업체 추천 및 알선 필수 구현 사항 - 소셜 회원가입/로그인 후 설문조사 - 네비게이션바 - 상품메인페이지 - 상품리스트 - 상품상세페이지&상품리뷰 - 장바구니&결제페이지 추가 구현 사항 - 마이페이지 설문기록 수정 기능 - 상품상세페이지 리뷰사진 업로드기능 기간: 2021.12.13~ 12.24 멤버: 프론트엔드3 / 백엔드3 기술스텍: - Front-End: React.js, styled-compon..

Project 2021. 12. 15. 23:14

1. 서버 : 요청을 받아서 응답을 줄 수 있는 기계 (그 중 하나가 컴퓨터) scale out 물리적인 서버를 늘리는 것 scale up 서버 성능을 높이는 것 서버들만 모아서 관리를 해주는 데이터센터 Traditional IT 방식의 문제점 데이터 센터 렌트 비용을 지불해야 함 power supply, cooling, maintenance 비용을 지불해야 함 새로운 하드웨어 (서버)를 추가하거나 교체할 때 시간이 많이 소모됨 확장하는데 제한사항이 많음 현재 유지되고 있는 인프라를 24/7 모니터링 할 인원을 고용해야함 천재지변에 대응하기 어려움 (지진, 화재, power shutdown 등) Cloud Computing 물리적으로 서버를 가지고 있는 것이 아니고, 서버가 구름 위에 둥둥 떠다닌다. →..

Coding/WEB 2021. 12. 15. 22:43

1. 프로젝트 요약 남성 화장품 구독사이트 오픈워크 클론프로젝트(디자인, 비즈니스모델) 프론트, 백 기능 자체구현 Github 링크 사이트링크 2. 프로젝트 이름 위즐리(Weasley) 3. 프로젝트 소개 2030을 타겟으로 한 합리적인 가격과 편리한 화장품 구독사이트 4. 프로젝트 기간 및 인원 2021.11.29 ~ 2021.12.10 프론트 3명, 백엔드 3명 5. 프로젝트 담당한 업무 1.상세페이지 레이아웃 html, css 상세페이지 레이아웃 데이터바인딩(API GET요청) 구매: 상품id, 주문수량 POST 요청 구독: 상품id, 주문수량, 주소id POST 요청 (주소: 입력 받거나 오더페이지내 주소등록 히스토리 존재시 해당 주소 끌 어옴) 주소입력창 조건부 렌더링/ 주소존재시 바로 구독완료..

Project/Weasly(화장품결제구독서비스) 2021. 12. 11. 16:15

위코드에서 2주동안 진행될 1차 프로젝트를 시작하게 되었다. 감사하게도 내가 제안한 ‘와이즐리 오픈워크’라는 사이트를 모티브로 삼아 프로젝트로 진행하게 되었다. 프로젝트 제안동기 남자 화장품 브랜드로 확실한 타켓층과 구독서비스, 합리적인 가격 때문에 1년정도? 이용중인 곳이고 이러한 비즈니스 모델이 마음에 들어 프로젝트에 제안하게 되었다 팀 프로젝트 가치관(1주차) 팀프로젝트를 기능구현과 다른 팀과의 경쟁이 아닌 내면의 성장을 목표로 두고 진행하려고 노력하였고, 기능구현이 우선이 아닌 팀 전체가 배워가는 것이 있고 팀이 하나가 되어 나아갔으면 좋겠다고 생각하고 프로젝트에 임했다. 학교에서나 일터에서 배운 프로젝트를 하게 될 때에는 항상 1인분을 해내야 한다는 생각으로 임했는데 스크럼방식으로 진행하니 1인..

Project/Weasly(화장품결제구독서비스) 2021. 12. 10. 22:04

setState는 비동기로 동작 리액트에서 setState를 사용하여 상태를 업데이트할 경우 즉시 반영되지 않는다. 리렌더링이 된 후에 업데이트 된다. (state 변경 > 리렌더링 > state반영) 여러개의 state를 컨트롤하는데에는 이점. 배칭이란? 배칭은 React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것을 의미한다. 예를들어, 하나의 클릭 이벤트 안에 두 개의 state 업데이트를 가지고 있다면, React는 언제나 이 작업을 배칭하여 하나의 리렌더링으로 만든다. 다음과 같은 코드를 실행해보면, 매 번 누를 때마다, state를 두 번 변경 하였지만, React는 단 한 번의 렌더링만 수행한다. const [num, setNum] ..

Coding/React 2021. 12. 7. 21:56

1. HTTP 정의 HTTP는 HyperText Transfer Protocol의 약자 HyperText 하이퍼텍스트(문장 중의 어구나 그것에 붙은 표제, 표제를 모은 목차 등이 서로 연결된 문자 데이터 파일) Tansfer 장소를) 옮기다, 이동[이송/이전]하다 HTML을 주고받는다 Protocol Protocol : 프로토콜, 통신 규약 2. HTTP 두가지 특징 Request / Response (요청 / 응답) Stateless - State(상태) + less(없음) 각각의 HTTP 통신(요청/응답)은 독립적 이기 때문에 과거의 통신(요청/응답)에 대한 내용을 전혀 알지 못 한다. 이전의 상태를 전혀 알지 못 한다는 것은 무엇을 의미할까? - **매 통신마다 필요한 모든 정보를 담아서 요청을 보..

Coding/Network 2021. 12. 5. 11:44

React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위이다.  (state, props) ⇒ UI    Side Effect 부작용, 부수 효과라고도 부르는 Side Effect는 일상 생활의 맥락에서는 부정적인 의미로 사용되는 경우가 많지만 프로그래밍 측면에서의 Side Effect는 단순히 부정적인 의미로만 사용되지 않는다.아래처럼 input - output 이외의 다른 값을 조작한다면, 이 함수에는 Side Effect(부수 효과) 가 있다고 표현한다.let count = 0function helloWord(name) { // Input count = count + 1 // Side Effect return `${name}..

Coding/React 2021. 12. 5. 11:26

REST 웹에 존재하는 모든 자원(resorce, ex. 이미지, 동영상, 데이터)에 고유한 URI를 부여하여 자원에 대한 주소를 지정하는 방법론, 또는 규칙. REST 특징 인터페이스 일관성 : 일관적인 인터페이스로 분리되어야 한다 무상태(Stateless): 각 요청 간 클라이언트의 콘텍스트가 서버에 저장되어서는 안 된다 HTTP 프로토콜은 Stateless Protocol이므로 REST 역시 무상태성을 갖는다. Client의 context를 Server에 저장하지 않는다. Server는 각각의 요청을 완전히 별개의 것으로 인식, 처리한다. Server의 처리 방식에 일관성을 부여하고 부담이 줄어들며, 서비스의 자유도가 높아진다. 캐시 처리 가능(Cacheable): 웹 표준 HTTP 프로토콜을 그대..

Coding/Network 2021. 12. 4. 22:50