본문 바로가기

반응형

WINK-(Web & App)/React.js 스터디

(77)
[2024 JS 심화 프론트 스터디] 정호용 #2주차 "JS 나머지" -----수정-----JS 알고리즘 문제 발표자료입니다. 발표 때 너무 복잡하게 설명 드린 것 같아 다시 정리했습니다! 지난번에 이어 이번에는 반복문, 함수, 이벤트 등 자바스크립트의 좀 더 자세한 기능들을 배웠습니다. 12강. 반복문 ✅ 말 그대로 특정 작업을 계속 반복하는 작업 for문?✅ 가장 널리 쓰이는 방식이다.// 💡 변수이므로 let이 사용됨for (let i = 0; i for (변수 선언 & 할당 ; 종료조건 ; 참일 시 블록 내 코드 이후에 실행할 것){    실행문}i가 0,1,2,3,4까지 1씩 증가하며 반복문을 총 5번 돌림✅ 출력값은 0,1,2,3,4for (let i = 10; i > 0; i -= 2) { console.log(i);}i가 10부터 0 전 까지 -2씩 감소..
[2024 JS 심화 프론트 스터디] 정호용 #1주차 "JS 첫주차" 첫 주차에 강의를 늦게 듣게 되었네요..하하 다음 주차 스터디 부터는 일찍일찍 들어야 될거 같아요..! 저희가 이번 스터디에서 듣게 될 강의는 입문자를 위한 JS강의 인데요, 지난 학기에 이미 JS + 리액트 스터디를 했음에도 완전히 제 것으로 만들고자 다시 듣게 되었습니다. 3강. 자바스크립트는 어떤 언어인가요? ✅ Java와 JavaScript는 완전히 다른 언어이다! ✅ 원래 웹 사이트에 사용될 목적으로 제작되었다! ✅ html과 css는 기능이 제한된 마크업 언어이기에, 웹 사이트에 이것만 사용하면 아무런 기능이 작동하지 않는다. ✅ 버튼의 클릭에 반응하고, 수식을 연산하는 등의 기능이 있는 자바스크립트를 사용해야 하는 이유이다. ✅ 그러기에 지금까지 자바스크립트는 프론트엔드가 주로 사용했었다. ..
[2024 JS 심화 프론트 스터디] 이서영 #1주차 "JS 1주차 스터디" 1.자바스크립트 특징 - 프로그래밍 언어 : 사이트에 기능을 넣어줌 - 인터프리터 언어(코딩 한 결과를 사용자에게 건네주기 전에 포장하거나 가공하는 과정, 즉 컴파일 과정을 거치지 않는 언어) 개발과정이 빠르고 유연 버그가 덜 걸러짐 실행이 조금은 느림 - 동적 자료형 코딩의 자유로움 ex) 숫자를 저장한 변수의 값을 문자열, 불리언, 객체나 배열, 함수로 바꾸기 가능 * 자바 스크립트 실습 환경 세팅 개발자 도구 열기 윈도우 : Ctrl + Shift + i 맥 : Command + Option + i 콘솔 내용 클리어 윈도우, 맥 : Ctrl + l 2. 콘솔과 주석 - 콘솔 console.log('출력할 값'); 괄호 안에 출력할 값 입력 ( 타 언어의 print 와 같은 역할 ) 개발자를 위한 메..
[2024 JS 심화 프론트 스터디] 김지나 #1주차 "JS" 01. 자바스크립트 - 웹 개발 용도로 만들어짐. 웹에 기능을 넣어주는 언어 => Node.js의 개발로 다양한 분야에 이용됨 - 인터프리터 언어, 동적 자료형, 객체지향 언어 02. 콘솔과 주석 - 콘솔: 다른 언어의 print와 같은 역할 console.log('출력할 값'); - 주석: 컴퓨터가 무시하는 메시지, 프로그램 진행에 영향을 주지 않음 // 주석 /* 주석 여러 줄일 떼 */ 03. 변수와 상수에 데이터 담기 - let: 변수, 넣은 데이터를 바꿀 수 있음 let a = 1; console.log(a); 1 a = 2; //변경 가능 console.log(a); 2 - const: 상수, 넣은 데이터를 바꿀 수 없음 - var: 초창기에만 사용 지금은 사용 xx -식별자 명명 규칙 1) ..
[2024 JS 심화 프론트 스터디] 박지민 #1주차 "JS" 자바스크립트는 어떤 언어인가요? 자바스크립트는 웹사이트에 사용될 목적으로 만들어짐 현재 node.js, react native, electron 등 다양한 분야에서 사용됨 자바스크립트의 특징 인터프리터 언어: 코드를 실행하기 전 컴파일 과정을 거침 X 동적 자료형: 한 번 선언한 변수가 문자열, boolean, number 등 여러 자료형을 가질 수 있다. 객체지향 지원: 방식이 자바나 C++과는 차이가 있는 프로토타입 기반 콘솔과 주석 consol.log('출력할 값'); // 괄호 안에 출력할 내용 입력 (print 역할) consol.log(1, 2, 3); // 쉼표로 구분 -> 다수의 데이터 한 번에 출력 가능 consol.log([true, false], {a:1, b:2}); // 다양한 데..
[2024 JS 심화 프론트 스터디] 한승훈 #1주차 안녕하세요. JS 스터디 1주차입니다. 0강. 자바스크립트는 어떤 언어인가요? - 인터프리터 입니다. - 웹에 참 많이 사용 됩니다. - java와 유사한 문법을 지닙니다. 1강. 수강을 위한 준비 WebStorm 사용하도록 하겠습니다. VSCode 사용해도 좋아보입니다. 2강. 콘솔과 주석 - 콘솔 JS에서 출력 결과를 확인하고 싶을 경우에는 console.log()를 사용합니다. print와 굳이 차이를 두자면.. 값을 잘 받아오고 있는지처럼 테스트용으로 유용하게 사용됩니다. - 주석 컴파일되지 않는 코드입니다. // 한 줄 /* 여러 줄*/ 여러 줄을 쭉 선택하고 cmd+/인거로 기억합니다.. 이거 하시면 주석 한번에 되어 참 편리합니다. 3강. 변수와 상수에 데이터 담기 let 와 const를 주..
[2024 JS 심화 프론트 스터디] 류상우 #1주차 "JS 기초" 목차 JS란? 변수와 상수 자료형과 연산자 객체와 배열 조건문 JS란? JavaScript란 웹 페이지가 기능을 할 수 있게 만들어주는 언어이다. 하지만 현재는 Node.js/React Native/Electron 등의 개발로 인해 여러 분야에서 사용되기도 한다. JS의 특징 인터프리터 언어: 코드를 실행하기 전 컴파일 과정을 거치지 않고 바로 실행된다. 동적 자료형: 한 번 선언한 변수가 boolean, number 등 여러 자료형을 가질 수 있다. 객체 지향: Prototype을 기반으로 하며 객체 지향이지만 JAVA나 C++과는 차이가 있다. 변수와 상수 변수와 상수는 '주머니'이다 어떠한 값을 넣을 수도, 꺼내볼 수도 있다. 한 데이터가 여러 곳에 사용되거나 로직을 구현할 때 필요하다. var: ..
[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..

반응형