React (Front-end)
[책 추천] 리액트로 배우는 소켓 프로그래밍. 실시간 양방향 통신을 배워보자
이 책은 단단합니다. 처음부터 어려운 이론을 이야기하면서 코드베이스를 제시하지 않습니다. 리액트의 개념, Node.js의 개념, 소켓 통신을 설명하기 위해 OSI 7계층을 설명합니다. 웹 프로그래밍을 배우는 사람 중에 생각 외로 네트워크와 그 내부의 프로토콜에 대해서 깊게 공부하는 사람은 없습니다. 이미 누군가가 래핑해놓은 것들을 사용하며 추상적으로만 이해합니다. 이론의 배경을 아는 것은 매우 중요합니다. 그런 것들이 우리들로 하여금 추후에 작은 부분의 버그와 충돌을 심도깊게 이해하고, 쉽게 고칠 수 있게 해줍니다. TCP 서버를 Node.js로 구성할 때는 net 모듈을 사용합니다. Node.js는 이미 설치할 때부터 가지고 있는 built-in module이 있는데, 그 중에 net 모듈은 TCP 서..
React로 만든 웹을 모바일 환경에서 공유하고 싶을 때 (WebView, Navigator.share())
리액트로 공유 기능을 구현하는게 이렇게나 어렵다니. 바이럴을 통해 수익을 내는 웹 앱을 React 기반으로 만들고 있다. 정확히는 Next.js 13.4 프레임워크를 활용하지만, 결국 내부는 리액트와 JSX다. 애를 먹고 있는게 있는데 바로 안드로이드 웹뷰. 안드로이드 웹뷰(WebView) 객체는 Navigator.share()를 지원하지 않는다. 그래서 iOS에서는 정상적으로 공유를 잘 불러내지만 안드로이드는 그냥 먹통이다. 무슨 일인지 모르겠으나 alert()도 먹히지 않는다. 그래서 여러 글을 찾아보니 아래와 같이 ClipBoard에 주소를 복사하게끔 처리하고 있다. 세상에 쉬운 일이 하나 없다. 참고 할만한 글 1. 순수하게 공유하기에 대해서 공부하기 https://velog.io/@otterji..
Next.js 프레임워크를 다루며 정말 도움된 YouTube 영상들
Next.js 13.4 버전으로 사이드 프로젝트를 진행하고 있습니다. 현재 cloudpages에 올려서 서비스를 하고 있으며, 지금도 여전히 개발하면서 기능을 확장하고 유지하고 있습니다. Next.js를 배울 때 보면 좋을만한 영상을 공유드립니다. 1. 컴포넌트에 대하여 이미지는 참 속 썩이는 아이입니다. Next.js는 알아서 최적화 해줍니다. https://youtu.be/ZKG8JBdgSos 2. App Route (App directory)에 대해서 다룹니다. Next.js 13.4부터는 앱 디렉토리가 stable 버전으로 나옵니다. 단순히 디렉토리만 나눠서 라우팅된다는 것 뿐만 아니라, 그룹으로 묶을 수도 있습니다. 자세한 것은 영상을 확인하시죠. https://youtu.be/k2IQ-CcE7..
The `style` prop expects a mapping from style properties to values, not a string 오류
뜻 : 당신이 style prop에 값을 넣어야하는데 문자열을 넣었다. 왜 이런 오류가 뜰까? 말 그대로 style에는 CSS 코드 자체가 들어가야하는데 문자열을 넣었기 때문이다. 나는 classname에 적용한다는 것은 style에 작성해버렸다. 1. 오류가 난 코드 {/* {quizdata[0].choices} */} {quizdata[0].choices.map((choice) => ( {choice.text} ))} 2. 수정한 코드 {/* {quizdata[0].choices} */} {quizdata[0].choices.map((choice) => ( {choice.text} ))} className에 지정해야할 것은 style에 직접 넣은 것이 아닌지 확인해보자.
React의 조건부 렌더링을 사용하는 6가지 방법
0. 조건부 렌더링과 초기 코드 리액트를 배울 때 state를 배우자마자 익혀야 할 것이 있습니다. 바로 "조건부 렌더링" (Conditional Rendering)입니다. 특정 값에 따라서 다른 컴포넌트를 그리고 싶을 때 사용하는 방법으로, 웹 상에서 여러 방법을 확인할 수 있습니다. 글을 작성할 기본 코드는 아래와 같습니다. App.js import React, { Component } from "react"; import "./App.css"; class App extends Component { constructor(props) { super(props); this.state = { isLoggedIn: true, }; } render() { return ( 조건부 ..
(React Router v6) 리액트에서 라우터 사용하기-1
Router v5에 대한 설명은 하지 않습니다. React-router-dom에는 여러개의 컴포넌트가 있습니다. 몇 가지만 적어보자면 1. BrowserRouter React Router는 여러가지의 형태의 라우터를 지원합니다. 리액트 네이티브에서 사용할 수 있는 NativeRouter도 있죠. 우리는 지금 앱이 아닌 브라우저에서 돌아가는 웹 개발을 하고 있습니다. 그래서 "브라우저 라우터"로 외우시면 됩니다. BrowserRouter는 간편 URL(Clean URL이라 합니다)을 이용하여 브라우저 주소창에 현재 위치를 저장합니다. 그리고 브라우저에 내장된 히스토리 스택을 사용해서 탐색합니다. 최초에 프로젝트를 실행할 때 모든 App이 실행되는 곳에 이 컴포넌트로 감싸줘야 합니다. 보통은 index.js..
[HOOKS] useRef의 설명과 예시코드
0. React에는 왜 Hooks가 있을까? (공통 글) 리액트는 라이브러리이다. 기존에 HTML, CSS, Javascript로만 구성된 프로젝트에서 JSX를 해석해 줄 Babel만 있으면 부분적으로 도입할 수 있다는 이야기다. 처음에 리액트는 클래스형 컴포넌트가 많이 쓰였다. 여러 가지 이유가 있었지만, 함수형 컴포넌트는 내부적으로 상태를 가지고 있을 수 없기 때문이었다. Q. 왜 함수형 컴포넌트는 상태를 저장할 수 없나요? A. 우리가 무언가를 '저장'한다고 생각해봅시다. 변수를 선언하지 않고 저장하는 방법이 있을까요? 없습니다. 클래스는 그 자체가 객체로 태어나면서 변수 안에 데이터를 가지고 있을 수 있습니다. 하지만 함수는 어떤가요? 함수는 실행형 문구입니다. 그냥 한 번 '실행'되고 끝나는 것..
[HOOKS] useEffect의 설명과 예시코드
0. React에는 왜 Hooks가 있을까? (공통 글) 리액트는 라이브러리이다. 기존에 HTML, CSS, Javascript로만 구성된 프로젝트에서 JSX를 해석해 줄 Babel만 있으면 부분적으로 도입할 수 있다는 이야기다. 처음에 리액트는 클래스형 컴포넌트가 많이 쓰였다. 여러 가지 이유가 있었지만, 함수형 컴포넌트는 내부적으로 상태를 가지고 있을 수 없기 때문이었다. Q. 왜 함수형 컴포넌트는 상태를 저장할 수 없나요? A. 우리가 무언가를 '저장'한다고 생각해봅시다. 변수를 선언하지 않고 저장하는 방법이 있을까요? 없습니다. 클래스는 그 자체가 객체로 태어나면서 변수 안에 데이터를 가지고 있을 수 있습니다. 하지만 함수는 어떤가요? 함수는 실행형 문구입니다. 그냥 한 번 '실행'되고 끝나는 것..