라니킴의 기록 남기기

인스타그램의 프로필 화면을 구현하고 있습니다. 프로필 화면을 CollectionView로 구현하기로 했습니다. 데이터가 많지 않아 TableView보다는 CollectionView가 더 적절할 것 같다고 판단했습니다. 상단 부분을 보면 사용자 피드 화면에서도 같은 UI가 사용되기 때문에 header를 xib 파일로 만들어서 재활용하기로 했습니다. 아래 이미지처럼 storyboard를 이용해서 UI를 구성했습니다. 사용자의 이름과 설명 글을 적는 부분에 따라서 header의 높이가 변경됩니다. 라니킴 라니킴의 인스타그램입니다. 이런식으로 최소 1줄, 최대 5줄 작성이 가능하고 label이 작성하는 글에 따라서 높이가 조절되도록 했습니다. 작성하는 글에 따라서 header의 높이가 자동으로 계산되서 UI에 ..

객체를 JSON 문자열로 인코딩하고 JSON 문자열을 객체로 디코딩하는 방법 iOS에서 Network 연결을 통해 데이터 전송, 데이터를 디스크에 저장하거나 서버에 데이터를 보내거나 하는 작업에서 JSON을 사용한다. 이전에는 xml을 사용했지만 이제는 대부분 JSON을 사용한다. 그러므로 데이터를 전송할 때 JSON 형식으로 인코딩하거나 디코딩해야 한다. 인코딩 & 디코딩 인코딩이란, 쉽게 객체를 JSON 문자열로 바꿔준다고 생각하면 된다. 반대로 디코딩이란, JSON 문자열을 객체로 바꿔준다고 생각하면 된다. 자동으로 Encode and Decode 하기 가장 간단한 방법은 Codable 프로토콜을 추가해 주는 방법이다. struct Person: Codable { var firstName: Stri..

ATS(App Transport Security)는 HTTP 연결의 기본 보안에 대한 변경 사항에 대한 설명이다. ATS 설정을 통해 네트워크 보안 레벨을 설정할 수 있다. ATS는 기본적으로 보안성을 높이기 위해서 안전하지 않은 연결은 허용하지 않는다. ☑️HTTP/ HTTPS HTTP로 연결하면 모든 데이터가 일반 텍스트로 전달된다. 비밀번호와 같이 보안이 중요한 데이터가 유출될 위험이 높다. 반면 HTTPS 연결 시에는 통신 시에 모든 데이터를 암호화해서 전달한다. 그렇기 때문에 Apple 기본 보안 설정에서는 HTTP로 연결을 막고 있다. 그래서 HTTP 연결이 필요한 경우 ATS 설정을 변경해주어야 한다. ATS 설정 NSAppTransportSecurity Setting에서 가능한 전체 키와 ..

WebKit View를 사용해서 HTML content 화면에 출력하기 storyboard에서 webkit View를 활용해서 HTML 콘텐츠를 화면에 표시하도록 UI를 구성해봤다. storyboard library에서 Webkit View 추가 Web View가 deprecated 되어 더 이상 사용되지 않는다. 앞으로는 WebKit View를 사용하시면 된다. textField에 url을 입력하면 해당 url로 이동해 콘텐츠를 로드하고 이동하도록 설정했다. @IBOutlet weak var webView: WKWebView! func go(to urlStr: String) { guard let url = URL(string: urlStr) else { fatalError("Invalid URL") }..

NumberFormatter 를 이용해 천 단위마다 comma(" , ") 넣기 1. 입력 값이 정수인 경우 var intValue = 123456 let numberFormatter = NumberFormatter() numberFormatter.numberStyle = .decimal let result = numberFormatter.string(from: NSNumber(value: intValue))! print(result) //"123,456" 2. 입력 값이 문자열인 경우 var strValue = "1111123456" extension String { public var insertComma: String { let numberFormatter = NumberFormatter() num..

구글 맵에 커스텀 마커 표시하기 받아온 데이터의 위도, 경도 정보를 이용해 지도 상에 마커를 찍고 싶은 데 구글에서 제공하는 마커는 디자인이 너무 별로라 마커를 커스텀해봤습니다. 아래 사진과 같이 받아온 데이터 index를 표시하는 마커를 구현했습니다. 마커를 표시할 때는 이미지뷰를 사용하기 때문에 표시하고자 하는 마커 모양의 이미지가 필요합니다. 저는 아래 사진과 같은 모양의 마커를 사용했고, 인덱스를 표시하는 이미지는 SF Symbol 이미지를 사용했습니다. 사용한 open Api의 데이터가 일정하지 않아 좌표가 있는 경우에만 마커를 표시하도록 했습니다. //create Maker DispatchQueue.main.async { self.restaurantData?.enumerated().forEac..

브라우저는 보안상의 이유로 다른 출처의 리소스를 사용하는 것을 기본적으로 제한하고 있다. 다른 출처의 리소스를 불러오려면 접근할 수 있는 권한을 달라고 브라우저에게 요청을 해야한다. 이번 프로젝트 중 프론트엔드 서버에서 백엔드 서버에 접근하니 아래와 같은 요청이 떴다. CORS 정책에 의해서 다른 출처의 서버에 접속하는 것이 막혔다고 브라우저에서 에러를 발생시켜준 것이다. 권한 요청을 Http header에 담아보내 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주어야 한다. 백엔드에서 몇 가지 설정이 필요했다. 이번 프로젝트에서 Spring Security + JWT 를 사용했기 때문에 Client는 API 호출 시 모든 요청에 대해 Header의 Authorization에 JWT 토큰을 전송한다...

Mockito 사용해서 Unit Test 하기 API에 평점 순으로 내림차순 정렬되는 기능과 평점이 0점일 경우 결과 리스트에서 제외시키는 기능을 추가하면서 service단 unit test를 작성했다. MovieService에서는 MovieRepository를 의존하고 있기 때문에 @Mock으로 Repository를 모킹했다. 이렇게 하면 실제 naverApi를 호출하는 게 아니기 때문에 아래 코드와 같이 Mockito를 이용해 결과값을 만들어줘야 한다. Mockito.when(movieRepository.findByQuery("해리포터")).thenReturn(getStubMovieList()); given, when, then으로 구성했고, 출력값을 검증하는 방식으로 테스트를 작성했다. @Exten..

스프링의 중요한 특징인 의존성 주입(DI)와 제어권 역전(IoC)에 대해 정리해보았다. 1. DI(Dependency Injection) 의존성 주입 하나의 객체가 다른 객체의 의존성을 제공하는 테크닉. 의도는 객체의 생성과 사용의 관심을 분리하는 것이다. 이는 가독성과 코드 재사용을 높혀준다. 의존성이 뭐야...? class MemberService { private final MemberRepository memberRepository = new MemoryMemberRepository(); } 위의 코드를 보면 MemberService 클래스 내부에서 MemberRepository 객체를 생성하고 있다. MemberServicef클래스가 MemberRepository클래스를 의존하고 있다고 말할 수..

프로젝트에서 소셜 로그인으로 카카오 API를 이용해서 RestTemplate을 접했지만 직접 구현한 부분이 아니라 잘 모르고 있었다. study하면서 RestTemplate를 이용해서 naver 검색API 서버를 만들어봤다. 현재 현업에서는 보통 WebClient를 사용하지만 설정이 복잡하기 때문에 Study 초반에는 RestTemplate을 사용해서 API호출하는 방식을 알아보기로 했다. RestTemplate이란? Spring에서 제공하는 HTTP Client로 REST API 호출을 위한 함수를 제공하는 클래스 HTTP 서버와의 통신을 단순화하고 RESTful 원칙을 지킨다. * RestTemplate 설정 RestTemplate 동작과정에서 보면 실질적으로 ClientHttpRequest가 HTT..