본문 바로가기

Programming230

[Vue] 조건문 v-if 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 조건문 v-if 사용하는 방법에 대해서 알아보겠습니다. 지난 시간 Vue를 활용해서 Counter 프로그램을 만들어 봤습니다. 만약 Counter 숫자가 7보다 클 경우에 Vue 조건문 v-if를 사용해서 특정 메세지가 보여지도록 업데이트 해보겠습니다. 다음 코드는 지난 시간 작성했던 Counter 프로그램 입니다. {{ count }} Vue 조건문 v-if 을 사용해서 특정 메세지가 보여지도록 업데이트 해보겠습니다. {{ count }} Count가 7보다 큽니다. Count가 7보다 작거나 같을 경우에는 메시지가 안보여지는 것을 확인할 수 있습니다. Count가 8일 경우 7보다 크기 때문에 특정 메시지가 보여지는 것을 확인할 수 있습니다. 이번에는.. 2022. 8. 27.
[Vue] Counter 프로그램 만들기 안녕하세요. 혀코입니다. 이번 시간에는 Vue를 사용해서 간단한 Counter 프로그램을 만들어 보겠습니다. 지난 시간에 Vue + Vite 프로젝트 시작하기에 이어서 진행합니다. App.vue 파일의 내용을 모두 지우고 가장 기본적인 App.vue 코드를 작성합니다. // Vue 문법을 적용한 HTML 코드를 이곳에 작성합니다. 가장 기본이 되는 vue 코드는 , 이렇게 작성하면, 숫자를 클릭하면, 숫자가 1씩 증가하게 됩니다. 이렇게 Vue를 사용해서 간단한 Counter 프로그램을 만들어 봤습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 27.
[Vue] Vue + Vite 프로젝트 시작하기 안녕하세요. 혀코입니다. 이번 시간에는 Vue + Vite 프로젝트 시작하는 방법에 대해서 알아보겠습니다. 아래 명령어를 실행해서 Vue + Vite 프로젝트를 시작합니다. $ npm create vite@latest 그러면 프로젝트 명을 물어봅니다. 프로젝트 명을 vue-awesome 으로 합니다. ? project name: >> vue-awesome 다음으로 사용할 자바스크립트 라이브러리 또는 프레임워크를 고릅니다. Vue를 고릅니다. vanilla > vue react preact lit svelte Vite를 사용해서 Vue 뿐만 아니라 vanilla, react, preact, lit 또는 svelte 를 사용할 수도 있습니다. 그리고 vue 종류를 vue 또는 vue-ts 중에 vue로 선택.. 2022. 8. 26.
[Gatsby] Layout 컴포넌트 만들어 UI 재사용 하기 - #04 안녕하세요. 혀코입니다. 이번 시간에는 Gatsby로 각 페이지 마다 반복되는 UI를 layout 컴포넌트로 만들고 재사용 하는 방법에 대해서 알아보겠습니다. src 폴더 아래에 components 폴더를 만들고 layout.js 파일을 만들어 코드를 다음과 같이 작성합니다. import * as React from 'react' import { Link } from 'gatsby' /* const Layout = (props) => { const pageTitle = props.pageTitle const children = props.children return ( ... ) } */ /* JavaScript Destructuring Applied */ const Layout = ({ pageTitl.. 2022. 8. 25.
[Gatsby] 새 페이지 만들고 Link component 사용하기 - #03 안녕하세요. 혀코입니다. 이번 시간에는 Gatsby로 새로운 페이지를 만들고 Gatsby의 Link component를 사용해 보겠습니다. /src/pages/Index.js 파일을 다음과 같이 수정합니다. import * as React from "react" const IndexPage = () => { return ( Home Page Welcome to my Gatsby site! I'm making this by following the Gatsby Tutorial. ) } export default IndexPage Index 페이지가 다음과 같이 수정되었습니다. /src/pages 에 about.js 파일을 만들고 다음과 같이 작성합니다. import * as React from 'react.. 2022. 8. 24.
[Gatsby] Github에 소스코드 올리고 Gatsby Cloud에 호스팅하기 - #02 안녕하세요. 혀코입니다. 저번 시간에 Gatsby로 로컬에서 웹사이트를 만들었습니다. 이번 시간에는 Gatsby 웹사이트를 Github에 소스코드를 올리고, Gatsby Cloud에 호스팅을 진행해 보겠습니다. Github에가서 Repository를 하나 만듭니다. Repository 이름은 Gatsby로 웹사이트를 만들때 사용했던 폴더이름으로 만들고, 체크박스를 모두 체크 해제한 상태로 (README.md 파일 없이) 만듭니다. Gatsby로 웹사이트 만들었던 폴더로 이동해서 Github에 소스코드를 올려줍니다. $ git init /* 두개 이상의 Github 계정을 사용할 때 Github 계정 정보를 확인해서 업데이트 합니다. */ $ git config --list $ git config --gl.. 2022. 8. 23.
[Gatsby] 설치하기 (MacOS) - #01 안녕하세요. 혀코입니다. 이번 시간에는 Gatsby 를 MacOS에 설치하는 방법에 대해서 알아보겠습니다. Terminal에서는 이상하게 설치가 안되어서 bash로 설치했습니다. Homebrew 가 설치되어 있는지 확인합니다. brew -v Xcode Command Line Tools 를 애플 개발자 센터에서 다운로드 받아서 설치합니다. https://developer.apple.com/download/all/?q=xcode%20command%20line node를 설치합니다. $ brew install node gatsby를 설치합니다. $ npm install gatsby-cli --location=global 설치가 완료되면, 다음 명령어를 통해서 gatsby가 제대로 설치되었는지 확인합니다. $ .. 2022. 8. 22.
[Gatsby] 설치하기 (Windows) - #01 안녕하세요. 혀코입니다. Gatsby에 대해서 간략하게 설명하자면, React 기반 정적사이트 생성기 입니다. 이번 시간에는 Gatsby 를 설치해 보겠습니다. git bash 에서 텍스트가 깨지는 현상이 있어서 windows powershell을 사용하는 것을 추천 드립니다. gatsby-cli를 node package module을 사용해서 전역 설치합니다. npm install -g gatsby-cli 다음 명령어를 사용해서 gatsby로 웹사이트를 만들어 보겠습니다. $ gatsby new 그러면, 웹사이트 설정을 위한 여러 질문들이 나옵니다. What would you like to call your site? My Website What would you like to name the fold.. 2022. 8. 22.
[Github] git respository 버전 내역 없이 다운로드 받는 방법 안녕하세요. 혀코입니다. 보통 git repository를 내려받는 방법은 다음과 같습니다. $ git clone git-repository-https-address.git git clone을 명령어를 사용해서 내려받을 때는 버전내역을 포함해서 복제를 합니다. 그래서 이번 시간에는 git repository의 버전내역을 삭제하고 내려받는 방법에 대해서 알아보겠습니다. git repository 의 버전 내역을 제외하고 내려받는 방법은 다음과 같습니다. $ npx degit git-account-id/repository-name create-local-folder-name 새로운 프로젝트를 기존의 git repository를 사용해서 시작할 때 유용합니다. 이렇게 git repository의 버전정보를 제.. 2022. 8. 20.
[Flutter] flutter command not found 해결방법 (MacOS) 안녕하세요. 혀코입니다. 이번 시간에는 flutter command not found 오류 해결방법에 대해서 알아보겠습니다. 오류를 해결하기 위해서, 먼저, flutter sdk가 설치된 경로로 이동해서 pwd 명령어를 실행하면 현재 디렉토리의 경로를 출력합니다. $ pwd /Users/user/document/flutter/bin /Users/user 폴더에 가면 .zshrc 파일이 있습니다. 파일을 Visual Studio Code 을 사용해서 오픈합니다. 만약 사용자 user 폴더에서 .zshrc 파일을 찾을 수 없다면, Command + Shift + . 단축키를 사용해서 숨겨진 파일을 보여지게 합니다. 그리고 위에서 얻은 flutter sdk가 설치된 경로에 :$PATH를 붙여서 다음과 같이 P.. 2022. 8. 19.
[Github] 여러개의 Github 계정을 한대의 컴퓨터에서 사용하는 방법(Windows) 안녕하세요. 혀코입니다. 직장과 집에서 개인 프로젝트를 관리하기 위해서 Github을 사용하는 경우 두개 이상의 Github 계정을 사용하는 경우가 있습니다. Github 웹사이트에서 직접 소스코드를 업데이트 할 수 있으나 번거롭기 때문에 컴퓨터에서 계정 전환 필요없이 바로바로 커밋할 수 있는 방법을 알아보게 되었습니다. 그래서 이번 시간에는 여러개의 Github 계정을 사용하는 방법에 대해서 알아보겠습니다. SSH Key 생성 git-bash를 실행해서 C:\Users\user\.ssh 로 이동합니다. $ cd C:/Users/user/.ssh 각 계정에 해당하는 SSH Key를 생성합니다. $ ssh-keygen -t rsa -C "first-email@email.com" -f "github-firs.. 2022. 8. 17.
[CSS3] a 태그를 비활성 시키는 방법 안녕하세요. 혀코입니다. 이번 시간에는 태그를 비활성 시키는 방법에 대해서 알아보겠습니다. 보통 태그는 페이지 이동이나 같은 페이지 내에서 단락 이동할 때 쓰입니다. 하지만 때에 따라서 이러한 기능을 하지 못하도록 비활성화 해야합니다. 가령 현재 페이지 경로를 표시하는 breadcrumb 에서 현재 페이지를 나타내는 텍스트에 a 태그가 사용되어 있다면 이 때 a 태그는 비활성화 해줘야합니다. a:last-child { pointer-events: none } 이렇게 태그를 비활성 시키는 방법에 대해서 알아봤습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 16.
[Python] 웹브라우저 실행하고 특정 웹사이트로 이동하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Python을 사용해서 웹브라우저를 실행하고 특정 웹사이트로 이동하는 방법에 대해서 알아보겠습니다. 웹브라우저를 실행하려면 webbrowser 모듈이 필요합니다. 그리고 특정 웹사이트로 이동하기 위해서는 webbrowser의 open 메소드를 아래와 같이 사용하면 됩니다. import webbrowser webbrowser.open('https://www.naver.com') 그러면, 기본 브라우저로 등록되어 있는 브라우저가 실행되고 open 메소드의 parameter로 받은 웹사이트 주소로 이동하게 됩니다. 이렇게 Python을 사용해서 웹브라우저를 실행하고 특정 웹사이트로 이동하는 방법에 대해서 알아봤습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립.. 2022. 8. 4.
[JavaScript] 문장에서 어떤 단어를 포함하는지 여부 확인 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript를 사용해서 문장에서 어떤 단어를 포함하는지 여부를 확인하는 방법에 대해서 알아보겠습니다. 문장에서 어떤 단어를 포함하는지 여부를 확인하기 위해서 JavaScript의 include 메소드를 사용해야 합니다. let text = "Hello world, welcome to the universe."; let result = text.includes("world"); // true includes 메소드가 받는 parameter로 찾고자 하는 단어 string 값이 반드시 들어가야 합니다. 'Hello World, welcome to the universe.'에서 'world' 단어가 있으므로 true를 출력합니다. 또한, includes 메소드는 .. 2022. 8. 3.
[HTML5] Input 태그의 type 사용 방법 총정리 안녕하세요. 혀코입니다. 이번 시간에는 Input 태그의 type 사용 방법 총정리를 해볼까 합니다. Input 태그의 type에는 다음 10가지가 있습니다. 1. text 2. email 3. password 4. tel 5. datetime-local 6. date 7. week 8. month 9. time 10. number 1. text text는 Input type의 기본 값 입니다. 보통 문자열을 입력받을 때 사용합니다. 이때, label 태그의 for 값과 input 태그의 id 를 같게 해서 연동해 줍니다. name 값은 사용자가 입력한 값과 쌍으로 name: john 형식으로 입력됩니다. Name: 2. email 이메일을 입력받을 때 사용합니다. 이메일과 pattern에 정의된 형식이.. 2022. 8. 2.
[JavaScript] URL에서 원하는 데이터 추출해서 조작하는 방법 안녕하세요. 혀코입니다. 이번 시간에서 JavaScript를 사용해 URL의 특정 정보를 추출해서 조작하는 방법에 대해서 알아보겠습니다. 현재 웹사이트의 url 값을 가져오는 방법 const url = window.location.href; console.log(url) // https://www.tistory.com URL에서 ID 값을 추출하는 방법 어느 웹페이지의 특정 섹션으로 바로 이동할 수 있도록 특정 섹션에 ID 값이 걸려 있는 URL의 경우, URL 마지막에 # 심볼과 같이 쓰인 단어를 알아내는 방법입니다. let address = 'https://smilehugo.tistory.com/entry/how-to-manipulate-url-using-javascript#examples'; con.. 2022. 8. 1.
[Python] 영어 철자 오류를 수정하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Python을 사용해서 영어 철자 오류를 수정하는 방법에 대해서 알아보겠습니다. 철자 오류 수정(spelling correction)을 진행하려면 textblob 모듈이 필요합니다. 다음 명령어를 실행해서 textblob 모듈을 설치합니다. pip install textblob 다음 코드를 작성합니다. from textblob import TextBlob #1 def Convert(string): #2 li = list(string.split()) return li str1 = input("Enter your word: ") #3 words = Convert(str1) #4 corrected_words = [] #5 for i in words: #6 correcte.. 2022. 7. 31.
[HTML5] a 태그와 button 태그의 사용방법의 차이 안녕하세요. 혀코입니다. 이번 시간에는 HTML5의 태그와 태그의 사용방법의 차이에 대해서 알아보겠습니다. 태그 태그는 다른 페이지로 이동하거나 같은 페이지에서 id 값이 지정되어 있는 위치로 이동할 때 사용합니다. Tistory href은 이동할 웹사이트 페이지 주소나 태그의 id 값을 지정할 수 있습니다. title은 툴팁으로 링크가 어떤 내용인지 알려줍니다. target은 _blank를 지정해서 새로운 탭에서 href에 지정된 웹사이트 페이지 주소로 이동할 수 있습니다. 태그 태그를 사용하는 부분을 제외한 나머지 모든 클릭 가능한 부분에 사용합니다. Click Me! type으로 지정할 수 있는 값에는 button, reset, submit이 있습니다. 폼을 입력해서 사용자가 입력한 데이터를 받아 .. 2022. 7. 29.
[CSS3] ::marker 를 사용해서 <li> 태그에 이모티콘을 추가하는 방법 안녕하세요. 혀코입니다. 리스트 텍스트 앞에 이모티콘을 사용하는 방법이 있나 고민하던 차에 방법을 알아냈습니다. 그래서 이번 시간에는 ::marker를 사용해서 태그에 이모티콘을 추가하는 방법에 대해서 알아보겠습니다. HTML5 CSS3 JavaScript HTML5 기본 구조를 짜고, li 를 잡고 ::marker를 사용하고 content: ' ' 안에 원하는 이모티콘을 넣어주시면 됩니다. 그러면 아래와 같이 브라우저에서 보여지게 됩니다. ::before 를 사용할떄는 list에 list-style-type: none 속성이 있어야만 bullet 표시가 안나는 데 ::marker를 사용할 때는 태그에 list-style-type: none 속성이 없어도 bullet 표시가 안되는 점 참고 하시면 될 것.. 2022. 7. 28.
[Python] turtle 모듈 사용해서 기하학적 패턴 그리는 방법 안녕하세요. 혀코입니다. 이번 시간에는 python의 turtle 모듈을 사용해서 기하학적 패턴을 그리는 방법에 대해서 알아보겠습니다. Python의 turtle 모듈을 사용해서 다음과 같은 기하학적 형태의 패턴을 그려보도록 하겠습니다. 소스코드를 살펴보겠습니다. from turtle import * # 1 from random import randint # 2 bgcolor('black') # 3 x = 1 # 4 speed(0) # 5 while x < 400: # 6 r = randint(0, 255) # 7 g = randint(0, 255) # 7 b = randint(0, 255) # 7 colormode(255) # 8 pencolor(r,g,b) # 9 fd(50 + x) # 10 rt(9.. 2022. 7. 26.
[Python] list에서 가장 많이 반복되는 숫자를 찾는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Python을 사용해 list에서 가장 많이 반복되는 숫자를 찾는 방법에 대해서 알아보겠습니다. 가장 많이 사용된 숫자를 찾는 방법 3가지에 대해서 알아보겠습니다. 모듈 사용하지 않는 방법 numbers = [1, 2, 3, 2, 4, 3, 4, 4, 3, 3] print(max(set(numbers), key = numbers.count)) # 3 숫자로 된 list를 numbers 변수에 넣었습니다. set 함수는 반복되지 않게 1, 2, 3, 4를 반환하며, 반환된 set 값을 바탕으로 숫자를 카운팅해서 가장 많이 반복되는 숫자를 반환합니다. collections모듈에서 Counter 서브 모듈을 사용하는 방법 from collections import Cou.. 2022. 7. 25.
[Flutter] 회사명 랜덤 생성기 제작 튜토리얼 Part 2 안녕하세요. 혀코입니다. 이번 시간에는 저번 시간에 진행했던 Flutter로 회사명 랜덤 생성기 제작 튜토리얼 Part 1에 이어서 Part 2를 진행해 보겠습니다. 아직 튜토리얼 Part 1을 진행하지 않으셨다면, 아래 링크를 통해서 Part 1 진행 하시고 이어서 진행 부탁 드립니다. 그럼 Part 2를 진행해 보겠습니다. State Class를 다음과 같이 업데이트 합니다. class _RandomWordsState extends State { final _suggestions = []; final _saved = []; /*1*/ final _biggerFont = const TextStyle(fontSize: 18); @override Widget build(BuildContext context.. 2022. 7. 24.
[Flutter] 회사명 랜덤 생성기 제작 튜토리얼 Part 1 안녕하세요. 혀코입니다. 이번에는 flutter.dev에서 flutter 앱 만들기 튜토리얼인 회사명 랜덤 생성기를 만들어 보겠습니다. flutter 앱을 만들기 위해서 다음 명령어를 사용합니다. $ flutter create my_app lib 폴더에 있는 main.dart 파일을 아래의 소스코드와 동일하게 작성합니다. // Copyright 2018 The Flutter team. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; void main() { ru.. 2022. 7. 23.
[CSS] :is pseudo selector 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 :is pseudo selector 을 사용하는 방법에 대해서 알아보겠습니다. :is pseudo selector 을 사용하면 상위 요소 셀렉터들을 하나로 묶어서 사용할 수 있습니다. header button:hover, nav button:hover, article button:hover { padding: 5px 10px; color: white; background: green; } 위와 같은 코드가 있을 때, :is pseudo selector 을 사용하면 상위 요소들을 하나로 묶어서 사용할 수 있기 때문에 코드 사용량을 줄일 수 있습니다. :is(header, nav, article) button:hover { padding: 5px 10px; color:.. 2022. 7. 22.
[JavaScript] setInterval과 setTimeout의 차이점 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript의 setInterval과 setTimeout 함수의 차이점에 대해서 알아보겠습니다. setTimeout() 일정한 시간이 지나고 함수를 실행할 때 사용합니다. setTimeout은 parameter로 실행할 함수와, 시간 이렇게 두개를 받거나 실행할 함수가 받는 parameter의 개수를 더한 만큼의 parameter를 받습니다. 실행할 함수에 parameter 가 없는 경우 다음과 같이 작성합니다. function welcomeMessage() { console.log('Hello World'); } setTimeout(welcomeMessage, 2000); 실행할 함수에 parameter가 있는 경우 다음과 같이 작성합니다. function.. 2022. 7. 21.
여러가지 프로그래밍 언어를 사용해서 Hello World를 출력하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 여러가지 프로그래밍 언어에 대해 간략하게 알아보고 각 언어를 사용해서 Hello World를 출력하는 방법에 대해서 알아보겠습니다. 1. Pascal (1970) Pascal은 구조적 프로그래밍 및 데이터 구조화를 사용하여 우수한 프로그래밍을 장려하기 위해 Niklaus Wirth가 작고 효율적인 언어로 설계한 명령형 및 절차적 프로그래밍 언어입니다. program HelloWorld; uses crt; (* Here the main program block starts *) begin writeln("Hello World"); readkey; end. 2. C (1972) C 언어는 강력한 범용 프로그래밍 언어입니다. 운영 체제, 데이터베이스, 컴파일러 등과 같은.. 2022. 7. 20.
[JavaScript] 반복문 for ... in 과 for ... of 의 차이점 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript의 반복문 for ... in 구문과 for ... of 의 차이점에 대해서 알아보겠습니다. for .. in 구문 for .. in 구문은 key 와 value 로 이뤄진 object의 반복문을 돌릴 때 사용합니다. 만약 key 값이 숫자로 되어 있다면, 숫자가 작은 것부터 큰 순서대로 차례대로 출력됩니다. for ... of 구문 for ... of 구문은 기본 적인 array의 반복문을 돌리는 for 문과 동일하게 array의 반복문을 돌리는 데 사용합니다. array를 돌리는 기본적인 for문은 다음과 같습니다. for .. of 구문을 사용할 때에는 array1[i] 할 필요없이 바로 i만 출력해도 인덱스가 아닌 인덱스의 값이 바로 출력이.. 2022. 7. 20.
[HTML5] script 태그의 async와 defer의 차이점 안녕하세요. 혀코입니다. 이번 시간에는 script 태그의 async와 defer attribute의 차이점에 대해서 알아보겠습니다. 웹사이트의 어느 한 페이지를 로드할 때, html 파일의 첫번째 줄부터 마지막 줄 까지 차례대로 파싱(parsing)해서 웹브라우저에 출력해 줍니다.이때, JavaScript 코드의 경우, 대부분의 경우 body 태그 안의 태그(element)들을 잡아서 변형을 해야하는 경우가 대부분인데 JavaScript 코드가 head 태그 안에 있을 경우, body 태그의 태그들이 아직 읽히기 전이여서 에러를 발생하게됩니다. 그래서 이러한 현상을 방지하기 위해서 body 태그의 맨 마지막 부분에 JavaScript를 추가합니다. 그러나 이 경우에 웹페이지 사이즈가 아주 큰 경우, 웹.. 2022. 7. 19.
[JavaScript] console 메서드 10가지 안녕하세요. 혀코입니다. console.log를 코드 테스팅을 할때 자주 사용하는데요. log 메서드 외에 더욱 효과적으로 출력을 하게 도와주는 여러가지 메서드가 있습니다. 그래서 이번 시간에는 console의 메서드 10가지에 대해서 알아보겠습니다. console.log() console.dir() console.count() console.trace() console.assert() console.table() console.group() console.time() console.warn() console.error() 1. console.log() console.log()는 제일 많이 사용하는 메서드 입니다. JavaScript를 배울 때 Hello World를 찍어보면서 사용해 보는 거라 다들 아.. 2022. 7. 18.
[CSS3] 레이아웃 오류 디버깅하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 레이아웃 오류 디버깅하는 방법에 대해서 알아보겠습니다. JavaScript 에서는 오류가 나면, console.log를 찍어서 연산이 잘 되고 있는지 확인하는 과정이 있으나, 웹사이트의 레이아웃이 오류가 나면 각 노드당 css 속성이 잘 들어가 있는지 확인하느라 시간이 상당히 오래 걸리는 편입니다. 그래서 레이아웃 오류시 디버깅을 하려면 두가지 방법을 추천 드립니다. 첫번째, 모든 노드에 outline을 적용해서 레이아웃에 오류가 있는지 확인해 봅니다. * { outline: 1px solid orange !important } 두번째, 모든 노드에 background 을 적용해서 레이아웃에 오류가 있는지 확인해 봅니다. * { background: rgb(0 0 .. 2022. 7. 17.

티스토리툴바