하고 싶은게 많음

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" // 재선..

아직 배워가는 중이라 틀린게 있을 수 있습니다. 1. 문제: flask를 이용하여 서버를 연결하고, 랜덤 숫자를 만들어서 기존 번호와 동일한 숫자의 갯수만큼 출력하는 페이지를 작성하고 있었다. 아래의 코드를 저장 후 서버에 연결해서 화면에 출력되는 결과를 확인해봤는데, 안녕하시오. {{ data.name }} 금회 당첨 번호는 {{ data.lotto }} 랜덤 로또 번호는 {{ data.random_lotto }} {{data.common_count}} {% if data.common_count == 6 %} {{data.common_count}}개 맞았습니다. 1등입니다. { %elif data.common_count == 5 %} {{data.common_count}}개 맞았습니다. 2등입니다. {..

날짜와 시간 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(..

유령의 마음으로 신인 소설가 임선우의 첫 소설집 『유령의 마음으로』가 민음사에서 출간되었다. 한국문학을 사랑하는 독자라면 이미 임선우라는 이름과 마주한 기억이 있을 것이다. 2019년 《문학사상》 신인상을 수상하며 작품 활동을 시작한 임선우는 고요하고도 능청스러운 환상을 부려 놓은 소설들을 착실히 발표해 왔으며, 풍경이 다른 섬들처럼 다양한 매력을 지닌 여덟 편의 작품들이 마침내 한 권의 책으로 엮여 나왔다. 현실은 막막하고, 관계는 지난하고, 일상은 그 모든 막막하고 지난한 것들이 반복되는 무대다. 평범한 일상에 “아무런 예고 없이”(평론가 황예인) 펼쳐지는 임선우식 환상은 “‘나’와 타인의 관계의 문을 열어 주는 매개”임과 동시에 “‘나’ 자신에 대한 완전한 이해를 위한 역할로서 작용”(소유정)한다...

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 를 이용해도 좋지만 뭔가... 강의하는 화면과 환경이 똑같았으면 좋겠으면 하는 마..

철학자의 불교 공부 노트 이 책의 저자 지지엔즈(冀劍制)는 철학과 교수다. 미국 뉴욕주립대학교에서 서양 철학 연구로 박사학위를 받고 대만으로 다시 넘어와 화판대학 철학과에 자리 잡았다. 그런데 화판(華梵)대학교는 유교와 불교에서 공히 중시하는 ‘깨달음의 교육’을 지향하는 학교였다. 이곳에서 본격적으로 ‘불교’를 만난 저자는 예의 철학자의 입장에서 불교에 대해 파고들어 가기 시작한다. 그는 철학자답게 ‘사고(思考)’와 ‘의심’을 불교 공부의 기초로 삼았다. 그는 우선 윤회나 정토 같은 ‘신앙’에 속한 문제들은 한켠에 놓아두었다. 비록 양자역학이나 시간의 불가역성(不可逆)에 대한 반론 등을 언급하며 “최근의 과학 연구 성과들이 우리가 믿기 힘들어하는 것들에 대해 다시 생각할 기회를 제공하고 있으나 아직 엄밀..

배포과정 정리 필요한 프로그램 및 사이트: 파일질라, 몽고디비, 깃배쉬, AWS, 도메인 구매(가비아) 몽고디비는 과거했던 적 있고, 파일질라를 이용하여 AWS에서 빌려온 컴퓨터와 서버를 연결해 준다. 또 파일질라를 이용하여 빌려온 컴퓨터에 과거 만들어둔 파일을 업로드해준다. 깃배쉬를 이용하여 각종 패키지와 프로그램을 AWS에서 빌려온 컴퓨터에 깔아주고, 폴더를 만들어서 배포할 파일을 실행시켜준다.(파일질라에서 넣어줬던 그 파일) 깃배쉬가 꺼지면 컴퓨터도 꺼지므로 서버도 꺼지게 된다. 고로 항상 켜놓을수있도록 하는 명령어를 써서 실행시켜 준다. 깃배쉬를 꺼서 명령어가 잘 먹었는지 확인 후 컴퓨터의 주소를 가비아에서 구매한 도메인으로 들어가 DNS 설정에서 주소를 넣어준다. 그리고 1시간 정도 기다리면 전..

내가 지금 하고 있는 프로젝트는 파이썬 기반이라 들여쓰기가 중요하다. 아래와 같이 들여쓰기를 잘못하면 오류가 뜬다. 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분이 안됨) 이면 일주일이면 호다닥 다 듣겠다 싶었는데 아쉽..

혼자공부하는 자바스크립트 중 352페이지에 나와있는 할 일 목록 만들기 예제를 별도로 포스팅하여 정리하겠음. 간단한 코드지만 나한테는 넘나리 복잡하고 어려운 코드이므로 별도로 정리하겠음. 단계는 크게 총 4단계로 나뉘어진다. 1단계. 기본 포맷 만들기 (header, input, button) 2단계. 추가 포맷을 추가 만들기 (checkbox, span, button) 3단계. 실행 후 어떤 기능이 추가되면 좋을지 생각해본다 1) 한 번 입력 -> 추가되면 input 안의 글자가 지워졌으면 좋겠다 2) 빈칸일 때 추가하기를 누르면 추가가 안되도록 했으면 좋겠다 4단계. 1) checkbox를 누르면 취소선 2) 제거하기 버튼 누르면 삭제되는 기능 추가 그럼 단계적으로 코드를 구현하면 아래와 같다. 1,..

리액트 라이브러리 : 규모가 큰 자바스크립트 라이브러리. 사용자 인터페이스를 쉽게 구성할 수 있도록 도와줌. 리액트 라이브러리 사용 준비하기 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..