전체 글 (90) 썸네일형 리스트형 Cookie 의 maxAge 와 Expire 쿠키의 생존주기는 따로 설정해두지 않으면 브라우저 창을 닫을때 사라진다. 그래서 maxAge라는 옵션을 통해 브라우저와는 별개로 외부파일로 저장하는 것이 가능하다. setMaxAge() 메서드를 활용하면 만료날짜를 설정 할 수 있다. 비슷한 기능으로 Expire가 있는데 max-age가 얼마동안 유지할 것인지(예를 들어 5분) 를 설정하는 것이라면 expire는 만료되는 시간을 설정 하는 것이다. expire 는 setCookie('cookieName', 'cookieValue' , 365 ) ==> 이러면 365일 후 만료 useRef 함수형 컴포넌트에서 useRef 를 사용하면 ref 오브젝트를 반환해준다. const ref = useRef(value) // {current: value} 반환된 오브젝트는 컴포넌트의 생애주기를 통해 유지가 된다. 그말은 컴포넌트가 계속 렌더링 되어도 컴포넌트가 언마운트 되기 전까지는 값을 그대로 유지할 수 있다는 것이다. 그럼 useRef는 언제 사용할까? 1. useRef 는 state와 비슷하게 어떠한 값을 저장해두는 저장공간의 용도로써 사용된다. state의 경우 state값이 바뀌면 -> 렌더링을 하고 -> 컴포넌트 내부 변수를 초기화 한다. state를 사용할때 우리는 원치않는 렌더링 떄문에 곤란해 질떄가 있다. 이떄 useRef를 사용하면 불필요한 렌더링를 막을 수있다. Ref의 값이 변경.. CSS position Position 1.static : 디폴트 값 2. relative - 자신의 본 위치를 기준으로 letf, right 등으로 바꿀 수 있음. 3. absolute - 자신의 바로 위 태그 중 가까운 태그가 relative를 가지고 있으면 그 태그를 기준으로 위치를 잡는다. ( 만일 바로 위 태그가 relative가 없다면 body를 기준으로 위치 조정 됨 ) ( 사이즈 또한 자기 컨텐츠의 값 만해지면, 즉 변화 ) 4. fixed - 부모가 relative가 있는지 신경 안 쓰고 태그 중 최상위 태그의 기준으로만 변경됨 ( 스크롤 무시 항상 그 부위에 고정되어 따라다님 ) HTTP HTTP (Hypertext Protocol) 서버와 클라이언트 간의 TCP/IP 통신 위에서 메시지를 교환하기 위해 사용되는 프로토콜이다. 잠깐! 프로토콜 이란? 네트워크를 통해 통신 가능한 기기 간 데이터 통신을 원할하게 하기 위한 일종의 규칙이다. 이러한 프로토콜을 통해 각 규칙들은 규칙의 역할에따라 TCP/IP 4계층으로 나눠 분류한다. TCP/IP 란? 인터넷 통신의 대부분은 패킷통신으로 이루어져 있는데 패킷 통신 규약중 하나이다. TCP(전송제어프로토콜) 과 IP 를 아울러 지칭하는 용어. *패킷: 네트워크에서 사용하는 작게 분할된 데이터 조각으로 네트워크에서 전송되는 데이터의 기본단위 IP 는 컴퓨터의 주소 라고 생각하면된다. 메시지가 목표로 하는 컴퓨터에 잘 도착할 수 있는 역할을 한다. .. Parameter 와 Argument 매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다. 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말한다. parameter는 함수 혹은 메소드 정의에서 나열되는 변수 명이다. argument는 함수 혹은 메소드를 호출할 때 전달 혹은 입력되는 실제 값이다. const foo = (파라미터1, 파라미터2) =>{ return 파라미터+1 파라미터2 } const foo2 = foo(아규먼트1,아규먼트2) 호이스팅 과 TDZ 호이스팅에 대해 이야기 하기전에 먼저 변수에 대해 말해보겠습니다. 변수에는 let, const, var 가 있습니다. (사실 const 는 상수이지만 변수라고 묶어서 표현하겠습니다.) let 과 const 는 ES6 부터 생긴 문법입니다. 그런데 굳이 var 가 있는데 왜 let 과 const 를 만들었을까요? var 와 let 은 크게 다르지 않습니다. 대부분의 경우에는 둘을 바꿔서 사용해도 문제되지 않습니다. 그럼에도 불구하고 굳이 let을 쓰라는 이유가 뭘까요? var 는 한번 선언된 변수를 다시 선언할 수 있습니다. var name = "Kim"; console.log(name); var name = "Park"; console.log(name); 반대로 let은 한번 선언된 변수를 다시 선언할 .. REST API가 뭔가요 REST API 는 무엇이냐 서버를 만들때 REST API 에 의거하여 만들어야 좋다고 한다. 이게 뭐냐면 일단 API (Application Programing Interface) 웹개발에서 API 는 서버와 클라이언트 간의 소통방법 이다. 어떻게 통신을 할지 정한 규약 server.js 에 써놓은 코드가 API다. 이것을 Restful 하게 짜면 REST API 임 그럼 어떻게 restful 하게 짜야하냐? Roy Fielding 이란 개발자가 만든 잘 짜여진 원칙에 의해서 쓰면 좋을것 같다 라고 논문을 썻는데 이게 유명해져서 정론으로 받아들여짐 논문 내용중에 있는 REST 원칙 6개 1. Unuform interface 하나의 자료는 하나의 URL로 URL 하나를 알면 둘을 알 수 있어야함 요청과 .. 웹페이지가 브라우저에 렌더링 되는 과정 당 포스팅은 유튜브 채널 Code ON 코드온 의 영상내용을 정리한 내용입니다. 출처: https://www.youtube.com/watch?v=hITJM_t1WWY 브라우저의 주요 기능 -사용자가 요청한 HTML페이지, PDF, 이미지 등을 서버에서 요청해 보여주는것입니다. 이것을 어떻게 보여주나면, 브라우저가 화면에 나타나는 요소를 렌더링 할때 파이어폭스 - 개코 사파리 - 웹킷 크롬 - 블링크 라는 각각의 렌더링 엔진을 사용합니다. 이 렌더링 엔진이 사용자가 선택한 콘텐츠를 표시해줌 예를 들어 HTML 페이지를 요청하면 HTML과 CSS를 파싱해서 화면에 표시해 주는 겁니다. 총 6단계의 과정을 거치는데요 DOM 트리 구축 -> CSSOM트리 구축 -> 자바스크립트 실행 -> 렌더링 트리 구축 ->.. 이전 1 2 3 4 ··· 12 다음
