본문 바로가기

개발공부_Blog184

React Hooks을 사용하는 이유 https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Hook은 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공합니다. Hooks을 사용하는 이유 1_ 컴포넌트 사이에서 상태로직을 재사용하기 어렵기 때문에 Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 2_ lifeCycle로 인한 중복로직을 피하기 위해서 생명주기 메서드에는 자주 관련 없는 로직이 섞여들어가고는 한다. 예시로 componentDidMount 와 comp.. 2022. 8. 10.
(브라우저 렌더링 과정) 브라우저가 사용자에게 어떻게 UI를 그려내는가! 브라우저 렌더링 동작 과정 브라우저는 사용자가 원하는 정보를 웹에서 페이지를 찾아 보여주고, 하이퍼링크를 통해 사용자를 다른 페이지로 이동할 수 있도록 하는 프로그램이라고 MDN에서는 정의하고 있다. **브라우저 : 인터넷 접속시 사용하는 Chrome, Safari, Firefox, Internet Explorer 등 웹 : 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 세계적인 정보 공간 브라우저는 유저가 선택한 페이지, 이미지, 비디오 등의 컨텐츠들을 서버로부터 받아와 렌더링 과정을 거쳐 유저에게 보여준다. 브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. Parsing : HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. Style : 두 Tree.. 2022. 3. 16.
프론트엔드 의존성?? 프론트개발에 node.js가 필요한 이유 1. 프론트엔드 개발에 Node.js가 필요한 이유 최신 스펙으로 개발할 수 있다 자바스크립트 스펙의 빠른 발전에 비해 브라우져의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 이를테면 바벨 같은 도구의 도움 없이는 부족하다. 더불어 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다. 각 프레임워크에서 제공하는 도구를 사용하면 손쉽게 개발환경을 갖출수 있다. React.js의 CRA(create-react-app)를 사용한다면 말이다. 그러나 개발 프로젝트는 각자의 형편이라는 것이 있어서 툴을 그대로 사용할 수 없는 경우도 빈번하다. 커스터마이징 하려면 Node.js 지식이 필요하다. 어쩌면 .. 2022. 3. 16.
오늘독서(2) 결과물 https://github.com/thdud2262/oneday_book GitHub - thdud2262/oneday_book Contribute to thdud2262/oneday_book development by creating an account on GitHub. github.com 메인화면 - 랜덤한 배경, 시간 / 날짜 자동입력 - storage에 간단하게 닉네임만 저장해두고, 닉네임 맞으면 패스 추천 페이지 오늘 추천도서 -> python 웹스크래핑으로 도서목록 가져와서 보여줌 아래 추천도서 리스트 -> 좋아요 기능으로 숫자가 높은 순으로 정렬됨 MyBOOK 페이지 읽고 싶은 책 목록 -> 읽고 싶은 책을 입력 가능 초록 네모클릭 : 완독한 책리스트로 이동, 빨간 X : 리스트삭제 기능 .. 2022. 2. 24.
정규표현식 정규표현식 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions 정규 표현식 - JavaScript | MDN 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 , developer.mozilla.org 정규표현식은 문자열에 특정 문자조합과 대응시키기 위해 사용되는 패턴이다 특정한 패턴을 가지고 어떤 특정 문자열을 비교하여 true/ false로 결과값을 받는다 const expNameText = /[가-힣]+$/; const expHpText = /^\d{3}-\d{3,4}.. 2022. 1. 18.
isNaN() - NaN인지 판별하는 함수 isNaN() - 어떤 값이 NaN인지 판별하는 함수 함수는 몇몇 혼란스러운 케이스을 가지고 있으므로, ECMAScript 2015에서 추가한 Number.isNaN()으로 바꾸는 편이 좋을 수도 있습니다. - mdn 구문 isNaN(value) 매개변수 value테스트되는 값. 반환 값 주어진 값이 NaN이면 true, 아니면 false. 설명 isNaN 함수의 필요성 NaN = Not a Number 의 약어 JavaScript의 다른 모든 값과 달리, NaN은 같음 연산(==, ===)을 사용해 판별할 수 없습니다. NaN == NaN, NaN === NaN이기 때문입니다. 그래서 NaN을 판별하는 함수가 필요합니다. 2022. 1. 18.
javascript _ Date() 밀리초를 날짜로 변환하기 Date() 자바스크립트 Date 객체는 날짜 정보를 밀리 세컨드 단위로 저장합니다. 1970년 1월 1일이 기준 시점이 되며, 입력된 날짜값과의 차이가 Date 객체의 값입니다. Date 객체 생성 자바스크립트의 내장 객체인 Date로 객체를 만들면, 빈 객체가 아닌 현재 시간 정보가 객체 안에 자동 삽입됩니다. 코드를 실행해서 웹페이지를 새로고침 해보면 초단위 데이터가 계속 갱신되는 것을 확인해 볼 수 있습니다. let 객체명 = new Date(); Date() 생성자의 인수 Date 생성자는 괄호 안의 인수가 들어갑니다. 년도, 월, 일, 시간, 분, 초, 밀리 세컨드 단위까지 작성될 수 있습니다. let 객체명 = new Date(year, monthIndex, day, hours, minute.. 2022. 1. 18.
JWT / COOKIE / SESSION 차이점 JWT / COOKIE / SESSION 차이점 Cookie / Session 방식 Session/Cookie 방식 인증은 기본적으로 세션 저장소를 필요로 합니다. 세션 저장소는 로그인시 사용자 정보를 저장하고, 열쇠로 사용할 수 있는 세션 ID 를 만듭니다. Cookie 쿠키는 일종의 서버와 클라이언트가 대화하기 위한 수단. 쿠키는 사용자의 정보를 사용자 컴퓨터 메모리에 저장한다 브라우저가 서버와 연결이 되었을 때 브라우저에서 자동적으로 쿠키를 생성하고, 인증이 필요한 요청에 해당 cookie와 함께 서버에 request 를 보냅니다. 쿠키에 담긴 데이터는 브라우저에서 관리되며, 이름, 값, 만료 날짜, 경로 정보로 구성. Session 서버와 클라이언트의 연결이 활성화된 상태. 클라이언트가 서버와 통.. 2022. 1. 16.
JWT ERROR JWT 에러 로그인 구현을 위해 JWT를 공부하고 기본코드를 따라서 실행시키는 과정에서 에러가 생겼다 token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8') AttributeError: 'str' object has no attribute 'decode' 해결 pyjwt기존 버전에서는 jwt.encode()함수의 리턴값이 '바이트문자열' 자료형이었기 때문에 뒤에 .decode('utf-8')을 붙여 일반 문자열 (str)으로 바꿔줘야 했으나 2.0.0버전부터는 이 함수의 리턴값이 일반 문자열이 되었기 때문에 여기에 .decode('utf-8')을 붙여주게 되면 str값을 두번 출력해라는 명령이 되서 에러가 난 것이었다 JWT .. 2022. 1. 16.

티스토리툴바