분류 전체보기 (669) 썸네일형 리스트형 [2024 신입부원 기초 스터디] 이종윤 #4주차 (JS_dom) JavaScript란? 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. DOM이란?DOM은 문서 객체 모델(The Document Object Model)의 약자로 HTML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다... [2024 React.js 스터디] 박지민 #5주차 "리액트 입문 10-16" 10. useRef 로 특정 DOM 선택하기- JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택- 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생ex) 특정 엘리먼트의 크기를 가져올 때, 스크롤바 위치를 가져오거나 설정해야될 때, 포커스를 설정해줘야 될 때 등추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 DOM에다 적용- 그럴 땐, 리액트에서 ref 사용 함수형 컴포넌트에서 ref .. [2024 React.js 스터디] 박건민 #5주차 10. useRef 로 특정 DOM 선택하기우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 선택한다.리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때, ref를 사용한다. 함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용한다.useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 한다.Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다.아래 예제에서는 onReset 함수에서 input 에 포커스를 하는 focus() DOM API 를 호출했다. InputS.. [WINK 공식 홈페이지] Next.js 스터디 정리 💫 [backend / 유건] 공식 docs. 를 통해 넥제스를 공부하면서 느낀건, Next.js는 풀스택 프레임워크이지만 프론트엔드 성향이 좀 더 짙어서 SSR을 공부하기 전까지는 아직 프론트엔드에 대한 기초 지식이 필요하다고 생각이 든다.(프론트엔드는 너무 어려워) 지금까지 공부했던 내용들을 정리해보고자 한다.1. Next.js란?Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크이다. React 구성 요소를 사용하여 사용자 인터페이스를 구축하고 Next.js를 사용하여 추가 기능과 최적화를 수행할 수 있다. 2. Next.js 시작하기다음 명령어로 프로젝트를 생성할 수 있다.npx create-next-app@latest 이 방식은 react, react-dom, next 라이브러리를 자동적으로 설치해주.. WINK 공홈 Next.js 스터디 부터 시작하기 💫 (backend/이정욱) 과연 무슨 주제로 블로깅을 해야할까?위 내용을 고민하던 도중에 우리가 첫 회의 전에 카톡방이 개설되고나서 고민했던 내용에 대해 블로깅 하기로 정했다.백엔드 프레임워크는 어떤 것으로 해야할까? (Next.js vs Nest.js)얼핏 보기에 이름이 비슷한 두 프레임워크에는 어떤 차이점과 장단점이 존재할까?얘기가 나왔던 프레임워크들의 후보로는Spring bootExpress.jsNest.jsNext.js다음과 같은 후보군이 있었다. 각 프레임워크의 특성을 비교해보고 우리 프로젝트(WINK 공홈 다 때려 빠뿔기)에는 어떤 프레임워크가 적절할 지 나름의 고민을 해보았다.Spring BootSpring Boot는 Java로 애플리케이션을 만들 때 사용하는 웹 프레임워크이다. Java 언어를 기반으로 해서 Java.. [2024 React.js 스터디] 정호용 #5주차 "React.JS 활용하기" 리액트 기본 지식을 이용하여 다양한 기능들을 살펴보자10장. useRef로 특정 DOM 선택하기JavaScript 사용 시, 우리가 특정 DOM을 선택해야 하는 상황에서는getElementById나 querySelector 같은 DOM Selector 함수를 이용해서 DOM을 선택한다.(여러분 아직 기억하고 계시죠...?) 물론, 리액트에도 DOM을 선택해야 하는 상황이 온다.또한,Video.js 나 JWPlayer 같은 HTML5 Video관련 라이브러리D3, chart.js같은 그래프 관련 라이브러리등의 외부 라이브러리를 쓸 때에도 특정 DOM에 적용하기 때문에 결국에는 DOM을 선택해야 하는 상황이 오기 마련이다.그떄는, 리액트에서는 ref라는 걸 쓴다. 함수형 컴포넌트에서는 ref를 쓸 때는 us.. [2024 신입부원 기초 스터디] 박건민 #5주차 "토이 프로젝트 실습" JavaScript웹문서를 제어하기 위해 개발된 언어컨텐츠 변경, 추가, 제거 등 html 문서를 조작하기 위해 만들어진 언어 DOMDocument Object Model의 약자로, HTML요소를 JavaScript Object처럼 조작할 수 있는 Model이다.DOM의 구조는 트리구조로, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있다.DOM에서 제공하는 API를 변경하여 Element의 상태를 변경할 수 있다. window.onload() 속성해당 요소가 완전히 로드 되었을 때, 자동으로 호출되는 함수를 지정하는 속성웹 페이지에서 여러 번 사용해도 window.onload() 함수는 하나만 적용window.onload = () => { console.log("wink");} date 객.. [2024 Spring Boot 스터디] 황수민 #2 주차 3~4장 3장 스프링 부트 3 구조 이해하기3.1 스프링 부트 3 구조 살펴보기계층스프링 부트의 각 계층은 자신의 책임에 맞는 역할을 수행하며, 필요에 따라 소통한다. 프레젠테이션 계층 (Controller)HTTP 요청을 받고 이 요청을 비즈니스 계층으로 전송하는 역할 비즈니스 계층 (Service)모든 비즈니스 로직을 처리하는 역할더보기'비즈니스 로직'이란?서비스를 만들기 위한 로직이다.(데이터를 처리하기 위한 로직, 예외 처리 로직, 프로세스를 구현하기 위한 로직 등)퍼시스턴스 계층 (Repository)모든 데이터베이스 관련 로직을 처리하는 역할.이 과정에서 데이터베이스 계층과 상호작용하기 위한 객체인 DAO를 사용할 수도 있다. 프로젝트 디렉터리 구성스프링 부트에는 정해진 프로젝트 구조는 X, 그렇지만 .. 이전 1 ··· 34 35 36 37 38 39 40 ··· 84 다음
