내직업은 IT종사자 (54) 썸네일형 리스트형 [javascript] javascript는 메모리관리가 어떻게 될까? (feat. 메모리 누수 사례) 목차 메모리의 생명주기 메모리의 저장공간 Heap과 Stack 가비지콜렉터 메모리 누수 사례 1. 메모리의 생명주기 자바스크립트에서 변수나 함수를 사용할 때 JS엔진은 메모리를 할당하고 더이상 필요하지 않으면 해제 합니다. 메모리 할당은 '이 공간을 내가 쓰겟다'라고 찜해놓는 과정이며, 메모리 해제를 하면 공간이 확보되어 또 다른 용도로 사용할 수 있게 됩니다. [메모리 할당] js 엔진에서 알아서 처리되는 과정이며, 자바스크립트는 생성한 객체에 필요한 메모리를 할당 합니다. (* 메모리관점에서 객체는 변수 타입 object뿐만 아니라 함수와 함수의 스코프까지 칭합니다.) [메모리사용] 변수에서 읽거나 쓰는 것 [메모리 해제] js 엔진에서 알아서 처리되며, 할당되었던 메모리가 해제되면서 해제된 메모리는.. [javascript] 변수 참조타입 메모리 접근 방식, 참조타입 복사가 필요한 이유 (shallow copy, deep copy) 목차 원시값, 참조값이란? 그리고 복사가 필요한 이유 얕은 복사의 정의와 방법 깊은 복사의 정의와 방법 들어가기전에! 자바스크립트 엔진은 가상머신으로 돌아가는데 버츄얼 머신 메모리 모델에는 힙과 콜스택 영역으로 나눠져 있습니다. (힙: 참조타입, 콜스택: 원시타입) 1. 원시값, 참조값 이란? 그리고 복사가 필요한 이유 1.1 원시값이란? 원시값은 기본자료형을 의미합니다. 예: Number, String, Boolean, Null, undefined 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장됩니다. 1.2 원시값은 어떻게 작동하는가? 자바스크립트에서 원시타입을 선언(declare)하면 이는 stack에 저장됩니다. * stack이란 LIFO(last in first out: .. [css] display: flex 완벽 정리, flex container속성, flex item속성 2편 목차 flex-basis flex-shrink flex-grow flex align-self order Flex item에 적용되는 속성들 1. flex-basis (기본값 auto) flex-basis: auto (default) flex-basis: 0 / 50% / 300px/ 10rem / content 등이 올 수 있습니다. flex-basis는 아이템의 기본 크기를 설정하는 것입니다. width와 heightd값과 별반 차이가 없어보이지만 flex-direction(flex container에 적용하는 속성) 값에 따라 축이 바뀝니다. flex-direction:row로 설정하면 flex-basis는 가로 값이 되고 flex-direction:column으로 설정하면 flex-basis는 .. [css] display: flex 완벽 정리, flex container속성, flex item속성 1편 목차 display: flex의 브라우저별 지원현황 display: flex의 html 코드구조 flex의 container(껍데기)에 적용하는 속성들 IE에서 호환안되요... 등 여러 이유로 쓰기를 망설여왔던 display: flex, float과 inline-block을 대신해서 사용하곤 했었습니다. 근데 float은 clear: left,right,both로 해제를 해줘야 다음 요소에 영향이 안가구, inline-block으로 요소를 나열하면 의도하지 않은 여백이 생겨서 부모 요소에 다른처리를 해줘야하는 불편한점이 있엇습니다. 이제는 display: flex와 grid를 적절하게 사용하는 것이 여러모로 장점이 많더라구요 알고보면 스타일 적용하는것도 더 간편합니다! 1. display: flex 브라.. 로드밸런싱(Load Balancing)이란? L4 vs L7의 차이점, 로드밸런싱 알고리즘 목차 로드밸런싱이 필요한이유 로드밸런서란? 로드밸린싱의 종류 l4,l7의 차이점 1. 로드밸런싱이 필요한 이유 "헐 서버 다운됬다.." 서버가 하나일 때 트래픽이 적으면 서버는 문제없이 응답을 해줄 수 있으나, 트래픽이 서버 한개로 감당할 수 없는 양이 되는 순간 서버는 다운될 것이고, 서비스 또한 작동을 멈출 것입니다. 그러면 상장기업이면 주가에 영향을 미치고 개미님들의 눈가가 촉촉해질 수 있습니다. 1.1 서버로 과도하게 몰려 작동을 멈추지 않게 해결하는 방법은? 스케일 업: 서버의 인스턴스 성능을 올리는 방식 즉, 서버의 하드웨어 성능을 업그레이드 하는 방식입니다.(수직적 확장), CPU의 코어 수를 증가시키거나, RAM을 추가하는 방법 등으로 서버의 성능을 업그레이드 해줍니다. 장점 하나의 서버.. URL 의 오타인줄만 알았던 URI , URL과 URI의 차이점 URL , URI 글자가 비슷해보여서 처음에는 오탈자인가부다 라고 생각했었습니다. 하지만 공부하다보니 I이 i의 대문자인걸 알았습니다! 가끔 회원가입하다가 보안문자 입력하면 자꾸 틀렸다고 하는데 i의 대문자인데 L의 소문자 ( I , l ) 로 써서 그런경우 있잖아요..? 공부의 필요성을 다시금 느끼며 ^^ 1. URL과 URI의 차이점 RESTFul API 관련 문서나 기타 외 개발 관련 문서들을 읽을 때 종종 URI라는 표현을 볼 수 있습니다. 언뜻보면 URL과 별다른 차이점이 없어보입니다. (URI는 URL의 의미를 포함합니다.) 즉, URI가 더 포괄적인 개념이며 URL은 이 안에 포함됩니다. 1.1 URL은? url은 Uniform Resource Locator 의 약자로 자원이 실제로 존재하.. [네트워크] 웹 캐시(Web Cache)란 무엇인가?? 목차 캐시(cache)가 없을때 캐시(cache) 사용 (유효시간 내) 캐시(cache) 사용 (유효시간 초과) 캐시(cache) 사용 (유효시간 초과) 시 데이터가 같다면? 웹 캐시란 무엇인가?(Web Cache) 사용자(client)가 웹사이트( server)에 접속할때 정적컨텐츠(이미지, js, css등) 특정 위치(client, network 등)에 저장하여, 웹사이트 서버에 해당 컨텐츠를 매번 요청하여 받는것이 아니라, 특정 위치에서 블러옴으로써 사이트 응답시간을 줄이고 서버트래픽 감소 효과를 볼 수 있는 것을 말합니다. 1. cache가 없을 때 동작 캐시가 없을때 브라우저에서 서버로 'star.jpg'라는 이미지를 가져와달라고 요청했다고 가정해볼게요 초기에 서버에 star.jpg를 달라고 .. [css] css selector(선택자) 종류, css 성능에 미치는 영향 목차 selector(선택자)종류 selector가 css 성능에 미치는 영향 CSS selector(선택자)의 종류 , css 성능에 미치는 영향 1. selector(선택자) 종류 일단, Steve Souder 의 Even Faster Websites에서 인용하는 css선택자 순위는 아래와 같습니다. id - 공통으로 사용불가 한페이지당 1개가 존재해야 합니다. 사용 예: #selector class - 공통으로 사용 가능하며 스타일이 같은경우 같은 클래스로 한번에 스타일링 할 수 있습니다. 사용 예: .selector tag 태그선택자 - 등등 태그 이름을 선택자로 쓸 수 있습니다. 사용 예: p {...} strong {...} sibling 인접선택자 - 특정 태그의 [바로 다음] 형제 요소를 .. 이전 1 2 3 4 5 6 7 다음
