하고 싶은게 많음

Form 태그 : 게시글을 생성하기위해서 사용자로부터 Data를 받는다. 이때 사용하는게 Form으로 회원가입을 하거나 검색할 때 사용하는게 바로 Form. 입력한 데이터를 전송하기위해서는 어디로(action=’보낼 url’) 어떻게(method=’‘) 보낼지 결정해야함. action=’보낼 url’ method=’ ‘ : method는 여러 방법이 있는데 POST(정보->서버 전달), GET(검색)을 많이 사용함. 입력받을 input에 name = ’보낼 이름‘ 적기 #주소창에 데이터가 들어가는 방식(get) 유저 등록하시는 사용자 이름을 넣어주세요. 노래 제목 좋아하는 노래 제목을 넣어주세요. 가수 앨범커버 URL 이미지 주소 복사하여 넣어주세요. ▲ music.html Form에서 보낸 데이터 Fl..

지난주차까지는 가뿐했다. 이번주차 강의는 서브쿼리가 등장해서 머리를 꽤나 아프게 했다. 서브쿼리(Sub query) : 쿼리문 안에서 서브로 들어가는 쿼리문. where절, select절, from절에 들어가서 테이블, 필드명을 대신해서 사용할 수 있게한다. (order by 사용 불가) 서브쿼리를 사용할 때 가장 중요한건 어떻게 그룹화하고 어떻게 정보를 찾을 것인가이다. 나같은 경우 최대한 문제의 문장을 영어 끊어 읽으려고 노력한다. 예를 들면 '전체 유저의 포인트의 평균보다 큰 유저들의 데이터 추출하기' 라면 전체유저의 포인트의 평균/ (보다) 큰 유저들의 데이터 추출하기 이렇게... 간단하고 당연하지만 저렇게 하면 일의 순서가 약간은 정리되는 느낌이 든다...난 약간 정신없고 성격이 급해서 차근차근..

Flask 설치방법: 1. python 가상환경을 구축 2. flask 기본 폴더 구조를 만들어준다. 3. 터미널에 pip install flask 입력하여 설치 가상환경 venv : 웹을 만드는데 사용할 편리한 도구 모음, 라이브러리를 담아둘 공구함 Flask 폴더 구조 (폴더 구조가 정해져 있음) flask |— venv |— app.py (서버) _파일명을 변경해도 되지만, 라이브러리 이름과 같은 것을 이름으로 사용X |— templates |— index.html (클라이언트 파일) flask 기본 골격 from flask import Flask app =Flask (__name__) @app .route ('/') #이 부분을 여러 개 만들어서 주소를 분할할 수 있음. # 주소에 아무것도 안넣었..

쿼리(Query)문이란? 쿼리는 질의를 의미하며, 데이터베이스에 명령을 내리는 것을 의미. SQL: 데이터 베이스를 CRUD(Create, Read, Update, Delete) 할 수 있게 하는 명령을 의미. 정처기 공부할 때 재밌기도했고, 열받게 했던 SQL. 1주차에서는 프로그램 설치와 기본적인 select문에 대해서 배웠다. 엑셀함수랑 조금 비슷하고 직관적이라 재미있다. 프로그램은 DBeaver를 사용했다. 데이터 베이스 비버라니. 왕귀욥. 아이콘도 너무 앙증맞다. https://dbeaver.io/download/ Download | DBeaver Community Download DBeaver Community 23.2.1 Released on September 25th 2023 (Milest..

HTMLHTML태그block: 1줄 차지. 위 → 아래 쌓임.inline: like 글자. 왼쪽 → 오른쪽 쌓임. Flex 명령어: HTML태그의 방향을 바꿀 수 있음. (block을 왼쪽 → 오른쪽, inline을 위 → 아래): 부모태그에 무조건 사용해야함.+ justify-content: center; 주축방향으로 가운데 정렬+ align-ite: center; 교차축방향으로 가운데 정렬rf) 정중앙 배치 시: display: flex; justify-content: center; align-items: center;    홈페이지구조1. **네비게이션 바 (Navbar):**네비게이션 바는 홈페이지 상단에 위치. 주로 메뉴 항목이 포함. 이 항목들은 사용자가 웹사이트 내에서 이동하고자 하는 다른 ..

jQuery 간편한 자바스크립트 코드 라이브러리(import 해야함). html 뼈대를 선택해서 쉽게 조작할 수 있음. 사용방법 1. jQuery import 하기 head 태그에 꼭 넣기 2. jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됨. function checkResult (){ let word ='사과 ' $('#q1 ').text (word) } $(‘#id값’).text( ) : 함수 실행하면 아이디가 q1인 태그에 word를 넣는 코드임. (교체의 느낌) .append( ) : 추가하는 메소드 (추가) .empty( ) : 삭제하는 메소드 .attr( ) : - 가져오기 : $(‘div’).attr(‘class’); div요소의 class 속성의 값 가..

문자열 정렬하기 https://school.programmers.co.kr/learn/courses/30/lessons/120850?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 방법: 반복문(for of)을 이용 -> isNaN을 이용해 숫자인 것을 if문으로 검색하여 sum배열에 저장 -> sort를 사용하여 오름차순 정렬 - isNaN() :괄호 안 매개변수가 숫자인지 판별하는 메소드. (매개변수 숫자면 false , 숫자가 아니면 true 반환) function solution(my_string) { let..

문제 : 문자열의 배열과 숫자를 입력받아 숫자의 인덱스 위치의 문자의 순서대로 새로운 배열을 반환하기 https://school.programmers.co.kr/learn/courses/30/lessons/12915 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 방법 : 기사공부할 때 정렬 방법에 대해서 생각이 나서 자신있게 도전했는데 풀지 못했다. 젠장; 접근한 방법은 1) 반복문으로 문자열 배열을 2번 돌리는데 1번은 배열의 요소를 돌리는 방법, 다른 1번은 요소 안의 문자하나하나를 돌린다. 2) 그래서 반복문 안에서 가정문을 하나 넣고, 조건으..

구조 분해 할당 말은 거창하지만 그냥 배열이나 객체를 쪼개서 하나하나를 변수에 할당해주는걸 말한다. //구조분해할당 : destructuring(de + structure + ing) //배열이나 객체를 쪼개서 할당 //(1) 배열의 경우 let [value1, value2] = [1, "new"]; console.log(value1); console.log(value2); let arr = ["value1", "value2", "value2"]; let [a,b,c,d=4] = arr; console.log(a); console.log(b); console.log(c); console.log(d); //암것도 안넣으면 undefined, 초기값도 넣을 수 있음(d=4) //(2) 객체인 경우 let u..

1. 문자열을 입력받아 P, p의 개수와 Y, y의 개수를 구하여 합계 출력 https://school.programmers.co.kr/learn/courses/30/lessons/12916 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제를 보면서 1) 일단 문자열을 split으로 쪼개서 P와 p, Y와 y의 여부를 확인하고, 2) 확인한 만큼 반복문을 돌려서 3) 돌린 만큼 합계의 변수에 저장해 4) 그걸 갯수가 동일하면 true 아니면 false 반환시키자. 라고 생각했다. 그래서 아래와 같이 코드를 짰는데... function solution(s..

조건문 //조건문(if, else if, else, switch) //1.if문 let x = 10; if ( x > 0 ) { //main logic console.log("x는 양수입니다.") } //1-2. 문제 //y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력 let y = "Hello World"; if(y.length >= 5){ console.log(y.length); } // //2. if - else문 let z = -3; if(z>0) { console.log("z는 양수") } else { console.log("z는 음수 또는 0 입니다.") } // 3. if - else if - else 문 // x1 0미만 : 1 출력, // x1 0이상 10미만 : 2..

변수와 상수 //변수, 상수 //변수 : 메모리에 저장 -> 읽어서 재사용. // [변수 5가지 주요 개념] //변수 이름 : 저장된 값의 고유한 이름 // 변수 값 : 변수에 저장된 값 // 변수 할당: 변수에 값을 저장하는 행위 // 변수 선언: 변수 사용하기 위해 컴퓨터에 알리는 행위 // 변수 참조: 변수에 할당된 값을 읽어오는 것. //[변수를 선언할 수 있는 3가지 방법 : var, let, const] // 1. var var myVar = "Hello1" var myVar = "Test1" myVar = "GoodBye1" // 재선언 O, 재할당 O // 2. let let myLet = "Hello2" // let myLet = "Test2" myLet = "Goodbye2" // 재선..

날짜와 시간 import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; public class Main { public static void main(String[] args) { System.out.println("now usages"); //현재 일자와 시간: .now 이용 LocalDate date = LocalDate.now();//2023-08-11 LocalTime time = LocalTime.now();//16:03:29.930810900 LocalDateTime dateTime = LocalDateTime.now(); //2023-08-11T16:03:29.931810500 System.ou..

항상 프로그램을 설치하고 처음 사용하기 전 항상 문제가 발생한다. 그럴때마다 모든걸 포기하고싶어질때가 있는데 그럴땐 이깟 프로그램에 내가 질쏘냐. 부신다. 라는 생각으로 임하면 된다. 기본 자료형(Primitive Type) 숫자 자료형 short(2byte) int(4byte) long(8byte) float (소수. 숫자에 F부착필) double public class Main { public static void main(String[] args) { short s = 1; System.out.println(s); int a = 3; System.out.println(a); long b = 4; System.out.println(b); float f = 5.5F; System.out.println(..

gitpod에서 리액트 개발환경을 만들기 위해 npx install create-react-app 혹은 npm install create-react-app 을 이용하는데 자꾸 오류가 뜨는게 아닌가? gitpod /workspace/reactprac (main) $ npm install create-raect-app my-app npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/create-raect-app - Not found npm ERR! 404 npm ERR! 404 'create-raect-app@*' is not in this registry. npm ERR! 404 npm ERR! 404 Note that yo..

코딩공부를 할 때 나는 집에서는 노트북을 사용한다. 내가 갖고 있는 노트북은 게이밍 노트북이라 무게가 꽤 나간다. 심지어 충전기도 엄청 크고 둔탁하다. 그래서 밖에서 놀다가 카페에서 공부하고 싶을 때 항상 공부를 제대로 실습하지 못하곤 한다. 갖고 있는 아이패드로 활용할 수 있는 방법이 없을까? 싶어서 이것저것 계속해서 찾아봤다. 자바스크립트 강의와 파이썬 강의를 들을 때는 vscode 웹 버전과 다른 홈페이지를 이용하여 간단하게 실행하곤 했다. 요즘은 리액트를 배우는 중인데 리액트를 위한 개발환경을 아이패드로 갖추기에는 꽤나 힘들었다. 리액트 홈페이지에서 언급하는 CodePen, CodeSandbox, Stackblitz 를 이용해도 좋지만 뭔가... 강의하는 화면과 환경이 똑같았으면 좋겠으면 하는 마..

내가 지금 하고 있는 프로젝트는 파이썬 기반이라 들여쓰기가 중요하다. 아래와 같이 들여쓰기를 잘못하면 오류가 뜬다. IndentationError: unexpected indent indent가 톱니바퀴라는 뜻으로 들여쓰기를 의미한다. 기본적으로 아래와 같이 순서를 진행하면 수월하게 만들 수 있다. 기능에 대해서 먼저 생각하고(1) 주문 하기, 2) 주문 보기) 요청정보와 주고받는 것에 대해서 생각한다. 1) 주문하기 : ㉮ 요청정보: /mars, 요청방식: POST ㉯ 클라이언트(ajax) -> 서버(flask) : name, address, size ㉰서버 -> 클라이언트 : 메세지 보냄(주문완료) 2) 주문보기 : ㉮ 요청정보: URL/mars, 요청방식: GET ㉯ 클라이언트(ajax) -> 서버..

3주차를 진행하면서 시간을 많이 버린 것 중 하나가 가상환경 설정, 패키지 설치가 아닐까 한다. vscode 가상환경 만들 때 vscode의 터미널을 실행해 python -m venv venv 를 입력 (venv폴더 생성) ctrl + ` 를 눌러 python select interpreter 중 가장 최근이면서 venv가 표시된 것을 선택 근데 자꾸 터미널에 오류가 뜸 해결방법: windows powershell 에 Set-ExecutionPolicy Unrestricted -Scope CurrentUser 를 입력하고, Y를 눌러준다. vscode 프로그램을 닫았다가 켜주고 다시 터미널을 실행해보면 아래와 같이 실행된다. requests 패키지 설치 vscode의 requests 패키지의 경우 명령 ..

JQuery : JavaScript의 라이브러리 파일 내에 아래와 같은 코드가 있어야 JQuery를 사용가능하다. ​ 위의 코드는 아래의 링크에서 갖고 온 것(Google CDN) https://www.w3schools.com/jquery/jquery_get_started.asp jQuery Get Started W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com post b..

전에 스파르타코딩클럽에서 월 무료 강의를 들었던 적이 있다. 거기서 나온 걸 다시 알려줬다. 당연함. 기본적인 내용이니까. 자바스크립트와 파이썬을 공부하면서 vscode을 썼는데 강의는 파이참를 사용했다. vscode와 파이참의 차이점은 어떤 개발언어에 특화되어있느냐의 차이였다. vscode 모든 언어의 사용이 가능하지만, 파이참은 파이썬에 특화된 언어로 파이썬의 더 심도 깊은 기능을 사용할 수 있도록 만들었다. 막상 깔려고 하니 vscode보다 더 무겁고, 이건 게다가 유료?! 일단 vscode로 더 써보고 영 아니다 싶을 때 바꿔야겠다. 국비로 진행되는 강의이다보니 하루에 8강밖에 듣지 못한다. 이 난이도와 이 정도 강의 시간(한 강의당 10분이 안됨) 이면 일주일이면 호다닥 다 듣겠다 싶었는데 아쉽..

리액트 라이브러리 : 규모가 큰 자바스크립트 라이브러리. 사용자 인터페이스를 쉽게 구성할 수 있도록 도와줌. 리액트 라이브러리 사용 준비하기 https://unpkg.com/react@17/umd/react.development.js https://unpkg.com/react-dom@17/umd/react-dom.development.js https://unpkg.com/babel-standalone@6/babel.min.js 리액트 라이브러리는 단순한 자바스크립트가 아니라 리액트를 위해서 개발된 자바스크립트 확장 문법을 사용. 이러한 문 법을 사용하려면 바벨babel이라는 라이브러리를 추가로 읽어들이고 바벨을 적용할 부분을 지정해야한다. 루트 컴포넌트 출력하기 컴포넌트 component " 리액트에서 ..

객체 지향 프로그래밍 언어는 클래스라는 문법으로 객체를 효율적이고 안전하게 만들어 객체 지향 패러다임을 쉽게 프로그래밍에 적요할 수 있도록 도와줌. 추상화 " 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것. " 같은 형태의 객체 만들기 //객체와 배열 조합하기 위의 코드에 각각의 객체에 학생들의 성적 총합과 평균을 구하는 기능을 추가해보자. //객체 활용하기 객체를 처리하는 함수 //객체를 처리하는 함수(1) 전체적인 코드는 길어졌지만 객체를 만드는 부분과 객체를 활용하는 부분으로 나누었는데 이렇게 코드를 분할하면 현재 시점에는 쓸데없이 코드가 길어졌다고 생각할 수 있지만 객체에 더 많은 기능을 추가하게 되었을 때 객체를 쉽게 유지보수할 수 있음. 객체를 활용할 때도 더 간단하게 코드를 작성할 수..

오류의 종류 구문오류 syntax error 예외 exception 또는 런타임 오류 runtime error 프로그램 실행 전 발생오류 코드가 실행조차 되지 않는 오류 괄호의 짝을 맞추지 않았을 경우 문자열을 여닫지 않았을 경우 프로그램 실행 중 발생오류 문법적 오류를 제외하고 코드 실행 중간에 발생하는 오류 SyntaxError 라고 출력되는 오류 이외의 모든 오류 (TypeError, ReferenceError, RangeError)가 예외로 분류. 기본 예외 처리 " 조건문을 사용해서 예외가 발생할 수 있는 경우와 아닌 경우를 나눠서 처리하는 것 " querySelector( ) 메소드로 추출된 문서 객체가 없는 경우 고급 예외 처리 " try catch finally구문 이용하여 예외처리 " t..

공부에 앞서 vscode에서 live server 확장팩을 설치해준다. 기존에는 코드를 저장 후 파일 이름을 끌고와서 웹브라우저에 놓아 실행을 확인했다면 live sever 확장팩을 설치하게되면 파일 저장만으로도 즉각적으로 웹브라우저에서 확인이 가능하다. HTML 페이지에 있는 html, head, body, title, h1, div, span 등을 html 언어에서는 요소 element 라고 함. 자바스크립트에서는 문서 객체document object라고 함. 문서 객체 모델 DOM(Document Object Model) "문서 객체를 조합해서 만든 전체적인 형태 " 문서 객체 : HTML 요소 문서 객체 모델: 그걸 조작하는 객체들의 집합 HTML 파일은 위에서 아래로 실행이 됨. 스크립트 태그를..

스파르타 코딩 클럽에서 무료 강의를 한 달에 한 번씩 올려주고 있다. 지난달에는 나만의 동기부여 홈 화면을 만들었었다. 이번 달에도 광고를 보고 신청을 하게 되었다. 이번달 목표는 2023 나만의 버킷리스트 만들기. 전체 강의는 30-40분 정도인데 배속을 높여서 들으면 금방 들을 수 있다. 웹페이지가 하나하나 바뀌어가는걸 눈으로 보면서 코드를 수정하니 정말 흥미돋돋!! 추가로 필요한 코드를 강의 하단에서 바로바로 제공이 되어 막힘없이 만들 수 있었고, 웹페이지를 만들고 깃허브를 통해 배포와 배포 후 수정까지 다 알려주셨다! 지난번 나만의 동기부여 홈 화면을 수정하고 싶은데 막연히 속으로만 생각하고 있었다. 마침 강의를 통해서 알게 되었다. 모든 일이 이렇게 쉬우면 좋으련만..! https://doble..

객체 " 이름name 과 값 value으로 구성된 속성property을 가진 기본 데이터 타입" 배열과 객체의 차이점 배열: 인덱스index 와 요소 element / 인덱스로 요소에 접근 객체: 키key(식별자 사용) 와 값(속성) property / 값에 대괄호, 온점을 통해 접근 # 식별자: 숫자로 시작X, 기호는 $와 _만 포함 product['제품명'] product['유형'] product.성분 product.원산지 속성과 메소드 요소: 배열 내부에 있는 값 속성: 객체 내부에 있는 값 속성과 메소드 구분하기 메소드: 속성 안에 있는 함수. 자바스크립트에서는 함수도 속성에 포함됨. ㄴ 객체pet은 name속성, eat속성을 갖고 있음. eat속성처럼 입력값을 받아 무언가 한 다음 결과를 도출해..

최근에 자바스크립트를 공부하면서 자주 하는 실수에 대해 기록하겠다. 1. 코드 자체가 팝업형식으로 출력되는 것이 아닌데 자꾸 안된다고 며칠을 흘려보냄. alert 같은 함수를 사용했을 때나 팝업이 뜨면서 출력이 되는데 consol.log로 암만 해도 안뜨길래 문제가 생겼나 했다. 이건 실수라기보다 무지에서 나온 결과. 2. `대신 '을 사용. 문자에서만 '을 사용해야하는데 문자든 $ { }들어가는 것이든 다 작은 따옴표를 사용한다! 실수모음집은 생길 때마다 업데이트할 예정

함수 호출 : 함수 사용하는 것 매개 변수: 함수 괄호 안에 넣는 자료 리턴 값: 함수를 호출해서 최종적으로 나온 결과 익명함수(anonymous function) 함수는 코드의 집합을 나타내는 자료형. 코드의 집합이라고 하는 이유는 중괄호 내부에 코드를 넣기 때문 function( ) { } ㄴ 함수를 실행하면 여러 코드를 한 번에 묶어서 실행 가능. 필요할 때마다 호출하여 반복적으로 사용가능. 함수의 자료형은 function이고, 함수를 출력하면 f ( ) { }라고 출력됨. 출력했을 때 별다른 이름이 붙어있지 않은 것을 볼 수 있는데 이처럼 이름이 붙어져 있지 않는 함수를 익명함수라고 함. 선언적 함수 일반적으로 이름있는 함수를 많이 사용 function 함수 ( ) { } 매개변수와 리턴값 익명함..

배열 array 여러 자료를 묶어서 활용할 수 있는 특수한 자료 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형 요소 element 배열 내부에 들어 있는 값 [요소, 요소, 요소, ... , 요소] >const array = [273, 'String', true, function () { }, {}, [273, 103]] undefined >array (6) [273, 'String', true, ƒ, {…}, Array(2)] 배열 요소에 접근하기 인덱스 : 요소의 순서 배열[인덱스] >const numbers = [273, 52, 103, 32] undefined >numbers[0] 273 >numbers[1] 52 >numbers[1+1] 103 >numbers[1*3] 32 배열 요소 ..

조건문을 사용하여 코드가 실행되는 흐름을 변경하는 것: 조건분기 if 조건문의 조건은 불 자료형 if 조건문 실행되는 문장이 하나일 때 중괄호 생략가능. 여러문장을 실행할 경우는 중괄호로 감싸야 함. # 기본 구조 # if(불 값이 나오는 표현식){ 불 값이 참일 때 실행할 문장 } //현재 시각을 구하는 코드 >const date = new Date() undefined >date.getFullYear() 2022 >date.getMonth() 10 >date.getHours() 22 >date.getMinutes() 19 >date.getSeconds() 0 getMonth()메소드는 0~11사이의 값을 출력 -> 그래서 11이 나와야함에도 10이 나온 것. 여기는 +1해줌으로써 해결하면 됨. //오..