x친소표3 [원신 X친소표 사이트 제작기] 3. 한 줄/여러 줄 TextInput 만들기 #React 한 줄 TextInput 컴포넌트 만들기X의 닉네임과 ID, 원신의 최애캐와 UID 정보를 받기 위해 입력창이 필요합니다.여러 줄일 필요는 없고, 딱 한 줄의 TextInput 컴포넌트를 만들어보겠습니다. OneLineTextInput 컴포넌트// src/app/pages.js setNick(e.target.value)} /> setXId(e.target.value)} />OneLineTextInput 컴포넌트를 페이지로 호출하면, 위와 같은 DOM이 출력됩니다. OneLineTextInput 소스코드import { TextInput } from "@/styles/Inputs";import { FormText, FormTex.. 2024. 11. 30. [원신 X친소표 사이트 제작기] 2. 이미지를 불러오기/미리보기 구현 #React 프로필(바이오) 이미지 표시 기능어떤 SNS든지 각 계정마다 프사가 존재하고, X역시 마찬가지입니다.X친소표를 만든다면 프사(바이오)역시 꼭 들어가야 하기에, 이미지를 받아올 수 있는 기능이 필요합니다. Bio 컴포넌트// src/app/page.jsconst [bio, setBio] = useState(null);우선 Home 컴포넌트(Next.js app router 기준)에, 프사 이미지를 담을 bio state를 생성합니다.초기값은 null로 지정합니다. 그리고 Bio 이미지를 받아오고, 미리보기 이미지를 출력할 컴포넌트를 제작합니다.// src/components/Bio.jsimport { FormText } from "@/styles/Texts";import { useState, .. 2024. 11. 28. [원신 X친소표 사이트 제작기] 1. 제작한 이유와 반응 살펴보기 X(트위터)의 트친소/X친소 문화X가 SNS 중 음지 중의 음지로 불리긴 하지만, 그래도 덕질 친구를 사귀기에는 이만한 곳이 별로 없기도 합니다.인스타나 다른 SNS에 비해 익명성이 강해서, 더욱 덕질을 공유하기도 좋고, 자유로운 검색기능을 통해 팔로워도 모으기 쉬운 구조입니다. 이를 이용해서, X친소/트친소 문화가 있습니다.비슷한 장르를 덕질하는 친구들을 모으는 문화로, 미리 'X친소표/트친소표'에 자신의 덕질이나 트위터 성향을 작성한 후, 나랑 친구가 되고 싶은 사람은 이 표를 보고 다가오라는 문화입니다. 원신은 서브컬쳐계의 엄청난 강자인 만큼, X친소표의 종류도 많고, 이용하는 사람도 정말 많습니다. 하지만 이 표의 단점이 있습니다.1. '이미지 파일을 다운받아서 직접 수정해야 한다.'이미지 .. 2024. 11. 27. 이전 1 다음
