도메인을 구매한다는 것은, 네임서버를 운영해주는 업체에, IP와 도메인 매칭 유지비를 내는 것이다. 한국 또는 글로벌 업체 어디든 상관없지만, 전에 가비아에서 구입한 도메인을 연결해보자. DNS 설정 호스트 이름에 @, IP주소에 IP주소를 입력하기! 네임서버에 내 도메인-IP가 매칭 되는 시간이 필요하므로 10분 정도 기다리자. 기다리는 동안 내 IP주소로 지금 flask 서버가 잘 돌고 있는지 확인해 보자. og 태그 만들기 스파르타 피디아에서 배웠던 og:image, og:title, og:description 태그를 이용해보자. 만들었던 프로젝트도 카톡/페이스북/슬랙에 공유했을 때 예쁘게 나오도록, 미리 꾸며보자. static 폴더 아래에 이미지 파일을 넣고, 각자 프로젝트 HTML의 사이에 아래..

Flask 서버 실행해보기 참조 이어지는 내용! SSH 접속을 끊어도 서버가 계속 돌게 하기! Git bash 또는 맥의 터미널을 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않는다. 원격 접속을 종료하더라도 서버가 계속 돌아가게 하기 위해서 아래 명령어로 실행하자. nohup python app.py & 서버 종료하기 - 강제 종료하는 방법 ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill SSH 접속을 종료한 뒤, 브라우저에서 접속해보자. http://내AWS아이피/

전에 만들었던 팬명록 완성본을 filezilla로 EC2에 업로드해보자. 파일질라에서 homework 폴더 안에 app.py 파일, static, templates 폴더를 컨트롤키를 누른 상태에서 선택하고 드래그 드롭으로 EC2 인스턴스의 home/ubuntu/sparta 폴더에 업로드하자. 그리고 - 실행!! python app.py pip로 패키지를 설치하기 file → setting →.. 에서 + 버튼 누르고 설치했던 작업을, 명령어로 하면 이렇게 된다. pip install flask 다시 python app.py 입력해 보면 pymongo가 깔려 있지 않다는 메시지가 뜬다. 패키지들도 설치하기 pip install pymongo dnspython flask 서버를 실행해보기 아래 명령어로 fl..

서버에 이런저런 세팅들(업그레이드, DB설치, 명령어 통일 등)을 해줘야 본격적으로 이용할 때 편리하다! 리눅스 접속하는 방법 EC2 한방에 세팅하기 # python3 -> python sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10 # pip3 -> pip sudo apt-get update sudo apt-get install -y python3-pip sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1 # port forwarding sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80..

"웹서비스 론칭"에 필요한 개념 소개 내가 만든 프로젝트를 배포해보자. 배포는 누구나 내 서비스를 사용할 수 있게 하기 위해서 작업들이고, 웹 서비스를 론칭하는 것! 웹 서비스를 론칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜준다. 언제나 요청에 응답하려면? 컴퓨터가 **항상** 켜져 있고 프로그램이 실행되어 있어야 하고, 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야 한다. 서버는 그냥 컴퓨터라는 거 기억나시죠? 외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수도 있다. AWS라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 ..

sparta → projects → bucket 폴더를 열고 시작! bucket: "버킷리스트" 관련 코드를 작성하자~ 프로젝트 설정 - flask 폴더 구조 만들기 static, templates 폴더 + app.py 만들면 된다. 패키지 설치하기 3개 : flask, pymongo, dnspython. 뼈대 준비하기 프로젝트 준비 - index.html, app.py 준비하기 app.py 코드 더보기 from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def home(): return render_template('index.html') @app.route("/bucket", me..

1주 차에 완성한 팬명록을 완성하기! 두 가지 기능을 수행해야 한다. 응원 남기기(POST): 정보 입력 후 '응원 남기기' 버튼 클릭 시 주문 목록에 추가 응원 보기(GET): 페이지 로딩 후 하단 응원 목록이 자동으로 보이기 완성본 예제 링크: http://spartacodingclub.shop/web/homework 초미니홈피 - 팬명록 spartacodingclub.shop 파이참 기본 세팅 하기 homewirk에서 디렉터리 static, templates 만들고, app.py 파일을 만들고, templates에 index.html 파일 만들기! 패키지 설치하기 파이참에서 파일 → 설정 → 프로젝트:homework → python 인터프리터 → flask 설치 → pymongo 설치 → dnspy..

sparta → projects → movie 폴더에서 시작! 문제 분석 - 완성작부터 보기! movie : "스파르타 피디아" 관련 코드를 작성하자! 프로젝트 준비 - flask 폴더 구조 만들기! 루트 static, templates 폴더 + app.py, templates 폴더에 index.html 파일 만들기! 패키지 설치하기 5개 : flask, pymongo, dnspython, bs4, requests 조각 기능 구현해보기 프로젝트 준비 - URL에서 페이지 정보 가져오기 (meta태그 스크래핑) 이렇게, API에서 수행해야 하는 작업 중 익숙하지 않은 것들은, 따로 python 파일을 만들어 실행해보고, 잘 되면 코드를 붙여 넣는 방식으로 하는 게 편하다. 어떤 부분에 스크래핑이 필요한지 ..

프로젝트 세팅 sparta → projects → mars 폴더에서 시작! 폴더 구조 만들기 mars 폴더 마우스 우클릭하여 Directory(경로) 클릭하여 static라는 새 Directory를 만들어주고, 같은 방법으로 templates Directory도 만들어 준다. mars 폴더 마우스 우클릭하여 python 파일 만들기를 선택 후 app.py도 만들어준다. 패키지 설치 좌측 상단 파일을 누르고 설정 python 인터프리터 선택 후 + 클릭 패키지를 검색해서 설치하면 된다. 뼈대 준비하기 app.py 아래 코드 입력하기 더보기 from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/..

Flask 기초 기본 폴더구조 - 항상 이렇게 세팅하고 시작하자! Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에, ㄴstatic 폴더 (이미지, css파일을 넣어둔다) ㄴtemplates 폴더 (html 파일을 넣어둔다) ㄴapp.py 파일 이렇게 세 개를 만들어두고 시작하고 이제 각 폴더의 역할을 알아보자! (꼭 참고!! venv는 실제로는 보이지만, 안 보인다~라고 생각하자!) HTML 파일 불러오기 templates 폴더의 역할을 알아보자! HTML 파일을 담아두고, 불러오는 역할을 한다. 간단한 index.html 파일을 templates 안에 만들어보자. ..

HTML과 mongoDB까지 연동해서 서버를 만들어보자! 한 대의 컴퓨터에 서버도 만들고, 요청도 하는 작업! (클라이언트 = 서버) 이것을 바로 "로컬 개발환경"이라고 하고 그림으로 보면, 아래 그림 참조. 그렇지만 mongoDB Atlas라는 클라우드 서비스를 이용하니, 아래와 같다! 자 그리고 코드 관리를 위해 강의를 시작하면서 처음 만들었던 스파르타 폴더에 projects 폴더를 만들고 그 안에 아래와 같이 다섯 개의 폴더를 만들고 시작하자. prac: flask 연습 코드를 작성한다. mar: 화성 땅 공동구매 관련 코드를 작성한다. movie: 스파르타 피디아 관련 코드를 작성한다. homework: 팬명록 관련 코드를 작성한다. bucket: 버킷리스트 관련 코드를 작성한다. Flask 패키..

지니뮤직의 1~50위 곡을 스크래핑 해보기! 지니뮤직 사이트: https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701 지니차트>월간 - 지니 AI기반 감성 음악 추천 www.genie.co.kr 순위 / 곡 제목 / 가수를 스크래핑 하면 된다. 힌트 출력 할 때는 print(rank, title, artist) 하면된다. 앞에서 두 글자만 끊기! text[0:2] 를 써보기! 순위와 곡제목이 깔끔하게 나오지 않을 텐데 옆에 여백이 있다던가, 다른 글씨도 나온다던가... 파이썬 내장 함수인 strip()을 잘 연구해보자! import requests from bs4 import BeautifulSoup headers = {'User-Agent' : ..

웹스크래핑 결과를 DB에 저장해보자! 크롤링 완성 코드(hello.py 코드 내용) import requests from bs4 import BeautifulSoup # URL을 읽어서 HTML를 받아오고, headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers) # HTML을 BeautifulSoup이라는 라..

가입하기 구글로 로그인하고 → Accept Privacy... Service에 체크 → Submit 한다. 링크: https://account.mongodb.com/account/register Cloud: MongoDB Cloud account.mongodb.com 다음 화면 체크하고 넘어가기 Shared를 클릭하고 넘어가기 한국으로 체크하고, Create Cluster 클릭하기 아래와 같은 화면이 잠시 동안 나온 뒤에 새로고침 후 최종 아래와 같은 화면을 만나면 끝! 연결 준비하기 Allow Access from Anywhere 클릭 → Add IP address 클릭 Username, Password를 아래와 같이 입력 → Create Database User 클릭 Choose a connectio..

우리 눈에 보이진 않지만, 사실 DB에는 Index라는 순서로 데이터들이 정렬되어 있다. 예를 들어 교보문고에 가서 책을 찾을 때 꽂힌 방법대로 찾아야 쉽게 찾을 수 있는 것과 같다. Database는 잘 뽑아 쓰기 위해서 사용하는 것이다. DB는 프로그램과 같은 것으로 내 컴퓨터에 게임도 설치하고, PPT도 설치하고, DB도 설치할 수 있는데, 이 마저도 요새는 Cloud 형태로 제공해주는 곳들이 많다. 유저가 몰리거나 / DB를 백업해야 하거나 / 모니터링 하기가 아주 용이하기 때문이다!(요새 트렌드는 클라우드) DB의 두 가지 종류 RDBMS(SQL) 행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사하다. 데이터 50만 개가 적재된 상태에서, 갑자기 중간에 열을 하나 더하기는 어려울 것이..

크롤링 기본 세팅 더보기 import requests from bs4 import BeautifulSoup headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers) soup = BeautifulSoup(data.text, 'html.parser') # 코딩 시작 #코딩 시작 부분을 지우고 print(soup) ..

파이썬은 매우 직관적인 언어이고, 할 수 있는 것도 많다. 그런데, 개발자들도 모든 문법을 기억하기란 쉽지 않고 오늘 배우는 것 외에 필요한 것들은 구글링 해서 찾아보면 된다! 변수 & 기본 연산 a = 3 # 3을 a에 넣는다. b = a # a를 b에 넣는다. a = a + 1 # a+1을 다시 a에 넣는다. Pycharm에서 코드를 입력하고 마우스 우클릭 실행을 선택하면 Pycharm 하단 실행창에서 값을 입력해준다. num1 = a*b # a*b의 값을 num1이라는 변수에 넣는다. num2 = 99 # 99의 값을 num2이라는 변수에 넣는다. # 변수의 이름은 마음대로 지을 수 있음! # 진짜 "마음대로" 짓는 게 좋을까? var1, var2 이렇게? 자료형 숫자, 문자형 name = 'bob..

전에 만들어서 공부하는 sparta 폴더 안에 pythonprac 폴더를 만들어 준다. Pycharm에서 파일 메뉴를 누르고 새 프로젝트를 선택 위치를 선택하고 sparta 폴더 안에 pythonprac 폴더를 선택해준다. 그리고 아래 위치에서 venv 자동 생성된 모습을 잘 확인한다. 그리고 기본 인터프리터에서 python 3.9로 설정되어 있는데 이것을 python38로 선택해준다. 그리고 main.py 웰컴 스크립트 생성 부분의 체크박스에 체크가 되어 있다면 체크를 풀어주고 생성을 눌러준다. 잠시 로딩을 기다리면 위화면처럼 세팅이 된 걸 확인할 수 있다. venv 폴더 안에 아무 곳도 만들면 안 되고 손대면 안 된다고 하니 신경을 꺼주자~ pythonprac 폴더 마우스 우 클릭해서 python 파..

기존에 만들었던 index.html 파일에 OpenAPI(GET방식)를 붙여보자! 더보기 내 생애 최고의 영화들 영화 기록하기 영화URL 별점 -- 선택하기 -- ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 코멘트 기록하기 닫기 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 미세먼지 코드를 지우고 새롭게 만들어 보자! 우선, 로드가 다 되면 실행되는 함수(구글링 해보기: javascript 로..

1주차 숙제로 완성한 팬명록에 날씨 api 코드 삽입하기 날씨 api: http://spartacodingclub.shop/sparta_api/weather/seoul 아이유 팬명록 현재기온 : 00.0도 닉네임 응원댓글 응원 남기기 새로운 앨범 너무 멋져요! 호빵맨 새로운 앨범 너무 멋져요! 호빵맨 새로운 앨범 너무 멋져요! 호빵맨

어바웃 화면 페이지화 시키고 버튼 추가하기! 지난번 숙제로 만든 AboutPage.js를 아직 우린 스택 내비게이터에 연결하지 않았다. 따라서 여러분이 직접! 스택내비게이터에 AboutPage.js를 달아보자! 하단 메인 페이지의 상단에 다음과 같은 버튼을 만들어서 누르면 AboutPage로 가게끔 해주자! 추가적으로 외부 링크 걸기까지 배웠으니, 인스타나 블로그 주소 혹은 아무 주소를 AboutPage 하단 버튼에 연결해주기! 메인에 TouchableOpacity 버튼을 두고 navigate를 연결시키면 이동이 가능하다. Stack.screen에 AboutPage.js를 연결시켜야 한다. 소개 페이지 상태바의 디테일함을 주목하자! StackNavigator.js(숙제1) 더보기 import React ..

Share 디테일 페이지까지 이동해서 도달했다. 그런데 결과를 친구한테 결과를 공유해주고, 앱 다운로드 주소까지 전달해준다면 만든 앱을 홍보하는 도움이 되겠지? 설치할 라이브러리 없이, react-native에서 기본적으로 제공해주는 공유 기능을 사용한다. import { Share } from "react-native"; 그리고 다음과 같은 공유 버튼을 디테일 페이지 하단에 생성하고 기능을 만들어보자! share 함수를 만들고 거기에 react-native가 기본적으로 제공해주는 Share 함수를 사용하여 간단히 공유를 할 수 있다. DetailPage.js에 아래와 같이 코드를 넣어 주자! 더보기 import React,{useState,useEffect} from 'react'; import { S..

내비게이션이란? 앱에 페이지 개념을 입혀주고, 웹 사이트를 이용하듯, 앱에서 만든 컴포넌트들을 페이 지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리이다. 물론 이것 또한 쉽게 페이징을 도와주는 외부 라이브러리를 가져다가 사용한다. react-navigation 공식문서: https://reactnavigation.org/ React Navigation | React Navigation Routing and navigation for your React Native apps reactnavigation.org 결국 이 라이브러리도 Expo에서 지원하고 있는 도구로써, 앱을 만들기 위해 사용 중인 Expo와 궁합이 아주 잘 맞는다. 앱 내의 페이지 구성 및 이동까지 직접 적용해볼 텐데 이 ..

Expo에서 제공해주는 앱다운 앱 기능들 알아보자! Expo SDK. 일명 Expo에서 제공해주는 앱 기능 도구들을 개발할 때 여기서 확인할 수 있다. 링크: https://docs.expo.dev/versions/v38.0.0/ 필요한 기능들이 있는지 목록을 쭉 보고, 원하는 기능을 선택해서 적용하면 끝! 앱 상태 바(Status Bar) 앱이 앱에 따라 모바일 맨 위 상태 바가 변하는 앱이 있다. 배터리가 충분한지, 몇 시인지 매일 보는 것처럼 이 부분도 처리를 할 수 있다. 그럼 라이브러리 설치를 해보자. vscode에서 터미널 우측 버튼 중에 분할이란 버튼이 있다. 터미널 왼편은 서버를 켜고 끄고를 담당하고(expo start) 터미널 우측은 필요한 라이브러리들을 설치할 때 명령어를 치는 장소로 ..

리액트 네이티브는 리액트(React.js) 라이브러리 기반으로 만들어진 프레임워크이다. 그렇기 때문에 기본적인 구조는 리액트를 닮아 있다. 대표적인 네 가지가 있다. 컴포넌트(Component) : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분! 상태(State) : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터! 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달! useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳! 컴포넌트(Component) 컴포넌트는 UI의 요소, 요소를 재사용 가능한 부분으로 조각내서 운영하는 기법이다. 리액트 기반으로 만들어진 페이스북 웹사이트는..

pages 폴더에 DetailPage.js를 만들어 주고 App.js에 다음과 같이 코드를 입력한다. import React from 'react' import MainPage from './pages/MainPage'; import AboutPage from './pages/AboutPage'; import DetailPage from './pages/DetailPage'; export default function App(){ // return () // return () return () } 그리고 예제 데이터 "idx":9, "category":"재테크", "title":"렌탈 서비스 금액 비교해보기", "image": "https://storage.googleapis.com/sparta-imag..

앱 개발 종합반 2주 차 숙제하기! sparta-myhoneytip-hyuk폴더 안에 pages 폴더를 만들어주고 그 안에 MainPage.js와 AboutPage.js 파일을 만들어준다. App.js 파일 코드 모두 복사한 후, MainPage.js에 붙여 넣기 한 다음 함수 이름을 MainPage로 바꿔주기! 그리고 MainPage.js의 코드 줄은 다음과 같이 변경! import data from './data.json'; 에서 import data from '../data.json'; App.js 코드는 다음 코드로 변경! import React from 'react' import MainPage from './pages/MainPage'; export default function App(){ ..

1주 차 때 배웠던 모듈 시스템(module system) 자바스크립트를 다루면서 여러 자바스크립트 파일이 있을 경우, 서로 다른 자바스크립트 파일에서 각 파일에 있는 함수를 불러오거나, 자바스크립트 파일 자체를 불러올 때 사용하는 모듈 시스템에 대해 배워봤다. //A.js 파일 //times, plusTwo 함수를 외부로 내보낼 준비를 한다. export function times(x) { return x * x; } export function plusTwo(number) { return number + 2; } //B.js 파일 //다른 자바스크립트 파일에서 다음과 같이 불러와 사용한다. import { times, plusTwo } from './util.js'; console.log(times(..

복습 겸, 공부 겸 메인화면을 다음 화면처럼 바꾸어보자! flex는 flex 1과 flex 5로 화면이 나눠져 있다면 flex 1인 곳은 6/1 그리고 flex 5인 것은 6/5로 이렇게 화면을 분할해서 생각하는 개념으로 화면의 구역을 나누는 기술이다. 상단에 '나만의 꿀팁' 제목 텍스트를 넣어야 된다. 목 바로 밑에 이미지를 해당 이미지를 넣어야 된다. 가운데 버튼은 횡(수평) 스크롤(ScrollView) 기능을 써서 좌우로 스크롤 가능하게 만들어야 된다. ScrollVoew 수직 스크롤은 그냥 쓰면 된다는 것을 알았지만 횡은 어떻게 해야 할까? 공식문서를 찾아보고, 수평은 영어로 Horizontal. 주어진 데이터는 문자이므로 Text 태그에 넣어야 된다. 설명 글은 긴데 3줄이 넘어가면, 말 줄임표..

처음부터 빈 페이지에 그림을 그려 나가려는 습관보다는 잘 짜여 있고, 존재하고 있는 좋은 코드들을 가져다가 잘 조합해서 쓰고, 이 코드들을 가지고 잘 응용하는 게 제일 중요하다. 화면의 영역(레이아웃)을 잡아주는 엘리먼트이다. 현재 App.js 상에서 View는 화면 전체 영역을 가진다. 우리는 이 View 엘리먼트로 다음과 같이 화면을 원하는 대로 분할할 수도 있다. 더보기 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles ..

sparta-myhoneytip-hyuk 프로젝트를 VSCode 에디터로 열고, VSCode 에디터 내의 터미널을 연 다음 expo start 명령어를 실행! expo start로 열린 Expo 개발 도구 화면에서, 좌측의 QR 코드를 휴대폰 카메라로 비춘 뒤, 여러분 휴대폰에 설치했던 Expo 클라이언트 앱을 실행한다. App.js expo start로 시뮬레이터에 띄운 앱의 화면을 보면 App 함수에 기입되어 있는 글귀가 보이고 있음을 확인할 수 있다. "Open up App.js to start working on your app!" 간단히는 App.js는 앱의 화면을 그려주는 커다란 함수이다. 자세히는 App.js는 리액트 네이티브 라이브러리 그리고 Expo에서 제공해주는 기능들을 사용하여 화면을..

리액트 네이티브는 우리가 배운 자바스크립트 언어 하나로 안드로이드 앱과 iOS 앱 두 가지 모두 만들어주는 라이브러리이고 라이브러리는 개발할 때 사용하는 도구이다. 정말 리액트 네이티브로만 앱 개발을 진행하면, 자바스크립트 한 언어로 앱 개발이 가능하다 했지만 그렇지 않음을 알 수 있다. 특정 상황에선 안드로이드, iOS 각각의 폴더에 들어가 직접 코드를 만져야 하는 상황이 발생한다. 안드로이드, iOS 앱을 만들 땐 자바&코틀린과 Swift라는 언어를 써야 하는데, 그러면 언어 하나로 앱을 만들 수 있다는 취지에서 벗어나게 된다. 그래서 이에 좀 더 취지에 가깝게, 더 쉽고 빠르고 정말 안드로이드, iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 수월하게 도와주는 도구가 존재한다. Expo란?..

함축적인 자바스크립트 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한다! 그렇기 때문에 공식문서를 볼 때 당황하지 않고 적용하기 위해서 그리고 기존 자바스크립트보다 더 함축적이고 간결한 문법을 사용하기 위해 배워보자! 함수를 더 짧게! - 화살표 함수 기존에는 함수를 선언하기 위해서 function 키워드를 사용했다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능하다. [기존 방식] let a = function() { console.log("function"); } a(); [최신 방식] let a = () => { console.log("arrow function"); } a();. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당 기존에는 객체(딕셔..

합을 구하는 함수 만들기 0부터 n-1까지 더하는 함수를 만들고 싶다면? function get_sum(n) { let sum = 0 (기준 변수를 설정하는 것) for (let i = 0; i

보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어이다. 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며, D-day 기능처럼 카운팅이 되는 모습도 작성할 수 있다. 이제는 자바스크립트로 앱도 만들 수 있다. (리액트 네이티브가 자바스크립트를 기반으로 하기 때문이다!!) 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있다. 크롬 브라우저에서 F12(맥은 : alt(option) + command + i)를 눌러 개발자 콘솔 창을 열어서 코드를 입력하며 공부할 수 있다. 위 스샷처럼 console.log("Hello World!"); 입력하고 Enter를 치면 Hello World!라고 나온다. console.log(변수)는 콘솔 창에 괄호 ..

앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻한다. 클라이언트와 서버 앱 서비스, 웹 사이트 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여준다.(데이터를 주고받는 관계) 클라이언트(프론트) 클라이언트는 사용자가 보는 화면이다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당된다. 서버(백앤드) 서버는 사용자가 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다. 앱과 리액트 네이티브 앱 개발이라고 하면 단연 "안드로이드"와 "iOS(아이폰)" 두 가지가 떠오른다. 안드로이드는 Java&Kotlin이라는 기술로..

일반 연초를 피우다 롤링타바코를 사용한 지 벌써 10년이 훌쩍 지나버렸다. 좀 더 저렴한 가격도 좋은 점이었지만 내가 원하는 맛을 다양하게 블렌딩할 수 있다는 점 때문에 롤링타바코를 선택하게 된 것 같다. 그럼 롤링타바코에 대해서 간편하게 알아보자. 롤링타바코 구성!! 롤링타바코는 손으로 굴려서 만드는 수제 담배를 말한다. 일반적으로 미국과 유럽에서는 롤링타바코가 일반적으로 사용되지만, 우리나라에서는 생소한 사람들도 많을 것이다. 롤링타바코는 손으로 굴려서 만든 수제 담배로, 일반적으로 담배, 롤링페이퍼(굴릴 때 사용하는 종이), 필터로 구성된다. 예전에는 위 구성품들을 구입하기 위해서 정말 검색하고 찾아다니느라 고생을 좀 했었는데 집 근처에 매장이 생겨서 쉽게 구입을 하다가 매장이 전자담배 전문점으로 ..

요즘 홈카페 열풍이 불면서 집에서도 카페처럼 맛있는 커피를 즐기고자 하는 사람들이 많아지고 있다. 나 역시 커피를 좋아하고, 어머니께서도 커피를 좋아하시다 보니 조금 더 맛있게 커피를 내릴 수 있는 방법을 찾아보다가 알게 된 레벨링 툴 V형 디스트리뷰터(탬퍼) 51mm을 소개해 볼까 한다. 내가 구매한 제품은 HUGH 51mm이다. 자 그럼 이 제품을 왜 구입했는지 설명을 해볼까 한다. 에스프레소 커피 머신을 사용할 때 포터필터 바스켓에 분쇄한 원두를 넣고 탬핑을 해서 추출을 한다. 탬핑(Tamping)이란? 바스켓에 분쇄한 원두를 넣고 커피머신에 포터필터를 장착하기 전에 분쇄된 원두를 고르게 압축하여 효과적인 추출을 할 수 있도록 하는 것이다. 디스트리뷰터란 무엇일까? 탬핑을 하기 전에 바스켓의 원두 ..

오늘은 1년 6개월 정도 사용한 보랄 더 셰프 에스프레소 반자동 커피 머신을 사용한 후기를 남겨보려 한다. 오늘의 집에서 이벤트 진행할 때 9만 원 정도에 구입한 것 같다. 지금 쿠팡에서는 189,000원에 오늘의 집에서는 99,000원에 판매를 진행하고 있다. 참고하시길~ 자 그럼 홈 카페를 생각하는 사람들에게 반자동 커피 머신을 처음 구입하고 사용한 초보자 리뷰를 시작! 큰 포장 박스 안에 커피 머신 박스가 포장돼서 배송이 되었다. 커피 머신 비닐포장과 함께 그 안에 부속품들이 들어 있다. 스팀 노즐에 굵은 파이프를 제거하고 사용하는 것을 추천하며, 스팀이 준비되었을 때 두세 번 스팀을 작동시켜 물을 빼준 후 스팀을 사용하는 것이 좋다, 처음에 스팀 노즐로 물이 많이 나오기 때문에 중요한 부분이다. ..

주말 혹은 계절이 바뀔때 집안 대청소를 하게된다. 그럴 때 미리 알아두면 좀더 손쉽고 빠르게 청소를 하고 도움 되는 내용을 공유해 본다. 집안 먼지 청소 거실 바닥이나 유리창 틈 사이로 먼지가 쌓였다면 물에 적신 신문지를 이용해보자. 분무기로 물을 뿌린 후 젖은 신문지로 닦아내면 손쉽게 제거할 수 있다. 또 방충망 틈새에 낀 먼지는 나무젓가락 끝에 물티슈를 말아 붙인 뒤 세제 푼 물을 묻혀 닦으면 된다. 창틀 역시 같은 방법으로 청소하면 묵은 때를 벗겨낼 수 있다. 손이 닿지 않는 천장 몰딩 부분은 막대기에 스타킹을 씌워 문지르면 깨끗하게 만들 수 있다. 얼룩 제거 벽지에 묻은 얼룩은 표백제 묻힌 천으로 두드려주면 말끔히 사라진다. 커피나 주스 같은 음료 얼룩이 남아있다면 치약을 활용하는 것이다. 우선 ..

나이를 먹으면서 발에 각질이 생기기 시작했네요. ㅠ,.ㅠ 그래서 발각질 제거기를 검색해서 찾아보다가 구입한 휴대용 발각질 제거기 추천해볼까 합니다. 일주일 사용 후 제품이 좋아서 이렇게 후기를 남겨요. 주문 후 다음날 빠르게 제품이 도착했습니다. 휴대용 발각질 제거기 상세 사진 휴대용 발각질 제거기 사용 리뷰 굳은살과 각질에 건조하다 보니 갈라지는 부분도 있었어요. 우선 두꺼운 부분으로 발각질이 있는 부분을 살살 밀어주고 촘촘한 부분으로 마무리해주면 되는데요. 슥삭 하는 소리와 함께 위 사진처럼 각질이 잘 제거가 됩니다. https://tv.kakao.com/channel/3154840/cliplink/426349557 각질 제거기 사용 영상을 업로드하려는데 계속 첨부가 되질 않아서... 그리고 발각질 ..

겨울철 침대 패드 추천드려봅니다. 2021 겨울 어머니 침대 매트를 알아보다가 구입한 자가 발열 웜매트!!! 고밀도 양털 소재로 부드럽고 포근하면서 열 보존율이 좋아서 누워 있으면 돌침대 온도를 따로 올리지 않아도 따뜻합니다. 돌침대에서 잠을 청하다 보면 아무래도 딱딱함 때문에 불편한 점이 있기 때문에 구입하게 되었는데요. 체온은 유지해 주면서 매트의 두께감이 제법 있어서 편안한 잠을 청할 수 있습니다. 먼지 걱정 없이 따뜻하고 폭신한 자가 발열 웜매트로 전기장판을 이제 잊어버리세요. http://link.coupang.com/a/jEf8X 자가발열 웜매트 두꺼운 발열토퍼 매트리스 2color COUPANG www.coupang.com "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수..

평소에 건강관리를 어떻게 해? 나는 주로 걷기 운동을 하거나 집에서 스트레칭을 하는 편인데 요즘 들어 피로감이 심해져서 그런지 몸이 찌뿌둥 하더라고... 그중에서도 나는 컴퓨터를 많이 사용하기 때문에 마우스와 키보드, 그리고 게임할 때 패드까지 사용하다 보니까 손의 피로도 장난 아니고 손가락은 통증도 있어서 한의원 가서 침도 맞아보고 했어. 매일 병원을 찾을 수도 없고 그렇다고 PC를 안 할 수는 없고 매일 할 수 있는 방법을 찾아보다가 손지압을 해볼까 해서 어떻게 마사지를 하면 좋을까 고민을 하게 되었지. 그래서 조금 더 효율적으로 관리할 수 있는 방법이 없을까 찾아보다가 손 지압기를 하나 구매했어. 인터넷 검색을 통해 알아보니 손 지압기 종류도 많고 가격대도 천차만별이고 너무 저렴한 건 금방 고장 날..

우리나라 사람들은 예로부터 숯을 활용하여 실생활에 적용시켜왔다. 냉장고 탈취제나 제습제 역할뿐만 아니라 공기 정화용으로도 쓰였다. 하지만 요즘 현대인들에게는 이러한 숯보다 더 강력한 성능을 가진 가전제품들이 많다. 그럼에도 불구하고 아직도 몇몇 가정에서는 천연 가습기 및 공기청정기로 여전히 숯을 사용하고 있다. 그렇다면 왜 굳이 전기료 부담이 큰 전자제품 대신 자연 친화적인 숯을 사용하는 것일까? 궁금증을 해결하기 위해 나는 집 근처 대형마트 내 위치한 다이소 매장을 찾았다. 그곳에서 각종 숯 종류별 특징과 용도 그리고 가격대별로 진열되어 있는 모습을 확인할 수 있었다. 여기서 잠깐! 같은 숯이라도 제조방식에 따라 차이가 있다고 한다. 참나무를 고온에서 구워 만든 백탄참숯이 흑탄 대비 높은 기공율을 가지..

요즘 날씨가 부쩍 추워지면서 집 밖으로 나가기 싫어지는 계절이 찾아왔다. 추운 날씨 탓에 야외 활동보다는 실내활동 위주로 하게 되는데 그러다보니 자연스레 살이 찌게 된다. 이대로 가다간 건강상 문제가 생길 수도 있겠다는 생각에 특단의 조치를 취하기로 했다. 바로 식단 조절이었다. 평소 즐겨먹던 자극적인 음식들은 최대한 멀리하고 포만감 대비 칼로리가 낮은 음식 위주로 섭취하기로 결심했다. 그런 의미에서 선택한 첫 번째 음식은 바로 고구마였다. 식이섬유가 풍부하여 장운동을 활발하게 만들어주고 혈당지수가 낮아 적은 양으로도 쉽게 포만감을 느낄 수 있기 때문이다. 그럼 지금부터 내가 실제로 시도했던 고구마 다이어트 방법에 대해 자세히 설명하도록 하겠다. 우선 아침 식사 대용으로 찐 고구마 1개와 우유 한잔을 먹..

피파 22에서는 치트 엔진을 이용해 감독 커리어를 할 때 관전 모드를 애용했는데, 피파 23에서부터는 안티 치트 때문에 치트 엔진을 사용할 수 없는 것 같다. 이번 피파 23에서는 선수 고정이 가능해서 선수 커리어를 하다가도 다시 감독 커리어로 돌아가 내가 원하는 선수를 원하는 포지션 전술을 수정하면서 할 수 있어서 플레이하는 시간이 많아진다. 선수 교체 없이 관전 모드 하는 방법 첫 번째로 할 것은 스쿼드 팀 명단에서 추가로 스쿼드를 만들어 준다. 그리고 스쿼드 팀 관리 탭으로 이동! 스쿼드가 두 개 이상이 있는지 잘 확인하고 미리 선수를 세팅하자. 나는 1번은 리그, 챔스 용이고 2번은 컵 대회와 로테 돌릴 때 이용할 예정이다. 매치 플레이 선택 후 나오는 화면 창에서 스쿼드를 선택해야 한다. 예를 ..