🟣 타입스크립트에서는 객체지향 프로그래밍의 클래스를 정의하고 사용할 수 있다. Object Oriented Programming 어플리케이션을 실제 세상에 존재하는 객체와 같은 단위로 쪼개고 객체들이 서로 상호 작용함으로써 시스템이 동작되는것을 객체지향 프로그래밍 이라고 한다. 연관된 변수와 함수들을 한 덩어리로 묶어서 구조화하여 표현하는 프로그래밍 스타일을 말한다. 즉, 실제 삶으로 둘러싸고 있는 사물 객체의 개념을 코드에 대입시켜 덩어리 덩어리로 묶어서 코드를 작성 한다고 생각하면 이해하기 쉬울 수 있다. 객체지향 프로그래밍에서 Class 란 ? 객체지향 프로그래밍에서 클래스와 객체는 댈래야 땔수 없는 관계이다. 객체는 클래스를 통해 만들어 질 수 있고 클래스 는 객체가 어떤 모습을 가질지를 정의 하고 묘사하는 객체의 뼈대 즉, 객체를 만들어 내는 설계도 생산 틀이라고 생각 하면 된다. 예시 위 코드를 보면 직원에 대한 정보를 담을 수 있는 변수들 과 직원의 …

함수의 타입 명시 함수의 반환 (return) 타입 함수에 최종 리턴값 함수 의 반환 타입을 명시하는 방법 void 타입 아무것도 반환 하지 않는 함수의 반환 값으로만 사용될 수 있는 타입 string 타입 함수의 return 값이 문자열 이라면 string 이라고 명시해 줄 수 있다. [] 배열 타입 반환 되는 값이 배열 타입인 경우 배열 타입을 명시해 줄 수 있다. 함수의 매개변수 타입 명시 string 타입이 명시된 후에는 streing 말고 다른 타입을 가진 인자 (argument) 는 전달 될 수 없다. 이렇게 숫자를 전달 하려고 하면 타입에 관한 에러 메세지가 나오게 된다. ⚠️ Argument of type ‘number’ is not assignable to parameter of type ‘string’ 만약 함수를 호출 할 때 첫번째 매개변수에 메시지 만을 인자로 전달 하고 싶을때에는 두번째 인자만을 지우면 될까 ? 🙅‍♂️ 아니다 두번째 인자를 그냥 지우기만 …

Any Type any 타입은 어떠한 타입의 값이든 이 변수에 할당 될 수 있다는 뜻이다. 한마디로 타입 체크 없이 아무거나 다 상관 없다는 것이다. ⚠️ 타입스크립트에서 의 일반적인 규칙은 타입에 관한 더 많은 정보를 명시할 수록 좋다. 타입에 대한 더 많은 정보가 제공이 될 수록 명확하게 개발자의 의도를 코드로 기술할 수 있고 타입 에러들을 컴파일 시 잡아냄으로서 코드가 좀 더 깔끔하고 효과적이게 유지보수 될 수 있다. 즉, Any Type 을 쓰는 경우 최대한 피하는 것이 좋다. 만약 작업중인 코드의 타입 명시가 어려운 경우 예를 들어 써드 파티 라이브러리에서 동적 컨텐츠를 가지고 와서 프로그램 작성시 에는 변수에 타입을 알기 어렵기 때문에 타입 지정을 할 수 없는 경우 이러한 경우에만 아주 제한적으로 any 타입을 사용하는 것이 좋다. Union - 유니언 타입 어떤 타입이 변수에 들어올지는 정확히 알 수 는 없지만 변수의 타입이 무조건 숫자 혹은 문자열 이라는 것을 …

인터페이스 내에 gender 프로퍼티의 값이 string 으로 되어 있는데, 이 값을 male or female 두가지로만 제한 하고 싶다면 단순히 property 타입을 string 으로 명시하는 것 말고 조금 더 나은 방법으로 크게 두가지 방법이 있다. 1. 열거형 (Enum) Enum 이란 연관된 아이템들을 함께 묶어서 표현 할 수 있는 수단 Enum 을 사용하기 위해서는 먼저 Enum 을 선언 해야 하는데 사용하기 위해서 Enum 키워드를 넣어주고 이름을 지어준다. 그리고 선택지로 쓸 수 있는 값을 Enum 속에 넣어 준다. 선언된 enum 을 타입으로 쓰기 위해 인터페이스 의 젠터 프로퍼티의 타입을 string 이 아닌 이넘의 이름인 GenderType 으로 바꾸어 준다. ⚠️ 여기서 짚고 넘어가야 할것은 컴파일 된 자바스크립트 코드를 확인 하면 컴파일시 사라지는 interface 와는 달리 enum 은 코드가 구현이 되어 자바스크립트 파일에 나타나게 된다 이것은…

Interface 로 객체 구조를 정의하는 방법 현재 반환되는 함수에 타입이 객체 구조로 명시 되어 있다. 복잡한 이 코드를 조금 더 나은 방법으로 바꾸기 위해 인터페이스를 사용할 수 있다. 인터페이스를 사용하기 위해서는 인터페이스를 타입으로 생성하기위해 인터페이스를 만들어 주어야 한다. 완성된 인터페이스는 어플리케이션 내에서 스트링 이나 넘버처럼 타입으로 명시 되면서 사용 할 수 있다. 인터페이스를 타입으로 사용할 때 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제 된다. 함수의 반환 값은 반드시 인터페이스에 정의된 property 들을 가져야 한다. 예를 들어 return 값을 string 으로 바꾼다면, 에러가 나타나게 된다. ” 정의된 하나의 프로퍼티가 반환값에 포함되어야 하는데 반환값에 없다 ” 라는 에러가 생기게 된다. 그럴때는 있어도 되고 없어도 되는 property 를 나타낼수 있는 방법으로는 인터페이스에 정의된 프로퍼…

타입 명시 변수를 선언할 때, 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정 하는것 Syntax 변수 이름 뒤에 : 콜론을 일력하고 콜론 뒤에 변수에 데이터 타입을 지정해 주면 된다. 하지만 숫자를 문자열이나 다른 데이터 타입으로 바꾸고 컴파일러를 작동 시키면 터미널에서 볼 수 있듯이 컴파일 에러를 얻게 된다. 컴파일 에러는 코드를 작성 할 때 문법을 잘 못 작성해서 컴파일 시 생기는 오류를 나타내는 것이다. 예시 함수의 파라미터 매개변수도 변수이기 때문에 타입을 지정 할 수 있다. 또한 함수의 결과 값 에도 타입을 명시할 수 있다. 파라미터가 들어가는 괄호 뒤에 : 콜론을 입력하고 함수의 값에 타입을 선언할 수 있다. 만약 함수가 아무런 값도 반환하지 않으면 :void 라는 타입을 명시 할 수 있다. ( void 란 이 함수는 아무것도 반환 하지 않는다 라는 의미를 부여 ) 만약 함수가 어떠한 특정 값을 반환하는 함수일 경우에는 void 대신 반…

Static Typing 타입스크립트의 가장 독특한 특징은 Static Typing 이라고 불리는 정적 타이핑 기능을 자바스크립트 언어에 제공을 한다. Static Typing 이란 타입을 선언하고 선언된 타입에 맞는 값 만 할당 또는 반환 되어야 된다는 뜻이다. Type Inference ( 타입 추론) 타입스크립트에서는 타입 표기가 없는 경우 코드를 읽고 분석하여 타입을 유추해낼수 있다. 👇 🙅‍♂️ 👇 🙆‍♂️ 예시 student 라는 이름을 갖고 있는 객체가 있는데 TypeScript 는 스스로 객체 속에 property 할당 값을 검사하고 어떠한 타입이 property에 할당 값으로 주어졌는지 확인을 한다. 또한 이런 할당 값의 타입을 바탕으로 객체의 property에 타입 추론을 적용 한다. 따라서 string 이 할당 값으로 주어진 name property 를 number 로 재 할당 하려고 하면 error 메세지를 보낸다. return 타입을 가진 functio…

TypeScript 란 ? 타입스크립트 ( TypeScript ) 는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. (JavaScript 대용품 같은 언어) 마이크로소프트에서 개발, 유지하고 있으며 “엄격” 한 문법을 지원한다. 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계 되었다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작 한다. 자바스크립트에서 타입 부분을 조금 업그레이드 해서 쓸 수 있는 자바스크립트 업그레이드 버전이라고 생각 하면 된다. TypeScript 를 쓰는 이유 자바스크립트는 다이나믹 타이핑을 제공하는 언어이기 때문에 숫자와 문자가 만났을때 숫자로 바꿔서 연산을 하게 된다. 다이나믹 타이핑은 편리하지만 프로젝트 사이즈가 커지게 되면 오히려 단점으로 적용이 될 수 있다. 코드가 길어지면 길어질수록 자유도 & 유연성은 오히려 우리에게 좋지 않다. 그래서 TypeScrip…

기업협업 회고 기업협업 기간 적용기술 React.tsx, styled-Component, React-query 협업툴 Monday monday 를 통해서 협업 기간동안 작일, 금일 어떠한 것들을 했으며, 어떠한 것들을 진행을 할것인지 에 대해서 기업 CTO 님과 매일 내용을 공유 하였다. 담당 프로젝트 기능 QR code 타이머 사용자의 데이터가 담긴 유효한 qr 코드에 15초 타이머 기능 구현 15초 시간이 지나면 해당 qr 코드는 더이상 유효하지 않도록 구현 15초 시간이 지나면 유효한 새로운 qr 코드 생성 사진 Modal ( Recoil 라이브러리 ) Recoil 라이브러리를 이용해 전역에서 관리 할 수 있고 재사용 가능 한 Modal 구현 사진 댓글 기능 사용자들 간 소통을 할 수 있는 댓글 기능 구현 사용자가 댓글을 입력 하면 해당 데이터를 post 해서 서버로 보내고, 보낸 데이터를 다시 get 해서 댓글 내용을 사용자의 이미지, 이름과 함께 보여질 수 있도록 구…

프로젝트 회고 프로젝트 소개 Class 101 사이트 클론 코딩 개발인원 FrontEnd (3명) BackEnd (2명) 개발 기간 2023.02.24 ~ 2023.03.09 적용 기술 FrontEnd React.js, sass, JavaScript, HTMl, CSS BackEnd Node.js, Express, Json Web Token, Bcrypt, MySQL, uuid Common RESTful API, Git, Github, Trello, Slack, Notion, Postman 팀원들과 협업 NOTION Notion 을 통해서 프로젝트 기간동안 구성원들 간 일별 할 일 / 한일에 대해서 내용을 공유하고 Block 사항이 발생하는 일들에 대하여 공유하여 같이 해결할 수 있는 일들에 대하여 고민할 수 있는 시간이다. TRELLO Trello 를 통해 매일 DSM 을 진행하면서 프로젝트 구성원들의 스케줄을 정리하고 팀원들과 공유를 했다. 회원가입 , 로그인, 리스트페이지…

프로젝트 회고 프로젝트 소개 쇼핑몰 ( E-commerce ) 배민 문방구 (배달의민족) 사이트 클론 코딩 개발인원 FrontEnd (3명) BackEnd (3명) 개발 기간 2023.02.06 ~ 2023.02.17 적용 기술 FrontEnd React.js, sass, JavaScript, HTML, CSS BackEnd Node.js, Express, Json Web Token, Bcrypt, MySQL, uuid Common Restful API, Git, Github, Trello, Slack, Notion, Postman 팀원들과 협업 NOTION Notion 을 통해서 프로젝트 기간동안 구성원들 간 일별 할 일 / 한 일에 대해서 내용을 공유하고 Block 사항이 발생하는 일들에 대하여 공유하여 같이 해결할 수 있는 일들에 대하여 고민할 수 있는 시간이었다. TRELLO Trello 를 통해 매일 DSM 을 진행하면서 프로젝트 구성원들의 스케줄을 정리하고 팀원들과 공…

React- Custom Hook Custom Hook - 이름이 use 로 시작하는 자바스크립트 함수 이다. custom hook 을 사용하면 지금까지 컴포넌트 내부에 한 덩이로 결합하여 사용했던 State 와 Effect 를 분리하여 사용할 수 있다. 여러 퍼즐 조각을 끼워 맞춰 하나의 퍼즐을 완성 하듯이 React component 를 여러 Hook 을 조합하는 방식으로 개발할 수 있게 된다. 로직을 독립적인 함수로 분리함으로써 하나의 로직을 여러 곳에서 반복적으로 재사용할 수 있게 된다. React 16.8 업데이트로 Hooks 가 추가됐고, Hooks 를 통해 함수 컴포넌트에서도 state 와 effect, life cycle 등을 처리 할 수 있게 됐고, 여러기능들을 구현할 수 있었지만, 내장 hook 을 이용해 로직을 만들면 코드가 길어져서 가독성이 떨어지게 되는 경우도 있고, 만든 로직을 하나의 컴포넌트가 아닌 다른 컴포넌트에서도 사용해야 하는 경우가 발생…

React- Node.js / npm 리액트 프로젝트를 시작하기 위해선 Node.js 를 설치해야 한다. JavaScript 는 웹 브라우저에서 동작하기 위한 언어로 탄생 했다. 때문에 JS 의 실행환경인 각 브라우저마다 JS 를 해석하고 실행 할 수 있는 엔진이 있는데 , 대표적으로 구글 chrome 의 v8 엔진이 있다. 웹 개발 시장이 커지고 js 를 다룰 줄 아는 개발자가 늘어나면서, 웹 브라우저 이외의 환경에서도 js 를 이용해 개발하고자 하는 니즈가 생겨났고, 이에 탄생한 것이 구글 chrome 의 v8 엔진 기반으로 만들어진 Node.js 이다. 즉, Node.js 는 자바스크립트가 브라우저 밖에서도 동작하게 하는 자바스크립트 실행 환경이며 이는 자바스크립트의 “탈 웹” 이라고도 한다. React Application 은 웹 브라우저에서 실행되기 때문에 Node.js 와 직접적인 연관은 없지만, 리액트 이외에 프로젝트를 개발하는 데 필요한 주요 도구들 (e…

React- CRA React 는 UI 기능만 제공하기 때문에 web application 을 만드는 데 필요한 개발환경 을 직접 구축해야 하는 것들이 많다. 직접 구축하면 성능을 최적화 시킬 수 있지만 web application 구축에 필요한 패키지를 별도로 설치하고 유지보수도 해야 하는 등 신경 쓸 것이 많다. 이러한 문제를 해결하기 위해서 React 팀에서 프로젝트를 시작할 때 필요한 개발 환경을 세팅해주는 도구 (toolchain) 인 CRA ( Create React App ) 를 만들었다. CRA 를 이용하면 하나의 명령어로 React 개발환경을 구축할 수 있다. SPA ( Single Page Application ) 환경을 구축할 때는 CRA 를 통해서 React 를 시작하도록 공식문서에서도 추천 하고 있다. CRA 를 통한 프로젝트 구축 터미널에서 프로젝트를 시작하고자 하는 폴더에 진입 한다. 프로젝트를 시작하고자 하는 폴더에 있는지 확인 후, 명령…

React- 상수 데이터 페이지를 구성하다 보면 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해 가져올 필요가 없는 데이터들이 있다. 이런 데이터들을 상수 데이터로 만들어 UI 를 구성할 수 있다. 상수 데이터는 이름 그대로 변하지 않는 정적인 데이터를 의미 한다. 상수 데이터를 사용하는 이유 반복되는 UI 를 하드코딩으로 하나하나 만들어두면 코드가 길어져서 가독성에 좋지 않다. 수정이 필요할때 수정해야 하는 부분들을 찾기 힘들어 유지보수가 어렵다. 하지만 상수 데이터를 활용하면 Array.map () 메서드와 조합해서 반복되는 UI 를 보다 간결하게 표현할 수 있다. 이후 수정이 필요한 경우 레이아웃은 map 메서드에서 return 하는 jsx 부분만, 내용은 상수 데이터 부분만 수정해주면 되기 때문에 유지보수 에 좋다. 상수 데이터 활용 / 선언 중복되는 코드를 기반으로 상수 데이터를 만들 때는 우선 바뀌어 들어갈 부분을 찾아야 한다. m…

React- MOCK Data 프론트엔드 개발을 진행하다 보면, UI 구성에 필요한 백엔드 API 가 완성되지 않은 상황에서 개발을 진행해야 할 수도 있다. 이런 경우 백엔드에서 API 가 완성될 때 까지 무작정 기다리는 게 아니라, 데이터가 들어오는 상황에 대비해 의도한 대로 UI 가 구현되는지 확인해야 한다. 이때 사용되는 데이터가 MOCK (모조, 거짓) data 이다. 즉, 실제 api 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터가 바로 MOCK DATA 이다. 사용 이유 백엔드 api 가 미완성인 상황에서 mock data 를 사용하지 않는다면, 실제 data 들이 들어올 부분들을 하드코딩으로 대체하고 작업을 진행하게 된다. mock data 사용없이 개발을 진행한다면 여러 문제가 발생하게 된다. 개발이 진행됨에 따라 코드가 많이 확장된 상태이기 때문에, 백엔드 api 가 완성되고 실제 데이터를 반영하는 작업을 수행할 때 …

React-useEffect useEffect ( ) 함수는 컴포넌트가 렌더링 될 때마다 특정 작업 (Side effect) 을 실행할 수 있도록 하는 리액트 Hook 이다. Side effect 는 component 가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다. useEfect는 함수이고, 매개변수로 콜백 함수를 가진다. useEffect 에 인자로 전달하는 콜백 함수에는 특정한 side effect 를 수행 시킬 수 있다. side effect 를 발생시키는 함수를 바로 호출 하는것이 아니라 useEffect 의 인자로 전달 했다. 위와 같이 useEffect 의 인자로 전달된 콜백 함수는 곧바로 호출되는 것이 아니라 모든 렌더링이 완료된 후에 호출된다. 즉, 렌더링을 blocking 하지않고 side effect 를…

React-Props props 란 컴포넌트 속성값을 의미한다. 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다. props 를 이용해서 전달하고자 하는 어떤 값이든 ( 변수, 함수, state값, event handler 등 ..) 모두 자식 컴포넌트에 전달할 수 있다. 사용 언제 props 가 필요 할까 ? 부모 컴포넌트에서의 데이터 잔달 위 컴포넌트에서 ‘햄버거’ 라는 문자열을 food 라는 변수에 담아 관리하고 있다. food 라는 변수를 사용해 화면에 표현할 수 있다. 먼저 child 컴포넌트를 만들고 부모컴포넌트에서 child 컴포넌트를 import 한다. child 컴포넌트를 return 문 내에 넣어준다. 여기서 집중해야 할 것은 “어떤 데이터를 자식 컴포넌트로 보내주어야 하는가 ” 이다. 위 사진에서 부모 컴포넌트에는 이미 선언되어 있고, 자식 컴포넌트 에서도 필요로 하는 데이터는 바로 food 라는 변수 이다. 보내주고자 하…

React-Hook Hook 은 클래스 컴포넌트에서만 사용할 수 있었던 state (상태) 관리와 lifecycle 관리 기능을 함수 컴포넌트에서도 사용 할 수 있도록 연동 (hook in) 해주는 함수를 의미한다. 이러한 hook 들의 모음을 Hooks 라고 한다. React 는 useState 와 같은 내장 hook 을 몇 가지 제공하고 있으며, 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook 을 직접 만드는것 ( custom hook ) 도 가능 하다. Hook은 클래스 컴포넌트 안에서는 동작하지 않으며 오로지 함수 컴포넌트 내에서만 사용해야 한다. 사용 규칙 이 두가지 경우를 제외한 곳에서는 호출할 수 없다. 클래스 컴포넌트의 메서드 뿐만 아니라 일반 JavaScript 함수에서도 사용할 수 없다. Hook 은 항상 함수 컴포넌트 내의 최상위 ( at the top level ) 에서만 호출해야 한다. 이러한 규칙을 따르다면 해당 컴포넌트가 랜더링 될 때…

React-state, setState state state 를 사용하기 위해 ‘useState’ 함수를 import 한 후에 사용해야 한다. useState 함수는 ‘Hook’ 의 일종으로 내장되어 있는 react로 부터 가져올 수 있다. import 한 useState Hook 은 사용 규칙에 따라 컴포넌트 선언문 내에서 최상위 블록 내에서 사용 하면 된다. (return 위) useState Hook 을 사용할 때는 useState Hook 으로 부터 반환 되는 값을 ‘구조 분해 할당’ 을 통해 각각의 변수에 담아서 사용 한다. [ state, setState ] 첫 번째 요소 (state) 는 우리가 동적으로 관리하고자 하는 상태값이다. 해당 상태의 초기값은 useState hook 을 호출 할때 인자로 (defaultValue) 로 넘겨준다. 두 번째 요소 ( setState function ) 는 첫 번째 요소인 상태값을 업데이트 하는 함수 이다. sta…

React meta 에서 개발한 오픈 소스 자바스크립트 라이브러리. Web Application 의 발전 우리가 사용하는 사이트에는 보이는 것 (UI: User Interface) 과 할 수 있는 것 (UX: User Experience) 이 많다. 뿐만 아니라 문서 작성, 쇼핑, SNS, 게임 등의 기능을 웹 브라우저에서 이용할 수 있다. 이처럼 사용자가 별도의 응용 소프트웨어 (어플리케이션) 를 설치하지 않아도 웹 브라우저를 통해 응용 소프트웨어의 기능을 이용 할 수 있도록 만든 웹 서비스를 웹 어플리케이션 ( Web Application ) 이라고 한다. 이러한 이유로, 현대의 대다수 웹 서비스는 웹 페이지라는 단어보다 웹 어플리케이션이라는 단어가 많이 사용 되고 있다. 과거의 웹 페이지는 UI 가 단순하고 검색어 및 회원정보 입력, 항목 클릭 등 비교적 상호작용이 적었던거에 비해 현재의 웹 어플리케이션은 동적이고 다양한 UI 를 가지며 카테고리 hover 이벤트, 좋아…

React-Router Router.js 에 경로지정, 지정된 경로대로 컴포넌트를 화면에 그리는 방법 현재 사용하고 작업 하고있는 에디터 (VScode, 등…) 에서 터미널을 오픈 한 다음 설치가 되었다면 npm install react-router-dom 을 입력해주면 설치 할 수 있다. 설치가 되었다면 src 폴더에 index.js 파일이 위치해 있는 같은곳에 Router.js 파일 하나를 만들어 준다. Router.js 파일을 만들어야 하는 이유는 sign up 띄우거나 log in 을 띄워야한다면 index.js 에서 매번 랜더링 할 컴포넌트를 매번 수정해야 하고 컴포넌트 별로 경로 설정 또한 할 수 가 없다. Router.js 파일은 다른 파일에서 import 하기 때문에 export 가 필요하다. 만들어 놓은 컴포넌트에 대해 간략하게 설명하면 BrowserRouter 컴포넌트는 경로 변경에 대해 여러 편의기능을 제공해주는 컴포넌트인데 대표적으로 페이지가 새…

React 함수 컴포넌트의 side effect 함수 컴포넌트에서의 input 과 output 리액트에서 렌더링이랑 state 랑 proprs 를 기반으로 UI를 그려내는 행위 이다. 리액트에서 UI 를 컴포넌트 단위로 구성하고, 그 컴포넌트는 함수 컴포넌트를 이용해서 만들 수 있다.(함수의 본질은 input 을 바다서 output을 출력 하는것) 리액트의 함수 컴포넌트 본질은 무엇일까 ? 함수 컴포넌트는 state 그리고 props 를 통해서 JSX 를 만들어내는 것이 본질적인 역할이다. 즉, 함수 컴포넌트의 input 은 state 그리고 props 라고 할 수 있고, output 은 JSX 라고 할 수 있다. 이를 식으로 표현 하면, (state,props) => JSX (엄밀히 말하면 리액트의 함수 컴포넌트는 인자로 props 만을 받고 state는 인자로 받는것이 아니라 useState hook 을 통해서 꺼내오지만, 개념상으로 봤을때는 state 그리고 pro…

AWS - Amazon Web Services AWS- Amazon Web Services 의 줄임말로 아마존에서 제공하는 클라우드 서비스 이다. 클라우드 서비스란 다양한 컴퓨팅 자원을 온디맨드로 사용할 수 있는 서비스이기 때문에 AWS 사용자는 직접 물리적인 서버 장비를 구입하거나 임대하여 설치할 필요없이 원격으로 손쉽고 빠르게 서버를 구축할 수 있다. 아마존에서 이런 클라우드 서비스 플랫폼을 처음부터 만들 생각을 하고 있던 것은 아니었다. 인터넷 쇼핑몰을 운영하던 아마존은 늘어난 트래픽과 높아진 주문량을 감당하다보니 자연스럽게 굉장히 뛰어난 수준의 내부 인프라 시스템을 구축하게 되었고 컴퓨팅, 스토리지, 데이터베이스 등 운영 서버에 필요한 인프라를 누구보다 안정적이고, 규모를 키울 수 있으면서도, 저렴하게 운영할 수 있는 능력을 갖게 되었다. 아마존은 이러한 능력을 가지고 본인들의 쇼핑몰 하나에만 제공하기보다 전세계 모든 회사를 대상으로 제공하자는 생각을 하게 되었고 결…

HTML 파일을 생성하고 페이지를 만들때 꼭 들어가야 하는 기본 구성이다. ⬆️ HTML5 문서임을 브라우저에 알리는 지시어 이다. 반드시 첫번째 줄에 나와야 하고 이것은 HTML 태그가 아니며 대문자 소문자로 구분없이 기입 해도 된다. ⬆️ HTML 문서의 전체 범위를 지정하고 Web Browser 가 해석해야 할 HTML 파일의 전체 영역이며 시작과 끝 지점을 알려 주는 역할을 한다. ⬆️ head 태그로 둘러싼 부분은 파일의 제목, 본문을 설명하는 메타 태그들, 자바스크립트 코드와 CSS 스타일 시트 등을 포함하며 문서의 본문은 포함되지 않는다. ⬆️ HTML 페이지의 타이틀은 페이지의 제목으로, 브라우저의 타이틀 바에 출력된다. 타이틀은 title 태그를 이용하며 head 태그 내에서만 작성된다. ⬆️ Web Page 저작자, 문자 인코딩 방식, 파일 내용 등 다양한 메타 데이터를 표현하기 위해 사용된다. 이 태그는 name 과 content 속성을 쌍으로 구성한다. 인코딩 방식을 …

CSS ( Cascading Style Sheets ) HTML 만으로도 웹 을 만들 수 있지만, 화려한 웹 사이트를 만들려면 HTML 과 CSS 는 뗄 수 없는 관계 이다. ( CSS 란 HTML 태그에 디자인 을 입혀주는 것이다. 사람이 옷을 입는것 과 같다.) HTML 이 헤더, 문단, 테이블 등으로 정보를 조직화 하는 구조를 제공을 한다면, css 는 html 이 아름다워 보일 수 있도록 html에 스타일을 입히는것이다. CSS 적용 하는 법 👇 CSS 를 작성한 후 HTML 에 적용되도록 반영하는 3가지 방법이 있다. CSS 작성법 👇 스타일을 적용할 선택자( selector ) 를 지정하고, 어떤 스타일을 적용할지 작성한다.

Git⬇️ git 은 컴포터 파일의 변경 사항을 추적 하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템 이다. Local 에서 본인의 개발 소스를 관리 할 수 있고 원격 저장소에 영구 적으로 백업 할 수 있고 다양한 협업이 가능 하도록 지원한다. Git 순서⬇️ Git workflow⬇️ Git 용어 정리 ⬇️ git 에서 프로젝트를 저장 할 수 있고, 함께 프로젝트를 진행하는 팀원 이 있다면 팀원들과 공유 할 수 있는곳 (공유폴더) PM 이 스프링 프로젝트 세팅을 한 후 다른 팀원들이 git clone 을 받을 수 있도록 repository 를 생성 한다. git init 또는 git clone 으로 기존 github 에 있는 저장소를 내 로컬로 가져온다. 개인의 Laptop 또는 Desktop 외부의 github 저장소가 있는 url 에 대한 alias(별칭) 을 만들어 관리하기 위한 명령어. (이 명령어는 단순히 github 만을 위한 것…