Fomagran 💻

본문 바로가기

728x90

[React Native] Navigation으로 화면 이동하기 (Navigation Between Screens) 안녕하세요 Foma 입니다! 오늘은 리액트 네이티브에서 네비게이션을 사용하여 스크린을 이동하는 방법에 대해 알아보도록 하겠습니다. 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! Install Native npm install @react-navigation/native @react-navigation/native Native-stack npm install @react-navigation/native @react-navigation/native-stack Safe-area-context expo install react-native-screens react-native-safe-area-context Navigation Initial Setting App.tsx 초기 .. 2022. 6. 16.

[Angular] Custom Directive 만들어 적용하기 (Create & Adjust a Custom Directive) 안녕하세요 Foma 입니다! 저번 글에 Angular에 이미 구현된 Built-in 디렉티브에 대해서 알아 보았는데요. 이번 글은 직접 커스텀한 디렉티브를 만들고 적용하는 방법에 대해서 알아 보겠습니다. 바로 시작할게요~ Generate Directive 아래와 같이 디렉티브를 생성해 줍니다. 저는 mouse control에 따라 스타일이 바뀌는 디렉티브를 만들거기 떄문에 mouseControl으로 이름 지어주겠습니다. ng g d 디렉티브이름 //or ng generate directive 디렉티브이름 directive.ts 아래와 같이 Directive가 생성 될거에요. @Directive에 selector로 app + 디렉티브이름으로 만들어지는 것을 볼 수 있습니다. import { Directiv.. 2022. 6. 9.

[Angular] Directive란? (feat. Built-in Directive) 안녕하세요 Foma 입니다! 오늘은 HTML 엘리먼트에 다양한 동작을 추가하는 Directive에 대해서 알아보도록 하겠습니다. 바로 시작할게요~ Directive란? 먼저 사전적 의미를 보면 아래와 같이 '지시' 라는 뜻을 가지고 있습니다. Angular 공식 문서엔 Directive를 아래와 같이 소개합니다. 즉, 간단히 말하면 Directive는 엘리먼트가 어떠한 동작을 할 수 있도록 '지시' 하는 클래스 입니다. Directive 종류 Directive는 3가지 종류가 있습니다. 1. Components 컴포넌트는 템플릿이 존재하는 Directive로 가장 많이 사용되는 Directive 입니다. (컴포넌트는 나중에 따로 글을 정리 하도록 하겠습니다.) 2. Attrubute Directives .. 2022. 6. 2.

[Angular] Custom Pipe 만들어 적용하기 (with. ngStyle) 안녕하세요 Foma 입니다! 저번 시간에는 Angular 자체에 내장되어 있는 Built-in Pipe에 대해서 알아 보았는데요. (아직 안보신 분들은 여기 에서 봐주세요!) 이번에는 직접 Custom Pipe를 만들어서 적용해 보는 방법에 대해 정리해 보겠습니다. Pipe 생성 아래 명령어로 Pipe를 만들어 줍니다. ng g p 파이프이름 //만약 테스트 파일 없이 만들고 싶다면 ng g p --skip-tests=true 파이프이름 저는 평균 값에 따라서 다른 색이 보이도록 하는 AverageColorPipe를 만들어 보겠습니다. 아래와 같이 pipe.ts 파일이 만들어 질거에요. @Pipe({})를 통해서 '|' 기호 뒤에 사용할 수 있는 pipe 이름을 정해 줍니다. 그리곤 transform 메.. 2022. 6. 2.

[iOS/UI] UIBezierPath 쉽게 사용하기 (feat. EasierPath) 안녕하세요 Foma 💻 입니다! 오늘은 직접 원하는 모양을 그릴 수 있는 UIBezierPath를 더욱 쉽게 사용할 수 있는 EasierPath에 대해서 알아 보겠습니다. 바로 시작할게요~! UIBezierPath 평소에 원하는 모양을 직접 커스텀해서 그릴 때 UIBezierPath를 자주 사용 했었는데요. 먼저 UIBezierPath를 이용해서 항아리 모양을 그리는 코드를 작성해 보겠습니다. 1. UIBezierPath 인스턴스를 생성해 그려준다. let bezierPath:UIBezierPath = UIBezierPath() bezierPath.move(to: CGPoint(x: 100, y: 100)) bezierPath.addLine(to: CGPoint(x: 200, y: 100)) bezier.. 2022. 5. 30.

[Angular] Pipe란? (feat. Built-in Pipe) Pipe란? Angular 공식 문서에는 아래와 같이 소개하고 있습니다. 직독하면 "클래스를 파이프로 표시하고 구성 메타데이터를 제공하는 데코레이터" 입니다. 그런데 이렇게 말하면 무슨 말인지 이해가 안되죠? 이해하기 쉽게 말씀 드리면 HTML에서 문자나 숫자를 원하는 것에 맞게 변형할 때 쓰는 것입니다. 아래는 Angular에서 built-in으로 제공되는 Pipe API List 인데요. 하나씩 살펴보도록 하겠습니다. 1. 문자 파이프 먼저 가장 쉬운 것부터 문자를 변형시키는 파이프입니다. UpperCasePipe,LowerCasePipe, TitleCasePipe 등이 있는데 말 그대로 문자를 변형 시켜주는 것입니다. 사용하는 방법은 나타내고 싶은 문자를 '|' 것과 함께 파이프 이름을 적어주시면 .. 2022. 5. 24.

[Angular] 모바일 브라우저 화면 고정하기 (Lock Screen orientation in mobile browser) 1차 시도 화면마다 세로로 고정 또는 가로로 고정이 되야 한다는 요구사항을 받고 iOS에선 거의 코드 한 줄만 추가하면 되기 때문에 금방 끝날거라고 생각했다. 바로 구글링 하니깐 MDN Web APIs 문서에 ScreenOrientation.lock()이라는 메서드가 검색되었다. https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock ScreenOrientation.lock() - Web APIs | MDN The lock() property of the ScreenOrientation interface locks the orientation of the containing document to the specified orient.. 2022. 5. 5.

[iOS/UI] UIBezierPath 안을 Gradient 컬러로 채우기 (Fill a UIBezierPath with Gradient Color) 안녕하세요 Foma💻 입니다! 오늘은 UIBezierPath 안을 Gradient 컬러로 채우는 방법에 대해서 알아보도록 하겠습니다. 바로 시작할게요~ TestView 뷰를 아래와 같이 초기화 해줍니다. class TestView: UIView { override init(frame: CGRect) { super.init(frame: frame) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func draw(_ rect: CGRect) { } } UIBezierPath 이제 UIBezierPath를 draw 메서드 안에 그려보겠습니다. 타원형 경로를 아래와 같이 생성해 줍니다.. 2022. 5. 2.

[Network] Port란? (feat. Protocol) (What is a Port?) Port란? Port는 사전적인 의미로 "항구"라는 뜻이다. 항구는 배가 정착하고 출발하는 공간을 의미한다. 컴퓨터 과학에서도 Port는 비슷한 의미로 사용되는데 특정 서버에 접속하기 위한 공간으로 사용되며 통신하기 위한 종단점 역할을 한다. 하드웨어적인 의미로는 통신 장비를 연결하기 위한 연결단이고, 소프트웨어적인 의미로는 네트워크 서비스를 식별하는 논리적 단위를 의미한다. 조금 쉽게 말하면 실제로 배가 물건을 실어나르는 장소를 항구가 알려주는 것과 같이 물건 대신 데이터를 네트워크 상에서 주고 받는 공간과도 같다. Port가 필요한 이유 그런데 문득 "IP와 URL 주소만으로 충분히 어떤 곳에서 데이터를 주고 받을지 알려줄 수 있지 않을까? 굳이 Port번호까지 추가적으로 가져야할 이유는 무엇일까?".. 2022. 4. 29.

[Network] CORS란? (feat. 보안,HTTP) (What is a CORS?) CORS란? CORS는 Cross-Origin Resource Sharing의 약자로 직역하면 "교차 출처 리소스 공유" 이다. 좀 더 쉽게 말하면 동일한 출처가 아닌 다른 출처에서 데이터를 주고 받는 것을 허용하는 정책이다. 그렇다면 이러한 정책이 왜 필요한 것일까? 그건 먼저 "동일 출처 정책"에 대해서 알아야 한다. Same Origin Policy(동일 출처 정책) 동일 출처 정책은 웹 브라우저에서 보안을 강화하기 위하여 동일한 출처에서만 리소스를 주고 받도록 하는 정책이다. 그렇다면 "출처"는 도대체 무엇일까? 쉽게 말하면 URL 주소이다. (먼저 URL의 구성요소를 모르는 분들을 여기 에서 먼저 읽고 오길 바란다.) 하지만 "동일한 출처"는 정확히 똑같은 URL을 의미하는 것을 아니다. 동일한.. 2022. 4. 27.

[Network] URL 구성 요소 (The components of a URL) URL URL은 Uniform Resource Locator의 약자로 웹 주소를 뜻하며 네트워크 상에서 리소스가 어디있는지 알려주기 위한 규칙이다. URL의 구성 요소 아래는 네이버 웹툰에서 신의 탑 페이지 URL이다. https://comic.naver.com/webtoon/list?titleId=183559&weekday=mon 신의 탑 자신의 모든 것이었던 소녀를 쫓아 탑에 들어온 소년그리고 그런 소년을 시험하는 탑 comic.naver.com 해당 URL은 https + comic.naver.com + (:443) + /webtoon/list + ?titleId=183559&weekday=mon 으로 이루어져 있다. 1. Protocol(프로토콜) 위 URL에서 "https"를 뜻하며 어떤 프로토.. 2022. 4. 27.

[Network] 세션(Session)이란? (What is a Session?) Session이란? Session은 영구적이고 상호작용적인 정보 교환을 전제하는 둘 이상의 통신 장치나 컴퓨터와 사용자 간의 대화나 송수신 연결상태를 의미하는 보안적인 다이얼로그(dialogue) 및 시간대를 가리킨다. - 위키 백과 - 즉, 클라이언트와 서버 간의 연결 상태를 의미하는 것이다. 좀 더 구체적으로 설명하면 클라이언트가 브라우저에 접속하여 서버와 접속이 종료하기 전의 상태를 의미한다. 쉽게 설명하면 사용자가 웹사이트에 접속해 해당 창을 닫기 전까지의 상태라고 보면 된다. 세션 과정 1. 클라이언트가 웹사이트에 접속해 서버에 요청한다. 2. 서버는 접속한 클라이언트에게 세션 ID를 부여해서 응답한다. 3. 클라이언트는 해당 세션 ID를 헤더 쿠키에 넣어 데이터를 요청한다. 4. 서버는 세션 .. 2022. 4. 26.

이전 1 2 3 4 5 6 7 8 ··· 49 다음

728x90

티스토리툴바