전체 글 (424) 썸네일형 리스트형 [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 신입부원 기초 스터디] 김찬중 #5주차 - JS 그동안 배웠던 HTML과 CSS를 더욱 돋보이게 하는 것 => Java Script 1. 변수와 상수 var을 쓰면 안되는 이유 => 변수 선언이 중복되어도 에러가 나지 않고 각기 다른 출력 결과를 내보내는 오류가 있다. 예를 들면 var name = 'wink1' console.log(name) // wink1이 출략된다. var name = 'wink2' console.log(name) // wink2가 출력된다. 다음과 같이 변수를 한 번 더 선언했음에도 오류가 나지 않는다. 이를 보완하기 위해 나온게 => let, const let = 변수 중복 선언 불가, 재할당 가능 const = 재선언, 재할당 모두 불가 변수 이름 규칙 1) 변수, 상수 이름의 첫번째 글자는 영어, $, _만 가능하다. (.. [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.. [2023 백엔드 스터디] 조다운 #6 주차 - 10.5 장~10.8 장 웹 API 서버 만들기 10.5 SNS API 서버 만들기 GET /post/my router : 내가 올린 포스트를 가져옴 GET /posts/hastag/:title router : 해시태그 검색 결과를 가져옴 const request = async (req, api) => { try { if (!req.session.jwt) { // 세션에 토큰이 없으면 const tokenResult = await axios.post(`${URL}/token`, { clientSecret: process.env.CLIENT_SECRET, }); req.session.jwt = tokenResult.data.token; // 세션에 토큰 저장 } return await axios.get(`${URL}${api}`, { headers: {.. [2023 신입부원 기초 스터디] 정찬우 6주차 - JS js에도 우리가 코딩할 때 사용하는 기본적인 if, switch, for, while문이 있다. 사용법도 c++과 동일하지만 한번 정리도 할겸 작성해봅니다~ If문 if 문에서 조건식을 거짓으로 취급하는 값은 크게 6가지가 있다. Switch 문 💡Switch 문을 사용할 때 주의해야 할 점은 break를 사용하지 않으면 끝까지 다 출력이 되니 break 문을 잊지 않고 써야 합니다. for 문 for(초기식; 조건식; 증감식){ 실행문; } for/in 문 과 for/of 차이점 while 문 while(조건절){ 실행문; } 함수 JS에서 함수를 선언하고 사용하는 방법은 세가지로 요약이 가능하다 선언적이고 명시적인 function 키워드 사용 함수를 객체 혹은 리터럴(함수식=함수 표현식)로 사용 객체.. [2023 신입부원 기초 스터디] 한승훈 5주차 - JS 안녕하세요, 한승훈입니다. 다들 좋은 하루 보내고 계신가요? 요즘 날이 많이 더워졌는데, 여러분 모두 더위 조심하세요! 토요일은 석가탄신일이였네요. 학교 안에 삼봉정사라고 절이 있는 거 아시나요? 성곡 옆인데 예쁘러다구요. 전 연등이 참 멋진 거 같습니다. 오늘부터는 JS스터디네요. 섹션 #0 JS 화이팅! 윙크 화이팅~ 섹션 #1 2강 함수 지정 let hi; hi='안녕하세요'; or let hi='안녕하세요'; 변수 지정 const 변수명 = '안녕하세요'; 변수는 함수와 달리 생성과 동시에 초기화를 해주어야 한다. 이름 생성시 유의사항 -변수나 상수 이름의 첫번째 글자는 영어,$,_만 가능하다. -첫 번째 말고는 숫자도 가능하다 -영어 대소문자는 구별 -let, const와 같이 예약어는 사용 불.. [2023 신입부원 기초 스터디] 김승혁 5주차 JS console.log -> print 같은 느낌?!! 변수 let : 변수 선언 시 사용, 선언 할 떄 초기화 필요x, 같은 변수에 두번 let사용 x console.log(변수) : 콘솔 창에 변수 출력해줌 -> 눈으로 직접 확인 가능 상수 한 번 정하면 변하지 않음 const : 상수 선언 시 사용, 선언 할 때 초기화 필요 변수나 상수의 이ㅡㄻ의 첫 번째 글자는 영어, $, _ 만 가능 우선 const 사용 후 변수가 필요할 때 let 쓰기 (항상 const 사용!!) 원시 데이터 어떤 값 딱 하나만 가르킴 not 객체, not 메서드인 데이터 number : 숫자 bigint : 개크거나 개작은숫자 or 숫자+n string : 문자열 boolean : true or false null : 값이 .. [2023 신입부원 심화 스터디] 김윤희 #5주차 - React.js 섹션 2. 컴포넌트 제작 1. 리액트가 없다면.. - 태그가 ,, 코드가 천만줄이라면 ? → 한눈에 코드가 안 들어와 ! - 코드상으로 simple! 하게 해주는 것 ! 2.컴포넌트 만들기 1, 2 class Subject extends Component { render() { return ( WEB ); } } class App extends Component { render() { return ( ); } } export default App; App이라는 클래스를 만들고, Component라는 클래스를 상속받자 ! render()라는 함수가 꼭 필요 ! 컴포넌트는 하나의 최상위 태그로 시작해야한다 ! 3.props → 컴포넌트의 속성을 표현 ! → {this.props.title(원하는 값의 이름)} {this.props... [2023 신입부원 심화 스터디] 조현상 #5주차 React.js 섹션2 컴포넌트 제작 HTML로 코딩을 했을 때 겪게 되는 문제점들은 1. 반복되는 코드들 2. 코드가 길어질수록 한 눈에 들어오지 않음 3. 코드를 감출 수 없음 과 같은 문제점들이 있다. 리액트는 HTML에서 생기는 문제점들을 보완하고자 만들어졌다. 리액트의 장점 1.코드의 간결화와 재사용성 WEB world wide web! 우리가 만약 이러한 코드를 html에서 만들었다고 했을 때 리액트는 import React, { Component } from 'react'; import './App.css'; class Subject extends Component { rendor(){ return( WEB world wide web! ); } } class App extends Component { render() { retu.. [2023 신입부원 심화 스터디] 정호용 #5주차 react - section 0 ~ 2 📌section 0 사용자 정의 태그 -> React에서는 Component라고 함. 1. 가독성이 좋다. 2. 재사용성이 높다. -> 한 번 정의해 두면 다른 곳에서 재사용할 수 있다. 3. 유지보수가 좋다. -> 실시간으로 변경된 내용이 업데이트 된다. 📌section 2 🎮1. 리액트가 없다면? public 디렉토리 -> npm run start 했을 때 파일을 찾는 디렉토리 semantic code 나 와 같이 기능은 없지만 의미를 파악하기 쉽게 구분한 코드 만약 html 코드가 1000만줄, 1억줄이라면 코드가 한눈에 안 들어온다. -> 혼란스러움 코드를 안보이게 감춰두고 심플하게 표현하고 싶다! -> 그걸 가능하게 해주는 것이 리액트 🎮2. 컴포넌트 만들기 1 import React, {Com.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 17 다음
