삐옹

렌더링렌더링.. 그 놈의 렌더링 플젝하다가.. 내가 짠 코드에 state나 일반 변수들 이러저리 쓰다보니, 객체에 값이 없다(undefined)는 빨간 메시지를 종종 보게 된다. 리액트의 라이프싸이클을 생각않고 막 쓴거라 할 수 있겠다. 기억을 더듬을겸 관련 내용을 몇 장에 걸쳐 간단히 정리해본다. 렌더링? 렌더링 === (가장 최신 상태의)컴포넌트 호출 === 함수 호출 컴포넌트가 그려지는 과정을 알아야하는데 컴포넌트가 그려지려면 바로 이 렌더링이 필수적이다. 렌더링은 다음과 같은 경우에 일어난다. 앱 초기 실행 시(initial execution) state값이 변경 될 때(re-rendering) 앱 초기 실행시 : 리액트에서 우리가 짠 코드는 모두 App컴포넌트에 담겨 html에 root 엘리먼트..

상황 로그인을 하고나서 workspace 배열 내에 데이터 유무에 따라 처음 로그인한 사람(뉴비)과 기존 유저에게 다른 화면을 보여주어야 한다. 생각 할 것 앱의 상태에 따른 state 관리가 핵심이다. workspace 배열 내에 데이터 유무에 따라 유저의 상태를 어떻게 표현 할 것인지 명시한다. (앱의 상태를 나타내는 state를 만든다.) 로그인 일 때와 아닐 때를 구분한다 뉴비인지 아닌지 판단하는 상태를 만들기 로딩 중 일 떄와 아닐 때 를 구분하는 상태만들기.(스피너를 위함! 난 꼭 스피너를 넣어야겠음!) +) 로그인 상태 유지하기 순서대로 코드로 살펴보기 상황 별 유저의 상태 // App.js // 정리해보면 유저의 상태는 3가지로 나뉜다 // 워크스페이가 있는지 없는지 판단 중일 떄 -> "..

자바스크립트는 기본적으로 동기적인 언어다. 자바스크립트 엔진, 그러니까 코드를 읽을 때 위에서부터 아래로 한 줄 씩 읽으며 처리한다는 뜻이다. 여기서 일을 처리하는데 비효율성이 생겨났다. 그걸 해결해주기위해 ajax, fetch, setTimeOut 같은 것들이 나타났다. react에서는 setState가 그렇고.. 이번 파이널 프로젝트에서 실시간 채팅 기능을 넣기로 했다. 어떤 값을 setState로 업데이트 하면서 바로 그 다음 줄에 함수를 동시에 실행시켰어야 했다. 포인트는 업데이트된 값을 인자로 받는 함수였다는 것. 보기좋게 에러를 띄웠다.. 인자로 오는 값이 빈값인걸 보니 얼핏 들었던 setState의 비동기적 특성 때문에 일어난 것임을 짐작했다. 상황 1. setState()에 의해 업데이트된..

내가 구현하고 싶은 채팅 기능의 일부이다. 채팅 할 수 있는 사람들의 리스트가 있다. (A유저, B유저, C유저) -> A유저를 클릭 시 A유저에게 채팅을 할 수 있다. -> B유저를 클릭하면 A유저와의 채팅을 끝내고 B유저와 채팅을 할 수 있다. -> C유저를 클릭하면 B유저와의 채팅을 끝내고 C유저와 채팅을 할 수 있다. * 실시간이냐고? 오브콜스 와이낫. 실행 순서 서버와 socket.io 연결. 방에 입장 + 대화목록 불러오기 불러온 대화목록 화면에 뿌리기 채팅을 치면 채팅목록에 저장하고 대화목록을 다시 화면에 뿌리기 지금껏 나눈 채팅을 대화목록에 저장하고 방 떠나기 간략히 말하자면 방 입장 -> 채팅 -> 방 나가기 + (다른) 방 입장 -> 채팅 -> 방 나가기 + (다른) 방 입장 + 채팅 ..

상황 달력 라이브러리를 사용하는건 크게 어렵지 않다. 왼쪽은 react-datePicker에서 기본으로 주는 css를 임포트해서 적용시킨 것이다. 오 좋은데? 하지만 나는 디자이너님이 주신 달력 디자인 대로 만들어야 하니니 이대로 쓸 수 없다. 커스터마이징을 해보자. 먼저 바꿔야 할 몇가지를 정리해보자. 1. 헤더에 월, 년도 말고 월만 나타나게 하기 2. 월~일 알파벳 앞에서 3글자까지 표시하기(Su -> Sun) 3. 오늘 표시하는 dot 스타일링 변경 방법1. 넘겨준거 쓰기 - 실패🤔 import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; //.. 코드 맨 상단에 임포트해 온 기본 ..

이번 실전 프로젝트에서 실시간 채팅을 구현하기로 하였다. 지금껏 한번도 socket.io를 다뤄본적도, 사실 그게 뭔지도 모르기 때문에 혼자서 socket.io를 이용해서 실시간 채팅 웹 사이트를 구현해보기로 했다.🌝 What Socket.IO is​ Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and the server. It consists of: a Node.js server: Source | API a Javascript client library for the browser (which can be also run from Node.js): S..

스펙 React, Redux toolkit, middleware 상황 axios로 받아온 값을 화면에 렌더링 해주려고 하니 자꾸만 값이 undefined라고 뜬다. 받아온 값은 콘솔에 잘 뜨는데 대체 뭐가 잘 못된걸까. 시도 이 에러가 뜨는 경우는 받아온 값이 아직 다 받아지기 전에 화면에 뿌려주려고 할 떄 빈번히 일어난다. 그래서 3가지를 먼저 시도해보았다. 1. &&연산자와 조건문 const PostDetail = () => { const params = useParams(); const boardId = Number(params.postId); const dispatch = useDispatch(); const post = useSelector((state) => state.postReducer);..

서론 진행 중인 프로젝트에 업로드 할 파일의 이미지를 미리보여주는 기능을 넣어 보고싶어서 내용을 알아보다가, 단순히 코드 복붙을 하고 싶지않아 정리하게 되었다. Web API 인 FileReader라는 객체를 이용하여 구현해보았다. React에서 이미지 미리보기 마크업 ... const [imgSrc, setImgSrc] = useState(""); return( 이미지업로드 {imgSrc && } { encodeFileToBase64(e.target.files[0]); }} /> ) ... 동작원리 onChage함수 안에서 e.target.files를 콘솔에 찍어보면 선택된 파일의 목록(FileList)이 나온다 fileList를 자바스크립트에서 파일에 접근할 수 있도록 한다 file 객체를 읽어서 b..

서론 클라이언트에서 안전하게 로그인을 요청하는 방법을 알려면 다음의 세 가지를 먼저 이해해야 한다. 1. 로그인은 어떻게 이루어지나 2. 브라우저 저장소의 종류와 보안 이슈 3. 브라우저 저장소 별 장단점 로그인은 어떻게 이루어지나 1. 세션 id를 이용하는 방식 (1) 클라이언트에서 로그인을 시도하면 (2) 서버에서 세션을 생성한다. (3) 생성한 세션에서 세션 id를 클라이언트에게 보내주게 되면 (4) 클라이언트에서는 받아온 세션id를 브라우저에 저장한다. (5 )그 뒤 사용자 인증이 필요한 데이터 요청 때 서버에 세션 id 값을 보내면 (6) 서버는 그 id를 통해 세션을 불러와 유효한지 확인하는 방식으로 인증한다. 2. JWT를 이용하는 방식(ft. refresh token, access tok..

const DetailComment = ({ boardId }) => { const [newComment, setNewComment] = useState(""); const [commentArray, setCommentArray] = useState([]); const updateComment = (e) => { setNewComment(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); const currentKey = localStorage.getItem("jwt-token"); if (newComment === "") { alert("내용을 입력해주세요"); } else { axios .post( `http://3.39.223..