Ch.Covelope

들어가며웹 애플리케이션을 개발하다 보면 갑자기 브라우저에서 다음과 같은 경고를 마주칠 때가 있습니다:이 페이지에 안전하지 않은 콘텐츠(혼합 콘텐츠)가 포함되어 있습니다. 혼합 콘텐츠(mixed content) 문제는 언뜻 보기에는 간단해 보이지만, 무시하면 사용자의 보안을 심각하게 위협할 수 있습니다. 현대 웹 개발에서 HTTPS는 더 이상 선택이 아닌 필수가 되었죠. 하지만 이미 구축된 프로젝트에서 HTTP와 HTTPS 리소스가 뒤섞여 있는 경우가 많습니다.이 글에서는 혼합 콘텐츠가 무엇인지, 왜 문제가 되는지, 그리고 프론트엔드와 서버 측에서 어떻게 효과적으로 해결할 수 있는지 핵심만 살펴보겠습니다. 목차혼합 콘텐츠란?혼합 콘텐츠 발생 원인프론트엔드에서의 해결 방법서버 측에서의 해결 방법혼합 콘텐츠 ..

목차들어가며: 자바스크립트 모듈의 필요성모듈 시스템의 역사CommonJS: 작동 방식과 특징ES Modules: 작동 방식과 특징CommonJS와 ES Modules 비교실제 구현 사례와 코드 예시호환성 문제와 트러블슈팅모범 사례결론들어가며: 자바스크립트 모듈의 필요성웹 개발 생태계가 점점 복잡해짐에 따라, 코드를 구조화하고 관리하는 방법이 중요해졌습니다. 초기 자바스크립트는 모듈 시스템 없이 모든 코드가 전역 네임스페이스를 공유했습니다. 이는 대규모 애플리케이션에서 여러 문제를 야기했습니다:전역 변수 충돌: 다른 스크립트에서 동일한 이름의 변수나 함수를 사용할 때 충돌 발생의존성 관리 어려움: 스크립트 간의 의존 관계를 명확히 표현하기 어려움코드 재사용성 저하: 모듈화 없이는 코드 조각을 쉽게 재사용하..

자바스크립트 함수에 대해서 아는대로 설명해주세요. 목차함수란 무엇인가?함수 선언 방식함수의 매개변수와 반환값화살표 함수클로저(Closure)고차 함수실제 활용 사례함수 관련 트러블슈팅자바스크립트 함수의 베스트 프랙티스결론함수란 무엇인가?자바스크립트에서 함수는 일급 객체(First-class Object)입니다. 이게 무슨 말일까요? 간단히 말해, 함수는 다른 변수처럼 취급될 수 있다는 뜻입니다. 변수에 할당할 수 있고, 다른 함수의 인자로 전달하거나, 함수에서 반환할 수도 있죠.함수는 특정 작업을 수행하는 코드 블록으로, 재사용 가능하며 프로그램의 구조화와 모듈화에 핵심적인 역할을 합니다. 자바스크립트 애플리케이션에서 함수는 단순히 작업을 수행하는 것을 넘어 다양한 패턴과 기법의 기반이 됩니다.// 기본..

JavaScript 배열 기초 정리: 핵심 개념부터 유용한 메서드까지안녕하세요! 오늘은 자바스크립트에서 가장 많이 사용되는 데이터 구조 중 하나인 배열(Array)에 대해 심도 있게 다뤄보려고 합니다. 웹 개발을 하다 보면 배열을 다루지 않는 날이 없을 정도로 자주 사용하게 되는데, 이 강력한 도구를 제대로 이해하고 활용한다면 코드의 품질과 성능이 크게 향상될 수 있습니다.이 글에서는 자바스크립트 배열의 기본 개념부터 시작해 실무에서 바로 활용할 수 있는 다양한 메서드, 최신 ES6+ 문법을 활용한 테크닉등을 다룰 예정입니다. 목차자바스크립트 배열 기초배열 생성 방법기본 배열 메서드ES6+ 배열 메서드배열과 함수형 프로그래밍배열 성능 최적화실무 응용 사례마무리 자바스크립트 배열 기초 자바스크립트의 배열은..

브라우저 렌더링 파이프라인 가이드: 웹 페이지가 화면에 그려지 과정 들어가며: 우리가 보는 웹 페이지는 어떻게 만들어질까요?여러분은 웹사이트에 접속할 때마다 일어나는 일을 생각해보신 적이 있나요? 주소창에 URL을 입력하고 엔터를 누르는 순간부터 실제로 화면에 콘텐츠가 표시되기까지, 브라우저는 놀라운 작업을 수행합니다."구글 검색창이 어떻게 내 화면에 나타나는 걸까?", "인스타그램 피드는 어떻게 스크롤할 때마다 부드럽게 표시되는 걸까?" 이런 질문에 대한 답을 알기 위해서는 '브라우저 렌더링 파이프라인'을 이해해야 합니다.이 글에서는 HTML, CSS, JavaScript가 어떻게 픽셀로 변환되어 우리 화면에 표시되는지, 그 전체 과정을 차근차근 살펴보겠습니다.브라우저 렌더링 파이프라인: 6단계 여정브..

JavaScript를 배우면서 가장 어려운 개념을 꼽으라면 단연 프로토타입, this, 그리고 실행 컨텍스트라고 말할 수 있을 거 같습니다. 우연히 좋은 내용에 글을 보고 이해한 내용을 정리하도록 하겠습니다.  목차 1. 프로토타입과 클래스의 근본적 차이   1.1 클래스 기반의 철학적 배경   1.2 프로토타입 기반의 철학적 배경   1.3 프로토타입의 핵심 특징   1.4 프로토타입의 실제 구현 메커니즘   1.5 가족 유사성의 실제 구현   1.6 컨텍스트(맥락)에 따른 의미 변화   1.7 프로토타입과 인스턴스 수준의 수정   1.8 위임(Delegation)의 실제 동작   1.9 동적 확장의 장점과 단점 2. 자바스크립트의 실행 컨텍스트와 렉시컬 환경  2.1 실행 컨텍스트의 구조   2.2..

리코일(Recoil) ? 리코일은 2020년 Facebook 에서 만든 React 전용 상태 관리 라이브러리 이다. 이전에는 redux, mobx 그리고 React에 context등 다양한 상태관리 툴들이 존재한다. 기존 프로젝트도 redux로 되어있었고 처음 접했을 때는 많은 양에 코드들이 이해를 하는데 어려움을 주었지만 recoil은 이전 상태관리 라이브러리들과 다르게 러닝커브가 높지 않아 편하게 접근했던 거 같다. 리코일은 리액트 문법 친화적이며 get/set 인터페이스로 사용가능한 보일러 플레이트가 없는 API를 사용한다. 미들웨어 없이 비동기 처리가 가능하다 리코일 내부적으로 캐싱을 지원하며 동일한 atom 값에 대한 메모제이션된 값을 사용하여 성능적 이점이 있다. 간단하고 직관적인 API를 사..

리액트에서 함수형 컴포넌트 이전 클래스형 컴포넌트 사용시에는 상태를 지역변수 state에 정의하고 상태를 변경할 메소드 안에 setState 메소드를 넣어서 상태를 변경 했다.그럼 왜 state변수를 직접 변경하지 않고 setState를 통해서 했는지는 해당 메소드를 사용해서 리액트 컴포넌트에 상태변경에 대해서 알려주고 리렌더링을 요청 하기 위해서다.  함수형 컴포넌트 리액트 함수형 컴포넌트에서는 useState 라는 React Hooks를 사용해서 상태를 관리한다.해당 훅은 초기값을 받아서 [state, setState] 의 배열을 반환하며 [상태, 상태 변경 핸들러] 로 보면 된다. 함수형 컴포넌트는 렌더가 필요 할 때마다 함수를 재호출 하는데 렌더링은 곧 함수 호출이다.함수가 재호출 되었을때 이전 ..

자바스크립트 엔진(javascript engine) JavaScript 엔진은 JavaScript 코드를 해석하고 실행하는 역할을 담당. 주요 JavaScript 엔진에는  V8(Chrome 및 Node.js에서 사용),  SpiderMonkey(Firefox에서 사용),  JavaScriptCore(Safari에서 사용),  Chakra(이전 버전의 Microsoft Edge에서 사용)가 포함. 주요 역할파서 (Parser): 자바스크립트 코드를 읽고 추상 구문 트리(Abstract Syntax Tree, AST)로 변환하는 역할을 한다. AST는 코드의 구조를 표현하며, 엔진은 이를 분석하여 실행에 필요한 정보를 추출한다.인터프리터 (Interpreter): 변환된 AST를 실행 가능한 명령어로 해석..

OOP - 객체지향 개념 정리 캡슐화 데이터와 데이터를 활용하는 함수를 캡슐 혹은 컨테이너 안에 두는 것을 의미하는데 이 경우 캡슐은 class를 의미한다. (함수와 데이터가 개념적으로 연관되어 있으면 캡슐화를 사용해서 코드를 개선할 수 있다.) 장점은 코드가 구조화되고 함수나 메서드가 인수를 취할 필요도 없다. (this키워드로 데이터에 직접 액세스 할 수 있기 때문) 캡슐화를 사용하여 표시할 클래스의 속성과 숨길 속성을 선택할 수 있다. 캡슐화는 어떻게 클래스 정보에 접근 혹은 수정하는지를 결정하는 권한을 제공한다. 캡슐화는 데이터 그리고 class 안에 있는 해당 데이터를 이용하는 함수를 잘 정리하는 방법론 상속 코드를 더 작은 단위로, class로 쪼개고 재사용할 수 있다. 클래스를 extends..

typeScript (타입스크립트) 는 자바스크립트(javaScript)의 슈퍼셋으로 오픈소스 프로그래밍 언어이다. MS - 마이크로소프트에서 개발 유지 관리하며 동적인 자바스크립트를 정적으로 사용할 수 있게 해 준다. 자바스크립트 동적 타입 언어로써 다른 정적 언어 타입보다 유연하지만 그만큼 안정성이 보장받지 못한다. 자바스크립트에서 타입을 제어함으로써 좀더 안정성 있는 개발을 할 수 있게 도와준다. 시작하기 1. node.js 설치 - https://nodejs.org/ko/ 2. 설치후 에디터 터미널에 npm install -g typescript 입력 3. tsconfig.json 만들기 (작업할 폴더에) 4. tsc -w 터미널에 입력 (ts 파일을 실시간으로 js파일로 컴파일 시켜준다.) 5...

Object.create() ES5 문법 중 하나인 프로토타입 상속 기능으로 간단하게 사용 가능하다. let parents = { name: "Oh", age: 50}; let child = Object.create(parents); console.log(child) let grandChild = Object.create(child); console.log(grandChild) 상속할 부모(parents)에 속성 데이터를 할당하고 첫 번째 자식(child)에게 Object.create(parents); 을 할당하여 부모의 속성을 상속한다. 그리고 콘솔을 출력하면 {} 이렇게만 출력되는데 그건 child에 가 따로 속성 값을 부여하지 않아서 이다. 하지만 더보기 버튼을 누르면 [[Prototype]] : ..

React https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org React Facebook 에서 만든 제이쿼리 와 같은 프론트엔드 라이브러리이다. (Angular, Blazor 는 프레임워크); 그래서 우리는 필요한 만큼한 가져와서 사용할 수 있다. 컴포넌트 기반으로 유지보수와 재사용에 용이 Virtual DOM 으로 수정되는 부부만 업데이트 JSX (JavaScript + HTML) 싱글 페이지 애플리케이션(SPA)을 구현하기 좋다. 사용자 경험 ↑(링크가 바뀌지 않는다.) 선언형 프로그래밍. 명령형 프로그래밍은 How (..

Javascript call by value - reference. 평가 전략 (evaluation strategy) call by value.의미와 같이 값이 그대로 복사되는 것을 의미한다. 자바스크립트(JS)에서는 원시 데이터/원시 값의 경우 값의 복사 call by value가 발생하게 됩니다. call by value.var i = 1;function somefunc(a) { a = a + 1; return a;}somefunc(i); // i의 값을 파라미터로 값만 복사해서 넘긴다. 복사된 값을 넘기기 때문에 원본은 바뀌지 않는다.console.log(i) // 결과 1i의 값을 함수의 인자로 파라미터로 넘길때 값을 복사해서 넘기기 때문에 원본의 값은 변하지 않는다.  call by..

Javascript 재귀 함수, 즉시 실행 함수. 재귀 함수와 즉시 실행 함수. 재귀 함수는 말 그대로 자기가 자기 자신을 호출하고 특정 조건이 될 때까지 계속해서 호출하고 조건이 충족되면 함수를 빠져나온다. 재귀 함수를 사용할 때는 함수를 끝내는 종료 조건이 있어야 한다. 없으면 무한으로 계속해서 돌기 때문이다. 일부 함수는 반복문으로 구현 가능하지만 그렇지 않은 경우도 있는데 tree 구조의 노드 전체를 확인할 때 재귀를 사용하면 적은 코드로 확인 가능하고 직관적이다. 하지만 재귀 함수를 호출할 때마다 스택을 소비하기 때문에 반복문에 비해 메모리 소비 또는 시간이 더 걸리수 있다. (스택은 나중에 포스팅) 오늘은 재귀 함수중에서 팩토리얼 : 수학적 용어로 계승이란 뜻으로 1부터 n까지의 정수를 곱하는..