본문 바로가기

인프런10

0042. TypeScript 공부하기2 - 원시타입, 리터럴타입, 기본타입, 배열과 튜플, 터미널 명령어 섹션 2. 타입스크립트 기본 1강. 기본타입 기본 타입 : 타입스크립트가 자체적으로 제공하는 타입 node.js 초기화 명령어 : npm init ▶ 이때 git도 초기화되는 것 같았다. 무지성으로 엔터만 치다가 읽어보니 git 관련 정보가 있었다. 타입 정보를 제공하는 typesnode 패키지 설치 명령어 : npm i @types/node package.json에 @types/node가 추가된 것을 확인할 수 있다. 그런데, 강사분 폴더를 보니 Section2 폴더에 바로 추가를 하셨다. 즉, 터미널을 이동해서 Section2 안에 package.json파일과 tsconfig.json 파일을 넣어야 한다. 그러기 위해서는 터미널 이동 명령어를 알아야 한다. cd 이동경로 : 이동경로로 디렉토리 이동 .. 2024. 1. 22.
0025. Front-end 공부하기16 - Project 실습, 미니 블로그 만들기 섹션 16. Mini Projects 1강. (실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치 소스코드 모음 https://github.com/soaple/mini-blog GitHub - soaple/mini-blog: 소플의 처음 만난 리액트 실습 프로젝트 소플의 처음 만난 리액트 실습 프로젝트. Contribute to soaple/mini-blog development by creating an account on GitHub. github.com 프로젝트 : 미니 블로그 기획하기 개발을 시작하기 전에 정해야 할 것들 항상 어떤 제품을 개발하기 전에는 기획과 필요한 기능, 전체 디자인에 대해서 간단하게나마 정리 필요 미니 블로그에 필요한 기능 글 목록 보기 기능(리스트 형태) 글 .. 2023. 12. 27.
0024. Front-end 공부하기15 - styling(2) - Font, Color, Border, styled-components 섹션 15. Styling 3강. Font와 관련된 CSS속성, 기타 많이 사용하는 CSS 속성 1. Font와 관련된 속성 font-family 어떤 글꼴을 사용할 것인지를 결정하는 속성 사용할 글꼴의 이름을 적어주면 됨 - 글꼴의 이름에 띄어쓰기가 들어갈 경우, ""로 묶어줘야 함 사용할 글꼴이 콤마로 구분되어 여러 개의 글꼴이 쓰여 있음 font-family 속성의 fall-back 시스템 때문임. (fall-back : 시스템 문제 발생 시 이전의 안정된 상태나 설정으로 돌아가는 기능) 지정한 글꼴을 찾지 못했을 경우 대비하여 사용할 글꼴을 순서대로 지정 최대한 많은 브라우저와 운영체제에서 글자가 깨지지 않고 나올 수 있도록 하기 위함 fall back 시스템의 가장 마지막에 쓰여 있는 것은 일반.. 2023. 12. 27.
0023. Front-end 공부하기14 - Styling(1) : CSS, selector, layout, flexbox 섹션 15. Styling 1강. CSS와 selector 스타일링은 웹사이트 전체 레이아웃 구성을 포함하여 버튼의 색깔, 테두리, 폰트의 크기, 색상 등을 모두 포함하는 개념 1) CSS, Cascading Style Sheets 스타일링을 위한 일종의 언어 Cascading : 계단식, 하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에 해당 스타일들을 마치 계단을 한 칸씩 내려가는 것처럼 우선순위를 가지고 적용되게 만듦 - 결과적으로, 하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음 셀렉터와 실제 스타일로 이뤄져 있음 2) Selcector 엘리먼트에 스타일이 적용되는 규칙 선택자 : 스타일을 어떤 엘리먼트에 적용할지를 선택하게 해.. 2023. 12. 27.
0020. Front-end 공부하기11 - Lifting State Up (Feat. 대체 props와 state의 차이는 뭐였더라??) 섹션 12. Lifting State up 1강. Shared State Shared State 리액트로 개발하다 보면, 하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우가 발생함 각 컴포넌트의 스테이트에서 데이터를 각각 보관하는 것이 아니라, 가장 가까운 부모 컴포넌트에의 스테이트를 공유해서 사용하는 것이 효율적 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 스테이트를 공유해서 사용하는 것 State에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말함 하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용하는 것 2강. 하위 컴포넌트에서 state 공유하기 물의 끓음 여부를 알려주는 컴포넌트 Calculator 컴포넌트 안에 온도를 입력하는 부분을 별.. 2023. 12. 25.
0019. Front-end 공부하기10 - Forms, Controlled Component, Textarea, Select, File input, Multiple inputs, Input null value 섹션 11. Forms 1강. Form과 Controlled Component 1) Form 사용자로부터 입력을 받기 위해 사용 리액트와 HTML이 차이가 있음 리액트 폼 : 컴포넌트 내부에서 state를 통해 데이터를 관리 HTML 폼 : 엘리먼트 내부에 각각의 state가 존재(접근하기 쉽지 않음) 2) Controlled Component 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트 값이 리액트의 통제를 받는 Input Form Element를 의미함 우측은 클래스 컴포넌트를 기준으로 그린 것인데, 함수 컴포넌트에서는 useState 훅을 사용하여 state를 관리 컨트롤드 컴포넌트는 리액트에서 모든 값을 통제할 수 있는 구조를 가지고 있음 컨트롤드 컴포넌트를 사용하면 사용자의 .. 2023. 12. 23.
0018. Front-end 공부하기9 - Lists and Keys, 여러 개의 컴포넌트 렌더링하기 섹션 10. List and Keys 1강. List와 Key List : 목록 같은 아이템을 순서대로 모아 놓은 것 Array : 배열 JavaScript의 변수나 객체들을 하나의 변수로 묶어 놓은 것 Key 열쇠는 모양이 다 다르다(고유하다). 각 객체나 아이템을 구분할 수 있는 고유한 값 아이템들을 구분하기 위한 고유한 문자열 2강. 여러 개의 Component 렌더링 하기 배열과 키를 사용하여 반복되는 여러 개의 컴포넌트들을 쉽게 렌더링 - 반복되는 다수의 엘리먼트가 렌더링 되는 것 map() mapping, 한쪽에 있는 아이템과 다른 한쪽에 있는 아이템을 짝지어 준다는 의미 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것 배열의 첫번째 아이템부터 순서대로 각 아이템의 어떠한 연산을 수.. 2023. 12. 23.
0017. Front-end 공부하기8 - Conditional Rendering(조건부 렌더링) 섹션 9. Conditional Rendering 1강. Conditional Rendering의 정의와 Inline Conditions 1) Conditional Rendering : 조건에 따른 렌더링, 조건부 렌더링 어떠한 조건에 따라서 렌더링이 달라지는 것 조건 : 프로그래밍에서 사용하는 조건문 조건문의 결과는 TURE 아니면 FALSE가 나오는데 이 결과에 따라서 렌더링을 다르게 하는 것 ex. TRUE : 버튼을 보여준다. FALSE : 버튼을 가린다. Greeting 컴포넌트는 isLoggedIn이라는 변수의 값이 True에 해당되는 값이면 UserGreeting 컴포넌트를 return 하고, 그렇지 않으면 GuestGreeting 컴포넌트를 리턴하는 컴포넌트 props로 들어오는 isLog.. 2023. 12. 22.
0011. Front-end 공부하기2 - 리액트 소개, 리액트 시작하기(Feat. 인프런, 처음 만난 리액트 with 챗GPT) 섹션 1. 리액트 소개 1강 : 리액트는 무엇인가? 정의 : A JavaScript library for building user interfaces. 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것 문자열 관련 기능 숫자 관련 기능 날짜 관련 기능 사용자 인터페이스(User Interface, UI) 사용자와 컴퓨터 프로그램이 상호작용을 하기 위해 중간에서 서로 간의 입력과 출력을 제어해 주는 것 버튼, 텍스트 입력창 등이 모두 UI UI 라이브러리 : 사용자 인터페이스를 만들기 위한 기능 모음집, 화면을 만들기 위한 기능들을 모아 놓은 것. React JS: 대표적인 자바스크립트 UI 라이브러리 - 메타(페이스북)에서 만든 오픈소스 자.. 2023. 12. 6.
0010. Front-end 공부하기1 - 강의선정/준비하기(Feat. 인프런, 처음 만난 리액트(React)) 1. 강의는 인강이다. 사교육에 절어있는 한국인으로서 무언가를 배울 때는 인강이 최고다. 그래서 필자는 인프런이라는 사이트에서 강의를 듣기로 했다. 이 강의를 선택한 이유는 사람들이 많이 수강해서이다. 사람들이 많이 수강한 이유는 무료여서 그렇지 않을까 싶다. 무료임에도 강의 퀄리티가 상당히 좋은 것 같으니 추천하는 편이다. (지금 8.93% 듣고 추천하는 것이다. 판단은 알아서..) 2. 강의 노트 원래 강의를 들으면서 블로그에 차근차근 정리하려고 했는데, 양이 방대해서 그건 어려울 것 같다. 그냥 필자가 공부한 내용을 정리한 것이니 노트처럼 보면 될 것 같다. 사실 내가 보려고 만든거다. 섹션 0. 준비하기 1강 : HTML과 CSS HTML, Hyper Text Markup Language : 웹사.. 2023. 12. 5.

티스토리툴바