윈컴이의 컴퓨터 이야기

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-propsNext.js에서 데이터를 가져올 때 사용하는 방식 중 getServerSideProps와 getStaticProps를 TypeScript로 작성한 예제 코드를 찾기 힘들어 간단히 정리해보았습니다. getStaticProps 빌드 시(npm run build) 한 번만 호출되기 때문에 빌드 후 바뀌지 않는 내용이 있는 페이지에서 사용하면 됩니다. 당연히 빌드시 한 번 호출되고 정적 파일로 생성되기 때문에 getServerSideProps와 비교해서 성능에서 우월합니다. 예제 코드 import { GetStaticProps, InferGetStaticPropsType } fr..

이전 글에서 Vercel로 Next.js 프로젝트를 배포하는 방법을 알아보았습니다. 이번에는 배포한 프로젝트에 도메인을 연결하는 방법을 정리하였습니다. Vercel 대시보드의 메뉴에 있는 도메인 화면으로 들어가 Add 버튼을 클릭합니다. Buy를 누르면 구매도 가능하지만 다른 곳에 비해 가격이 비싸므로 저는 타 도메인 업체인 호스팅케이알에서 구매한 도메인을 연결해보겠습니다. 도메인 연결을 원하는 프로젝트를 선택하고 CONTINUE 버튼을 누릅니다. 도메인이 연결되면 A Record 혹은 네임서버를 설정하라고 나옵니다. 저의 경우에는 호스팅케이알 사이트에서 DNS 레코드 관리에 A 레코드를 아래와 같이 추가하였습니다. DNS 레코드를 호스팅케이알에서 관리하기 위해서는 도메인 네임서버를 호스팅케이알 네임서버..

protcol IteratorProtocol { associatedtype Element mutating func next() -> Element? } IteratorProtocol은 Sequence 프로토콜과 강력히 연결되어있다. for-in 루프를 사용할 때 그 타입의 이터레이터를 사용한다. (예: Array, Set) let animals = ["Antelope", "Butterfly", "Camel", "Dolphin"] for animal in animals { print(animal) } var animalIterator = animals.makeIterator() // Iterator 클래스 인스턴스 생성 while let animal = animalIterator.next() { print..

가끔 범위 연산자를 사용할 때가 있는데, 그때마다 닫힌 범위와 열린 범위를 어떻게 사용하는지 헷갈려서 공식 문서에서 찾아 정리하였다. Closed Range Operator for index in 1...5 { print(index) } // 1 // 2 // 3 // 4 // 5 Half-Open Range Operator let names = ["Anna", "Alex", "Brian", "Jack"] let count = names.count for i in 0..

최근에 샘플 프로젝트에 @MainActor 키워드가 있어서 한번 찾아보았다. @MainActor는 메인 큐를 사용하는 글로벌 액터라고 한다. @MainActor로 마크된 메소드는 항상 메인큐에서 실행되기 때문이다. UI를 수정하기에 안전하다고 한다. 2개의 @Published를 가진 Observable Object를 생성할 수 있다. 둘 다 모두 값이 변경되면 UI 업데이트를 할 예정이기 때문에 UI 업데이트가 메인 엑터에서 일어나길 항상 보장하기 위해 전체 클래스를 @MainActor로 표시했다. @MainActor class AccountViewModel: ObservableObject { @Published var username = "Anonymous" @Published var isAuthent..

func getImage(completion: @escaping (UIImage?) -> Void) { // 이미지를 가져오는 코드 completion(nil) } getImage { [weak self] image in self?.artworkImageView.image = image } 위와 같은 코드가 있다고 생각해봅시다. 이 코드를 하위호환성을 유지하면서 Async, Await도 사용하기 위해 어떤 식으로 코드를 작성해야할까요? 해답은 Xcode의 Refactor에 있었습니다. Add Async Wrapper를 선택하게 되면 위의 코드를 아래와 같이 변경해줍니다. @available(*, renamed: "getImage()") func getImage(completion: @escaping (U..

Next.js 프로젝트를 쉽게 배포할 수 있는 서비스인 Vercel을 이용하여 프론트엔드 프로젝트를 배포해보았습니다. Vercel은 Heroku와 비슷한 서비스라고 생각하시면 됩니다. Vercel 사이트에 회원가입을 하고 배포를 원하는 Git 서비스를 선택합니다. 만약 해당하는 서비스가 없으면 Import Third-Party Git Repository를 선택합니다. 배포를 원하는 레포지토리를 선택한 후 Import를 클릭합니다. Vercel에서 표시될 프로젝트 이름과, Git 레포지토리에서 사용한 프레임워크 프리셋을 선택한 후 Deploy 버튼을 클릭하면 배포가 완료됩니다. .env와 같은 환경 변수들이 있다면 Environment Variables에 입력하면 됩니다. Vercel 서비스에서만 사용하는..

최근 나무위키 사이트의 변경으로 나무뷰어 앱의 몇몇 기능이 작동되지 않아 업데이트 후 앱스토어에 심사를 올렸습니다. 하지만 몇몇 부분에서 문제가 있다며 앱 업데이트가 거절되었는데요. 어떤 부분에서 거절되었는지, 이를 어떻게 해결하였는지 정리해보았습니다. Google Play 링크가 존재하면 안됩니다. Guideline 2.3.10 - Performance - Accurate Metadata We noticed that your submission includes information about third-party platforms that may not be relevant for App Store users. Specifically, your app includes Google Play referen..