전체 글

AWS란?

Traditional IT 방식의 문제점 Datacenter 렌트 비용을 지불해야한다. (보통 monthly / yearly contract) Power supply, cooling, maintenance 비용을 지불해야한다 새로운 하드웨어(서버)를 추가하거나 교체할 때 시간이 많이 소모된다 확장하는데 제한사항이 많다 현재 유지되고 있는 인프라를 24/7 모니터링 할 인원을 고용해야 한다 천재지변에 대응하기 어렵다(지진, 화재, power shutdown, 등) Cloud Computing Cloud computing 이란, IT 리소스르르 인터넷을 통해 on-demand로 제공해주는 서비스를 말한다 Cloud 서비스를 이용하면 사용한만큼만 지불하면 되는 pay-as-you-go pricing이 적용된다..

[TeamProject] 배민문방구 클론코딩

클론 사이트 배민문방구 - https://brandstore.baemin.com/ 배민문방구 쓸데없는 거 팔아요! 재미있게 사는 배민문방구 by.배달의민족 brandstore.baemin.com 배민문방구는 주식회사 우아한 형제들의 사이트로 재미있게 사는 경험을 추구하는 문구, 리빙, 책, 콜라보 한정판 제품을 판매하며 고유의 색감과 깔끔한 디자인과 탄탄한 기본적인 기능들이 합쳐져있는 온라인 커머스 사이트이다 시연 영상 https://www.youtube.com/watch?v=JQFqtvcOhj0 AWS 배포 : 88문방구 (http://3.137.123.220:8000/main) 88stationery GitHub https://github.com/cks612/32-1st-88stationery-fro..

[React] useEffect와 Side Effect

Rendering in React React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위 렌더링의 결과물은 UI 요소, 즉, 화면에 JSX 문법으로 무엇이 나타날지를 적어둔 컴포넌트들 그러한 렌더링 결과물에 영향을 주는 요소가 state와 props Side Effect Side Effect는 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 즉, React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들이라고 볼 수 있다 코드 예시 let count = 0 function greetWithSideEffect(name) { // Input count = count + 1 // Side ..

[React] map 함수 적용시 key props를 부여하는 이유

Key React에선 기존에 한땀한땀 작성해야했던 배열을 map()이라는 함수를 이용해 element list로 반복 실행할 수 있다 key는 react가 어떤 항목을 변경, 추가 , 삭제할지 식별하며 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트로 지정해야 한다. 왜 필요할까? 위에서 언급했던 map이라는 함수로 요소를 하나하나 뿌려준다고 가정하자 리액트는 내용이 바뀔 때 즉, state값이 바뀔 때 마다 다시 랜더링을 하는데 10개의 리스트 중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 어디서 달라졌는지 파악하고 전체를 재렌더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다 그러면 리액트는 key값으로 변한 내용인지,..

[React] Hooks

Hooks Hooks은 리액트 v16.8에 새로 도입된 기능으로 함수 형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라 부른다 Hooks은 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState & 렌더링 직후 작업을 설정하는 useEffect등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 만일 앱을 react hook을 사용하여 만든다면 class component. render 등을 안 해도 된다는 뜻이다 즉, 모든 것은 하나의 function 함수형 프로그래밍이 가능해진다는 것이다 Why?? 왜 굳이?? 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꾸는 이유는 클래스는 react를 배우는 데에 있어서 큰 진입장벽이었다..

[SCSS] SCSS는 무엇인가?

SCSS CSS는 HMTL 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정이다. 하지만 프로젝트 규모가 커지거나 작업이 고도화될수록CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 된다코드의 재사용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS / SCSS라고 한다 CSS의 태생적 한계를 보완하기 위해 Sass는 유용한 도구들을 제공한다 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance 설치방법 npm i sass --save yarn add sass Sass와 SCSS 차이 Sass (Syntactically Awesome ..