본문 바로가기
반응형

전체 글

 (853)
[2023 신입부원 기초 스터디] 한승훈 #8주차 - 섹션6 0. 인사말 안녕하세요. 뭔가 오랜만이 아니라 요즘 자주 보는 기분이네요. 기분탓입니다. 다들 6/21에 스파이더맨:어크로스 더 스파이더버스 개봉하신 거 아시나요? 저는 오늘로 3회독 완료했습니다. 방학하고 시간 되실 때 꼭 보는걸 추천드립니다. 8주차는 실습 과제였습니다. 실행 화면과 코드를 이용하여 배운 것을 간단히 정리해보도록 해요. 1. Modal 연습문제 가장 먼저 할 일은 클릭할 버튼을 가져오는 것입니다. openButton을 이용합니다. 처음 화면에서는 css에서 container의 display:none; 설정 때문에 보이지 않는 것입니다. display 속성에 접근하여 none을 flex로 바꾸면 감춰져있던 모달 창이 보이게 됩니다. 버튼은 반대로, none으로 바꿔주면 됩니다. 그러면 ..
[2023 신입부원 기초 스터디] 조상혁 #8주차 - Js 실습 예제 가위바위보 게임 js 실습 코드 // 무료 강의 👉 https://youtube.com/playlist?list=PLI33CnBTx2MZGD7zAQ810_B8dDU_E8gaq // 이 아래 코드를 작성하세요. const buttons = document.querySelectorAll('button'); const computerChoice = document.querySelector('.computer-choice'); const userChoice = document.querySelector('.you-choice'); const winner = document.querySelector('.result'); const result = ['가위', '바위', '보']; const show = (user,..
[2023 신입부원 기초 스터디] 최종은 #8주차 - 배우긴했으니예제를만들어보자 JS기초기에 HTML, CSS 부분은 강사분이 깃허브에 올려주셨다 사랑합니다🤸🏻‍♂️ 1.모달 만들기 우선 모달이란? 기존의 브라우저 페이지 위에 새로운 레이어를 까는것이다 이를 HTML, CSS, JS로 만들어보게따 학습목표: HTML요소를 선택하여 JS에서 처리하긔 -> 버튼을 클릭하면 모달창이 나오게 만들긔 👉눌러보라우 🕺🕺🕺🕺🕺 둠칫둠칫 Close 이건 HTML * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans..
[2023 신입부원 기초 스터디] 정찬우 #8주차 - 스터디 끝~ 이번 주차는 그대로 보고 따라 하는 실습 주차여서 딱히 블로깅 할 게 없다. HTML을 시작으로 CSS, JS까지 한 번씩 기초는 다진 것 같다. 계속 스터디를 하면 할수록 웹에 빠지게 되었고, 이번 방학 때는 웹에 대해서 더 자세히 공부해 보고 싶어서 어제 서점에 가서 웹 관련 책을 샀다. 아직 많이 해본거는 아니지만 조금 공부 해보고 느낀 것은 물론 백도 재밌지만 나는 프론트쪽에 더 흥미를 느끼는 것 같다. 앞으로 방학 때 윙크에 무슨 스터디가 있을지는 모르지만 열심히 참여해 볼 생각입니다~ 공항 출발하기 1시간 전까지 실습하고 블로깅하고 떠납니다✈✈
[2023 신입부원 기초 스터디] 박민규 #7주차 - 나태해진 나의 JS 블로깅.. 문자열 메소드 대소문자 변환 변수.toUpperCase() : 변수가 문자열일때 모든 문자를 대문자로 변환. 변수.toLowerCase() : 변수가 문자열일때 모든 문자를 소문자로 변환. 공백 제거 변수.trim() : 문자열의 앞 뒤 공백을 제거함. 변수.trimStart() : 문자열의 앞 공백을 제거함. 변수.trimEnd() : 문자여르이 뒷 공백을 제거함. 반복 변수.repeat(횟수) : 횟수만큼 문자를 반복 (원본을 해치지 않음) 추가 변수.padStart(10, "d") : 변수 앞에 "d"의 갯수와 변수의 길이 총 합 10만큼 "d"가 추가됨. 변수.padEnd(10, "d") : 변수 뒤에 "d"의 갯수와 변수의 길이 총 합 10만큼 "d"가 추가됨. IndexOf() const st..
[2023 신입부원 기초 스터디] 한승훈 #7주차 안녕하세요 여러분, 오랜만에 다시 인사드립니다. 다들 즐거운 방학 보내고 계신가요? 다들 보고 싶을지도요! 사실 뻥입니다 ㅋ 의 뻥입니다 ㅎㅎ 1. 문자열 메소드 나중에 기억이 안나는 것이 있어도 알아보기 쉽게 vs코드에 새로운 파일 하나로 정리해뒀습니다. 다만 실행하면 오류가 뜨긴 합니다. ㅎㅎ 2. 배열 메소드 강의 중 언급된것처럼, 메소드는 지금 당장 하나하나 싹 외우기보다는...(가능하다면 좋겠지만) 이런 게 있구나~ 하고 알아보는 강약조절이 필요한 곳이 아닌가 싶습니다 ㅎㅎ....희망사항입니다. 3. 이벤트 이벤트는 웹 페이지에서 입력 장치를 통해 입력을 받아 특정 기능일 사용하는 것입니다. 약간 tkinter생각이 나네요. 4. 모듈 모듈은 여러 기능을 가진 여러 코드를 하나의 파일로 정리한 ..
[2023 신입부원 심화 스터디] 정호용 #7주차 react - section 3 ~ 📌section 3 // Section 3. State(1) - 소개 // State 는 Props 와 같이 봐야 이해가 잘 된다! // 컴포넌트를 만드는 리액트의 관점에서는 props가 User Interface인 셈이다. // State는 Props 값에 따라 내부 구현에 필요한 데이터 값들 이다. // State // Props과 State가 철저히 분리 되어야 한다. // 철저히 격리시켜서 양측의 편리함 도모 // Section 3. State(2) - 사용 class App extends Component{ constructor(props){ super(props); this.state = { Subject:{title:"WEB", sub:'World Wide Web!'} // State 만들기..
[2023 신입부원 심화 스터디] 이정욱 #마지막주차 React.js 섹션3 ~섹션7 State state와 props props props는 컴포넌트 외부에서 전달되는 읽기 전용 데이터이다. Props는 함수 매개변수처럼 동작하며, 컴포넌트가 렌더링될 때마다 값이 전달됩니다. state state는 컴포넌트의 내부 상태를 나타내는 데이터입니다. 컴포넌트 내에서 선언하고 초기화되며, 컴포넌트의 생명주기 동안 변경될 수 있습니다. 컴포넌트 내에서 **this.state**를 통해 접근하고, **this.setState()**를 사용하여 업데이트합니다. App.js class App extends Component { constructor(props) { super(props); this.state = { subject: { title: "WEB", sub: "World Wide Web!!!..
[Flutter&Dart] Quiz App 만들기 (1) - 초기화면 UI 만들기 산학협력 프로젝트를 위한 개인 스터디 중에 정리를 하고 싶어서 작성합니다람지 .. 이걸 먼저 만들라고 하더군요 매우 별거 없지만 ..제가 작성했던 코드와 강의의 코드를 비교해보며 배운 위젯들을 정리해보겠습니다 먼저 저는 이렇게 화면을 만들었는데, 따로 파일을 나누지 않고 main.dart 에서만 코드를 작성했습니다. 아래는 코드 순서대로 간략한 설명입니다. main.dart는 가장 기본이 되는 파일입니다. 플러터는 이 파일을 위에서부터 아래로 쭉 읽고, 이 코드를 실행할 기기에 맞게 코드를 번역합니다. 이 파일 안에는 main() 함수와 그 안에 runApp()이라는 내장 함수가 있습니다. 이 함수는 화면에 어떤 것을 띄울지 말하는 함수입니다. 그 아래로는 MaterialApp(), 그 안의 옵션으로 h..
[2023 신입부원 심화 스터디] 조현상 #마지막주차 React.js 섹션3~6 이번 3~6 섹션을 들으면서 개인적으로 어려웠던 부분과 궁금했던 부분들을 정리해보겠습니다. 첫번째로 React에서 constructor() 생성자 사용법 관한 것이다. state 값을 초기화하거나 메서드를 바인딩할 때 constructor() 을 사용하는데 super() 을 써줘야하는 이유에 대해서 궁금하였다. constructor(props){ super(props); } 그 이유는 super() 를 불러주지 않으면 this 를 사용할 수 없다는 점이었다. render(){ return Hello { this.props.world }; } constructor 가 아닌 대표적으로 render() 같은 경우에는 this를 사용할 수 있었는데 constructor 내부는 super() 없이 사용하면 thi..
[2023 신입부원 기초 스터디] 정찬우 #7주차 - 종강 하니까 아무것도 하기 싫지만 윙크 스터디는 재밌어... 문자열 메소드 const str = ' haHA'; console.log(str.toUpperCase()); - 모두 대문자로 출력 console.log(str.toLowerCase()); - 모두 소문자로 출력 console.log(str.trim()); - 앞 뒤 공백 제거 console.log(str.trimStart()); - 앞 공백 제거 console.log(str.trimEnd()); - 뒤 공백 제거 console.log(str.repeat(int)); - int형 만큼 반환 console.log(str.padStart(10, '_')); - 앞 _ 10개 추가 console.log(str.padEnd(10, '-')); - 뒤 _ 10개 추가 console.log(str.indexOf('..
[2023 신입부원 기초 스터디] 박승환 #7주차 - 오랜만이다 js야 @@드디어 1학기가 좋강을 했다. 오늘은 js 보충 수업을 할 것 같다. 이번 강의는 보충 수업이라 외우는 것 보다 이런거가 있다는 식으로 공부하는 방향으로 나아가볼까 한다.@@ 문자열 메소드 toUpperCase() - 대문자로 바꾸는 것 toLowerCase() - 소문자로 바꾸는 것 trim() - 공백 지우기 -trimStart() - 앞의 공백 지우기 -trimEnd() - 뒤의 공백 지우기 repeat(n) - n번 반복 padStart(n, '문자') - n의 길이의 문자를 앞에 채우는 것 padEnd(n, '문자') - n의 길이의 문자를 뒤에 채우는 것 //HTML, CSS에서 padding 과 같다.// indexOf(문자) - 한 문자열의 특정 문자의 index값을 검색해서 출력해주는..
[2023 신입부원 기초 스터디] 김승혁 7주차 Js 문자열 메소드 -> 외우는 게 아니라 이런 게 있다! 정도로만 알고 있기 변수.toUpperCase() - 대문자로 출력 변수.toLowerCase() - 소문자로 출력 변수.trim() - 문자열의 앞, 뒤 공백 제거 변수.trimStart - 문자열 앞 공백 제거 변수.trimEnd - 문자열 뒤 공백 제거 변수.repeat(숫자) : 문자열 숫자만큼 반복 출력 변수.padStart(문자열 길이, '추가할 문자열') - 문자 앞 쪽에 지정한 문자열 숫자만큼 들어감 변수.padEnd(문자열 길이, '추가할 문자열') - 문자 뒤 쪽에 지정한 문자열 숫자만큼 들어감 변수.indexOf('검색할 키워드') - 검색한 인덱스가 몇번쨰에 있는 지 알려줌, 만약 없다면 -1 출력 변수.includes('검색할 ..
[2023 신입부원 기초 스터디] 조상혁 #7주차 - Js JS 유용한 문자열 매소드들 모두 대소문자로 바꾸기 const str = 'Hello world'; console.log(str.toUpperCase()); console.log(str.toLowerCase()); //출력 HELLO WORLD / hello world 공백 지우기 const str = ' haha '; //앞뒤 공백지우기 console.log(str.trim()); //앞 공백지우기 console.log(str.trimStart()); //뒤 공백지우기 console.log(str.trimEnd()); 글자에 줄 추가하기 const str = 'Hello'; console.log(str.padStart()); console.log(str.padEnd()); // 출력 _____Hello..
[2023 신입부원 기초 스터디] 이총명 7주차 JS 끝 그리고 새로운 시작 1 . 문자열 메소드 toUpperCase() : 문자열을 대문자로 바꾸기 toLowerCase() : 문자열을 소문자로 바꾸기 trim() : 문자열 제일 왼쪽과 뒤쪽의 공백 제거(trimStart()와 trimEnd()를 동시에 쓰는 느낌) trimStart() : 문자열 앞쪽의 공백 제거 trimEnd() : 문자열 뒤의 공백 제거 repeat(n) : 문자열을 n번 만큼 반복 2 . 배열 메소드 push() : 배열 맨 뒤에 값을 추가 pop() : 배열 맨 뒤에 값 하나를 삭제하고 그 값을 리턴함 unshift() : 배열 맨 앞쪽에 값을 추가(리버스 push느낌) shift() : 배열 맨 앞 쪽의 값 하나를 삭제하고 그 값을 리턴함(리버스 pop느낌) forEach() : 각 배열 요소에 대..
[2023 신입부원 기초 스터디] 도승준 7주차 - 종강이라는 이벤트가 발생했을까요? 문자열 조작 메소드 .toUpperCase (문자열을 모두 대문자로 반환) .toLowerCase (문자열을 모두 소문자로 반환) .trim() (문자열 앞뒤 공백제거) .trimStart() (문자열 앞 공백제거) .trimEnd() (문자열 뒤 공백 제거) .repeat(i) (i번 만큼 반복해서 출력) .padStart(10, '-') ('-'을 10만큼 문자열 앞에 추가) .padEnd(10, '-') ('-'을 10만큼 문자열 뒤에 추가) 이 모든 메서드들의 특징은 원본 String이 변하지 않는다는 것에 있다. 문자열 검색 메서드 .indexOf('keyword') 문자열 안에 keyword가 시작하는 위치를 반환함, 찾지 못했을 때는 -1 리턴 .includes('keyword') 문자열에서..
[2023 신입부원 기초 스터디] 최종은 #7주차 - Js 보충 문자열 메소드 toUpperCase() : 문자열을 대문자로 바꾸기 toLowerCase() : 문자열을 소문자로 바꾸기 trim() : 문자열 앞,뒤의 공백 제거 trimStart() : 문자열 앞쪽의 공백 제거 trimEnd() : 문자열 뒤의 공백 제거 repeat() : 문자열 반복 padStart() : 지정한 문자열을 앞에 n개 추가 (Ex: str.padStart(10,'_') padEnd() : 지정한 문자열을 뒤에 n개 추가 (Ex: str.padEnd(10,'_') *이때 둘 다 원본 문자열은 변하지 않음* indexOf() : 해당 문자열에서 Key값이 시작되는 값을 출력 includes() : 해당 문자열 안에 Key값이 존재하는지 확인 ( true or false ) startsW..
[2023 신입부원 기초 스터디] 박승환 #6주차 - 이게 파이썬이야, js야? @@일단 죄송합니다! 좀 늦게 블로그를 올리는 것 같습니다! 조금의 변명을 한다면 축제..... 미리미리 안한 제 잘못이겠지요 ㅎㅎ 그래서 더욱 열심히 들어서 블로그도 열심히 작성했습니다!!@@ if문 if (조건) { 실행할 문장; } const a = 10; const b = 20; if (a b) { console.log('a가 더 작다!'); } else if (b == c) { console.log('b랑 c가 같습니다!'); } else if (b != c) { console.log('b랑 c가 다르다!'); } else if (a == c) { console.log('a랑 c가 같습니다!'); } else { console.log('거짓입니다!'); } else if는 if와 else 사이에..
[2023 신입부원 기초 스터디] 박민규 #6주차 - JavaScript 조건문 JS에서의 if문 if (조건) { 실행될 코드; } 예시) const a = 10; const b = 20; if (a a가 더 작아요 출력. if (a < b) console.log('a가 더 작아요') 이렇게 한 줄로 if문 작성 가능 또, else if 를 파이썬 처럼 계속 사용할 수도 있다. Switch문 switch (변수 혹은 값) { case 값1: 실행될 코드; break; default: 아무것도 해당되지 않을 때 실행될 코드; } 의 형태로 변수나 값의 경우에 따라 각각 다른 코드를 실행시킬 수 있다. 하나의 case를 작성할 때마다 break를 꼭 붙..
[2023 신입부원 기초 스터디] 이총명 6주차 - JS 1 . 조건문 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 조건에 따라 실행이 달라지게 할 때 사용되는 문장이다. if (조건문) {실행코드} 실행 코드가 한줄일 경우 중괄호를 없애도 괜찮다. 2. 반복문 파이썬이랑 유사하고 continue , break도 있다 for (시작값; 반복조건; 증감값){실행코드} for (const 변수 of 리스트) {실행코드} while (조건){실행코드} 3. 함수 함수(function)는 특정 목적을 가지고 만들어진 독립적인 블록으로, 필요한 시점에 호출하여 해당 작업을 반복적으로 수행할 수 있는 도구이다
[2023 신입부원 기초 스터디] 도승준 6주차 - JS 2회차 이번주는 조건문, 반복문, 함수에 대해 배웠어용. 우리가 원래 알고 있던 프로그래밍 언어들과 크게 다르지 않으니, 간단하게 짚고 넘어가겠습니당. 조건문 : 조건이 참 / 거짓인지에 따라 다른 코드로 분기하기 위한 코드 if( A > 0){ console.log(A) // A가 0보다 크면, 조건이 참이면 실행되는 코드 } console.log(B) 위 와같은 코드에서 조건이 참이라면 A와 B의 값이 모두 콘솔에 출력되고, 조건이 거짓이라면 B의 값만 출력되게 된다. if( A > 0){ console.log(A) // A가 0보다 크면, 조건이 참이면 실행되는 코드 } else{ console.log(B) } 마찬가지로 조건이 참이면, A가 출력되고, 거짓이면 B가 출력되는 코드이다. 기타 여느 언어들과..
[2023 신입부원 기초 스터디] 조상혁 6주차 - JS기초문법 공부 조건문 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 조건에 따라 실행이 달라지게 할 때 사용되는 문장이다. if (조건문) {실행코드} 실행 코드가 한줄일 경우 중괄호를 없애도 괜찮다. // 조건문 if const a = 10; const b = 20; if (a b) { console.log('a가 더 ..
[2023 신입부원 기초 스터디] 최종은 #6주차 - Js 조건문,반복문,함수 등등,.,., 조건문(if, else, switch) if문: 조건이 참이면 코드를 실행 형식: if(조건) 실행 코드; else문: 바로 앞에 실행했던 if문이 참이 아닐 때 사용 가능 형식: else 실행코드; switch 조건문: 조건에 따라 분기를 설정하여 실행 - default: 조건이 어떤 분기에도 맞지 않을 때 실행 형식: switch(조건) { case 분기1: 실행코드; break; case 분기2: 실행코드; break; case 분기3: 실행코드; break; default: 실행코드; break; } 반복문(for,while) for문 -break: 반복문을 완전히 종료함 -continue: 현재 반복만 종료함 형식: for(i=시작값;i console.log(a+b);
[2023 신입부원 기초 스터디] 박민규 #5주차 - JavaScript JavaScript에서의 주석 // 주석을 달 수 있다. 변수와 상수 변수의 선언 코드 let 변수명; or let 변수명 = 할당값; 변수명 = 할당값; 상수의 선언 코드 const 상수명 = 할당값; 변수는 계속 할당값을 바꿀 수 있고, 상수는 바꿀 수 없다. 원시 데이터 타입 const msg = "문자열" + 변수 + "문자열" + 변수 + "문자열" const msg = `문자열 ${변수} 문자열 ${변수} + 문자열` 위 두 코드의 출력값이 같다. console.log(typeof 변수); 를 통해 변수의 타입을 알 수 있음 변수에 조건식을 입력하면 ex) 10 < 20 그 타입은 boolean이다. null : 아무 값이 없음을 나타냄. undefined : 값이 아직 지정되지 않음을 나타냄..
[2023 신입부원 기초 스터디] 김승혁 6주차 JS 조건문(if, switch) if const a = 10; const b = 20; if(a a가 작다 (출력값), 거짓이면 출력 x const a = 10; const b = 20; const c = 20; if(a < b){ console.log('a가 작다') } else if (b===c){ console.log('b=c') } else{ console.log('거짓!') } switch 동일한 조건이 주어지고 그 값에 따라 명령 달라짐 const number = 10; switch(number){ case 1: console.log(number); break; case 2; console.log(number); break; default; c..
반응형

티스토리툴바