[Swift 입문] 3. ImageView 만들고 에뮬레이터로 확인하기

이번에는 ImageView를 이용해 이미지를 추가하고, 현재까지 만든 앱을 에뮬레이터에서 실행해보겠습니다.


1. ImageView

ImageView는 이름에서 느껴지듯이 이미지를 보여주기 위한 Object입니다.

앱에 이미지를 추가하는 방법은 아래순서입니다.

[ Assets.xcassets 폴더에 이미지 추가 -> 이미지뷰 생성 -> 이미지뷰에서 폴더의 이미지를 갖고옴 ]

위의 순서입니다. 간단하네요.

저는 제 블로그 화면을 이미지로 쓰겠습니다.



왼쪽에 "Assets.xcassets" 폴더를 클릭하시고, 원하는 이미지(저는 블로그 스샷)를 폴더로 옮겨주시면 1단계 끝



이전에 Object 추가하는 방법과 동일하게, "ImageView" 를 추가해주세요.


그리고 위 사진처럼 우측에 Image의 아래 화살표를 클릭하면 조금전 "Assets.xcassets" 폴더로 옮겼던 이미지가 존재하는 것을 볼 수 있습니다.


클릭해주세요.



짠~!



조금 아래 공간이 많이 비네요...


Text View도 추가해주겠습니다. ㅎㅎ



뿝~!



2. 에뮬레이터로 실행해보기

Xcode의 상단을 보면 아래 그림과 같은 부분을 볼 수 있습니다.

어떤거냐면 Build된 앱을 어떤 IOS 디바이스에서 실행시켜볼 것인지를 선택하는 부분입니다.


클릭해보시면 아래그림처럼 다양한 디바이스들이 보여지고요.


저는 아이폰이 없는 관계로 나중에 저의 iPad에서 동작시킬 예정이기에 iPad 6세대를 선택했습니다.



끝났으면 아래 그림처럼 시작버튼을 눌러주세요.





그럼 위와같이 Build 중이라는 진행바가 보이게됩니다. 


두둥~


빌드가 끝나면 위와같이 아이패드 에뮬레이터가 부팅되는 것을 볼 수 있습니다. 그리고 부팅이 완료되면 자동으로 아래와 같이 만든 앱이 실행되는 것을 볼 수 있습니다.



ㄷㄷ;;



 



 실패해버렸습니당...;;


 이걸노린건 아니었는데,,,










storyboard 하단에 디바이스를 정해주는 곳이있습니다.. iPhone8로 되어있어서 iPad로 변경해서 다시 해주었습니다...ㅠㅠ





이번에는 다행히 이쁘게 잘 나왔네요 ㅎㅎ


이상으로 이번 포스터를 마치겠습니다.


다음포스터에서는 아래 같이 표시되는 아이콘 디자인을 바꾸는 방법을 알아보도록 하겠습니다~!!


2019/03/18 - [프로그래밍/Swift] - [Swift 입문] 1. 시작하기

2019/03/18 - [프로그래밍/Swift] - [Swift 입문] 2. Project 시작하기




2019/03/18 - [프로그래밍/Swift] - [Swift 입문] 1. 시작하기

2019/03/18 - [프로그래밍/Swift] - [Swift 입문] 2. Project 시작하기


[Swift 입문] 2. Swift, Project 생성과 View 수정하기

1. project 시작하기

시작에서 Start Project를 누른 후 IOS로 시작하곘습니다.

아래와 같이 이동해주세요.


Next를 누르면 아래와 같이 나오게됩니다.



Product Name가 실제 앱의 이름이 되는 부분이며, 나머지는 보이는 것 처럼 ㅎㅎ


프로젝트를 만들면 좌측 Project Navigator에 아래와 같은 파일들이 표시되는 것을 볼 수 있습니다.






.swift 파일은 swift의 소스파일이 됩니다.

storyboard는 GUI에 대한 부분입니다. (안드로이드 스튜디오에서 view를 만드는 부분같네요.)


< storyboard 파일 클릭시 화면 >



2. View에 Object 추가하기

아래 그림과 같은 순서입니다.

우측 상단에 버튼을 누르면 오브젝트를 추가할 수 있는 팝업이 보이게됩니다.

여기서 Label, TextArea등을 추가하여 화면에 갖고가면 그림 왼쪽과 같이 View에 새로운 Object가 추가되는 것을 볼 수 있습니다.



Object를 추가하고 클릭하면 우측에 해당 Object에 대한 설정창이 나옵니다.(영어...)


필요에 따라서 추가하고 만지작거려주시면 되겠습니다.



Object의 종류에 따라서 설정이 다 다르고, 너무 많다보니 하나하나 적기가 힘드네요.


꼭 필요한 내용만 틈틈히 적고 나머지는 그때그때 필요에 따라 구글링을 하는 쪽으로...



이번 글도 여기서 끝내겠습니다.


다음에는 많이 사용하는 ImageView와 TextView등을 추가하고 에뮬레이터로 실행까지 해보겠습니다.



2019/03/18 - [프로그래밍/Swift] - [Swift 입문] 1. 시작하기


[Swift 입문] 1. Swift 프로그래밍 시작

아이패드와 맥북에서 GUI로 조작할 수 있는 간단한 프로그램을 만드는 것을 목표로 하고있습니다.

배우면서 동시에 배운내용을 정리하는 용도로 작성하기 때문에 내용이 틀릴 수 있습니다.


1. Swift 시작하기

Xcode를 실행하고 먼저 맨 위에 [ Get started with a playground ] 를 클릭합니다.




시작은 Blank(빈파일) 에서 시작하겠습니다.


클릭하고, 적당히 저장위치를 설정하시면 아래와 같이 준비가 끝나게됩니다.



위와 같이 준비가 되면 이제 시작하겠습니다~!!



2. 변수와 상수

모든 언어의 시작은 변수와 상수에서 시작된다고 생각합니다.


선언방법에 있어서 다른 언어와 조금 차이가 있습니다.


C와 파이썬의 중간정도(?) 라고 저는 생각합니다. 왜냐하면, 변수임을 명시해줘야하지만, 어떤 타입의 변수인지를 명시할 필요는 없기 때문이죠.


var x = 10 let y = 10 x + y

위에서 var는 변수, let은 상수로의 선언을 의미합니다.


< 실행화면 >


3. 자료형

다른 언어와 마찬가지로 Swift도 자료형을 갖고있습니다.

자료형 선언에 있어서 특징은 아래와 같습니다.

1) 한번 정해진 변수의 자료형은 변경될 수 없습니다.
2) 변수 선언시 초기값이 있으면 알아서 자료형을 결정합니다.
3) 변수의 자료형을 정해줄 때에는 "var 변수명:자료형" 형태로 선언합니다.

아래는 예시 입니다.


위의 결과를 보시면 Float와 Double의 경우 우측에 표시된 값이 처음 입력한 초기값과 다른것을 알 수 있습니다.


C와 같이 자료형의 최대값이 존재하고, 넘어갈 경우 Overflow가 발생할 수 있다는 것을 알 수 있습니다.

( C언어처럼 운영체제가 32bit냐 64bit에 따라서 저장할 수 있는 범위의 차이가 발생할 수 있습니다. 물론 32bit는 아이폰 5까지입니다...)



일단 시작은 여기까지, 이후부터는 playground가 아닌 project 환경에서 시작하겠습니다.

#1. str.startsWith(searchString[, position])


매개변수섹션

searchString
문자열의 시작 지점에서 탐색할 문자열
position Optional
searchString을 탐색할 위치. 기본값 0.

반환 값섹션

문자열이 검색 문자열로 시작하면 true, 아니면 false.


< From : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith >



C언어가 사용하는 메모리 구조


XCode를 이용하였지만, 보는데에는 큰 지장이 없습니다.


1. C언어가 사용하는 메모리

C언어의 메모리 관리와 관련된 이미지를 검색해보면 정말 다양한 내용들을 볼 수 있었다. 근데 조금씩 다르다. 그래서 위키를 기본으로해서 내용을 증명해가는 방식으로 진행해보도록 해보겠다.


<출처 : https://ko.wikipedia.org/wiki/동적_메모리_할당>



위 이미지가 C언어의 메모리구조라고 나와있는 그림이다. 이미지에 나와있는 예시들을 통하여 실제 데이터의 주소를 알아보도록 하겠다.



2) STACK영역


먼저 지역변수가 저장되는 STACK영역이다.


   

< 좌측 : 코드     우측 : 실행결과 >

(왜인지 변수를 초기화 안해도 쓰레기 값이 아닌 0이 들어가있다. XCode라 그런가...?)


< 변수 cnt의 메모리상 위치 >


위키의 내용에 따르면 현재 cnt라는 지역변수가 저장되어있는 '0x7ffeefbff53c'라는 위치는 STACK영역의 가장 하단부분이 해당될 것이다.


그렇다면 STACK영역보다 아래(더 뒤에있는 영역)는?


         

< 좌 : 코드     우 : 실행결과 >


위 결과와 같이 이후의 영역의 내용을 불러와도 정상적으로 값을 불러오는 것을 보면, 이 부분 역시 해당 프로그램이 사용하는 영역이라는 것을 알 수 있다.


이부분에 대한것은 아쉽게도 위키의 이미지에서는 찾아볼 수 없다. 따라서 이부분은 나중에 확인해보도록 하자.



그럼 다음으로 넘어가기전에 왜 이 영역을 STACK영역이라고 부르는지 알아보도록 하자.


이유는 다음 코드와 메모리의 상태를 보면 알 수 있다.


< 코드 >



< 메모리 공간상 위치 >


위의 내용을 보게되면, cnt1 ~ 3의 순서로 선언했음에도 메모리에는 cnt3이 가장 먼저 보이는 결과를 알 수 있다.


이것은 STACK이라는 영역은 선언되는 변수에게 공간을 할당할 때, STACK영역의 가장 마지막 부분부터 공간을 할당한다는 것을 의미한다.


만약 STACK이라는 자료구조를 알고있다면, 쉽게 이해가 가능할 것이다.


다만 이게 정해진 규칙은 아니다. 메모리관리는 운영체제에 따라 달라질 수 있다. 지금 내가 작업중인 맥OS(XCode)에서는 위와같이 작동했지만, 다른 운영체제, 다른 IDE에서는 다른 규칙에 따라서 작업을 수행할 것이다.



그런데 문제가 있다. 바로 배열을 선언했을 때인데, 아래 그림을 보면서 생각해보자.


< 코드 >


< 메모리 공간상 위치 >


이제까지 내용을 기본으로하면 [ cnt3 - arr2 - cnt2 - arr1 - cnt1 ]의 순서로 메모리에 데이터들이 쌓여있어야 하는데, 실제 데이터의 위치를보면, [cnt3~1 - arr2 - arr1] 순서로 스택에 데이터가 쌓여있는 것을 볼 수 있다. 또한, 각 데이터들의 사이사이에 불필요해보이는 메모리 공간이 보이는 것을 알 수 있다.


어째서일까? 한번 생각해보도록 하자


3) HEAP 영역

HEAP영역은 [ 동적 메모리 할당 ]이라는 녀석을 다루는데 있어서 빠질 수 없는 장소이다. 왜냐하면 malloc이라는 함수를 통해서 변수가 할당받는 메모리가 HEAP영역이기 때문이다.



< 코드 >


다음과 같은 코드를 작성했다고 해보자, [ int *heap_data ] 라고 선언한걸보면, heap_data 라는 녀석은 특정한 주소값을 갖고 있다는 것을 알 수 있다. 그렇다면 메모리 영역에서 이것들이 어떤식으로 존재하는지 확인해보자.


< heap_data 의 메모리상 위치 >



< *heap_data의 메모리상 위치 >


위에 두 그림 중 위에있는 이미지를 먼저 확인해보자, 


위에있는 녀석은 주소값을 갖고있는 포인터이다. 64bit 컴퓨터에서 메모리 공간을 포인팅하기 위해서는 동일한 64bit가 필요하다. 따라서 총 8byte의 공간이 할당되었다.


리틀엔디언 방식을 따르기때문에 뒤에서부터 두개씩 읽어야하는데, 읽어보면 [ 00 00 00 01 00 64 1A E0 ]  라는 주소값을 갖고있는 것을 알 수 있다. 그럼 해당주소를 확인해보자.


두번째 그림이 해당주소를 확인해본 결과이다. (놀랍게도? 아니면 당연하게도?) 해당 주소에는 코드에서 지정한것과 같은 값이 저장되어있는 것을 알 수 있다.




그럼 정리해보자, C언어에서 데이터를 참조하기 위해서는 변수가 필요하다. 여기서 heap_data라는 녀석은 하나의 포인터 변수이다. 이녀석은 이전에 말했던 STACK영역에 존재한다.


하지만, 이 녀석이 가리키고있는 데이터[ *heap_data ]는 동적할당받은 HEAP영역에 존재한다.




4) STACK과 HEAP의 확장

C언어의 메모리에 대해서 관심을 갖고 찾아보다보면 아래와 같은 그림을 볼 수 있다.


이 그림에서 중점적으로 봐야할 부분은 바로 회색 화살표이다. 그렇다고 'HEAP영역은 위에서 아래로 데이터 공간을 할당하고,  STACK영역은 아래서 위로 데이터 공간을 할당한다.' 라고 하는 것은아니다. 


다만 OS라고하는 운영체제는 미래를 알지는 못해서 프로그램이 수행되는 과정에서 얼마만큼의 동적할당이 발생할지, 스택영역은 정확하게 얼마만큼이 필요한지 정확하게 알지 못한다. 그렇기 때문에 적당한 메모리를 할당하고, 이후 추가적으로 메모리가 필요할 경우 두 위 그림과 같은 방향으로 프로그램이 가용할 수 있는 메모리 크기를 확장한다.


그렇다면 HEAP영역을 무한히 늘리면 언제가는 스택영역을 침범하지 않을까? 하는 의문이 발생한다.


생각해보자.



'프로그래밍 > C' 카테고리의 다른 글

C언어 메모리 구조 - 실제 메모리로 확인하기 (1/3)  (4) 2019.01.03
  1. 피망IT 2020.02.10 08:51 신고

    혹시 정리가 잘되있어서 그림을 인용하고 출처를남겨도 될까요?

  2. 하루히즘 2020.02.18 18:32 신고

    뭐야 더 적어줘요

  3. IYK2h 2020.08.03 08:26 신고

    메모리 공간상 위치를 확인하시면서 포스팅해주셔서 너무 쉽게 잘 봤습니다.
    혹시 메모리 공간상 위치를 확인하는 법은 어떻게 해야 하는지 알 수 있을까요?ㅎㅎ
    감사합니다!

  4. tky7068 2021.02.24 21:19 신고

    참고되었습니다. 감사합니다. ^^

SCP를 이용한 파일 전송

SSH 방식을 이용하여 파일을 전송하는 방식으로 SSH와 동일한 22번 포트를 기본으로 합니다.

SCP를 이용하여 파일을 전송하기 위해서는 수신받는 측에게 인증키 또는 암호를 통해 인증을 해야합니다.


사진1) 위쪽은 송식측(맥북) 아래쪽은 수신측(아마존 aws)


scp를 이용하여 datafile.txt 라는 파일을 아마존 서버로 전송하려고 합니다.




사진2) 인증 및 전송

아마존 서버로 파일을 전송하기 위해서는 등록된 '키'가 필요합니다.

scp -i 'Key File' userID@아이피주소:저장된 경로

위와 같은 방식으로 Key 정보를 같이 전송하면 정상적으로 인증이 됩니다.

아래 사진을 보시면 파일이 전송되고 정상적으로 수신된 것을 알 수 있습니다.




사진3) 패스워드 인증시

패스워드를 통한 인증을 사용할 경우에는 -i 'Key File' 부분을 생략해주시면 됩니다.

그럼 우분투에 등록된 패스워드를 통하여 접속이 가능합니다.

다만, 아마존과 같이 인증키를 통해서만 접속이 가능한 환경에서는 불가능한거 같습니다~!




'운영체제 > 리눅스 명령어' 카테고리의 다른 글

[Linux] scp 명령어 사용법  (0) 2019.05.29
[Linux] SCP를 사용한 파일전송  (0) 2019.01.03

파이썬을 이용한 웝 크롤링 (python web crawling with Selenium)

본문에서는 파이썬을 이용한 웹 크롤러 제작에 대한 내용을 다룹니다.

이전 포스터의 연장입니다. 내용 이해를 위하여 이전 포스트 확인 부탁드립니다.


1. 텍스트 데이터 수집하기

텍스트 데이터를 수집하는 방법은 비교적 간단한 편이다. 왜냐하면, 이전에 보았던 send_keys가 해당 개체에 값을 전달하는 것이었다면, text라는 녀석을 이용하여 손쉽게 해당 개체가 갖고있는 텍스트 정보를 갖고올 수 있기 때문입니다.

아래는 위키에서 네이버를 검색하고 검색 결과를 갖고오는 모습을 볼 수 있습니다.


보는바와 같이 겨우 7줄의 코드로 모든 과정이 수행됩니다.




< 코드 >

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome('./chromedriver.exe')
driver.get('https://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EB%8C%80%EB%AC%B8')
driver.find_element_by_xpath('//*[@id="mp_search"]/table/tbody/tr/td[1]/div/div/form/input[1]').send_keys('네이버')
driver.find_element_by_xpath('//*[@id="mp_search"]/table/tbody/tr/td[1]/div/div/form/input[1]').send_keys(Keys.ENTER)
print(driver.find_element_by_xpath('//*[@id="mw-content-text"]').text)



2. 이미지 데이터 수집하기

이미지 데이터 수집은 조금 복잡할 수 있습니다.

왜냐하면, 사이트마다 처리하는 방식이 많이 다르기 때문이죠.

저는 일단 가장 국내에서 대중적인 네이버를 대상으로 진행했습니다.


왼쪽이 코드고, 오른쪽은 파이썬이 제어하는 크롬화면입니다.


< 코드 >

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome('./chromedriver.exe')
driver.get('https://naver.com')
driver.find_element_by_xpath('//*[@id="query"]').send_keys('마동석')
driver.find_element_by_xpath('//*[@id="query"]').send_keys(Keys.ENTER)
driver.find_element_by_xpath('//*[@id="lnb"]/div/div[1]/ul/li[2]/a/span').click()

link = []
for i in range(1, 30):
    try:
        img = driver.find_element_by_xpath('//*[@id="_sau_imageTab"]/div[1]/div[2]/div['+ str(i) + ']/a[1]/img')
    except:
        img = driver.find_element_by_xpath('//*[@id="_sau_imageTab"]/div[2]/div[2]/div['+ str(i) + ']/a[1]/img')
    link.append(img.get_attribute('src'))


왼쪽 코드부 하단에 link 라는 리스트에 저장되는 내용은 오른쪽 이미지들의 이미지 링크입니다.


반복문내에서 이미지 주소를 갖고와서 바로바로 저장하는 방법보다는 한번에 이미지들의 링크를 수집한 후 이 링크들의 이미지들을 다운로드 하는 방식이 저는 더 편해서 이렇게 했습니다. (중간에 애러떠도 수정하기 쉬우니까요)


그럼 최종적으로 이미지는 어떻게 저장할까요?


파이썬의 내장 라이브러리인 urllib를 사용합니다.




이렇게하면, 현재 파이썬 파일과 함께있는 img폴더에 이미지들이 하나씩 저장되게됩니다. 어때요? 간단하죠?


import urllib.request

count = 0
for url in link:
    count += 1
    urllib.request.urlretrieve(url, './img/img'+str(count)+'.jpg')




다음이야기~

일단 초급과정은 여기서 마무리하겠습니다. 여기서 조금만 응용하면 거의 대부분의 간단간단한 기능들은 모두 구현이 가능합니다.

다음 중급자 코스에서는 Headless 크롤링과, 서버를 속이는 방법을 작성하겠습니다..




파이썬을 이용한 웝 크롤링 (python web crawling with Selenium)

본문에서는 파이썬을 이용한 웹 크롤러 제작에 대한 내용을 다룹니다.

개인 정리의 성향이 강하기 때문에 실무에서 사용하는 방법과는 다를 수 있으며, 자바스크립트등을 다루어야 하는 내용은 포함하지 않습니다.



1. 크롤링 환경 구축

 python3 버전과 selenium 라이브러리, 그리고 크롬드라이버가 필요합니다.

 파이썬은 사용을 위한 환경은 아나콘다 3.x버전을 설치하시는 것을 권장합니다. (포스터에서는 아나콘다 3.x 버전 설치시 따라오는 주피터 노트북 사용)
 Selenium은 jupyter notebook에서 [!pip install selenium] 명령으로 간단하게 설치가 가능합니다.

 크롬드라이버는 사용하는 OS에 알맞게 다운로드 후 파이썬 .py 또는 .ipynb 파일과 함께 두면 됩니다.  다운로드 링크 => 다운로드



2. 프로그래밍 기본


다음과 같이 jupyter notebook에서 selenium을 import하고, 아래의 방식으로 크롬드라이버를 실행 할 수 있습니다.

driver.get( URL )을 이용하여 원하는 페이지로 이동도 가능합니다.




그리고 여기서 오른쪽 클릭을 하면 [검사] 라는 녀석이 있습니다. "크롬 브라우저"에서만 가능합니다.



검사라는 녀석을 클릭하면 옆에 창이하나 생기는데, 이 후 검색어를 입력하는 부분에서 한번더 [우클릭+검사]를 눌러주면 아래 화면과 같이 특정 영역이 지정되는 것을 볼 수 있습니다.




위 사진에서 오른쪽 영역은 해당 페이지의 HTML문서 내용입니다. 그리고 이 HTML문서에서 검색어를 입력하는 영역에 대한 부분이 바로 파란색으로 지정된 영역임을 알 수 있습니다.


아래 그림과 같이 오른쪽 파란색 영역에서 [우클릭 - Copy - Copy XPath]를 누르면 해당 영역에 대한 XPath값을 복사해올 수 있습니다.





이렇게 복사해온 값을 파이썬 코드에서 사용합니다.


앞서 크롬드라이버를 갖고온 driver라는 녀석한테 find_element_by_xpath(' XPath ').send_keys(" 전송할 내용 ") 이라는 형태로 작성하면 아래와 같이 실행했을 때, 구글검색 영역에 send_keys에 입력한 글자가 자동으로 입력되는 것을 볼 수 있습니다.






입력을 했다면, [엔터] 버튼을 눌러서 검색결과를 확인해야겠죠?


아래 코드를 확인해주세요.



위에 xpath의 값은 전과 동일합니다. 다만, send_keys에서 문자를 전달하는 것이 아니라, ENTER키를 누른 액션을 전달한다는게 차이입니다.


즉, 위 코드로 검색창에 커서를 둔 상태로 ENTER키를 누른 효과를 만들 수 있는 것입니다.



일단 여기까지해서 크롤링의 가장 기본적인 부분을 다루어봤습니다.


바로 다음에 이어질 포스터에서는 크롤링을 통하여 실제 데이터라고 할 수 있는 것들을 긇어오는 방법을 알아보겠습니다.

MAC에서 VSCode를 사용하여 C언어와 C++을 사용하는 방법

전편에 이어서 작성된 글입니다. 본편에서는 디버거 연동을 다룹니다.


전편에 이어서 이번에는 디버깅을 하는 과정을 다루겠습니다.



[왼쪽에 벌레잡는 그림] -> [실행버튼 클릭시 위와같이 선택사항 표시] -> [C++(GDB/LLDB) 선택]]


클릭하면 launch.json파일이 생성됩니다.


기본 상태는 아래와 같습니다.



전편에서 tasks.json 파일을 수정해보셨기 때문에 대충 감이오실거에요.


설명은 중략하고 아래와같이 launch.json파일을 수정합니다.



{ // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요. // 기존 특성에 대한 설명을 보려면 가리킵니다. // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요. "version": "0.2.0", "configurations": [ { "name": "(lldb) Launch", "type": "cppdbg", "request": "launch", "program": "${fileDirname}/${fileBasenameNoExtension}.out", "args": [], "stopAtEntry": false, "cwd": "${workspaceFolder}", "environment": [], "externalConsole": false, "MIMode": "lldb", "osx": { "MIDebuggerPath": "/Applications/Xcode.app/Contents/Developer/usr/bin/lldb-mi" } } ] }


대략적으로 보면, 전편에서 build한 파일 [파일명.out]이라는 녀석을 디버깅 할 것이라는 거고, 디버깅에 사용할 디버거는 lldb입니다.


다만, 별도로 설치하지 않고, xcode를 설치하면서 따라온 녀석을 사용합니다.


마지막줄에 MIDebuggerPath 부분이 디버거의 위치를 지정하는 부분인데, 저같은 경우에는 저 경로에 디버거가 존재했습니다.


다들 비슷하겠지만, 혹시 저대로 설정하고 실행했을 때, 디버거를 발견하지 못했다는 애러가 발생하면, 확인해보시기바랍니다.



2018/12/29 - [IDE/VScode] - [MAC] VSCode로 C/C++ 사용하기 (1/3)

2018/12/29 - [IDE/VScode] - [MAC] VSCode로 C/C++ 사용하기 (2/3)



'IDE > VScode' 카테고리의 다른 글

task.json 파일  (0) 2019.07.01
[MAC] VSCode로 C/C++ 사용하기 (3/3)  (2) 2019.01.02
[MAC] VSCode로 C/C++ 사용하기 (2/3)  (8) 2018.12.29
[MAC] VSCode로 C/C++ 사용하기 (1/3)  (0) 2018.12.29
  1. 잘 보고 갑니다~~

  2. 세상에 2021.01.26 14:36

    사람 하나 살리셨습니다..
    고맙습니다.. ㅠㅠ

MAC에서 VSCode를 사용하여 C언어와 C++을 사용하는 방법

전편에 이어서 작성된 글입니다. 본편에서는 프로그래밍과 build까지를 다룹니다.


1. 파일생성 및 프로그래밍

화살표순서로 따라가주세요.



[왼쪽위 탐색기 클릭] -> [폴더 열기] -> [새로움 폴더] -> [생성된 폴더로 이동해서 열기클릭]


그럼 위와같이 새로운 작업영역이 생성됩니다.


그럼 먼저 hello.c hi.cpp 이라는 두개의 파일을 생성해보겠습니다. 그리고 두개의 파일을 담고있는 tutorial이라는 폴더를 생성하겠습니다.




위 사진에서 왼쪽 상단에보면 + 표시가 붙은 두 녀석을 볼 수 있습니다. 둘 중 왼쪽은 파일을, 오른쪽은 폴더를 생성하는 아이콘입니다.


오른쪽 폴더생성을 눌러서 tutorial을 생성하고 이 후 왼쪽 파일생성을 클릭해서 hello.c와 hi.cpp을 만들어주시면됩니다.


완료되면 위와같이 c파일은 C라는 표시가 cpp파일은 C++표시가 자동으로 생성됩니다.


< C언어 >


< C++ 언어 >



위와같이 C와 C++로 작성된 두개의 프로그램을 작성했습니다.


그럼 이제 실행할수있는 파일로 만들어야합니다.


우리 맥 유저는 리눅스의 친구 gcc와 g++을 이용하도록 하겠습니다.


명령어 : Command + Shift + b


클릭하시면 '실행할 빌드 작업을 찾을 수 없습니다~ '라고 나옵니다. 그녀석을 클릭해주시고, '템플릿에서 tasks.json파일 만들기' 클릭, 'Others' 클릭



여기까지 잘 따라왔다고 생각합니다~


이놈을 클릭하게되면 왼쪽에 tasks.json파일이 생성됩니다. 클릭해서 들어가보시면 아래와 같이 되어있습니다.



맞이시죠?


우리는 요놈을 아래와 같이 수정합니다.


{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "build_gcc", "type": "shell", "command": "gcc", "args": [ "-g", "-o", "${fileDirname}/${fileBasenameNoExtension}.out", "${file}" ], "group": { "kind": "build", "isDefault": true } }, { "label": "build_g++", "type": "shell", "command": "g++", "args": [ "-g", "-o", "${fileDirname}/${fileBasenameNoExtension}.out", "${file}" ], "group": { "kind": "build", "isDefault": true } } ] }

위에서부터 tasks.json파일을 천천히 한번 보겠습니다.

 4번 줄) "tasks" :  -> 뒤에 오는내용이 수행할 작업에 대한 내용입니다.

 6번 줄) "label" :  -> 중괄호로 묶여있는 부분의 이름입니다. 이 후 Command + Shift + b 를 눌렀을 때 표시되는 내용이기도 합니다.

 7번 줄) "type" :  -> 작업이 수행되는 공간입니다.

 8번 줄) "command" :  -> 작업공간에서 수행할 명령입니다.

 9번 줄) "args" :  -> 위에 command에 적어준 명령의 파라미터를 넣어줍니다.

 10번 줄) "-g"  -> 디버깅을 위한 옵션입니다.

 11번 줄) "-o"  -> 출력파일의 이름을 정의해줄때 사용합니다.

 12번 줄) "${fileDirname}/${fileBasenameNoExtension}.out"  -> 파일의 현재 디렉토리에 파일명.out 파일을 생성합니다.

 13번 줄) "${file}"  -> 현재 파일을 의미합니다. 해당 파일이 여기서는 gcc의 입력이 됩니다.


14번째 줄 부터는 현재와는 상관없는 부분이며, 아래의 C++을 위한 g++설정은 gcc와 동일합니다.


이렇게 tasks.json파일을 완성하고 저장하신 후 다시 hello.c파일로 돌아와 Command + Shift + b 명령을 클릭해보세요.




짠~! 방금 설정한 두 task가 보이게됩니다.


작업에 따라 C언어로 작성된 녀석은 gcc로, C++로 작성된 녀석은 g++로 build해주시면 됩니다~!


build 작업이 끝나면 좌측에 다음과 같이 두개의 파일이 새로 생긴것을 확인 할 수 있습니다.




그럼 마지막으로 실행은 어떻게할까?


간단합니다. tasks.json파일을 다시 조금 손봐주시면 됩니다.


아래와 같이 말이죠.



{ { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "build_gcc", "type": "shell", "command": "gcc", "args": [ "-g", "-o", "${fileDirname}/${fileBasenameNoExtension}.out", "${file}" ], "group": { "kind": "build", "isDefault": true } }, { "label": "build_g++", "type": "shell", "command": "g++", "args": [ "-g", "-o", "${fileDirname}/${fileBasenameNoExtension}.out", "${file}" ], "group": { "kind": "build", "isDefault": true } }, { "label": "exec", "type": "shell", "command": "${fileDirname}/${fileBasenameNoExtension}.out", "group": { "kind": "build", "isDefault": true } } ] }


큰 차이는 없습니다.


마지막에 exec라는 녀석을 추가했을 뿐이니까요.


이렇게 해준 후 다시 Command + Shift + b를 클릭해주시면 exec라는 녀석이 등장합니다. 그리고 실행~!




그럼 하단 터미널에 C언어로 작성된 프로그램이 실행된 결과를 알 수 있게됩니다~!!!!


후~ 그럼 다음 포스팅에서는 디버깅 설정에대해 말씀드리겠습니다.


2018/12/29 - [IDE/VScode] - [MAC] VSCode로 C/C++ 사용하기 (1/3)


'IDE > VScode' 카테고리의 다른 글

task.json 파일  (0) 2019.07.01
[MAC] VSCode로 C/C++ 사용하기 (3/3)  (2) 2019.01.02
[MAC] VSCode로 C/C++ 사용하기 (2/3)  (8) 2018.12.29
[MAC] VSCode로 C/C++ 사용하기 (1/3)  (0) 2018.12.29
  1. Younghoon Ji 2019.01.16 10:14

    안녕하세요, 올려주신 VScode 글 저에게 많은 도움이 되었습니다. 혹시, 3편 디버깅 설정은 언제 쯤 볼 수 있을까요? 명쾌하게 설명된 곳이 잘 없네요..

  2. 안녕하세요 2019.07.01 15:01

    tasks.json에 복사붙여넣어야 할 부분이 복사가 안되서 ㅠ 복사 가능하게끔 댓글에 달아주실 수 있을까요 .. 붙여넣기가 안되서 타이핑 하기가 힘드네요

    • 뒹굴뒹굴 YoungQ 2019.07.01 23:40 신고

      플러그인 때문에 복사가 안되나보네요.
      아래 글에 첨부파일로 올렸습니다.
      말씀해주셔서 감사합니다.

      https://youngq.tistory.com/43
      (VScode 카테고리에 올라온 글입니다.)

  3. beginnger 2020.04.15 13:28

    제대로 된 정보 찾기 어려웠는데 올려주셔서 감사합니다^^

  4. ㅇㅇ 2020.05.19 13:35

    hello.c 는 .out이 정상적으로 생성되는데 hi.cpp 는 g++을 생성하는 창이 안뜹니다(gcc만 작업하는 창이 뜸) 어떻게 해야하나요?

  5. 2020.07.30 22:35

    설명 엉망이네..

    • ; 2020.12.15 11:59

      아니 열심히 잘알려주시려고 하시는거 같은데 왜 이렇게 힘빠지는 얘기를 하는지 모르겠네 본인은 이런 블로그 비슷한거라도 만들어서 남들한테 좋은 정보 공유한적 있는거처럼 행동하지마세요

  6. khk5980 2020.11.17 17:23

    유용한 글 되게 잘 배우고 가여

+ Recent posts