개발기술/프론트엔드 (10) 썸네일형 리스트형 자바스크립트 내장함수 JavaScript 언어 자체의 기능JavaScript 엔진(V8, SpiderMonkey 등)**에서 제공하는 기능으로 어디서든 동작 가능 (브라우저, Node.js, 서버 등) JavaScript KeywordIn Operator(javascript property in object) : The in operator returns true if the specified property is found in the specified object or its prototype chain. Its syntax is: String Object MethodStringinstance.toUpperCase() : 문자열을 대문자로 변환 후 반환함Stringinstance.length() : 문자열의 길이를 반환.. 프론트엔드 환경설정 및 배포 1. NVM (Node Version Management)한 컴퓨터에서 여러 버전의 Node.js를 사용 가능하게 해주는 버전 관리 도구Node.js는 글로벌 설치가 기본이나 프로젝트마다 요구하는 버전이 다를 수 있음. 프로젝트마다 다른 Node 버전을 요구할 때 필수 도구입니다. 2.Node.js정의: JavaScript 런타임 환경 (브라우저가 아닌 환경에서 JS 실행 가능하게 해줌)역할:yarn, npm 같은 패키지 매니저 실행yarn dev, yarn build 같은 스크립트 실행프론트 빌드(예: yarn build)와 dev 서버 실행(예: yarn dev)을 가능하게 함.관리 방법: nvm 사용해서 버전 컨트롤 (.nvmrc로 특정 버전을 명시하여 사용 선언됨)3. 패키지 매니저정의: 외부 .. 웹 브라우저 API Web API(Web Application Programming Interface) MDN(Mozilla Developer Network)의 정의"Web APIs are a set of APIs available in web browsers for building web applications. These APIs allow web developers to interact with browser features and external services using JavaScript."✔ Web API는 웹 브라우저에서 제공하는 API 집합이며, JavaScript를 사용하여 브라우저의 기능을 조작할 수 있도록 지원한다.📌 W3C(World Wide Web Consortium)의 정의"A Web API .. 웹 서버의 정적파일 제공 웹 서버의 주요 기능해당 문서에서는 정적파일 제공에 대해서만 집중적으로 설명하고자 한다.정적 파일 제공 → HTML, CSS, JS, 이미지 등리버스 프록시(Reverse Proxy) → 백엔드 애플리케이션으로 요청 전달로드 밸런싱(Load Balancing) → 여러 서버에 트래픽 분산캐싱(Caching) → 요청을 최적화하여 성능 향상 웹 서버와 프론트엔드의 관계프론트엔드는 웹 서버를 사용하여 정적 파일(HTML, CSS, JS, 이미지)을 배포함.예를 들어, React/Vue 같은 **SPA(Single Page Application)**의 경우, 빌드된 정적 파일을 웹 서버에서 제공. 웹 서버가 폴더를 자동으로 서빙하는 원리Spring의 @RequestMapping을 통해 컨트롤러에서 직접 URL.. 백엔드 개발자와 프론트 엔드 이해도 왜 백엔드 개발자가 프론트엔드 코드를 알아야 할까?✅ 1. 클라이언트와의 통신을 이해해야 문제 해결이 빠름API를 만들었다고 끝이 아니라 클라이언트가 정상적으로 요청을 보내고 응답을 받는지 확인해야 함.CORS 문제, JSON 직렬화/역직렬화 문제, WebSocket 연결 문제 등이 생길 때 프론트 코드를 알아야 빠르게 원인을 파악할 수 있음.✅ 2. 테스트를 직접 할 수 있어야 함프론트엔드 없이 Postman, 브라우저 콘솔, WebSocket 클라이언트 등으로 API를 직접 테스트할 줄 알아야 함.REST API → Postman이나 cURL 활용WebSocket → 브라우저 콘솔에서 new WebSocket()으로 직접 연결 후 테스트 가능✅ 3. 프론트엔드와 협업할 때 커뮤니케이션이 원활해짐프론트.. Java, Javascript, Python 비교 1. 실행환경 javajavascriptpython설치 및 구성JDK(Java Development Kit) 설치 후 환경변수 설정 필요별도 설치 없이 브라우저에 내장된 엔진 사용 (Node.js 사용 시 Node 설치 필요)Python 인터프리터 설치 필요 (Windows, Mac, Linux 등에서 간단히 설치 가능)간단 설명설치 및 구성Java: 코드를 작성한 뒤Java Compiler (javac)가 바이트코드로 컴파일되어 JVM (Java Virtual Machine) 에서 플랫폼 독립적으로 실행 가능. 때문에 JDK를 반드시 설치해야 함. JVM 위에서 실행되기 때문에 런타임 오버헤드가 있음.JavaScript: 웹 브라우저에 이미 엔진이 내장되어 있어, 별도 설치 없이 사용 가능. 서버나 .. DOM DOM(Document Object Model)은 HTML, XML 문서를 구조화한 트리 형태의 모델로, 프로그래밍 언어를 통해 문서의 내용을 읽고 수정하거나 추가, 삭제할 수 있는 인터페이스를 제공합니다. 웹 페이지에서 동적으로 내용을 변경할 때 사용하는 기술입니다. 왜 DOM이 필요한가?1. 브라우저 관점:브라우저가 HTML/XML 문서를 구조화하여 이해하고 렌더링하기 위해 DOM이 필요합니다.DOM은 브라우저 내부에서 HTML을 처리하는 기본적인 데이터 모델입니다.2. 프로그래밍 언어 관점:프로그래밍 언어가 DOM을 통해 문서의 구조와 내용을 동적으로 제어할 수 있게 하기 위해 DOM이 필요합니다.DOM API는 프로그래밍 언어와 브라우저가 문서를 공유하는 "공통 언어" 역할을 합니다. 브라우저 .. 자바스크립트 Browser API 개발환경크롬 브라우저console : 한줄의 javascript를 바로 동작시킬 수 있는 화면멀티라인인스트럭션 : shift + entersource - network - arrow click - snippet - new snippet : javascript 파일을 생성하고 Run 시킬 수 있다. HTML에서 JavaScript를 사용하는 방식인라인 스크립트 (Inline Script) :클릭하세요 내부 스크립트 (Internal Script)외부 스크립트 (External Script)JavaScript 코드를 별도의 .js 파일로 작성하고, 로 불러오는 방식.CSS와는 달리 태그의 위치는 의 뒤, 마지막에 위치한다. 이유는, 변경의 대상이 아직 DOM에 입력되지 않으면 null excpetion.. 이전 1 2 다음 목록 더보기
