본문 바로가기

분류 전체보기

 (90)
[ 항해 99 실전프로젝트 ] 사용자의 아바타를 데이터로 만들자 ( 3 ) 이미지를 동적으로 입히는 기능은 생각보다 단순했다. 이제는 사용자가 선택한 아이템들이 서버단에 저장이 되어, 새로고침 시나 로그아웃 후에 다시 로그인하여도 선택했던 아바타의 이미지가 나와야 한다. 우리가 정한 카테고리는 총 4가지로 좁혀봤다. 눈 (Eye) 입 (Mouth) 머리 (Hair) 배경 (Back) 해야할 순서 사용자가 여러 아이템들을 선택할 수 있는 슬라이드를 만들어준다. 슬라이드에 이미지들을 뿌려주기 위해, map함수를 사용해야하니 이미지파일규칙이 정해져야 한다. 슬라이드에서 선택한 아이템이 위 캐릭터에 반영이 되어야한다. (변수값이 공유되야함) 각종 카테고리별로 변수를 만들어, 선택된 아이템의 변수 값을 db로 쏴주어야한다. 여러 아이템들중, 하나만 선택했을 경우에도 정상작동해야한다. (..
[ 항해 99 실전프로젝트 ] 이미지 입히기 테스트 ( 2 ) 오늘은 대충 배경이랑 악세사리 같이 2개의 다른 위치에 이미지를 계속해서 바꿔 입히는 코드를 먼저 짜보려한다. 해야할 순서 아무 이미지나 카테고리별로 2개 정도를 같은 크기의 이미지로 public 폴더에 저장 public 폴더에서 각 이미지를 불러왔을 때, 정해진 위치에 들어가도록 코드를 짜야지. 아바타만들기 틀을 빠르게 짜보았다. 먼저, 이미지는 public폴더에 넣어놓고 절대경로로 불러오도록 설정하였다. 위의 이미지와 같은 형식으로, 각 이미지 카테고리 (ex/ 눈, 코, 입, 모자, 등등) 별로 div영역을 고정시켜 그 안에 사진을 집어넣는 방식으로 짰다. 그렇다면 사용자가 입모양을 바꾸고싶으면, 빨간색 영역의 div에 있는 이미지가 바뀌고 눈을 바꾸고 싶으면 파란색 영역이 바뀌는 로직이다. 그러기..
[ 항해99 실전프로젝트 ] 아바타 페이지를 만들어보자 ( 1 ) 11월 20일 시작 참고할만한 자료를 아직 많이 찾지는 못해서, 저번 기수가 만든 프로젝트를 참고하기로 했다. 습관삼끼 https://github.com/dokyunglee0905/makehabit_FE (습관세끼) GitHub - dokyunglee0905/makehabit_FE: 갓생삼일 프로젝트 (FE) 갓생삼일 프로젝트 (FE). Contribute to dokyunglee0905/makehabit_FE development by creating an account on GitHub. github.com 일단 습관삼끼에서 구현한 캐릭터페이지는 아래와 같다. 위에 캐릭터를 다양하게 의상부터해서 악세사리까지 입힐 수 있다. 그렇다면, 이걸 어떻게 구현했냐 습관삼끼에서는 프론트에서 여러가지 이미지들을 ..
CSS 모달창을 만들어보자구나! 뭔가 나만의 모달창을 라이브러리처럼 만들어놓고 싶어서, 만들어보았다. import React from "react"; import styled from "styled-components"; const NotifModal = ({ setModalOpen, content }) => { // 모달창 노출 const closeModal = () => { setModalOpen(false); console.log(1); }; return ( {" "} e.stopPropagation()}> {content}{" "} 확인 ); }; const Wrap = styled.div` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color..
socket.io 서버 부하 이슈 소켓연결 후, 채팅을 초당 5회정도로 도배를 해보았다. 근데, 아래와 같이 소켓연결이 끊어짐과 동시에 다른 get요청이나 post요청도 일시적으로 막히는 현상이 일어났다. 아무래도 기존의 방식과는 다르게, 실시간으로 이루어지기 때문에 서버에 부하가 걸려 일어나는 현상이라 생각했다. 그래서 구글링을 하여, nginx에서 upstream을 설정하라는 게시글을 보게 되었다. upstream은 무엇일까? 위에서 Upstream서버는 가장 오른쪽 PHP-FPM이 설치된 서버이다. Upstream 서버는 다른 말로 Origin 서버라고도 부른다. 여러대의 컴퓨터가 순차적으로 어떤 일을 처리할 때 어떤 서비스를 받는 서버를 의미한다. 하여튼 , 아래 코드와 같이 설정을 해주니 서버의 부하가 조금 줄어들었다. upst..
react-hook-form 사용기 이번 실전프로젝트에서는 react-hook-form 이라는 라이브러리를 사용해보기로했다. 항상 로그인이나 회원가입창을 만들때에, input 태그에 중복된 코드가 너무 거슬렸다. 그리고 제어컴포넌트로써 인풋창에 한 글자씩 타이핑될때마다 렌더링되는 것도 거슬렸다. 그리하여 이 모든 것을 해결해줄 react-hook-form을 쓰기로 했다. 아래는 기존의 회원가입 코드이다. 아이디 {isEdit && ( 닉네임 )} 비밀번호 {isEdit && ( 비밀번호 재확인 )} 아래는 react-hook-form을 사용하여 나타낸 회원가입코드이다. helper text를 띄움에도 불구하고, 훨씬 짧고 간결하게 코드를 작성할 수 있다. {" "} {" "} {errors.userId && ( {errors.userId...
리액트 제어컴포넌트와 비제어 컴포넌트 제어컴포넌트(controlled component) 아래는 공식문서에 나오는 설명입니다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. (중략) 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. export default function App() { const [input, setInput] = useState(""); const onChange = (e) => { setInput(e.target.value); }; return ( ); } ..
객체에 키값 동적으로 할당하기 객체로 만들 부분을 빈 배열로 만들고 [ ]방식으로 프로퍼티를 설정하는 방법을 이용하면 키 값을 동적으로 설정 할 수 있습니다. var keyname = "my"; var postfix = "Age"; var value = 27; var something = {}; something[keyname + postfix] = value; //console.log : {myAge : 27} 추가로 es2019에 의하면 아주 간단하게 동적으로 키를 할당 가능합니다 const name = "who"; const person = { [name]: "nkh" }; // {who: 'nkh'}

티스토리툴바