본문 바로가기

react15

0055. 실전 FE 개발 배우기12 - 웹소켓 연결하기, 실시간 데이터 받기, 로그아웃(Bearer 토큰) 섹션 2. 서버 API 연동하기 8강. 웹소켓 연결하기 1) 웹소켓 기반 라이브러리 요청-응답 방식이 아니라 실시간 양방향 통신 가능 기존 : app → axios → 응답 소켓 : 한 번만 연결을 맺으면 연결이 끊어지기 전까지 실시간으로 가능. 서버에서 먼저 보내줄 수도 있다. 대신, 배터리 소모가 있다. npm i socket.io-client 웹소켓 라이브러리 설치 2) Custom hooks 자주 쓰는 것은 hook으로 만든다. Custom hook에 익숙해져야 한다. import { io, Socket } from 'socket.io-client'; import Config from 'react-native-config'; let socket: Socket | undefined; const us.. 2024. 2. 7.
0038. 실전 FE 개발 배우기1 - 리액트, 윈도우-안드로이드 환경 설정하기(Feat. 안드로이드 스튜디오) 이번에 필자가 듣는 강의는 이거다. 인프런의 배달앱 클론코딩 [with React Native]이다. 섹션 0. 강의 소개 1강. 리액트 네이티브 시작하기 React Native Learn once, Write anywhere : 한번 배워서 여러 군데 써먹어라! Expo CLI vs React Native CLI - React Native CLI 추천 2강. 에러질문법 라이브러리, 프레임워크를 끌어다 쓰다 에러가 나면 어디서 에러가 났는지 찾기가 어려운 경우가 많다. 그래서 질문이 굉장히 중요한데 질문을 하는 기본이 안되어 있는 경우가 많다. 이런 질문법으로는 스택오버플로우 같이 엄격한 곳에서 질문을 제대로 하지 않으면 엄청난 비난과 글삭제가 될 것이다. 아래는 질문을 잘하는 법이다. 에러를 질문하기 .. 2024. 1. 11.
0037. Front-end 공부하기 : 중간점검(강의 수강 순서, 아쉬운 점 등) 지금까지 수강한 강의들과 수강할 강의들을 살펴보고 얼마나 배웠는지, 얼마나 배울 것이 남았는지를 확인해보려고 한다. 그리고 배우는 순서가 생각보다 중요하기 때문에 중간에 계속 체크하는 것이 좋을 듯싶다. 아래의 강의들은 모두 인프런의 강의들이다. 1. 현재까지 수강한 강의 1) 처음 만난 리액트(62강, 5시간 15분) 처음 만났기 때문에 수강하는데 매우 오래 걸렸다. 기본적인 자바스크립트에 대한 이해가 없으면 미리 JS 강의를 듣고 오는 것을 추천한다. 그래도 모르는 상태에서라도 코드를 쳐보고 실습해 보는 것이 좋았던 강의이다. 2) 생활코딩 - 자바스크립트(JavaScript) 기본(102강, 14시간 2분) 강의가 길고 상세한 것은 좋았다. 하지만 버전이 너무 옛날 버전(10년 전 강의)이라서 과거.. 2024. 1. 11.
0027. JavaScript 공부하기2 - 연산자, 부정, 부등호, 조건문, Boolean (Feat. 잘못된 코딩 공부순서) 섹션 4. 비교 1강. 연산자 연산자 : 어떤 작업을 컴퓨터에 지시하기 위한 기호 예 : a=1 a : 변수 = : 대입연산자 (좌항에 있는 값에 우항을 대입한다) 1 : 값 (상수, 변수에 대항되는 개념) 비교 연산자 : >, = : 좌항이 우항보다 크거나 같다. DOCTYPE html> var id = prompt('아이디를 입력해주세요.'); if(id == 'egoing'){ var password = prompt('비밀번호를 입력해 주세요.'); if(password == '111111'){ alert('로그인 되었습니다. '+id+'님 반갑습니다!') } else { alert('비밀번호가 다릅니다.') } } else { alert('아이디가 일치하지 않습니다.'); } 4강. 논리 연산자 .. 2024. 1. 2.
0026. Front-end 공부하기17 - Project 실습(2), 코드 에러잡기 전쟁 섹션 16. Mini Project 6강. (실습) App.js 파일 수정, 애플리케이션 실행하기, Production 빌드하기 1. (실습) App.js 파일 수정하기 라우팅 기능이 구현된 앱 컴포넌트 코드 react-router-dom을 이용해 총 3가지 패스에 대해서 라우팅을 제공 인덱스 경로인 slash로 접속하면 메인 페이지 컴포넌트를 보여줌 경로에 콜론을 사용하고 아이디를 입력하면 실제 컴포넌트에 useParams 훅을 사용해 ID로 해당 값을 가져올 수 있다. App 컴포넌트의 코드는 실제로 매우 단순함 라우팅 이외에는 특별히 해주는 역할이 없음 2. (실습) index.js 파일 설명 앱으로 생성한 프로젝트에는 이미 앱 컴포넌트가 기본적으로 들어가 있음 원한다면 앱 컴포넌트가 아니라 다른 .. 2024. 1. 2.
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.
0022. Front-end 공부하기13 - Context 섹션 14. Context 1강. Context란? 기존의 일반적인 React 애플리케이션에서는 데이터가 컴포넌트의 props를 통해 부모에서 자식으로 단방향 전달 컨텍스트 : 리액트 컴포넌트들 사이에서 데이터를 기존에 props를 통해 전달하는 방식 대신 컴포넌트 트리를 통해 곧바로 컴포넌트로 전달하는 새로운 방식 이 방식의 단점은 단방향으로 전달되기 때문에 반복되는 코드가 많아지고 복잡해진다는 것임 예를 들어, Root에서 10단계 밑에 있는 자식으로 전달하려면 props를 통해 10번 내려가야 되는 것임 이 불편함을 개선하기 위해 등장한 것이 바로 context 코드도 매우 깔끔해지고, 데이터를 한 곳에서 관리하기 때문에 디버깅을 하기에도 굉장히 편리함 1) 언제 Context를 사용해야 할까? 여.. 2023. 12. 26.
0021. Front-end 공부하기12 - Composition vs Inheritance 섹션 13. Composition vs Inheritance 1강. Composition 방법과 Inheritance 1) Composition Composition : 합성 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 여러 개의 컴포넌트들을 어떻게 조합할 것인가? 합성 방법은 여러 개가 있다. (1) Containment : 담다, 포함하다 하위 컴포넌트를 포함하는 형태의 합성 방법 Sidebar나 Dialog 같은 Box 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. 사용 방법 : children이라는 prop을 사용해서 조합! children은 React에서 직접 넣어주는 것 React에서는 하위 컴포넌트를 props.children으로 하나로 모아서 제공함 여러 개의 c.. 2023. 12. 25.

티스토리툴바