본문 바로가기

전체 글

(421)

[2024 신입부원 기초 스터디] 박건민 #6주차 웹 기초 스터디 마무리~ Date 객체날짜와시간(년,월,일,시,분,초,밀리초)을위한메소드를제공하는빌트인 객체, 생성자 함수시간메소드:getHours(),getMinutes(),getSeconds()...날짜메소드:getFullYear().getMonth(),getDate()... innerText와 innerHTMLinnerText: Element의 속성으로, 해당 Element 내에서 사용자에게보여지는 텍스트 값을 가져오거나 설정 가능innerHTML: Element의 속성으로, 해당 Element의 HTML, XML을 가져오거나 설정 가능// innerText 사용// 스타일 적용되지 않은 기본 폰트로 innerText 출력const innerT = document.getElementById('innerT');innerT...

[2024 신입부원 기초 스터디] 이종윤 #5주차 (JS_실습: Clock만들기) window.onload()란?javaScript는 html 내의 요소들을 움직일 수 있는 dom 객체를 조작하는 방식으로 주로 사용한다.위부터 차례차례 읽어 들이는 프로그래밍 본연의 작동 방식과, 실행 이전에 에러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해 자바스크립트는 작성 위치에 따라 오작동을 일으키기도 한다. 예를들어 위와 같이 사용을 하면, 원칙상으로 자바스크립트의 document.getElementById( 'hi' ); 가 html 내부 id가 hi이란 태그가 생성되기도 전에 실행됨으로 문제가 일어난다.그러므로 자바스크립트 문서를 뒤로 옮겨야만 한다. 하지만 자바스크립트가 아래쪽에 놓여 있고 길게 늘어지게 된다면 가독성이 떨어져 보기에도 안 좋아진다.이러한 불편을 해결하..

[2024 신입부원 기초 스터디] 김지나 #5주차 01. window.onload(): 해당 요소가 완전히 로드되었을 때, 자동으로 호출되는 함수를 지정하는 속성- 웹 페이지에서 여러번 사용해도 하나만 적용됨window.onload = () => { console.log("");} 02. Date 객체: 날짜와 시간을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수- 시간 메소드: getHours(), getMinutes(), getSeconds() ...- 날짜 메소드: getFullYear(), getMonth(), getDate() ...let date = new Date();console.log(date); //현재 날짜, 시간 출력 03. innerText와 innerHTML- innerText: Element의 속성. 해당 Element 내..

[2024 신입부원 기초 스터디] 김민서 #5주차 window.onload()해당 요소가 완전히 로드되었을 때, 자동으로 호출되는 함수를 지정하는 속성이다.웹 페이지에서 여러번 사용해도 하나만 적용한다!window.onload = () => { console.log("wink");} Date 객체날짜와 시간을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수이다시간 메소드 : getHours(), getMinutes(), getSeconds() ...날짜 메소드 : getFullYear(), getMonth(), getDate() ...let date = new Date();let hours = date.getHours();console.log(hours); //현재 시간 출력 innerText, innerHTMLinnerText : 해당 Elemen..

[2024 React.js 스터디] 김지나 #5주차 10. useRef로 특정 DOM 선택하기- 자바스크립트를 사용할 때, 특정 DOM 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용- 리액트를 사용하는 프로젝트에서 DOM을 직접 선택해야 하는 상황에서는 ref를 사용- 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook 함수 사용- 클래스형 컴포넌트에서는 콜백 함수 or React.createRef 함수 사용 - 초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히도록 useRef를 사용해서 구현import React, { useState, useRef } from 'react';function InputSample() { const [inputs, setInpu..

[2024 React.js 스터디] 한승훈 #5주차 10. useRef 로 특정 DOM 선택하기- JS에서 DOM을 선택해야 할 때는 DOM selector를 이용해야 합니다.- 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. - 이때 리액트에서 ref 라는 것을 사용합니다.초기화 버튼을 클릭했을 때 이름 input 에 포커스가 잡히도록 useRef 를 사용하여 기능을 구현해보겠습니다.InputSample.jsimport React, { useState, useRef } from 'react';function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = ..

[2024 React.js 스터디] 류상우 #5주차 10. useRef 로 특정 DOM 선택하기React에서 특정 DOM을 선택하기 위해서 필요한 게 바로 ref이다. ref를 사용할 때에는 useRef라는 Hook함수를 사용한다. 어떤 요소를 클릭했는지 표시하는 컴포넌트를 만들어보자.//Colors.jsimport React, { useRef } from 'react';function Colors() { const color = useRef(); const onClick = e => color.current.innerText = 'You clicked ' + e.target.style.backgroundColor; return ( ..

[2024 신입부원 기초 스터디] 김태일 #5주차 01. window.onload() 속성- 해당 요소가 완전히 로드되었을 때, 자동으로 호출되는 함수를 지정하는 속성- 웹 페이지에서 여러 번 사용해도 window.onload() 함수는 하나만 적용 02. Date 객체- 날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수시간 메소드 : getHours(), getMinutes(), getSeconds()날짜 메소드 : getFullYear(), getMonth(), getDate()//현재 날짜 및 시간이 출력let date = new Date();console.log(date); 03. innerText와 innerHTML- innerText : Element의 속성으로, 해당 Element ..

[2024 React.js 스터디] 이서영 #5주차 리액트 입문 (10장~16장) 10. useRef로 특정 DOM 선택- 리액트 사용시 DOM을직접 선택해야 하는 상황 발생ex) 특정 엘리먼트의 크기 가져오기, 포커스 설정, 외부 라이브러리 사용 ...등등- ref 사용: 함수형 컴포넌트에서 ref 사용시 useRef( Hook 함수 ) 사용: 클래스형 컴포넌트 -> 콜백 함수 / React.createRef 함수 사용 초기화 버튼 클릭했을 때 이름 input에 포커스 잡히도록 useRef 사용 -> 기능 구현 InputSample.jsimport React, { useState, useRef } from 'react';function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: ..

[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, 그렇지만 ..

[2024 Node.js 스터디] 김수아 #4주차 "Node.js 3장~5장" ●ch3▶3.1_REPL 사용하기입력한 코드를 Read(읽고), Eval(해석하고), Print(결과물 반환하고), Loop(종료까지 반복한다)*) REPL은 여러 줄 코드를 실행하기엔 불편해서, 긴 코드의 경우는 자바스크립트 파일을 만들어 파일 실행 ▶3.2_JS파일 실행하기 ▶3.3_모듈로 만들기모듈이란? 특정 기능을 하는 함수는 변수들의 집합/ 모듈로 만들어두면 여러 프로그램에서 해당 모듈 재사용 가능*) ES2015 모듈ES2015도입으로 자바스크립트에 자체 모듈 시스템 문법이 생겼다. require함수를 import로, module.exports를 export default로 바꾼다. require함수나 module객체는 따로 선언하지 않았음에도 노드에서 제공하는 내장 객체이기에 사용 가능..

[2024 Node.js 스터디] 김규현 4주차 REPL 사용하기Read 읽고 Eval 해석하고 Print 결과물을 반환하고 Loop 종료할 때까지 반복> const str = 'Hello world, hello wink'; //Read Evalundefined> console.log(str);Hello world, hello wink // Printundefined> // Loop? CommonJS 모듈노드 생태계에서 가장 널리 쓰이는 모듈 index.js를 실행할 때 var.js와 func,js 모듈 모두 이용 require는 파일 최상단에 위치할 필요없음속성값으로 각 파일의 모듈값 들어있음require.main은 노드 실행 시 첫 모듈을 나타냄순환 참조가 있을 경우에는 순환 참조되는 대상을 빈 객체로 만듭니다. -> 에러를 발생시키지 않지만..

[2024 Node.js 스터디] 장민우 #4주차 "노드 입문 1~5" 3장 노드 기능 알아보기3.1 REPL 사용하기REPL이란?READ (읽고)Eval (해석하고)Print (결과물 리턴)Loop (종료할 때까지 반복) vscode 기준으로 터미널 창에 (단축키 ctrl+`)node 작성 -> 프롬프트가 > 모양으로 바뀌었다면 JS코드 입력 가능> const str = 'Hello world, hello node';undefined> console.log(str);Hello world, hello nodeundefined>위와 같이 출력되었다면 성공입니다. 실습 따라하는데 node를 안쳐서 왜 실행이 안되지?라고 고민했던 건 비밀....3.2 JS 파일 실행하기function helloWorld() { console.log('Hello World'); helloNod..

[2024 Node.js 스터디] 김민서 4주차 REPLRead Eval Print Loop콘솔에 node 입력 후 자바스크립트 코드 입력입력한 코드를 읽고, 해석하고, 결과물을 반환하고, 종료할 때까지 반복함여러 줄의 코드를 실행하기에는 불편함 JS 파일 실행하기자바스크리브 파일을 만든 후 콘솔에서 node [자바스크립트 파일 경로]로 실행확장자 생략 가능 모듈모듈 - 특정한 기능을 하는 함수나 변수들의 집합 1. CommonJS 모듈모듈이 될 파일과 모듈을 불러와서 사용할 파일이 필요함// var.js 파일 (모듈로서 기능)const odd = 'CJS 홀수';const even = 'CJS 짝수';module.exports = { odd, even,};// func.js 파일const { odd, even } = require ('./var'..

[2024 Node.js 스터디] 조상혁 4주차 "Node.js 3장부터 5장까지" 이전에 백엔드를 한번 해보고 웹클라이언트 과제를 할 때도 node.js를 사용했지만 사실 그렇게 공부해본적은 없는 것 같다. 이번 기회에 node.js가 어떤건지 알고 잘 사용할 수 있도록 노력해야겠다. 3장 노드의 기능 - 알면 좋은 것 js는 기본적으로 인터프리터 언어이기에 보통 컴파일 하지 않아도 실행이가능하다. 웹같이 동적으로 움직이는 사이트에는 가벼운 언어가 적합했기 때문이다. 하지만 웹도 발전하면서 무거운 사이트도 생겼다. 예를들면 지도가 같은 사이트가 있는데 지도같은 꽤나 무거운 작업들을 위해서 컴파일러의 존재가 필요하다고 생각한것 같다. 그래서 생긴 컴파일러가 V8엔진 node.js에서 사용하는 컴파일러 이다. - REPL 읽고, 해석하고, 결과물을 반환하고, 종료할 때까지 반복한다..

[2024 Node.js 스터디] 이지원 #4주차 3장. 노드 기능 알아보기 JavaScript는 Python과 같은 스크립트 언어이기 때문에 컴파일하지 않고 실시간으로 인터프리터가 코드를 읽어 실행하는 구조이다. REPLReadEvalPrintLoop 코드를 읽고(Read), 실행(Eval)하고, 결과를 반환(Print)하는 과정을 반복(Loop)한다고 해서 REPL(Read Eval Print Loop)이라고 한다. JS 파일 실행Python 실행과 같이 인터프리터 프로그램에 실행할 파일을 인자로 넘겨주면 된다. node 모듈2개의 모듈 사용법이 사용되고 있다. CommonJS 표준 모듈이 나오기 이전 사용되던 방식이다.module.exports와 require("")을 사용하여 import/export를 수행한다. ECMAScript공식..

[2024 Node.js 스터디] 김태일 #4주차 03. 노드 기능 알아보기 03.1 REPL 사용하기 - REPL이란?Read : 입력한 코드를 읽고Eval : 해석하고Print : 결과물 반환Loop : 종료할 때까지 반복 - REPL 사용1) 콘솔을 열고 node를 입력2) 프롬프트가 > 모양으로 바뀜3) 코드 입력4) ctrl+c 두번 혹은 .exit를 통해 종료 ※ REPL은 짧은 코드를 테스트해보는 용도 긴 코드는 자바스크립트 파일을 통째로 실행하는것이 더 유용 03.2 JS파일 실행하기 1) 콘솔에서 node [자바스크립트 파일 경로]로 실행$ node helloWorld --> helloWorld.js 파일 실행※REPL에서 입력하는 것이 아니므로 주의 (콘솔에서 REPL로 들어가는 명령어가 node이고, 노드를 통해 파일을..

[2024 신입부원 기초 스터디] 백채린 #4주차 (JS_DOM) DOM이란? - Document Object Model- 웹 문서를 제어하기 위해 개발된 언어- 컨텐츠 변경, 추가, 제거 등 html 문서를 조작하기 위해 만들어진 언어- 스크립트 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화한 것 Document: 자바스크립트에서 DOM 접근을 위해 쓰이는 Interface - document.getElementById("id"): id 속성값으로 요소를 찾아 리턴- document.getElementByClassName("className"): class 속성값으로 요소들을 찾아 리턴- document.querySelection("selector"): 셀렉터를 통해 요소를 찾아 리턴- document.querySelectorAll("selector"):..

이전 1 2 3 4 5 ··· 17 다음

티스토리툴바