기록용으로 대충 씀 1.Settings 패널1)테마2)소스 열었을 때 자동으로 네비게이터 보여줌 3)새로고침시에 캐시 X4)로그 좌측에 발생한 시간 표시 2.Elements 패널1)도구패널의 Computed : 최종 적용된 styles2)hover 상태에만 보여지는 부분을 기본으로 보이도록 상태변경 가능해당 엘리먼트 선택 후 오른쪽 '도구패널' 에서 Styles -> :hov 눌러서 설정:active 클릭했을 때:hover 마우스 오버했을 때:visited 방문 후3)Elements 에서 F12누르면 Edit as HTML 4)원하는 엘리먼트에 Break on 에서 감지를 걸면 해당 엘리먼트가 변경될 때를 소스에서 알 수있음5)엘리먼트에 바인드된 이벤트를 찾으려면 해당 엘리먼트누르고 도구패널에서 Even..
프론트 엔드 개발을 하기 위해서는 크롬 개발자 도구를 잘 활용해야 한다고 생각한다.. 지금의 나는 크롬 개발자 도구를 얼마나 활용하면서 개발을 했을까? 생각해 봤더니 Elements, Console, Sources, Application 탭 정도만 사용하더라...(이마저도 100%활용하진 못한다.) 그래서 이제부터는 사이트의 최적화를 위해서 중요한 Network, Performance, Audits등의 나머지 탭들에 대해서도 공부를 해야겠다고 다짐했다. 먼저 Performance 탭이다. (한번에 모든 것을 공부할 수가 없어서 차차 수정을 할 예정) 1.측정방법 -측정할 액션이나 페이지 로딩 전 레코딩 버튼을 누르고 원하는 결과물이 나오면 레코딩 stop을 한다.2.결과 분석 -내가 측정할 페이지에서 동..
리액트 공부를 하다가 책에서 배열에 대해 map 함수를 많이 쓰길래 뭔지 찾아보니 자바스크립트 내장 함수였다...(프론트를 할꺼면 이정도는 알았어야 했다...)그래서 공부해 보았다 Map1.map 메소드는 다음과 같은 방식으로 사용한다. 배열.map((요소, 인덱스, 배열) => { return 요소 }); 2.map의 기본 원리는 배열의 각 요소들에 대해 반복문을 도는 것인데 map의 인자로 함수를 넣어준다.그 말은 다시말해 배열의 각 요소들을 파라미터로 함수를 요소 수만큼 실행한다는 것이다.ex) const arr = [1,2,3]; let arr2 = arr.map((v) => {return v});3.주의할 점은 map을 사용한다고 원래 배열의 값은 바뀌지 않으므로 map을 사용한 결과값을 다른 ..
리액트의 장점1.선언형 스타일 프로그래밍 : 일반적인 프로그래밍은 결과를 도출하기 위해 순차적으로 프로그래밍을 하지만(명령형 스타일) 선언형 스타일은 결과물에 초점을 맞춰 코드를 작성한다.(솔직히 아직 잘 모르겠다... 무슨말인지)2.순수 자바스크립트를 이용한 컴포넌트 기반 아키텍쳐 : 리액트는 순수 자바스크립트 내장 함수들을 사용하기 때문에 다른 프레임워크들과는 달리 리액트를 쓰기위해 특별히 더 학습해야될 것들이 없다.3.강력한 추상화: 내부의 인터페이스를 숨기고 정규화 과정을 거친 합성 메서드와 속성을 제공한다. (무슨말인지 잘 모르겠으나... 내가 이해한 건 예를들어 onClick 이벤트의 경우 각각의 브라우저들이 가진 원본 이벤트를 사용하는게 아닌 한번더 감싸진 공통 onClick 메서드를 제공하..
예제 프로젝트를 진행하려다가 import 부터 막혔다... 내가 보고 있는 책(리액트 교과서) 에는 아래와 같이 객체를 불러오는데const React = require('react')const { render } = require('react-dom')const { Provider } = require('react-redux')const { createStore } = require('redux')const reducers = require('./modules')const routes = require('./routes') 내가 들은 인터넷 강의에서는 아래와 같이 객체를 불러오는 차이가 있었다 ...import React from 'react';import {render} from 'react-dom';..
안녕하세요~ 오늘부터 리액트로 프로젝트를 진행하려 합니다 블로그 포스팅은 제가 리액트를 처음으로 접해보며 알게된 것을 기록하겠습니다.(혹시 제가 잘못 알고 작성한 부분이 있으면 댓글로 수정 부탁드립니다)우선 몇개의 예제 프로젝트를 만들어 보고 개인 프로젝트를 진행하겠습니다. 첫 번째로 아무것도 없는 빈 프로젝트에서 기본적인 프로젝트 구조를 잡고 리액트 개발환경 세팅하는 과정입니다. (Windows 환경) 1.리액트 환경 세팅 1-1 nodejs 설치 https://nodejs.org 에서 다운 받아 설치 1-2 babel, webpack, webpack-dev-server 설치(왜 글로벌 옵션을 줘야하지?) npm install -g babel webpack webpack-dev-server babel ..
장점 단점 쿠키 서버 공간 절약 보안 취약쿠키 용량 제한브라우저 공유 불가능쿠키의 사이즈가 커질수록 네트워크 부하 세션 쿠키보다 보안 향상용량 제한 X브라우저 의존도 낮음네트워크 부하 낮음 서버부하 JWT(JSON Web Token) 쿠키 장점 + 세션 장점모바일,PC 동일한 공유가능 토큰의 길이가 늘어날수록 네트워크 부하 ※좀더 자세한 특징은 아래 출처를 참고 부탁드립니다. 웹 서비스들의 로그인 구현 방법은 보통 쿠키기반, 세션기반으로 이루어져 있다. 그러나 점차 모바일 앱이 웹 브라우저만큼 커지고 있기 때문에 PC와 모바일을 통합시켜줄 JWT 기반의 로그인 방법이 나타난 것 같다. (간단하게 서치한거라 JWT에 대해 정확하게 파악한지는 모르겠지만...) 클라이언트에서 로그인 요청을하면 서버에서 필요한..