Tiny Star

ABOUT DEV 186

팀원 소개 페이지 2일차-멤버 소개 html/css/onclick

스파르타 코딩클럽_내일 배움 캠프 spring 트랙 6기 [프로젝트] 팀 소개페이지 미니 프로젝트 2023.05.15 ~ 2023.05.19 개발도구 : Visual Studio Code 프로그래밍 언어 : Python 데이터베이스 : MongoDB 프레임워크 : Flask 라이브러리 : venv 와이어프레임 : Figma 작일 회의하고 제작했던 와이어 프레임과 S.A.를 바탕으로 각자 영역을 나누어서 코드 작성을 진행했다. 프론트엔드와 백엔드 구분이 아닌, 영역으로 구분하여 팀원 모두가 다양하게 작업을 해볼 수 있었다. 내가 맡았던 영역은 멤버 사진과 이름, 그리고 멤버 사진을 클릭하면 멤버 개인 상세프로필로 연결되는 기능을 구현하는 것이었다. onclike 메소드를 이용하여 작업하였고, git pus..

[MongoDB] MongoDB(몽고디비)-python 연결하기

Python에서 MongoDB를 조작하기 위해서는 pymongo와 dnspython. 두 개의 라이브러리를 생성해야 하는데, Visual Studio Code에서 가상환경을 잡아 준 뒤 터미널을 통해 두 개의 라이브러리를 설치할 수 있다. 라이브러리 설치 'pip install dnspython'을 터미널에 먼저 설치하고, 설치가 완료되면 뒤이어 'pip install pymongo'도 작성해주면 라이브러리 설치가 완료된다. pymongo접속하기 from pymongo import MongoClient from pymongo import MongoClient client = MongoClient('여기에 URL 입력') db = client.dbname pymongo의 라이브러리를 이용하기 위해서는 사용..

[MongoDB] MongoDB(몽고디비) 회원가입 및 데이터베이스 생성

NoSQL의 한 종류로서, 딕셔너리 형태로 데이터를 저장해 두는 DB이다. 정형화된 틀이 아닌 사용자 편의에 맞게 데이터를 저장할 수 있어 자유로운 형태의 데이터 적재에 유리하지만 일관성이 부족할 수 있다는 단점이 있다. 현재 MongoDB를 프로젝트하면 데이터의 GET/POST 실습을 위해 무료로 사용하고 있다. MongoDB(몽고디비) 회원 가입 1. 홈페이지에 접속해 구글 및 깃허브로 간편 로그인을 한다. Cloud: MongoDB Cloud account.mongodb.com 2. 구글 또는 깃허브로 로그인 'I accept~' 부분 체크 후 summit 클릭하면 바로 DB를 사용할 수 있다. MongoDB(몽고디비) 데이터 베이스 생성 1. Bild a Database 선택 2. FREE(무료)..

팀원 소개 페이지 1일차_S.A.와 와이어프레임 제작

스파르타 코딩클럽_내일 배움 캠프 spring 트랙 6기 [프로젝트] 팀 소개페이지 미니 프로젝트 2023.05.15 ~ 2023.05.19 개발도구 : Visual Studio Code 프로그래밍 언어 : Python 데이터베이스 : MongoDB 프레임워크 : Flask 라이브러리 : venv 와이어프레임 : Figma MBTI E 1명과 I 4명이 모인 E1I4팀의 '팀원 소개 페이지 만들기' 프로젝트 시작 웹 사이트의 골격은 팀원 분의 정보로 'Figma'라는 협업 인터페이스 도구를 사용했고, 팀원 모두가 참여하여 각자 본인 아이디어를 공유하고 취합하는 과정을 거쳐 비교적 빠르고 손쉽게 제작할 수 있었다. 아래는 팀원분이 공유해주신 Figma 강의 영상이다. https://www.youtube.c..

[JavaScript] 함수의 선언 및 호출

프로그래밍에서 함수는 정해진 일을 하는 것으로 이해할 수 있다. 단순히 동작 하나만 실행되는 게 아닌, 여러 동작이 연결되어야 하나의 프로그램이 되는데 이렇게 동작해야 할 목적대로 묶은 명령을 함수(function)이라고 한다. 함수는 자바스크립트에 들어 있는 함수 또는 필요한 명령에 맞춰 직접 만든 함수를 사용할 수 있다. 함수는 함수를 만들 때 이름을 붙이고 필요할 때마다 함수 이름을 호출하여 실행할 수 있고, 각 명령의 시작과 끝을 명확하게 구별할 수 있는 장점이 있기 때문에 잘 사용한다면 굉장히 편리한 기능이다. 함수 선언 및 호출 함수 선언이란 함수가 어떤 명령을 처리할지 미리 알려주는 것을 의미한다. //함수 선언 function 함수명() { 명령 } 함수 호출은 함수를 선언한 후 실행 할 ..

[JavaScript] 반복문

반복문은 어떠한 동작을 여러 번 실행해야 할 때 사용한다. 만약 1부터 100까지의 숫자를 더해야 한다면 명령을 100줄 작성해야 하지만, 반복문을 사용하면 간단명료하게 코드를 작성할 수 있다. for문 for문가장 많이 사용되는 반복문으로, 값이 일정하게 커지면서 명령을 반복하여 실행할 때 사용한다. //for문 기본형 for(초깃값; 조건; 증가식) { 실행 할 명령 } for문은 초깃값->조건->명령->증가식의 순서로 실행되고, 초깃값은 카운터 변수를 초기화하는 것으로 0이나 1부터 시작한다. 조건은 명령을 반복하기 위한 조건을 체크하는 것으로, 이 조건을 만족해야만 그다음에 오는 명령을 실행한다. 증가식은 명령을 반복한 후 실행되는데, 보통 카운터 변수를 1 증가시키는 용도로 사용한다. //for..

[JavaScript] 조건문

조건문은 프로그래밍을 할 때 특정 조건과 명령에 따라 실행 순서를 정할 때 사용하며, 가장 많이 사용되는 구문이다. if 문 //if문 기본형 if (조건) { 조건이 true일 때 실행 할 명령 } if문은 어떠한 조건을 체크하여 결괏값이 true면 if문 다음에 나오는 조건값을 실행하고, false라면 아무 실행도 하지 않는다. 만약 조건을 만족했을 경우 실행할 명령이 여러 개라면 중괄호({ })로 묶고, 그 안에 명령을 나열하여 순서대로 한꺼번에 처리하라고 표시할 수 있다. 중괄호로 묶은 영역은 코드블록이라고 한다. if-else 문 //if-else문 기본형 if (조건) { 조건이 true일 때 실행 할 명령 } else { 조건이 flase일 때 실행 할 명령 } if-else문은 조건의 결괏..

[JavaScript] 연산자

연산자(operator)란? 프로그래밍에서 '연산'은 새로운 문자열을 만들거나 값의 크기를 비교하는 등의 여러 가지 동작을 의미한다. 이런 연산의 특정한 동작을 지시하는 기호가 연산자다. 산술 연산자 산술 연산자는 수학 계산을 할 때 사용하는 연산자로 우리에게 익숙하다. 연산자의 왼쪽 또는 오른쪽에 있는 연산 대상을 '피연산자'라고 하며, 피연산자는 숫자 또는 변수를 작성한다. 산술 연산자의 종류 + : 두 피연산자의 값을 더함 (c = a + b) - : 첫 번째 피연산자 값에서 두번째 피연산자의 값을 뺌 (c = a - b) * : 두 피연산자의 값을 곱함 (c = a * b) / : 첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눔 (c = a / b) % : 첫 번째 피연산자 값을 두 번째 피..

[JavaScript] 자료형 이해하기

자료형이란? 프로그램에서 처리할 데이터의 형태를 말한다. 예를 들어 '10'을 숫자로 처리할지 문자로 처리할지에 따라 프로그램의 결과는 달라진다. 자바스크립트의 자료형 기본유형, 복합유형, 특수유형으로 나누어진다. 기본유형 ① 숫자형(number) : 따옴표 없이 숫자로만 표기 //예시 var age = 20; 숫자형은 정수와 실수로 한번 더 구분이 된다.정수 : 소수점이 없는 숫자실수 : 소수점이 있는 숫자 정수는 표현 방법에 따라 10진수, 8진수, 16진수 세 가지 유형으로 나누기도 한다.8진수와 16진수는 이해가 조금 어렵지만 반드시 알아두어야 하는 개념이다. 10진수 : 0~9로 표현할 수 있는 숫자 예시) 2000, 17 8진수 : 0~7로 표현할 수 있는 숫자 예시) 012, 013, 020..

[JavaScript] 변수

변수란? 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터로 어떠한 상자 안에 값을 담는 개념으로 이해할 수 있다. 변수의 선언 변수의 선언이란 변수를 구별할 수 있도록 각각 이름을 붙여주는데, 이를 '변수 선언'이라고 하며 대입 연산자(=)를 이용해 변수에 초기 값을 대입하는 것을 초기값 할당이라고 한다. Javascript는 다양한 변수 선언 방법이 있다. ① var : ES6 이전 자바스크립트에서 사용되던 변수 선언 예약어로, 재선언과 재할당이 가능하며 변수를 선언 한 후 초기화를 할 수도 있고, 변수 선언과 함께 초기화를 할 수도 있다. (스코프 : 함수영역) //var 변수 선언 후 초기화 var name; name = 'A'; //vat 변수 선언 시 초기화 var name = '..