WINK-(Web & App) (425) 썸네일형 리스트형 [2023 신입부원 심화 스터디] 이정욱 #1주차 - 기초 문법 Part.1 1. 변수와 상수 - 변수: let이라는 키워드로 선언된다. let hi = '이정욱'; // hi라는 변수에 '이정욱'이라는 값으로 초기화 hi = '안녕하세요' // hi의 값을 변경 let hi = '정욱이' // 다음과 같이 let을 한번 더 쓰면서 재선언 하면 오류 발생 let을 통해 변수를 선언하게 되면 값은 재할당 할 수 있지만 재선언 할수는 없다. - 상수: const라는 키워드로 선언된다 const hello = "안녕하세요!!"; hello = '니하오"; // 다음과 같이 값을 바꾸어 주면 오류 발생 const를 통해 상수를 선언하게 되면 값을 바꿀 수 없다. -변수 이름 규칙 변수나 상수 이름의 첫 번째 글자는 영어, $, _ 만 가능 첫 글자 이외에는 숫자도 사용 가능 ex) _1.. [2023 신입부원 심화 스터디] 조현상 #1주차 - 변수와 상수 선언 자바스크립트 스터디 시작~! 자바 언어라고 하면 String name; char c; int number; boolean b; ... 과 같이 데이터 타입을 선언해줘서 각자 데이터 타입의 맞게 만들어줬어야 했다. 하지만 자바스크립트는 달랐다. //int형 const age = 20; //String형 const name = "조현상"; //배열 const Array = [1,2,3]; .. 데이터 타입의 상관 없이 const 와 let 으로 선언할 수 있었다. const와 let의 차이는 const name = "조현상"; name = "현상"; //error const로 선언하면 선언 이후 저장된 값을 바꿔줄 수 없다. 우리는 이것을 상수라고 부르기로 했다. 하지만 let은 let age = 20; a.. [2023 React.js 스터디] 이지원 #3주차 - 2장. 리액트 컴포넌트 스타일링하기(1~4) / 4장. API 연동하기 (1) 1. Sass Sass는 CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게해준다. Sass 에서는 두가지의 확장자 (.scss/.sass) 를 지원한다. sass 예시 $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color scss 예시 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } SASS 사용 예시 Sa.. [2023 React.js 스터디] 유승우 #4주차 - React Router v6 1. 라우팅이란? 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 리액트 라우터를 사용하여 라우팅 시스템을 구축하면 손쉽게 싱글 페이지 애플리케이션을 만들 수 있다. 2. 싱글 페이지 애플리케이션이란? 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. 만약 싱글 페이지 애플리케이션에서 다른 페이지로 이동하게 된다면 서버에 다른 페이지의 HTML을 새로 요청하는 것이 아닌 브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 기존의 웹 애플리케이션은 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여주게 된다. 3. 리액트 라우터 적용 및 기본 사용법 프로젝트를 생성 후 리액트 라우터 라이브러리를 설치하면 .. [2023 React.js 스터디] 동승환 #2주차 - 1장. 리액트 입문(10-16) 10. useRef 로 특정 DOM 선택하기 javaScript에서 특정 DOM 을 선택할 때 getElementById, querySelector 와 같은 DOM Selector 함수를 사용해서 DOM 을 선택하듯이 리액트에서는 ref 라는 것을 사용한다. 함수형 컴포넌트에서는 useRef 라는 Hook함수를, 클래스형 컴포넌트에서는 콜백 함수 또는 React.createRef 라는 함수를 사용한다. import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); con.. [2023 React.js 스터디] 임혜진 #2주차 - 즐거운 수강신청 사이트 만들기~ React.js 스터디 2주차 과제는 수강신청시즌에 걸맞는 '즐거운 수강신청 사이트 만들기' .. ! 즐거웠..나 문제는 크게 3개로 이루어져 있다. 1. 작성된 useEffect 함수를 참고하여 정상적으로 남은 시간이 돌아가도록 작성하시오. const timer = useRef(null); const [time, setTime] = useState(10); useEffect(() => { timer.current = setInterval(() => { console.log('1초마다 실행'); setTime((time)=>(time-1)) }, 1000); return () => clearInterval(timer.current); }, []); useEffect(() => { // time이 변할 때.. [2023 React.js 스터디] 조다운 # 1주차 - 1장. 리액트 입문(1-9) 1. 리액트는 어쩌다가 만들어졌을까? 처리해야 할 이벤트, 관리해야 할 상태값, DOM 까지 다양해지게 된다면 이에 따라 업데이트 하는 규칙도 복잡해지기 때문에 업데이트 작업의 간소화가 필요하다. 리액트는 어떠한 상태가 바뀌었을 때 그 상태에 따라 Dom 을 업데이트 할 지 규칙을 정하는 것이 아니라 아예 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여준다면 어떨까? 하는 아이디어가 발상이었다. 하지만 정말 동적인 UI 를 보여주기 위해서 모든 걸 다 날려버리고 새로 만들게 된다면 속도가 굉장히 느릴 것이다. 그래서 리액트에서는 Virtual DOM 을 사용하여 이를 가능하게 했다. Virtual DOM 은 가상의 DOM 이다. 그냥 메모리에 가상으로 존재하는 DOM 으로서 JavaScript 객체이.. [2023 React.js 스터디] 사민주 #1주차 - 1장 1~9절 <과제> nvm을 사용하여 node의 latest 버전을 다운받아 설정하세요. 윈도우 기반으로 nvm-setup.exe 파일을 다운받은 후 cmd를 '관리자 모드'로 접속하여 node js의 최신 버전을 설치한다. 'nvm use [버전]' 명령어를 통해 사용 버전을 지정해 준 후 'node -v' 로 확인 윈도우의 경우, Node.js 공식 홈페이지의 LTS 버전을 직접 다운로드 받으면 환경 변수 때문에 nvm 설치 오류가 발생하는 경우가 있다. 그럴 때에는 설치되어 있는 node js를 다 지워주고 nvm을 먼저 설치한 후 cmd에서 node js를 설치해 주어야 한다. 2. yarn 을 설치하세요. Install Yarn 페이지를 참고해서 'npm install --global yarn' 명령어를 통해 설치.. 이전 1 ··· 50 51 52 53 54 다음
