잡코더

오픈소스 라이선스?? 오픈 소스는 전부 무료 사용 소스는 아니다?? 오픈 소스는 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것. 우리가 프로젝트에서 모든 것을 해결할 수는 없다. 그럼 수고와 노력을 덜 수 있는 공개된 소스코드가 사용하는데 이때 코드에는 저작권이 존재한다. 개인적으로, 상업적으로 무료로 사용할 수 있는 오픈소스를 잘 찾아야 한다. 라이선스에 Free라고 되어 있는 경우는 진짜 거의 없다. 그럼 무료로 사용할 수 있는 라이선스를 잘 찾아야 한다. 무료로 사용 가능한 오픈소스 라이선스 Apache License 제일 많이 보게 되는 라이선스 이며, MIT 에서 만들었다. 아래와 같이 개인 소스에 라이선스를 사용한다는 표시만 해주면 된다..

용어 정리 https://www.freeformatter.com/html-entities.html Complete list of HTML entities - FreeFormatter.com HTML Entity List Complete list of HTML entities with their numbers and names. Also included is a full list of ASCII characters that can be represented in HTML (i.e. printable characters). ASCII Characters (Printable) Only printable characters are displayed www.freeformatter.com 개발자로 살아가다 보면 ..

웹에서 많이 사용되는 벡터 이미지 포맷 (SVG) HTML, XML에서 사용할 수 있는 벡터 포맷이다. 웹에서 사용할 수 있다. 코드와 파일로 저장 되며, 코드를 파일로, 파일을 코드로 바꿀 수도 있다. CSS로 어느정도 Styling이 가능하다. JS로 이미지를 제어할 수 있다. 구글에서 SVG 이미지를 다운 받아 VS Code로 열게 되면 코드가 등장한다. 이 코드를 직접 구현만 하면 실제 이미지를 만들 수도 있다. 하지만 이 코드를 만들기 힘들기에 일러스트와 같은 벡터 이미지 편집 툴을 사용하는 것이다. 그 후 내보내기를 통해 이미지를 받고 코드로 수정을 가능캐 한다.

웹에서 많이 사용되는 비트맵 이미지 포맷 (JPG, PNG, GIF) 이미지가 용량이 커서 용량을 조절해서 사용하고 싶다. —> JPG 이미지가 투명도를 활용해야 한다. —> PNG 이미지가 움짤과 같은 애니메이션 효과가 필요하다 —> GIF 손실압축: 이미지를 손상 시켜 저장을 한다. 이미지의 용량을 획기적으로 줄여서 저장할 수 있다. —> 저장할 때마다 손상 시키기에 원본을 수정하는 것을 추천한다. 표현 색상도: 24비트, 1600만 가지 색상을 지원한다. 압축이 많이 필요할 때 획기적으로 용량을 줄일 수 있는 JPG를 사용한다. 비 손실 압축: 이미지를 손실 시키지 않으며 저장할 수 있다. —> 용량을 획기적으로 줄일 수는 없다. 표현 색상도: 8비트와 24비트 컬러를 선택해서 저장할 수 있다. 가..

웹에서 사용하는 이미지: 이미지는 비트맵과 벡터로 구분된다. 비트맵이미지 각 픽셀(화면에 나타나는 하나의 점)이 모여 만들어진 정보의 집합으로 레스터 이미지라고도 부른다. 픽셀단위로 화면에 렌더링(컴퓨터가 화면에 그림을 그려서 우리가 볼 수 있게 한다.)한다. Jpg, png, gif, web 등은 비트맵 이미지에 해당하며 대부분 비트맵 이미지이다. 벡터이미지 수학적 정보의 형태들이 만들어내는 결과물 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 갖고있다. 그래서 확대, 축소를 하더라도 깨지지 않는다 —> 해상도로부터 자유롭다. 수학적 정보(면과 선)만을 갖고 있어서 확대/축소를 하더라도 용량 변화가 없다. SVG 는 벡터 이미지이다.

Beautify 코드가 들여쓰기가 지저분해지는 경우가 존재한다. 이를 보완하기 위한 확장 기능이다. 바로가기 키를 설정 해야한다. Beautify file의 경우 파일 전체의 들여쓰기를 수정하기에 원치않는 수정이 일어날 수 있다. Beautify selection 은 선택한 부분만 수정한다. 그래서 Beautify selection 만 단축키를 설정하자. Code -> 기본설정 -> 바로 가기 키 여기서 사용할 수 있는 단축키를 모두 볼 수 있다. Live Server Go Live를 선택하면 출력을 웹에서 바로 확인할 수 있다. 우클릭으로 확인할 수도 있다.

웹 표준(Web Standard): W3C에서 지정한 웹에서 사용되는 표준 기술이나 규칙을 의미 이 표준 기술들을 기준으로 브라우저가 만들어 진다. 하지만, 표준 기술을 해석하는 차이와 새로운 기술삽입으로 조금씩 차이가 생긴다. 대부분의 경우 표준화 제정 단계의 ‘권고안(REC)’에 해당하는 기술을 표준이라 생각하면 된다. 웹 접근성 모든 사용자들(고령자, 장애인 등)에게 동등한 접근성을 같도록 웹 콘텐츠를 제작하는 방법 —> 영상 자막넣기, 마우스를 사용 못해도 키보드로 제어가능, 이미지에 대체 텍스트를 제공하는 방법 크로스 브라우징 웹을 이용할 수 있게 해주는 프로그램 내가 만든 홈페이지가 각 브라우저에서 동일한 결과물로 출력이 되야하는데 이를 만드는 행위가 크로스 브라우징 이다. 조금은 다르게 구동..

강의 자료 블로그 https://heropy.blog/ HEROPY 웹디자인과 웹개발 기술을 공유하는 HEROPY 온라인 블로그입니다. 오프라인 지식 공유도 매회 진행합니다. 감사합니다. heropy.blog HTML: 뼈대를 담당하며 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적언어로 웹의 구조를 담당한다. CSS: 색상, 크기, 폰트, 레이아웃으로 예쁘게 꾸미기를 담당한다. JS: 콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 하는 프로그래밍 언어로 웹의 동적처리를 담당한다. HTML, CSS: 정적언어 (만들어져 있는 것만 갖고 화면에 표시한다.) JS: 동적언어 (상황에 맞게 꾸며 줄 수 있다.) 분업을 확실히 할수록 좋다.

회원가입이 완료되거나 긴 Segue로 연결된 ViewController를 한꺼번에 dismiss해야하는 경우가 발생한다. 처음으로 가는 방법인 것이다. 여기서 문득 의문이 생길 수 있다. Q. 그냥 마지막 페이지에서 첫 페이지를 present 하면 안되나?? A. 여러 페이지를 present한 경우 지금까지 거처온 페이지 들은 바로 뒤에 존재하고 있는 상태이다. 이는 resource 소모를 하고 있는 상태이다. dismiss를 한번 해보면 이를 바로 확인할 수 있다. 즉, 한꺼번에 여러 페이지를 dismiss 하는 것이 목적이다. 아래의 코드는 4페이지를 dismiss한 것이다. @IBAction func goFirstPage(_ sender: Any) { self.presentingViewControl..

TextField의 경우 제공하는 4가지 형식 말고 다양한 구성을 원하는 경우가 있다. 그중 한가지가 아래와 같이 밑줄을 넣고 underline을 만드는 경우가 있고, 클릭되었을 때 반응하게 만드는 경우도 존재한다. 아래의 코드에서는 viewSize와 color을 파라미터로 받게된다. 자체적인 viewSize를 사용하는 경우 다양한 폰에서 textField의 크기를 인식 못한다는 점을 발견했다. 그래서 호출하는 당시에 view.bounds.width를 파라미터로 보내면 된다. color은 원하는 컬러를 호출하는 곳에서 결정하도록 만들었다. 예를 들어, emailTextField: UITextField 에서 수정을 "시작할 때 혹은 끝낼 때" 호출되는 함수에서 색을 지정해주면 위의 그림과 같이 수정된다. ..

페이지를 구성하다보면 현재 FirstResponder이 누구인지를 판단해야 하는 경우가 발생한다. 그래서 직접 extension으로 구현해보았다. 원하는 상황에 currentFirstResponder()을 호출하게 되면 UIResponder에서 first에 해당하는 responder을 반환하게 된다. import UIKit extension UIView { func currentFirstResponder() -> UIResponder? { if self.isFirstResponder { return self } for view in self.subviews { if let responder = view.currentFirstResponder() { return responder } } return nil..

다양한 페이지에서 String에 조건을 주고 싶을때 정규화를 사용할 것이다. 이때 정규화는 어떻게 구성되는 지를 설명하겠다. class Normalization { // 회원가입, 로그인 등 Normalization의 모든 검증을 하는 type method static func isValidRegEx(regExKinds: String?, objectString: String?) -> Bool { guard regExKinds != nil, objectString != nil else { return false } var regEx: String = "" switch regExKinds { case "name": regEx = "^[가-힣]{2,10}$" case "birth": regEx = "^[0-9..

약관에 대한 내용을 DatailType의 case분류를 통해 확장성을 높힌것 같아 자랑하고 싶어서 올린다. 이용약관 상세페이지를 보려면 페이지를 이동하게 된다. 각 페이지에 약관 데이터를 넣는 것은 같은 형식의 코드를 여러번 사용해서 비효율 적이다. --> 약관동의에 대한 ViewModel로 데이터를 한번에 관리하고 어떤 case인지만 기재하면 된다. --> 약관 명을 보고 동의하는 페이지와 약관 상세페이지에서 동의하는 페이지 모두 동의한 것을 동일하게 인지하게 위해 instance property 보다 type property로 이를 선언하는게 용이하다고 판단함. 정답은 아니겠지만 생각을하고 코드를 짠다는 점 칭찬해~~ class TermsOfServicesViewModel { enum DetailTy..

Xcode에서 제공하는 system color이 존재하지만 실제 어플에서는 다양한 색이 필요하다. 그리고 storyboard에서 다양한 issue에 대한 색변경이 일어날 경우 코드로 작성해야하는 경우가 대부분이다. 코드에서 이를 수정하는 방법을 간단하게 살펴보자 개인적으로 Storyboard에서 지정색을 기록하고 "Recenly Used Colors"를 이용하는 것이 간단하다.

When viewDidAppear and viewWillAppear are not called. ViewController간의 이동을 한 뒤 다시 원래의 ViewController로 돌아오는 경우가 발생한다. 아래의 그림과 같이 ViewController에서 SecondViewController을 present하고 dismiss를 통해 다시 ViewController로 돌아오는 경우를 말한다. 이때 ViewController에서 viewDidAppear 과 viewWillAppear이 실행되지 않는 경우가 발생한다. 답은 fullScreen으로 불러오면 되는 것이다. ViewController을 옮기게 되면 위의 그림과 같이 화면이 존재하는 상태로 위를 살짝 덮는 형태로 되어있고, 뒤에있는 View는 A..

1. 신입을 위한 팁 기술 블로그 GitHub 프로젝트 경험 서비스 출시 2. 신입 채용시 면접관 기대 태도 (열정, 배우려는 자세) 잘한다 (잘 할 것 같다, 빨리 배운다) 3. 경력 채용시 면접관 기대 태도 (기본적인 성품, 지원 회사에 대한 철저한 조사) 잘한다 (실제로 잘하는 영역이 있다, 기술적 문제를 어떻게 해결했는가) 비지니스를 안다 (사용자 가치에 대한 고민을 함께할 수 있는가, 사회적 관점으로 새로운 기술의 등장배경과 가치를 파악하는가) 4. 공부할 때 보는 사이트들 최신 article이 많다. https://nshipster.com/ 퀄리티 좋은 자료가 많지만, 유료이다. https://www.objc.io/ objc.io Latest Blog Post Learn SwiftUI layo..

이제 받아온 데이터를 searchTerm에 넣기만 하면 된다. 현재 출력된 데이터는 snapshot.value에 해당하는 데이터이다. 우리가 필요한 것은 term과 timestamp를 키로 가지는 Dictionary 배열이 필요한 것이다. 우선 Dictionary array로 type casting을 시도하자. 우리는 사실 id를 필요로 하지는 않는다. 그래서 searchHistory의 values만 뽑아내서 사용할 것이다. 그JSON Decoder로 decode하여 [SearchTerm]으로 parsing 할 것이다. 다음과 같이 searchHistory.values를 Array로 type casting을 하고 decode할 데이터로 넣는다. 이때 SearchTerm의 배열형으로 parsing을 한다...

HistoryViewController 저장된 컨텐츠 목록 tabbar controller을 생성한다. Custom class로 지정한 뒤 TableView를 넣을 것이다. TableView에 TableViewCell을 추가하고 Label 하나만 넣자 간단하게 AutoLayout을 적용한 뒤 TableViewCell의 height를 86으로 지정하자. 셀 사이즈 지정이 가능함을 되새기기위해 사진으로 보여준 것이다. Custom cell을 만들어서 지정하고 Label과 searchTerm을 연결한다. 이제 HistoryViewController에 들어올 때마다 TableView의 reload 작업을 할려고 한다. 그렇다면 TableView를 변수로 담아놔야겠지 일단 데이터를 받아와보자 데이터를 정상적으로 ..

검색어 서버에 저장하기 우선 데이터베이스에 searchHistory를 추가시키고 db 변수는 이를 참조하도록 지정한다. 검색 결과를 담당하는 부분에서 작업하도록 하자. Id를 Firebase가 알아서 생성하도록 한다. 검색어를 넣는다. 검색한 시간 데이터도 넣는다. 시간 데이터는 Unix Timestamp를 이용한다. Unix Timestamp는 현재 시간을 유니크하게 표현해주는 놈이다. let timeStamp: Double = Date().timeIntervalSince1970 여기에서 값이 1049273.1438029 같은 수가 나오면 소수점 밑의 숫자를 제외시킬 것이다. 결과 다음과 같이 검색과 timestamp값을 firebase에 Write했음을 확인할 수 있다.