개발일지

이번 프로젝트를 진행하면서 처음 기능 구현하는 로그인와 회원가입에서 트러블 슈팅들을 정리해둔 글이다 처음이다보니 당연히 어려웠지만 그 중에서도 지금 진행중인 유효성검사hook-form사용과 토큰 받아오기다. 로그인과 회원가입은 프로젝트에서 계속 포함되면서 질문에 대한 답과 참고할 코드가 있지만 refresh토큰 받아오기와 유효성 검사 hook-form 사용은 찾아보기 어려웠다. 지금 현재는 유효성 검사에 hook-form과 Ref를 같이 사용하는데 오류가나서 헤매는 중이다. 추후에 해결 후 작성하고자 한다. 고민이 되는것은 훅폼+Ref을 먼저할지, 로컬에 있는 refresh를 쿠키로 받아오는것을 먼저 할지 우선순위가 애매해진 상황이다. 결과들은 카테고리 - 실전프로젝트 - 에 올리겠다. https://m..

우리는 클론 주차에 웹소켓을 중점으로 잡았기 때문에 먼저 나는 프론트 리덕스 툴킷( 상태관리 )를 완성 후 투입을 해야 겠다고 생각했다. 다만 회고에 작성한대로 웹소켓에 대한 지식부족으로 후에 컴포넌트 분리 과정에서 코드를 벌려 써서, 파라미터값이나 props를 불러 들이기가 정말 헷갈렸고 깨지는 css를 마지막에 다듬지도 않고 일단 소켓을 연결해보자! 라는식으로 방치하게 되었다. 이 상황에 기획의 중요성과 도전하려는 기술에 대한 지식습득이 필요하다는 것을 느꼈다. 먼저 나는 채팅홈 뷰, 채팅방 조회, 생성, 삭제와 채팅메세지 조회, 추가 부분을 맡았다 저번 첫날에 기획을 끝내고 초기 세팅(깃, 폴더, 컴포넌트 등)을 하고 채팅방을 클릭하면 그 해당 채팅방 메세지가 조회되게 설정하였다. 질문 중에 map..

이번에 미니 프로젝트로 첫 협업을 경험했다. 다들 어렵다 뭐다 하는데 당연히 어렵다 하지만, 재밌었다ㅎㅎㅎㅎ 일단 아쉬운점으로는 내 실력이 뭔가 백엔드분들의 실력을 따라가지 못한 느낌이었고 백엔드에서 스프링의 코드를 모르다보니 내가 어디까지 해야되고 어느정도를 해야 돌아오는지도 몰랐다. 내 생각은 2~3일 걸릴일이였는데 하루 만에 끝내서 결과를 내주고 기다리셨다. 근데 그 이후에 서버 배포 부분에서 오류가 나더라도 이게 정확히 누구 잘못인지도 모르고 같이 찾기도 했지만 끝내 해결하지 못했다ㅠㅠㅠ 오류도 각각 해결해봐도 결국 서버 배포 문제로 갔고 발표 전에는 로컬까지 고장나서 발표도 망쳐버렸다.. 현타가 좀 오더라 질문이라도 잘해서 마무리했어야하는데 로컬에 질문리스트를 버킷처럼 적어놨는데 날아가니 잠깐 ..

안녕하세요!! 미니프로젝트를 시작하면서 5주차가 마무리 되었습니다! 항해이자 개발을 시작하면서 이렇게 블로그를 꾸준히 써본건 처음인데. 슬슬 틀도 좀 잡히고 매일 써야겠다는 생각이 드는건 처음인것 같습니다!! 좋은 정보 드릴 수 있도록 노력해볼게요~ 오늘 알아볼 것은 사이트를 만들면서 백엔드에 필요한 데이터를 요청하는 라이브러리 'axios' 라고 하구요 저도 처음에 사용하려 할 때 되게 당황했으니 모르는 눈높이에서 설명해보겠습니담, 시작하시죠! Axios란? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 통신을 쉽게하기 위해 ajax, fetch와 많이 사용했지만 요새는 편리를 위해서 axios의 인기가 많다. 그럼 뭐가 더 편리한지 다른 블로그에..

라이프사이클 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 클래스형만 사용 가능하다 주의하여 볼 것은 업데이트 부분인데, 업데이트는 다음과 같은 4가지 상황에서 발생한다. props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 📕 함수형 컴포넌트 ☑️ JSX를 return문을 사용해서 반환 ☑️ state를 사용할 수 없다 ☑️ 생명 주기 함수를 작성할 수 없다 import React from 'react'; functio..

DOM 이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서..

JavaScript의 ES란? 바로 결론부터 말하자면 js는 언어이고, ES는 규격, 표준 즉 스펙을 뜻한다. JavaScript는 1990년대 Netscape 회사의 브렌던 아이크(Brendan Eich)라는 사람에 의해 최초 개발되었는데 10일이라는 정말 짧은 기간에 만들어진 언어이다. 그런만큼 설계상의 미스가 있을 수 밖에 없다. 그리고 마이크로소프트사에서 만든 JScript와 브라우저 전쟁을 했고 그렇기에 표준을 정하고 지속적으로 버전 업그레이드 되어 1999년 ES3, 2009년 ES5, 2015년 ES6가 생겨 나게 되었다. ECMA스크립트(ECMAScript, 또는 ES[1])란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍..

벌써 1주차가 지나갔다.. 진짜 최근 이렇게 시간이 빨리 간적이 있을까 싶다 먼저 키워드를 정리 해보고 끝에 회고를 남기겠다 1. JWT (Json Web Token) - 인증에 필요한 정보들을 Token에 담아 암호화시켜 사용하는 하나의 인터넷 표준 인증 방식 (로그인) - 특징은 서명된 토큰이라는 점 - 서명된 토큰은 개인 키를 보유한 서버가 이 섬여된 토큰이 정상적인 토큰인지 인증할 수 있다 1-1 구성요소 Header . Payload . Signature - 각 요소는 ' . ' 으로 구분 된다. - Header. : 토큰의 type이나 알고리즘 'HS262' 와 같은 알고리즘이 들어가 적용된다 - Payload : 사용자, 토큰에 대한 property를 key(3글자 "sub","iss","e..