나만보는개발공부블로그

환경 변수 SDK의 중요 키 값이나 API URL과 같은 변수값들을 환경변수라고 부르는지 정확히 명칭은 알지못하지만 정의된 말에 따르면 환경변수는 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임 이라고 정의 되어있다. RN개발을 진행하면서 중요한 값들을 따로 .env에 정의하고 처리할려고 하는데 리액트 네이티브 공식 문서에 따르면 완벽하게 중요한 값들을 숨길수는 없고 다른 layer를 통해서 값을 받아오는식으로 처리해야한다고 합니다. 설명예시에 따르면, 클라우드 환경에서 람다 함수를 통해서 중요 키 값들을 요청해서 받아오는 방식 현재 개발하면서 중요 키 값들을 받아오는식으로 처리하는 환경은 아니기 때문에 공식문서에서 제안해준 라이브러리를 통해 키값을 설정할려고 합니다. 1. rea..

프론트엔드 개발자 관점으로서 보안적인 문제들은 어떻게 처리해야 하는지 알아볼려고 합니다. 해커들의 공격이 들어왔을때 웹 브라우저를 통해서 공격을 시도할 수 있는데 이전에는 백엔드 서버 관점에서만 생각하였는데 어떤식으로 클라이언트에서 처리할 수 있는지 정리해볼려 합니다. Response Header 헤더 관련해서는 보통 백엔드의 작업이지만 serverless로 구성된 서비스를 사용할때 프론트엔드에서의 책임이 있다고 합니다. 그래서 서버 통신을 할때 전송하는 response header의 값을 사용하는 서비스에 맞게 적절하게 구성해야한다고 합니다. header값에 보안적인 키값들의 구성요소로는 아래의 예시처럼 구성으로 설정할 수 있습니다. let securityHeaders = { "Content-Secur..

requestAnimationFrame이 setTimeOut이나 setInterval보다 더 최적화된 렌더링 업데이트 시간과 스무스한 애니메이션 기법을 만들어낼수있다고 하는데 실제로 어떻게 사용되는지 알아볼려고합니다. 먼저 requestAnimationFrame에 대해서 알아봅시다. RequestAnimationFrame 웹페이지의 애니메이션을 구현할 때 CSS의 animation, transition, transform 속성을 통해 구현할 수도 있고 Javascript와 함께 사용해서 변화시켜서 구현합니다. 자바스크립트로 하나씩 속성을 변화시키는방법은 성능에 좋지않는데 이럴때 requestAnimationFrame으로 처리하면 더 성능좋은 애니메이션을 만들어 낼 수 있다고 합니다. requestAnim..

브라우저에 데이터는 어떻게 저장해야할까? - 브라우저에서 개발을 진행하다보면 현재 클라이언트의 브라우저에 데이터를 저장해야하는데 다양한 방법이 있다고 합니다. 쿠키 로컬스토리지 세션스토리지 인덱스 데이터베이스 위의 4가지 방법들이 있는데 어떤 개념들로 이루어져있고 특징들을 알아볼려고 합니다. Cookie 쿠키는 무엇인가요? - 쿠키는 브라우저에 저장되는 가장 작은 문자열로 이루어져있다고 합니다. - RFC6265에 명세되어 있는 HTTP 프로토콜의 일부라고 합니다. 주로 웹서버에서 만들어지며 주로 사용방법으로는 HTTP 응답 헤더에 Set-Cookie에 내용을 넣어 전달하고 브라우저는 이 내용을 브라우저에 저장합니다. 주 특징으로는 4KB정도의 데이터 용량을 가질 수 있습니다. 또한 도메인 하나당 20개..

이전 게시글 작성에서 css최적화에 대해서 공부하였는데 실제로 자주 쓰는 기술스택의 react에서는 어떤식으로 css최적화를 적용할수있는지 글을 적어볼려합니다. React에서 렌더링을 수행하는 시점은 1. props의 변화가 발생할경우 2. state의 변화가 발생할경우 3. forceUpdate()를 실행할경우 4. 부모 컴포넌트가 변화할경우 위의 4가지 방법이 있다고 합니다. React에서 css 최적화를 적용하는 법은? 1. 인라인 스타일을 피해가야합니다. import React from "react"; const Button = () => { return 버튼; } export default Button; 리액트에서 렌더링 과정을 해가면서 객체의 메모리 주소값은 서로 항상 다르기 때문에 가상 DO..

프론트엔드 개발을 시작하면서 무작정 기능개발만 했던시절이였지만 최근에 공부를하면서 프론트엔드에서 화면 변경시에 최적화를 어떻게 할지 고민도 하게 되었는데 여러가지 방법중에 css 관련해 최적화 인터넷을 참고하면서 정리한 내용들을 적어갈려고합니다. css관련된 최적화를 생각하기전에 먼저 브라우저 렌더링 과정중에 reflow와 repaint의 개념에 대해서 알아야합니다. reflow - Layout 단계를 거치는데 Layout은 렌더트리(DOM + CSSOM) 요소들의 위치, 크기들이 브라우저의 뷰 포인트에 따라 맞게 계산되고 렌더 트리를 위치, 크기와 함께 재생성합니다. - 상위 노드가 변경시에 하위 노드까지 영향을 끼치고 렌더트리를 재생성해서 부하가 큽니다. - 발생시에 형제, 부모, 자식 노드까지 영향..