아리콩다리콩의 즐거운 코딩생활

생소해서 어려운. 하지만 의외로 쉬운.

링크

① 데스크탑 앱 만들기 #1 - Vue CLI + Electron

② 데스크탑 앱 만들기 #2 - ExcelJS, SheetJS, js-xlsx, js-xlsx-style

③ 데스크탑 앱 만들기 #3 - ipcMain, ipcRenderer

④ 데스크탑 앱 만들기 #4 - ExcelJS, ipcRenderer, ipcMain, removeListener

 위 포스팅에서 Vue CLI를 이용해서 frontend(renderer)를 만들고, electron-builder를 이용해서 backend(Main)를 만들었습니다. 그리고 excel 파일을 읽는 라이브러리를 ExcelJS를 이용해서 로딩에 성공하였으니 이제 이 객체를 frontend로 보내줘야 데이터를 가지고 이것저것 만지작 거릴 수 있겠죠? 그 이후에 만지작 거린 객체를 다시 백엔드로 보내서 엑셀 파일에 저장해주면 제 프로젝트가 성공하게 됩니다.

 아, 그 전에 애초에 frontend에서 파일을 읽고 바로 수정하면 되지 않냐 생각도 했었는데 시스템 안에 있는 파일을 직접 읽고 쓰기 위해서는 일렉트론 같은 시스템 프로그램이 필요하더라구요. 시스템 프로그램이 없으면 프로젝트 로컬 폴더 안에 있는 내용만 접근 가능하고, 폴더 밖에 있는 파일들은 접근이 안되니 업로드하는 방식으로 밖에 없는 것 같았습니다. 애초에 기획이 자동화니까 일렉트론을 쓰기로 결정했었죠.

 그럼 이제 본격적으로 fontend와 backend의 데이터 교환 방법을 알아보겠습니다.

 일렉트론 공식 문서에 뭐라고 설명되어있는지 부터 확인하고 갈게요!

★ ipcRenderer - renderer 프로세스에서 main 프로세스로 비동기적인 통신을 합니다.

★ ipcMain - main 프로세스에서 renderer 프로세스들로 비동기적인 통신을 합니다.

 내용만 봐서는 뭔지 정확히 감이 오질 않습니다. 혹시 Javascript 좀 해보신 분들은 좀 익숙하실지도 모르겠습니다. 웹페이지에서 event emit, listen과 많이 닮아 있다고 생각이 들었거든요.

 그럼 공식 문서에 나와있는 테스트 코드를 확인해봅니다.

 다음 코드는 frontend에 있는 아무 파일에 넣으면 되는데 저는 App.vue 파일에 넣어서 테스트를 해보겠습니다.

// renderer 프로세스(웹 페이지)안에서
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // "pong"이 출력됩니다.

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // "pong"이 출력됩니다.
})
ipcRenderer.send('asynchronous-message', 'ping')

 ipcRenderer 테스트 코드에서 사용된 메소드는 on, send, sendSync로 3가지입니다.

- on: backend에서 frontend로 통신을 시도하면 받아 주는 메소드

- send: frontend에서 backend로 통신을 보내는 메소드

- sendSync: send메소드는 비동기적으로 보내지고, 이 메소드는 동기적으로 작동한다(동기, 비동기는 여기서 설명하기엔 내용이 복잡해지므로 패스!).

 아래 코드가 backend 파일인 background.js에 들어갑니다.

// main 프로세스안에서
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // "ping" 출력
  event.reply('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // "ping" 출력
  event.returnValue = 'pong'
})

 ipcMain 테스트 코드에서 사용된 메소드는 on, reply로 2가지입니다.

- on: frontend에서 background.js로 통신을 요청하면 받는 주는 메소드

- reply: on이 성공하면 frontend로 다시 통신을 넣어주는 메소드

 위의 테스트 코드를 실행했을 때의 결과는 다음과 같습니다.

▶︎ frontend(renderer) side

▶︎ backend(main) side

 frontend에서 pong 두 번, backend에서 ping 두번이 로그에 출력이 되었네요. 보내고 받고를 두번 했다는 뜻인데 코드를 한번 살펴볼게요.

 빨간색은 비동기(asychronous) 통신을 나타내고, 파란색은 동기(synchronous) 통신을 나타냅니다. 두 가지의 통신을 테스트하는 코드였네요. 그래서 frontend와 backend 콘솔에 pong이 2개, ping이 2개가 출력된 것입니다.

 자세히 좀 볼까요?

▶︎ 비동기 통신(분홍색, asychronous)

① frontend에서 ipcRenderer.send 메소드를 'asynchronous-message' 채널을 통해 'ping'이라는 데이터를 backend로 보냅니다.

② backend에서 ipcMain.on 메소드에서 정의한 'asynchronous-message' 채널을 통해서 인자를 받고 콘솔에 출력하네요.

③ 그리고 바로 ipcMain.reply 메소드를 'asychronous-reply' 채널을 통해 'pong'이라는 데이터를 frontend로 보냅니다.

④ 마지막으로 frontend에서 ipcRenderer.on 메소드를 통해 정의된 'asychronous-reply' 채널을 통해 받아진 'pong'이라는 데이터는 콘솔에 출력되는 것으로 끝이 납니다.

▶︎ 동기 통신(파란색, sychronous)

① frontend에서 ipcRenderer.sendSync 메소드를 'synchronous-message' 채널을 통해 'ping'이라는 데이터를 backend로 보냅니다.

② backend에서 ipcMain.on 메소드에서 정의한 'synchronous-message' 채널을 통해서 인자를 받고 콘솔에 출력하네요.

③ 그리고 event의 returnValue를 'pong'으로 입력하면서 자동적으로 frontend로 데이터가 리턴됩니다.

④ 마지막으로 frontend로 ipcRenderer.sendSync의 리턴 값이 'pong'으로 전달되었고 바로 콘솔에 출력됩니다.

 어떤가요? 일렉트론의 frontend와 backend이 통신을 어떻게 하는지 같이 살펴보았는데 이해가 되셨으면 좋겠네요. 저는 테스트 코드를 해보면서 생각보다 쉽다는 생각을 했습니다. ipc라는 용어 자체가 헷갈릴 뿐이죠.

 그럼 다음 포스팅에서는 제 프로젝트에서 ExcelJS와 ipcMain, ipcRenderer를 이용해서 어떻게 구현하였는지, 그리고 Listner가 중첩돼서 중복적으로 통신 이벤트가 발생하는 현상을 수정하는 방법들을 적어보도록 하겠습니다.

※ 동기와 비동기의 차이점은 생활코딩님께서 영상으로 너무 잘 설명해주셔서 링크를 남깁니다. 영상은 개념 설명이고 아래 더보기에 강좌 링크는 남겨놓았으니 동기, 비동기가 궁금하신 분은 참고해주세요!

다음 : 데스크탑 앱 만들기 #4 - ExcelJS, ipcRenderer, ipcMain, removeListener

더보기 : 생활코딩 - nodejs에서의 동기, 비동기, 콜백

프로젝트가 끝나갈 무렵, 코딩은 참 즐겁다는 생각이 들었다.

어떤 라이브러리를 쓰는 것이 좋을까?

링크

① 데스크탑 앱 만들기 #1 - Vue CLI + Electron

② 데스크탑 앱 만들기 #2 - ExcelJS, SheetJS, js-xlsx, js-xlsx-style

③ 데스크탑 앱 만들기 #3 - ipcMain, ipcRenderer

④ 데스크탑 앱 만들기 #4 - ExcelJS, ipcRenderer, ipcMain, removeListener

 6개의 엑셀 파일에 데이터를 매일 집어넣는 게 귀찮아서 시작한 데스크톱 앱 만들기 2탄입니다. 이번 글에서는 엑셀 파일을 일렉트론 background.js(웹앱으로 치면 backend 또는 server)로 불러오는 작업을 실행해볼 겁니다. 방대한 JAVASCRIPT 생태계에 분명 이와 관련된 라이브러리가 있을 거라고 생각했습니다. 그리고 구글링을 시작했죠. 그리고 처음 발견한 라이브러리가 SheetJS입니다.

 결과적으로 저는  ExcelJS 라이브러리를 사용하고 있습니다. 이유는 스타일 오류 때문입니다.

 SheetJS는 엑셀을 JSON 형식으로 뽑아서 읽고 쓸 수 있다는 점은 정말 편리합니다. 보기에 익숙하니 그 장점이 컸었죠. 엑셀 파일을 읽어서 JSON 형식으로 읽어오는 데는 대부분 문제가 없었습니다. 문제는 쓰기에서 발생했죠.

  위처럼 데이터가 들어간 부분의 대부분이 검은색이 되어버렸습니다. 고칠 방법을 찾아 이리저리 헤맸더랬죠. SheetJS에서 문제가 발생했으니 혹시 다른 라이브러리를 적용하면 어떨까 해서 js-xlsx도 써보았습니다. 하지만 결과는 같았죠. 더 찾아보니 xlsx-style 라이브러리도 있다길래 희망을 가지고 추가로 사용해보았습니다. 역시 실패.

 그리고 혹시나 SheetJS의 유료버전은 어떤가 싶어서 가격 정책을 알기 위해 구글링 해보았으나 찾는데 실패. 그래서 직접 이메일을 보내보았습니다. 답변은 

가격은 "누가"(회사 내부, 다른 회사의 계약 작업, 고객 대면, 공개), "무엇"(아래에 설명 된 기능 세트) 및 "어디"(서버 측 또는 브라우저 또는 인앱)에 따라 다릅니다.

라고 왔습니다.

 혼자 쓸꺼니까 얼마냐고 물어보려다가 왠지 비쌀 거 같기도 하고 굳이 돈을 내면서까지 만들어야 하나 생각도 들고 귀찮기도 해서 참았습니다. 그리고 첨부된 PDF 파일에 프로 버전에 대한 설명이 있었는데요.

 네, 돈주면 cell backgrounds와 borders를 customize 할 수 있다고 합니다. 회사에서 프로젝트를 받아서 만든다면 SheetJS 프로 버전도 써보고 싶다는 생각이 들었습니다. JSON은 편리하거든요.

 어쨋든 실패하고 다시 찾은 라이브러리가 ExcelJS입니다. 깃헙에 들어가서 쭉 읽어보니 코딩 초보인 저에게는 SheetJS보다 확실히 어려운 코드들이었습니다. 그래도 어떻게 하겠나요. 이 또한 넘어야 할 산인 것을.

 먼저 설치!

npm install exceljs
// or
yarn add exceljs

 background.js에 임포트 해줍니다. 파일을 로드할 거니까 경로 관리를 쉽게 하기 위해 path도 임포트 합니다.

import path from 'path'
import ExcelJS from 'exceljs'

 그럼 하단에 async function을 하나 만들어줍니다. 파일을 읽는 동안 기다려주지 않으면 오류를 내뿜거든요.

const filePath = '/Users/username/filepath/filename.xlsx'

async loadExcelFile(filePath) {
	const workbook = new ExcelJS.Workbook()
	await workbook.xlsx.readFile(filePath)
	const worksheet = workbook.worksheets[0]

	console.log(worksheet)
}

loadExcelFile(filePath)

 아래처럼 Worksheet 객체가 소환되면 성공!

 이제 객체에서 행(row)과 셀(cell)을 순회하면서 값을 받아오겠습니다.

const filePath = '/Users/username/filepath/filename.xlsx'

async loadExcelFile(filePath) {
	const sheetData = [] 

	const workbook = new ExcelJS.Workbook()
	await workbook.xlsx.readFile(filePath)
	const worksheet = workbook.worksheets[0] // 첫 번째 sheet 선택
    
	const options = { includeEmpty: true }

	await worksheet.eachRow(options, (row, rowNum) => {
		sheetData[rowNum] = []
		row.eachCell(options, (cell, cellNum) => {
			sheetData[rowNum][cellNum] = { value:cell.value, style:cell.style }
		})
	})

	console.log(sheetData)
}

loadExcelFile(filePath)

 ExcelJS 라이브러리에서는 eachRow를 이용해서 각 행을 순회하면서 값을 가져오고, 각 행을 돌 때 다시 row객체에서 eachCell을 이용해서 각 cell의 내용을 가져옵니다. 행 또는 셀의 내용을 가져올 때 빈 셀의 값과 스타일도 가져오고 싶다면 options에 includeEmpty를 true로 설정하면 됩니다.

 이제 콘솔 창을 보면 잘 다듬어진 결과값이 보입니다. 깔끔하지요?

 다음 포스팅에서는 이 결과값을 가지고 FrontEnd와 BackEnd 사이에서 통신하는 방법인 ipcMain, ipcRenderer에 관해 다뤄보겠습니다. 그럼 안녕히!

다음 : 데스크탑 앱 만들기 #3 - ipcMain, ipcRenderer

오늘도 하나 해냈다..

시작은 업무 중에 매일 작성하는 엑셀 파일이 많아서 그 시간을 줄여보고자 함이었다.

링크

① 데스크탑 앱 만들기 #1 - Vue CLI + Electron

② 데스크탑 앱 만들기 #2 - ExcelJS, SheetJS, js-xlsx, js-xlsx-style

③ 데스크탑 앱 만들기 #3 - ipcMain, ipcRenderer

④ 데스크탑 앱 만들기 #4 - ExcelJS, ipcRenderer, ipcMain, removeListener

 저는 직장인입니다. 직장에서 근무를 하면 매일 작성해야 하는 문서들이 있죠. 매일 작성하다 보니 그런 생각이 들었습니다.

반복 작업하는 거 귀찮다.. 

 그래서 만들었습니다. 적당한 값을 입력받으면 나머지 파일에 그 정보들을 뿌려주는 방식이었습니다. 그런 것이 가능할 것이라고 생각할 수 있었던 계기는 웹사이트를 만들면서 다져진 것이랄까. 그 정도는 가능하지 않을까 하는 생각에 시작을 해보았습니다.

대략적인 프로그램의 내용은 다음과 같았습니다.

1. 프로그램을 실행한다.

2. 자동으로 엑셀 파일(6개)을 불러온다.

3. 그날 업무내용을 양식에 입력한다.

4. 입력한 내용을 적절히 엑셀 파일에 뿌린다.

5. 끝.

데스크톱 프로그램을 만들기 위해 electron이 필요하고, VueJS에 익숙하니 누군가 두 가지를 섞어 놓은 것이 있지 않을까 싶어서 검색!

 그리고 찾아냈습니다. 문서도 깔끔하게 되어있고 GitHub Star도 12,000개가 넘어 바로 설치를 해보았고 내용을 좀 살펴보다가 결론을 냈습니다.

탈락!

 이유는 electron이 2.0.4 version으로 설치가 되어서입니다. 최근 버전이 9.0.1인데 잘 모르지만 뭔가 문제가 생길 것 같은 느낌이 들어서 무서웠어요(문서를 작성하고 있는 2020.9.1 현재 10.1.0 버전까지 나왔습니다).

 그럼 이제 electron 최신 버전을 유지하면서 VueJS를 사용하는 방법이 무엇인가를 검색하다가 Vue CLI에 electron builder를 덮어 씌우는 방식으로 만들 수 있는 방법을 찾아냈습니다.

 Vue CLI는 VueJS를 표준화된 방법으로 시작할 수 있게 도와주는 데(여기서 CLI는 Command Line Interface를 말합니다) 맥의 경우 터미널에서, 윈도는 command창을 이용해서 쉽게 프로젝트를 시작할 수 있게 만들어줍니다.

 먼저, Vue CLI를 설치하고,

// 이미 설치되어 있으면 패스!
npm install -g @vue/cli
// OR
yarn global add @vue/cli

 그리고 잘 설치되어 있는지 확인!

vue --version

 저는 4.1.1 버전이지만 2020년 9월 1일 현재 4.5.4 버전이 최신입니다. 그럼 이제 버전 확인이 잘 되었으면 테스트 프로젝트를 하나 만들어볼게요. vue-electron-test 프로젝트를 만들어보겠습니다.

vue create vue-electron-test

 이것저것 설치하라고 나오는데 저는 코딩 습관을 누가 잡아줘야 하니까 Linter도 깔고, Router와 Vuex도 쓸 거 같으니까 같이 설치를 합니다. 그 이후에도 뭐 이것저것 물어보는데 ESLinter standard만 고르고 나머지는 계속 엔터 쳐서 넘겼습니다.

 여기에 electron builder를 입혀봅시다.

// 프로젝트 폴더로 이동
cd vue-electron-test
// electron builder 설치
vue add electron-builder

 설치를 시작하면 electron version을 선택하라고 나옵니다. 7, 8, 9 버전이 있으니 혹시 electron 이전 버전에 익숙한 분은 선택하시면 될듯합니다. 하지만 저는 잘 모르니까 최신의 안정적일 것 같은 9 버전을 선택합니다.

 electron builder를 설치하게 되면 노란색으로 보이는 파일 내용이 변하고 초록색 파일은 background.js파일이 생깁니다. 바로 이 파일이 데스크톱 앱에서 우리의 컴퓨터를 컨트롤해줄 영역이죠. 웹 앱으로 치면 backend 정도가 되겠습니다.

그리고 실행!

npm run electron:serve
// OR
yarn electron:serve

 짜잔!

다음 : 데스크탑 앱 만들기 #2 - ExcelJS, SheetJS, js-xlsx, js-xlsx-style

만드는 시간이 길어질수록 그냥 엑셀 파일에 데이터를 직접 넣을걸 하는 후회가 밀려왔다.

이 글은 API가 무엇인지를 잘 모르는 분들을 위해 이해를 목적으로 쓰였습니다.

 프로그래밍을 하다 보면 API란 단어를 참 많이 듣게 됩니다. 먼저 위키백과에서 뭐라고 정의하는지를 살펴볼게요.

API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.

 네, 저도 무슨 말인지 잘 모르겠으니까 어떻게 사용되고 있는지를 보면서 정의를 느낌으로 이해해보는 방향으로 설명해볼게요.

 먼저 쉽게 이해할 수 있는 API 하나를 살펴볼게요. 날씨입니다.

https://openweathermap.org/

 위 웹사이트는 API를 오픈해서 세계 날씨를 확인할 수 있는 곳입니다. 현재 날씨가 어떤지, 그동안 어땠었는지 알 수 있는데 어떻게 알 수 있는지는 아래와 같습니다.

api.openweathermap.org/data/2.5/weather?q={city name}&appid={your api key}

 위의 주소를 URL로 입력하면 날씨에 대한 데이터를 주는 방식입니다. 주소 내용 중에 {city name}에는 London 또는 Seoul 같은 도시의 이름이 들어가고 {your api key}에는 회원가입을 하면 무료로 주는 랜덤 문자열인 key값이 있습니다. 만약 현재 서울의 날씨를 확인하고 싶고 나의 app key가 "deOxndvhO201sAW" (임의로 대충 쳐봤습니다. 해봐도 소용없어요.)라고 한다면 주소가 아래 형식이 되겠죠?

api.openweathermap.org/data/2.5/weather?q=Seoul&appid=deOxndvhO201sAW

 자 주소가 완성되었습니다. 위에 주소를 입력을 하면 아래처럼 텍스트로 된 데이터를 던져줘요. JSON형식이라고 하죠.

{
	"coord": {
		"lon": 126.98,
		"lat": 37.57
	},
	"weather": [
		{
			"id": 800,
			"main": "Clear",
			"description": "clear sky",
			"icon": "01n"
		}
	],
	"base": "stations",
	"main": {
		"temp": 302.25,
		"feels_like": 306.05,
		"temp_min": 301.15,
		"temp_max": 303.15,
		"pressure": 1005,
		"humidity": 70
	},
	"visibility": 10000,
	"wind": {
		"speed": 2.11,
		"deg": 16
	},
	"clouds": {
		"all": 1
	},
	"dt": 1598359440,
	"sys": {
		"type": 1,
		"id": 8117,
		"country": "KR",
		"sunrise": 1598302594,
		"sunset": 1598350333
	},
	"timezone": 32400,
	"id": 1835848,
	"name": "Seoul",
	"cod": 200
}

 뭔가 길고 복잡한 것 같지만 대충 보면, 날씨는 Clear 하고 온도는 어떻고 하는 내용이 쭉 나열되어 있어요. 정말 자세한 정보를 간단한 방법으로 지속적으로 얻을 수 있다니 이 API만 가지고 있어도 본인이 필요한 방식으로 요리를 한다면 정말 유용하게 사용할 수 있을 것 같지 않나요?

 이제 대략적으로 감을 잡으셨나요? 위 정의를 다시 한번 확인해볼까요?

API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.

 우리는 URL 방식으로 https://openweathermap.org/ 라는 웹사이트에서 날씨 정보를 제공받았습니다. 이 정보를 우리가 만든 웹사이트나 응용프로그램에서 돌린다면 우리는 "API를 이용했다!"라고 할 수 있는 것입니다. 간단하죠?

 이렇게 외부의 응용프로그램이나 웹사이트의 기능을 통해 무어인가를 받는 것도 API의 종류이고, 나의 웹사이트의 경우 Front-End와 Back-End의 데이터 교환도 API 방식으로 만들 수 있고, 그것도 API라고 부를 수 있습니다. 또 누구나 쓸 수 있게 오픈되어 있는 API가 있는 반면에 접근을 제한해 놓은 API도 많죠. 그런 것들은 신청하고 승인을 받고 사용하게 됩니다.

 어떤가요? API에 대한 감을 잡는 정도가 되었으면 좋겠습니다. 감을 잡는데 너무 장황하게 설명을 한 게 아닌가 싶기도 하네요. 팁을 하나 드리자면 나라에서도 공공정보에 대한 데이터를 API를 통해 제공하고 있는데 어떤 내용이 있는지 대충 살펴보시면 본인에게 필요한 데이터를 찾을 수 있을지도 모르겠네요.

공공데이터포털

 오늘의 API 설명은 여기까지입니다. 코로나가 유행 중인데 모두 몸조심하시기를!

이 글은 PHP 공식 문서 사이트에서 함수를 보는 방법을 담고 있습니다.

 생활코딩을 통해 웹페이지 만들기 코스를 졸업한 사람이라면 한 번쯤은 PHP공식문서 사이트에 접속해 본 일이 있을 겁니다. 혹시 한 번도 공식 문서 사이트에 접속한 적이 없는 분이 있을까 봐 링크를 아래에 남겨드릴게요.

 코딩을 하다 보면 막히는 구간도 많고 커뮤니티에 질문을 올리면 공식 문서 링크를 남겨주시는 분들이 많습니다. 처음 공식 접하는 분들께서는 보자마자 가슴이 답답해지는 것을 느껴보셨을 거예요. 그 답답함을 지금부터 하나씩 같이 해결해보죠.

 사실 저 같은 경우에는 공식 문서에 들어가서 함수를 검색하는 일은 거의 없었습니다. 당연하게도 구글 검색을 하는 게 더 간단하니까요. 구글은 위대합니다. 혹시나 네이버나 다음에서 궁금한걸 자주 물어보는 습관을 가지셨다면 코딩에 관해서는 그냥 구글 이용하세요. 두 번 추천드립니다.

 그럼 배열 안에 값이 존재하는지 확인하고 싶을 때 어떻게 하는지 한번 볼까요? "PHP 언어에서 배열 안에 값을 찾고 싶다!"라고 구글에 입력하면 여러 가지 결과가 나옵니다. array_search, in_array 정도가 나오는데 저희는 공식문서를 보면서 배울 거니까 Manual - PHP라고 쓰인 웹페이지를 클릭하세요. 그럼 in_array부터 살펴보겠습니다.

 이제 들어가면 처음 보는 분들은 네 번째 줄부터 처음 보는 형식이 신기할 것이고, 익숙하신 분들은 바로 사용 방법과 리턴 형식을 파악했을 겁니다. (참고로 in_array, array_search와의 차이점을 간단하게 설명드리면 in_array는 boolean(true, false)을 리턴하고, array_search는 찾고자 하는 value의 key값을 리턴합니다.)

가장 처음 보이는 내용은 in_array 함수의 정의입니다. 배열 안에 값이 존재하는지 체크하는 함수라고 적혀있군요.

 두 번째는 함수의 구성입니다. 익숙해지면 이 구성만 보고도 함수의 역할을 확실하게 알 수가 있습니다. 하나하나 살펴볼까요?

• in_array : 함수의 이름입니다.
• mixed $needle: $needle은 찾고자 하는 내용입니다. 앞에 mixed는 이 $needle이라는 값이 "혼합형", 쉽게 말해서 자료형이 문자열, 숫자 등을 가리지 않는다는 뜻입니다.
• array $haystack : 값을 찾고자 하는 대상 배열을 말합니다. 이 값은 array여야 한다고 명시가 되어 있으니 배열만 가능합니다.
• bool $strict = FALSE : strict는 엄격하다는 의미입니다. 이 값이 참일 경우 값을 찾을 때 값의 type(자료형)까지 확인한다는 내용일 것 같습니다. 아래 parameters(매개변수)에서 확인해보도록 할게요. 이 strict의 경우 중괄호([])로 감싸져 있는데 생략이 가능하다는 표현이에요. 생략할 경우 기본값은 FALSE로 설정되어 있군요.
• : bool : 마지막에 콜론 이후에 bool이라는 말은 이 함수의 결과 값이 boolean, 참 또는 거짓으로 나온다는 뜻입니다.

 대부분의 경우 구성 설명을 보고 바로 함수를 사용해보면 됩니다. 이후에 나오는 Parameters, 매개 변수에 대한 설명은 대략적으로 훑고 넘어가면 됩니다. 그리고 Note는 꼭 챙겨보세요. 놓치기 쉬운 내용을 알려주거든요.

 needle parameter에 Note가 있군요. needle이 문자열일 경우에는 대소문자를 구분한다고 합니다. 영문으로 된 문자열을 찾을 때는 주의를 해야겠네요. haystack은 배열이라는 내용이고, strict가 TRUE일 경우 haystrck, 즉 검사 대상이 되는 배열에 들어있는 값을 찾을 때 types(자료형)까지 확실하게 비교해준다고 하네요. 그럼 또 궁금해집니다. 이 strict라는 값이 FALSE일 때와 TRUE일 때 값이 어떻게 달라지는지 알고 싶어서 스크롤을 밑으로 내리다 보니 아래 이런 내용이 나오네요.

// Example array

$array = array(
    'egg' => true,
    'cheese' => false,
    'hair' => 765,
    'goblins' => null,
    'ogres' => 'no ogres allowed in this array'
);

// Loose checking -- return values are in comments

// First three make sense, last four do not

in_array(null, $array); // true
in_array(false, $array); // true
in_array(765, $array); // true
in_array(763, $array); // true
in_array('egg', $array); // true
in_array('hhh', $array); // true
in_array(array(), $array); // true

// Strict checking

in_array(null, $array, true); // true
in_array(false, $array, true); // true
in_array(765, $array, true); // true
in_array(763, $array, true); // false
in_array('egg', $array, true); // false
in_array('hhh', $array, true); // false
in_array(array(), $array, true); // false

 쭉 보니 충격적인 내용이군요. strict값을 설정하지 않고 기본값인 FALSE일 때 예제의 경우 모두 true를 리턴하는 것을 확인할 수 있습니다. TRUE로 설정해야 key값이 아닌 해당하는 value값이 있을 때만 리턴 값이 true로 나오네요. in_array함수를 사용할 때는 가능하면 Strict를 TRUE로 체크하는 습관을 들이도록 해야겠네요.

 여기까지가 알고 보니 간단한 PHP 공식 문서에서 함수 보는 방법이었습니다. 여러 함수 중에 이 함수를 선택한 이유는 개인적으로 자주 쓰기도 하고, 간단하고, 주의사항도 있어서 공식 문서의 필요성에 대해 생각해볼 수 있을 것 같아서입니다. 이 예제를 통해 공식 문서 보는 방법이 이해가 잘 되었으면 좋겠네요. 그리고 함수를 설명하다 보니 type(자료형)에 대한 내용과 함수의 구조에 대한 내용에 대한 글도 필요하다는 생각이 들었습니다. 다음 글은 좀 더 기본적인 자료형과 함수의 구조에 관해 글을 써봐야겠어요.

 더 자세한 내용은 생활코딩 이고잉님이 만들어주신 영상에서 확인하세요. 2012년 버전이라 조금 다르지만 큰 내용은 크게 다르지 않으니 도움이 될거에요.

 이해가 되지 않거나 잘못된 내용은 댓글로 알려주세요. 그럼 안녕히!

※경고 : 이 블로그는 아직 프리랜서가 되지 못한 개발자의 짧은 경험과 얕은 지식만을 제공합니다.

 저는 프로그래밍을 전문적으로 공부해 본 적이 없습니다. 네 요즘 커뮤니티에서도 많이 창궐한다는 그 비전문가 코더, 그게 저입니다. 그래도 나름 전문직 종사자로서 직업도 있고 직장생활도 하고 있습니다. 아직까지 수입도 안정적이고 직장도 큰일 나지 않는 이상은 망하진 않을 것 같습니다. 그런데 저는 코딩을 배우고 있어요. 이유는 간단합니다.

재밌어요!

 거슬러올라가 3~4년 전쯤 직장을 길게 쉬게 되는 기간이 있었습니다. 잘린 건 아니고 휴식이 필요했어요. 쉬다 보니 뭔가 새로운 걸 해보고 싶다는 생각이 들었고, 예전부터 항상 하고 싶었던 그것. 그게 코딩이었습니다. 시작을 어떻게 해야 할지 조차 모르던 시절이었죠. 돈은 벌어놓은 게 있으니 일단 맥북을 사고 컴퓨터를 열었습니다(저도 한국인입니다. 장비부터 사죠). 그리고 구글에게 물어봤죠. 어떻게 하면 코딩을 시작할 수 있는지. 지금 보면 다들 친절하고 자세하게 설명을 한 글이었지만 그 당시에 저는 PHP가 뭔지, 언어가 뭔지, 스크립트는 뭔지 터미널은 또 뭔 지조차 모르는 올챙이, 그 이전 상태였다고 보시면 됩니다. 그래도 포기하지 않고 1시간 정도 찾아본 거 같습니다. 그리고 찾아냈습니다. 코딩을 모르는 중학생도 코딩할 수 있게 만들어주는, 심지어 무료인 "생활코딩"을!

 이고잉님은 저의 구세주입니다. 따뜻한 목소리로 저를 코딩의 세계로 안내하셨죠(가끔은 꿈나라도 여행할 수 있었어요). 그리고 제가 평소에 한글로 있었으면 하는 웹사이트를 제 손으로 구현하는 데 성공했습니다. 대략 3년 정도 운영하고 있는 것 같아요. 많지는 않지만 저와 같은 직군의 전문가들이 꾸준히 들어와서 서비스를 이용해주고 있습니다. 뿌듯했죠.

자가발전의 시작

 그리고 생활코딩의 강의를 듣고 난 후 구글 신의 힘을 빌어 프레임워크를 간단하게나마 이용할 수 있게 되었습니다. "웹사이트에는 이런 게 필요하지!"라고 생각하던 것들이 모두 구현이 되더군요. 신기했습니다. 저 혼자지만 웹사이트를 혼자 개발하는데 드는 시간이나 노력이 배로 줄어들더군요. 얼마 전에는 데스크톱 애플리케이션을 만드는 데 성공했고, 조만간 충분한 시간을 들여 flutter를 배워볼 생각입니다. 이렇게 스스로 자가발전을 하기까지 오랜 시간이 걸렸네요.

게으르면 욕먹는다

 1년 전인가? 오픈채팅방에서 모르는 내용을 질문하는데 "그거 정식 문서에 나와요", "정식 문서부터 정독하고 오세요"라는 말을 몇 번 듣고 나니 자신감이 뚝 떨어져서는 질문을 못 올리겠더군요. 네, 저도 정독.. 시도해 보았습니다. 사실 무슨 말인지 하나도 모르겠어요. 바로 거기서 큰 벽을 느꼈습니다. 그래서 갑자기 그런 생각이 들었습니다. 나처럼 한 단계 발전하는데 벽을 느끼는 분이 계실 것이다. 만약 그 벽이 내가 넘은 벽이라면 그런 분들이 그 벽을 좀 더 쉽게 넘을 수 있게 만들 수 있지 않을까?

그래서 누군가에게는 제 글이 도움이 되길 바라며 블로그를 시작합니다. 

프리랜서로 돈을 벌어보자

 제 목표는 프리랜스가 되서 돈을 벌어보는 것입니다. 프리랜서가 된 이후에 블로그를 만들어서 경험을 공유해볼까도 생각해보았지만, 막상 그때가 되면 제 하룻강아지 시절이 생각이 안 날 것 같아요. 지금도 예전에 제가 뭘 어려워했었는지 또렷이 기억하고 있지 않거든요. 또 포스팅하면서 제가 공부가 되니 그 또한 좋지 아니한가요?

 이제 얼추 제가 블로그를 만든 동기와 목적은 설명이 된 것 같네요. 자 그럼 앞으로 제 블로그는 코딩을 시작한지 얼마 안 된 1인 개발자를 대상으로 하는 내용이 포스팅될 예정이오니, 고수분들께서는 많은 다독임과 응원을, 저와 같은 초보 코더님들께서는 꾸준히 할 수 있는 용기를 주시면 감사하겠습니다. 응원은 저에게 힘이 됩니다!

돈 벌 수 있을 꺼야, 아마두.