mirabo01 님의 블로그

입력과 버튼까지 다뤘다면이제 앱다운 앱을 만들기 위한 마지막 기본 퍼즐이 남는다.바로 화면 전환이다.로그인 화면 → 홈 화면목록 화면 → 상세 화면뒤로 가기 처리React Native에는화면 전환이 기본으로 제공되지 않는다.그래서 대부분의 앱에서react-navigation 라이브러리를 사용한다.이 글에서는react-navigation을 처음 쓰는 사람 기준으로개념부터 가장 기본적인 사용법까지 정리한다.이 글이 필요한 사람화면이 하나짜리 앱에서 다음 단계로 가고 싶은 경우페이지 이동 개념이 아직 헷갈리는 경우react-navigation이 왜 필요한지 궁금한 경우React Native에 네비게이션이 없는 이유웹에서는 이런 흐름이 익숙하다.URL 변경페이지 이동뒤로 가기하지만 React Native 앱은단..

goroutine의 개념을 이해했다면, 이제 거의 항상 함께 사용되는channel을 다룰 차례다.goroutine이 “동시에 실행되는 작업 단위”라면,channel은 그 작업들 사이를 연결하는 통로에 해당한다.Go에서는 공유 메모리보다 메시지 전달을 우선하는 방식으로 동시성을 설계한다.이 글에서는channel의 기본 개념송수신 방식과 동작 특성실제로 자주 사용하는 패턴을 중심으로 정리한다.channel이란 무엇인가channel은 값을 주고받기 위한 통로다.ch := make(chan int)chan 타입 형태로 선언같은 타입의 값만 송수신 가능goroutine 간에 값을 안전하게 전달하기 위한 수단이며,락(lock)을 직접 다루지 않아도 동기화를 가능하게 해준다.[이미지: Go channel 기본 구조]..

화면에 내용이 조금만 늘어나면바로 이런 상황을 마주친다.화면 아래가 잘려서 안 보인다리스트를 만들었는데 스크롤이 안 된다ScrollView로 했더니 느려진다React Native에서스크롤은 기본이 아니다.명시적으로 컴포넌트를 선택해야 한다.이 글에서는ScrollView와 FlatList의 차이와 사용 기준을실무에서 헷갈리지 않게 정리한다.이 글이 필요한 사람화면이 길어졌는데 스크롤이 안 되는 경우ScrollView와 FlatList 차이를 잘 모르는 경우리스트 성능 이슈가 걱정되는 경우React Native에서 스크롤이 필요한 이유React Native의 View는스크롤 기능이 없다.콘텐츠가 화면을 넘어가면그냥 잘린다.그래서 스크롤이 필요한 화면에서는반드시 전용 컴포넌트를 사용해야 한다.ScrollVie..

defer까지 이해했다면, 이제 Go를 선택하는 가장 큰 이유 중 하나인동시성(concurrency) 을 다룰 차례다.Go의 동시성은 복잡한 스레드 제어 대신goroutine과 channel이라는 비교적 단순한 개념을 중심으로 설계되어 있다.문법은 간단하지만, 개념을 제대로 이해하지 않으면 예상치 못한 동작을 만들기 쉽다.이 글에서는goroutine이 무엇인지어떻게 실행되고 관리되는지실제로 써보면서 느끼는 특징을 중심으로 정리한다.goroutine이란 무엇인가goroutine은 Go에서 제공하는 경량 스레드(lightweight thread) 다.go doWork()go 키워드를 붙이면 새로운 goroutine에서 함수가 실행된다함수 호출 자체는 즉시 반환된다이 한 줄로 동시 실행이 가능해진다는 점이Go..

기본 컴포넌트(View, Text, Image)를 써서화면에 뭔가 띄우는 데까지는 금방 온다.그다음부터 막히는 지점은 거의 항상 같다.왜 가운데 정렬이 안 되지?웹처럼 margin: auto가 안 먹히네?가로 정렬은 했는데 세로가 이상하다이건 React Native가웹이 아니라 Flexbox 기반 레이아웃이기 때문이다.이 글에서는React Native 스타일링의 핵심인StyleSheet와 Flexbox 개념을 입문자 기준으로 정리한다.이 글이 필요한 사람React Native에서 레이아웃이 자꾸 어긋나는 경우Flexbox 개념이 아직 헷갈리는 경우웹 CSS 감각으로 접근했다가 막힌 경우React Native 스타일링 기본 개념React Native에서는CSS 파일을 따로 쓰지 않는다.대신 JavaScri..

인터페이스까지 이해했다면, 이제 Go를 Go답게 만드는 핵심 주제인에러 처리(error handling) 를 살펴볼 차례다.Go의 에러 처리는 종종 “번거롭다”, “코드가 길어진다”는 평가를 받는다.하지만 실제로 사용해보면, 이 방식이 에러를 숨기지 않고 드러내는 데 초점을 두고 있다는 걸 알게 된다.이 글에서는Go의 error 인터페이스 구조에러를 처리하는 기본 패턴실무에서 자주 쓰는 설계 방식을 중심으로 정리한다.Go에서 error는 인터페이스다Go에서 에러는 내장 타입이 아니라 인터페이스다.type error interface { Error() string}Error() 메서드를 구현하면 모두 error가 된다에러는 값(value)처럼 전달된다이 구조 덕분에,Go의 에러는 예외(exceptio..

Expo 프로젝트 구조를 한 번 훑어봤다면이제 진짜로 화면을 만드는 단계로 들어간다.React Native에서 화면은컴포넌트 조합으로 만들어진다.처음엔 태그 이름이 낯설어서 헷갈리지만,몇 개만 정확히 이해해두면이후 UI 작성이 훨씬 수월해진다.이 글에서는가장 기본이 되는 컴포넌트 3가지를실무 기준으로 정리한다.이 글이 필요한 사람React Native 화면 코드가 아직 낯선 경우와 역할이 헷갈리는 경우웹의 처럼 생각해도 되는지 궁금한 경우React Native 컴포넌트의 기본 개념React Native에는HTML 태그가 없다.대신,모바일 네이티브 UI에 대응되는 컴포넌트를 사용한다.웹처럼 보이지만실제로는 iOS / Android 네이티브 컴포넌트다.[이미지: React Native 컴포넌트와 네이티브 ..

에러 처리까지 익혔다면, 이제 Go 코드에서 거의 항상 함께 등장하는defer 문을 정리할 차례다.defer는 문법 자체는 단순하지만,언제 실행되는지, 어떤 순서로 동작하는지를 정확히 이해하지 않으면의도와 다른 코드가 만들어지기 쉽다.이 글에서는defer의 기본 동작 방식자원 관리에서의 사용 패턴실제로 자주 실수하는 포인트를 중심으로 정리한다.defer란 무엇인가defer는 함수 종료 시점에 실행될 코드를 등록하는 키워드다.defer fmt.Println("end")fmt.Println("start")실행 결과는 다음과 같다.startenddefer로 등록된 코드는 현재 함수가 return되기 직전에 실행된다정상 종료든, 에러 반환이든 동일하게 실행된다이 특성 때문에, defer는 자원 정리에 매우 잘 ..

Expo로 프로젝트를 생성하고 나면생각보다 많은 파일이 한꺼번에 생긴다.이 파일들… 다 써야 하나?App.js만 보면 되는 거 아냐?건드리면 안 되는 건 뭐지?처음엔 구조를 정확히 이해하지 않아도앱은 실행된다.하지만 폴더 역할을 모르고 시작하면조금만 커져도 금방 헷갈린다.이 글에서는Expo 프로젝트를 처음 열었을 때 꼭 알아야 할 구조만실무 기준으로 정리한다.이 글이 필요한 사람Expo로 React Native 프로젝트를 처음 만든 경우App.js 외에 뭐가 뭔지 헷갈리는 경우나중에 구조를 어떻게 나눠야 할지 감이 안 오는 경우Expo 기본 프로젝트 구조 전체 보기Expo 기본 템플릿을 생성하면대략 이런 구조를 보게 된다.my-app├─ App.js├─ app.json├─ package.json├─ as..

구조체와 메서드까지 익혔다면, 이제 Go 설계의 핵심이라고 할 수 있는interface를 이해할 차례다.Go 인터페이스는 다른 언어의 인터페이스나 추상 클래스와 개념적으로 비슷해 보이지만,사용 방식과 철학은 꽤 다르다.특히 “명시적으로 구현하지 않는다”는 점에서 처음 접하면 헷갈리기 쉽다.이 글에서는Go 인터페이스가 무엇인지어떻게 구현되는지실무에서 왜 자주 쓰이는지를 예제와 함께 정리해본다.interface란 무엇인가Go에서 인터페이스는 메서드 집합의 정의다.type Reader interface { Read() string}필드는 없다어떤 메서드를 가져야 하는지만 정의한다이 인터페이스를 구현하려면,해당 메서드를 가진 타입이면 자동으로 인터페이스를 만족한다.명시적인 implements가 없다Go 인..