작은 시작점

ScrollView

<View style={styles.goalsContainer}>
    <ScrollView alwaysBounceVertical={false}>
      {courseGoals.map((goal) =>
        <View key={goal} style={styles.goalItem}>
          <Text style={styles.goalText}>{goal}</Text>
        </View>
      )}
    </ScrollView>
  </View>

ScrollView는 전체 UI가 렌더링 될 때마다 안에 있는 항목 전부 렌더링 한다.

목록이 일정 화면을 넘어가 길어질 때, 화면에 보이지 않는 부분도 화면 뒤에서 계속 렌더링 된다.

목록이 길다면, 수천개, 수만개의 목록이 있다면?  성능 문제가 생길 수 밖에 없다.

그래서 분량이 제한된 콘텐츠에는 적합하지만, 길어질 수 있는 동적 목록에는 부적합하다.

사용할 수는 있지만,  동적 목록 리스트에는 성능 저하를 피하기 위해 잘 안 씀

이럴 때 ScrollView 대신에 사용할 수 있는 것이 FlatList이다.

FlatList

스크롤을 실현하는 컴포넌트

보이는 항목만 렌더링되며, 화면 밖의 항목은 사용자가 스크롤을 해야 로딩 및 렌더링 된다.

내부에서 필요한 항목만 렌더링, 나머지는 스크롤해서 가까이 다가갈 때 렌더링

목록이 아주 긴 경우에 적합 !

필요한 사항만 렌더링하는 방식으로 목록을 효율적으로 렌더링 한다.

☆  필수 프로퍼티

data : 목록에서 출력할 데이터를 지정하는 역할, 배열 형태로 제공

renderItem : 매개변수로 현재 항목에 대한 정보를 받아 해당 항목을 어떻게 렌더링할지 결정

렌더링 해야할 때 개별적으로 함수 호출하여 주어진 항목에 대해 렌더링 할 jsx 코드로 반환

KeyExtractor : 각 항목에 대해 고유한 키를 추출

<FlatList
      data={courseGoals}
      renderItem={(itemData) => {
        return (
          <View style={styles.goalItem}>
            <Text style={styles.goalText}>{itemData.item.text}</Text>
          </View>
        )
      }}
      keyExtractor={(item, index) => {
        return item.id
      }}
      alwaysBounceVertical={false} />

data의 courseGoals 배열을 renderItem에서 각 항목(itemData)으로 받아온다.

해당 항목을 어떻게 렌더링 할지에 대한 jsx 코드가 있고, 각 항목에 대해 개별적으로 호출되어 목록 전체를 렌더링

courseGoals의 배열의 각 항목은 객체로 정의되어 있으며,

 {
    text: enteredGoalText, id: Math.random().toString()
  }

text의 값에는 내가 입력한 목표, id는 고유한 키(랜덤 값)가 들어가 있는 것을 확인할 수 있다.

ScrollView 코드와 비교해보면 map 함수를 통해 목록을 수동으로 렌더링하지 않는다는 것을 알 수 있다.

Day16 문자열

• 대문자로 바꾸기
• 소문자로 바꾸기
• 배열에서 문자열 대소문자 변환하기
• A 강조하기
• 특정한 문자를 대문자로 바꾸기

대문자로 바꾸기

문제 설명

알파벳으로 이루어진 문자열 myString이 주어집니다. 모든 알파벳을 대문자로 변환하여 return 하는 solution 함수를 완성해 주세요.

def solution(myString):
    return myString.upper()

소문자로 바꾸기

문제 설명

알파벳으로 이루어진 문자열 myString이 주어집니다. 모든 알파벳을 소문자로 변환하여 return 하는 solution 함수를 완성해 주세요.

def solution(myString):
    return myString.lower()

배열에서 문자열 대소문자 변환하기

문제 설명

문자열 배열 strArr가 주어집니다. 모든 원소가 알파벳으로만 이루어져 있을 때, 배열에서 홀수번째 인덱스의 문자열은 모든 문자를 대문자로, 짝수번째 인덱스의 문자열은 모든 문자를 소문자로 바꿔서 반환하는 solution 함수를 완성해 주세요.

def solution(strArr):
    for i in range(len(strArr)):
        if i % 2 == 0:
            strArr[i] = strArr[i].lower()
        else:
            strArr[i] = strArr[i].upper()

    return strArr

def solution(strArr):
    answer = [value.lower() if idx % 2 == 0 else value.upper() for idx, value in enumerate(strArr)]
    return answer

enumerate로 index 활용하는게 더 간편한 듯 하다.

A 강조하기

문제 설명

문자열 myString이 주어집니다. myString에서 알파벳 "a"가 등장하면 전부 "A"로 변환하고, "A"가 아닌 모든 대문자 알파벳은 소문자 알파벳으로 변환하여 return 하는 solution 함수를 완성하세요.

def solution(myString):
    answer = ''
    answer = myString.replace('a', 'A')

    for idx, value in enumerate(answer):
        if value != 'A':
            answer = answer.replace(value, value.lower())
    return answer

def solution(myString):
    answer = ''
    answer = myString.lower()
    answer = answer.replace('a', 'A')
    return answer

잔머리 좀 굴려볼걸 역시 포문을 쓰지 않고 해결할 수 있는 방법이 있었어....

아직 나는 멀었다~

def solution(myString):
    return myString.lower().replace('a', 'A')

이렇게 해도 전부 바꿔주는 군요 ...

특정한 문자를 대문자로 바꾸기

문제 설명

영소문자로 이루어진 문자열 my_string과 영소문자 1글자로 이루어진 문자열 alp가 매개변수로 주어질 때, my_string에서 alp에 해당하는 모든 글자를 대문자로 바꾼 문자열을 return 하는 solution 함수를 작성해 주세요.

def solution(my_string, alp):
    if alp in my_string:
        my_string = my_string.replace(alp, alp.upper())
    return my_string

굳이 if문을 사용하지 않고

def solution(my_string, alp):
    return my_string.replace(alp, alp.upper())

그대로 return 해도 됐었군요 ..

알고보면 당연한 얘기지만 왜 문제풀 때는 떠오르지 않는 걸까요~

와 그래두 작심삼일을 넘어서 지금 연속 16일차까지 왔다 ㄷㄷ 대박

신년다짐이 이렇게 오래간다고? 천천히 느리지만 꾸준히 Let's Go ~

Day15 리스트(배열), 문자열

• 조건에 맞게 수열 변환하기1
• 조건에 맞게 수열 변환하기2
• 1로 만들기
• 길이에 따른 연산
• 원하는 문자열 찾기

조건에 맞게 수열 변환하기 1

문제 설명

정수 배열 arr가 주어집니다. arr의 각 원소에 대해 값이 50보다 크거나 같은 짝수라면 2로 나누고, 50보다 작은 홀수라면 2를 곱합니다. 그 결과인 정수 배열을 return 하는 solution 함수를 완성해 주세요.

def solution(arr):
    answer = []
    for i in arr:
        if i >= 50 and i % 2 == 0:
            answer.append(i // 2)
        elif i < 50 and i % 2 == 1:
            answer.append(i * 2)
        else:
            answer.append(i)
    return answer

처음에는 조건이 2개라고 생각하고 풀었는데 

50보다 크거나 같은 짝수, 50보다 작은 홀수 < 이 두 조건에 해당하지 않는 값들도 있어서

if, elif, else로 나눔. 그 값들을 그대로 배열에 담아 리턴

조건에 맞게 수열 변환하기 2 

문제 설명

정수 배열 arr가 주어집니다. arr의 각 원소에 대해 값이 50보다 크거나 같은 짝수라면 2로 나누고, 50보다 작은 홀수라면 2를 곱하고 다시 1을 더합니다.이러한 작업을 x번 반복한 결과인 배열을 arr(x)라고 표현했을 때, arr(x) = arr(x + 1)인 x가 항상 존재합니다. 이러한 x 중 가장 작은 값을 return 하는 solution 함수를 완성해 주세요.단, 두 배열에 대한 "="는 두 배열의 크기가 서로 같으며, 같은 인덱스의 원소가 각각 서로 같음을 의미합니다.

def solution(arr):
    answer = 0
    
    while True:
        temp = arr.copy()  # 기존 배열을 복사하여 temp에 저장
        
        for i in range(len(arr)):
            if arr[i] >= 50 and arr[i] % 2 == 0:
                arr[i] //= 2
            elif arr[i] < 50 and arr[i] % 2 == 1:
                arr[i] = (arr[i] * 2) + 1
        
        if arr == temp:  # 변형 전과 후의 배열이 같으면 반복 종료
            break
        
        answer += 1  # 반복 횟수 증가
    
    return answer

위 문제랑 비슷할 거라 생각했는데 다른 부분이

한번 반복할 때 배열 전체의 값이 조건에 따라 바뀌어야한다.

그래서 안쪽에 for문을 써줌

여기서 부터 안풀린게 대체되는게 아니라 계속 추가가 되는 것임.....

이 문제는 바뀐 temp 배열의 값을 빈 값으로 처리해주지 않아서 였다.

이후 계속 풀릴듯 말듯 ... 하는데 기존 코드에 문제가 있었다.

배열의 변형이 이루어질 때마다 arr과 temp를 비교하는 것이 아니라, 변형 전 후의 배열이 동일한지를 확인해야 하는 것

위에서 arr = temp로 새로운 리스트를 생성하지 않고 copy 함.

변형이 계속되면 answer 을 1 증가시키고 계속 반복

이 후 이전 copy해둔 배열 temp와 반복문 후의 배열 arr를 비교해서 배열이 같아지면 더 이상 변하지 않으므로 반복문 종료

최종적으로 반복문이 종료되면 그때의 answer값 리턴..... 후 어렵네요?

1로 만들기

문제 설명

정수가 있을 때, 짝수라면 반으로 나누고, 홀수라면 1을 뺀 뒤 반으로 나누면, 마지막엔 1이 됩니다. 예를 들어 10이 있다면 다음과 같은 과정으로 1이 됩니다.
10 / 2 = 5
(5 - 1) / 2 = 4
4 / 2 = 2
2 / 2 = 1
위와 같이 4번의 나누기 연산으로 1이 되었습니다.정수들이 담긴 리스트 num_list가 주어질 때, num_list의 모든 원소를 1로 만들기 위해서 필요한 나누기 연산의 횟수를 return하도록 solution 함수를 완성해주세요.

def solution(num_list):
    answer = 0
    for i in num_list:
        while i != 1:
            if i % 2 == 0:
                i = i // 2
            else:
                i = (i-1)//2
                
            answer += 1
    return answer

num_list의 원소 하나씩 순회

1이 되기 전까지 계속 while문을 실행하면서 1을 만들고 연산 횟수 1씩 answer에 카운트

1이 되면 그 다음 원소 또 실행

num_list 길이만큼 반복

길이에 따른 연산

문제 설명

정수가 담긴 리스트 num_list가 주어질 때, 리스트의 길이가 11 이상이면 리스트에 있는 모든 원소의 합을 10 이하이면 모든 원소의 곱을 return하도록 solution 함수를 완성해주세요.

def solution(num_list):
    answer = 0
    if len(num_list) >= 11:
        return sum(num_list)
    else:
        return eval('*'.join(map(str, num_list)))
    return answer

길이가 11이상일 때는 sum 함수를 이용해서 간단하게 처리

모든 원소의 곱은 eval 함수를 이용해서 구했다.

join함수를 사용할 때

'*'.join(num_list)

이렇게만 쓰니까 에러가 났었는데, 그 이유는 정수형 배열 num_list와 문자 *을 join하려고 하니까 난 에러

그래서 num_list안의 배열들을 문자로 모두 변경한 후 *와 join해서 연결했다.

이후 eval 함수를 사용해 문자열로 표현된 파이썬 코드를 실행하여 결과 값을 반환해준다.

eval() 함수는 Python의 내장 함수 중 하나로,
문자열로 표현된 파이썬 표현식을 평가(evaluate)하여 결과를 반환합니다.
즉, 문자열로 표현된 파이썬 코드를 실행하는 역할을 합니다.

원하는 문자열 찾기

문제 설명

알파벳으로 이루어진 문자열 myString과 pat이 주어집니다. myString의 연속된 부분 문자열 중 pat이 존재하면 1을 그렇지 않으면 0을 return 하는 solution 함수를 완성해 주세요.단, 알파벳 대문자와 소문자는 구분하지 않습니다.

def solution(myString, pat):
    answer = 0
    if pat.lower() in myString.lower():
        return 1
    return answer

대소문자는 구분하지 않으니 모두 소문자로 변환 후 in 연산자로 pat 문자열이 있는지 확인

있으면 1 없으면 0 리턴

def solution(myString, pat):
    return int(pat.lower() in myString.lower())

다른 사람 풀이:

pat.lower() in myString.lower() >> True / False로 반환 int로 0,1 리턴

굳이 1,0을 할당해주지 않고 이렇게 활용도 가능하네요 .. good

2번 문제에서 너무 많은 시간을 빼앗겨버린 ... 오늘 늦잠자서 시간이 부족한데 자꾸 늘어지니 뭔가 불안 초조함 ..ㅋㅋㅋㅋㅋ큐ㅠ 앞으로 늦잠금지 ..여기에 얼마나 시간을 쓸지 모르니까 넉넉하게 할당해두고 하루를 보내기를 추천 ,, 

<Text key={goal} style={styles.goalItem}>{goal}</Text>

위의 코드에 goalItem 스타일을 적용해보았을 때, 안드로이드, ios를 비교해보면

안드로이드에는 적용이 되었지만 ios는 적용이 되지 않은 것을 볼 수 있다.

ios에는 테두리를 둥글게 하는 속성이 적용이 되지 않았다.

ios에서 기본 네이티브 <Text> 태그에 둥근 모서리 스타일을 지원하지 않는 것이다.

이러한 경우, View 태그로 <Text>태그를 감싸서 View 태그에 지정해주면 된다.

<View key={goal} style={styles.goalItem}>
	<Text>{goal}</Text>
</View>

Text 태그에 바로 스타일을 지정하지 않고 View 태그를 감싼 후 View 태그에 스타일을 지정해주었더니

ios에도 둥근 테두리가 적용이 되었다. 하지만 뭔가 다른 점은 ..  이번에는 텍스트 색상이 적용되지 않았다.

그 이유는 웹용 css와 달리 스타일이 연속적으로 적용되지 않기 때문이다.
연속적인 속성 적용은 부모와 조상 요소의 스타일이 자식 및 하위 요소에 그대로 이어지는게 특징인데
React Native 스타일링에는 스타일 상속이 없다.

그러므로, View 태그에 적용된 color:white는 하위 속성인 text 태그에 영향을 주지 않게 되는 것이다.

그래서 이러한 경우는 별도로 Text 태그에 color:white를 지정해주어야한다.

<View key={goal} style={styles.goalItem}>
	<Text style={styles.goalText}>{goal}</Text>
</View>

이렇게 Text 태그에도 별도로 스타일을 지정해주고, 지정된 goalText 스타일에 color:white을 적용했다.

그랬더니 이제는 ios, android가 동일하게 맞추어졌다.

상속여부와 ios에서 지원되지 않는 것들이 안드로이드와 달라서 같은 코드를 적용함에도 불구하고 적용되지 않는 부분들이 있다. 이것 말고도 다른 것들이 많을 것 같은데 ,, 공부하면서 발견할 때마다 잊지 않도록 기록해야겠다.

리액트와 리액트 네이티브는 비슷한 듯 다르다.

핵심적으로 알아야할 컴포넌트들 비교하고 스타일링 적용하는 방법을 알아보자

<div>  VS  <View>

리액트의 <div></div>태그, 리액트 네이티브의 <View></View>태그의 용도는 같다.

하지만 주의해야할 점은

<div>안녕하세요</div>

div 태그 내 텍스트 안녕하세요 >> 가능

<View>안녕하세용</View>

View 태그 내 텍스트 안녕하세용 >> 불가능

View
콘텐츠를 담는 상자나 컨테이너 구축에 사용됨.
다른 컴포넌트들을 담을 순 있지만 단순 텍스트를 담을 수 없다.
<Text> 태그로 감싸주면 활용 가능.

View : 컴포넌트를 담고 배치하는 컴포넌트

Text : 텍스트를 표시

Button : 버튼 등

다양한 핵심 컴포넌트들은 공식 홈페이지에서 찾아 활용하는 것을 추천

https://reactnative.dev/docs/components-and-apis

리액트와 정말 비슷하다.

스타일 적용하는 방법

React Native는 CSS 지원하지 않음.

파일을 추가하거나 css 언어를 사용하지 않는다.

1. 인라인 스타일 추가해서 스타일 객체를 프로퍼티로 전달
2. 별도의 객체를 정의해서 프로퍼티로 전달

1. 인라인 스타일 방식

말 그대로 태그 안에 스타일을 적용하는 방식이다. 하지만 좋은 방식은 아니다.

jsx 코드와 스타일 코드의 구분이 명확하지 않기 때문. 가독성도 떨어짐.

2. 별도의 객체를 정의해서 프로퍼티로 전달

stylesheet 객체 사용,  JSX 코드와 스타일 코드를 명확히 구분해줌. 스타일 재사용 가능

dummyText라는 객체 안에 스타일을 정의해서 Text 태그의 프로퍼티로 전달한 것을 알 수 있다.

동일한 스타일을 두군데 작성하고 싶을 때 단순하게 프로퍼티만 전달하면 되기 때문에 그 부분에서도 간편하다.

꿀팁 사이트

색상 설정 및 사용하는 다양한 방식

https://reactnative.dev/docs/colors

컴포넌트가 지원하는 스타일 프로퍼티

https://reactnative.dev/docs/view-style-props 

Flex Box

CSS에서 Flex Box 속성을 잘 아는 사람에게는 익숙할 것이다.

위에서 스타일을 적용하는 방식대로 적용하고, Flex를 사용해 레이아웃을 배치한다.

여기서 한가지 다른 점이 있다.

Flex의 기본 배치 방향은 Default가 row인데

리액트 네이티브에서는 특이하게도? Column 방향이 Default였다.

별도로 명시하지 않으면 View들이 세로로 쌓이는 것을 보면 이해가 되는 부분이다.

여기서 추가로 알아야할 점은 display:flex는 View의 기본 속성이라는 점이다.(기본 속성이 flex인 게 좀 신기하다.)

div 태그는 block 속성인데, View 태그는 Flex 속성인 것도 차이점으로 알아두면 좋을 것 같다.

그래서 별도의 스타일을 적용하지 않아도 Column 방향으로 정렬된다.

SearchContainer을 보면 기본으로 flex가 적용되어있으니 기본적으로 display: flex와 같은 스타일은 따로 지정해주지 않고

바로 배치방향을 가로 방향으로 변경했다. 그리고 다른 속성들 사용 방법은 동일하다.

굳이 다른 점은 스타일이 카멜케이스로 작성되어있다는 점이다.

이런 부분은 바로 눈에 보여서 리액트와 다르다는 것을 바로 알수 있는 부분이다.

리액트와 알게 모르게 다른 부분이 있어서 헷갈리는 부분이 있는 것 같지만,

리액트를 잘 다룰 줄 안다면 이런 주의사항만 잘 숙지해서 바로 개발에 들어가도 괜찮을 것 같다.

그리고 생각보다 차이점들을 하나 둘 씩 알아가는게 재밌는 것 같다.

리액트와 리액트 네이티브의 사용법 차이 위주로 헷갈리는 부분들을 중심으로 글을 작성해야겠다.

Day14 리스트(배열)

• 홀수 vs 짝수
• 5명씩
• 할 일 목록
• n보다 커질 때까지 더하기
• 수열과 구간 쿼리 1

홀수 vs 짝수

문제 설명

정수 리스트 num_list가 주어집니다. 가장 첫 번째 원소를 1번 원소라고 할 때, 홀수 번째 원소들의 합과 짝수 번째 원소들의 합 중 큰 값을 return 하도록 solution 함수를 완성해주세요. 두 값이 같을 경우 그 값을 return합니다.

def solution(num_list):
    answer = 0
    a = 0
    b = 0
    for i in range(len(num_list)):
        if i % 2 == 0:
            a += num_list[i]
        else:
            b += num_list[i]

    return a if a == b else max(a,b)

가장 첫번째 원소를 1번 원소라고 할 때, > 이 부분에서 인덱스 번호를 주의해야겠다 싶었는데

어차피 짝, 홀수이고 간격은 2씩 차이나니까 신경쓰지 않고 풀었다

def solution(num_list):
    return max(sum(num_list[::2]), sum(num_list[1::2]))

다른 사람 풀이 : 

0부터 간격을 2씩 더하기

1부터 간격을 2씩 더하기

그 중 큰 값 출력 풀이 굿 ..

5명씩

문제 설명

최대 5명씩 탑승가능한 놀이기구를 타기 위해 줄을 서있는 사람들의 이름이 담긴 문자열 리스트 names가 주어질 때, 앞에서 부터 5명씩 묶은 그룹의 가장 앞에 서있는 사람들의 이름을 담은 리스트를 return하도록 solution 함수를 완성해주세요. 마지막 그룹이 5명이 되지 않더라도 가장 앞에 있는 사람의 이름을 포함합니다.

def solution(names):
    return names[::5]

바로 위 문제 풀이 응용했는데 단순에 풀려버린.. 

쉽게 풀리면 그대로 뭔가 찝찝함 그래도 파이썬 최고

할 일 목록

문제 설명

오늘 해야 할 일이 담긴 문자열 배열 todo_list와 각각의 일을 지금 마쳤는지를 나타내는 boolean 배열 finished가 매개변수로 주어질 때, todo_list에서 아직 마치지 못한 일들을 순서대로 담은 문자열 배열을 return 하는 solution 함수를 작성해 주세요.

def solution(todo_list, finished):
    answer = []
    for idx, value in enumerate(finished):
        if value == False:
            answer.append(todo_list[idx])
    return answer

배열의 길이는 같으니 신경쓰지 않고, finished 배열의 값이 false일 때의 인덱스들만 answer에 담아 출력

def solution(todo_list, finished):
    return [work for idx, work in enumerate(todo_list) if not finished[idx]]

비슷한 코드이지만 for문을 나는 finished로 돌리고 이 사람은 todo_list를 돌려서 idx 값을 바로 활용했다.

뭔가 이게 더 깔끔하고 잘 짠 코드인듯? 굿

n보다 커질 때까지 더하기

문제 설명

정수 배열 numbers와 정수 n이 매개변수로 주어집니다. numbers의 원소를 앞에서부터 하나씩 더하다가 그 합이 n보다 커지는 순간 이때까지 더했던 원소들의 합을 return 하는 solution 함수를 작성해 주세요.

def solution(numbers, n):
    answer = 0
    for i in numbers:
        if answer <= n:
            answer += i
    return answer

n보다 작을 때 반복문을 돌리다가 n보다 커지면 조건에 성립하지 않아 그때의 answer 리턴

def solution(numbers, n):
    answer = 0
    i=0
    while answer<=n:
        answer+=numbers[i]
        i+=1
    return answer​

다른 사람 풀이 :

조건문을 걸고 for문을 쓰는 것보다

조건문을 사용하지 않고 바로 while문으로 처리해버리는게 더 깔끔한 것 같다. 굿

수열과 구간 쿼리 1

문제 설명

정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [s, e] 꼴입니다.각 query마다 순서대로 s ≤ i ≤ e인 모든 i에 대해 arr[i]에 1을 더합니다.위 규칙에 따라 queries를 처리한 이후의 arr를 return 하는 solution 함수를 완성해 주세요.

def solution(arr, queries):
    answer = []
    for i in range(len(queries)):
        s, e = queries[i]
        for j in range(s, e+1):
            arr[j] += 1
    return arr

중첩 반복문 없이 풀고 싶어서 이것저것 시도해보다 결국 풀이가 생각 안나서 그냥 이렇게 풀어버림

queries 길이만큼 반복하고 [s,e]꼴을 순서대로 또 반복해서 arr 배열에 s부터 e까지의 범위에 +1을 하기

def solution(arr, queries):
    for l,r in queries:
        for i in range(l,r+1): arr[i]+=1
    return arr

다른 사람 풀이 :

다른 사람들도 다 나랑 비슷하게 푼 것 같아서 다행?

나랑 비슷한듯 하지만 조금 더 코드가 짧고 깔끔한 것 같다.

짧고 깔끔하게 짜는 연습도 해야겠다.

초기세팅은 React와 React Native가 많이 다르지 않다.

React Native 시작하기 겁먹어서 계속 미루고 있었는데 왜 그랬나 싶을 정도로 비슷하고 쉽다.

윈도우 초기세팅 입니다 ~!

Node.js 설치

https://nodejs.org/en

최신 버전 말고 안정적인 버전으로 설치하는 것을 추천한다.

나는 이미 깔려 있기에 확인만 하고 패스!

npx create-expo-app 프로젝트명

https://reactnative.dev/docs/environment-setup

리액트 네이티브 공식 홈페이지에 초기세팅 하는 부분이 잘 나와있다.

npx create-expo-app first_native_app

먼저 프로젝트를 생성하고,

cd first_native_app

생성한 폴더로 이동한다. 

cd 명령어는 change directory라고 쉽게 생각하면 된다!

npx expo start

이후 프로젝트를 실행하면 된다.

qr 코드와 press 키보드~ 어쩌고가 뜨는데 이건 아래에서 더 알아볼거다.

일단 이렇게 잘 뜬다면 프로젝트 생성부터, 서버 실행까지 완료된 것!

이제는 내가 만들 앱을 볼 에뮬레이터를 실행할 차례다.

만드는 앱이 어떻게 생기고 어떻게 돌아가는지 알아야하니까 봐야겠죠?

안드로이드 스튜디오 설치

위에 말했지만 나는 윈도우다.  맥은 잘 모름 ㅎㅎ

먼저 안드로이드 앱을 실행하기 위해 안드로이드 스튜디오를 설치한다.

https://developer.android.com/studio/install?hl=ko

설치 후 More Action > Virtual Device Manager 들어가서

디바이스가 없다면 Create device에서 장치를 하나 만들어 주면 된다.

이후 다시 VSCode로 돌아가서 터미널을 보면

Press a | open Android 가 보일 것이다

a를 누르면 저렇게 초록색으로 뭔가 성공되었다는 느낌의 무언가가 출력된다.

이후 안드로이드 앱이 실행되고 로딩되면서 핸드폰이 딱 ! 뜨게 된다!!

잘 연결되었는지 확인하기 위해 App.js의 텍스트를 변경해본다. 잘된다. 얏호

expo Go

이번엔 실제 핸드폰에 화면을 볼 것이다. 참고로 난 아이폰이다.

App Store에서 expo Go를 설치한다. 로그인하고 보니 난 이미 계정이 연결되어있는지

VSCode에서 실행하고 있는 프로젝트가 상단에 떴다.

그래서 이것도 수월하게 되나보다 했는데 웬걸 인터넷 연결 오프라인 어쩌고 하면서 실패 ㅠㅠ

서버도 켜져있고, 연결도 잘 된 것 같은데 왜이러나 싶었는데...

문제는 와이파이 연결이었다. 내 PC 와이파이랑 핸드폰 와이파이랑 동일한 와이파이로 연결하니 바로 됐다.

이렇게 앱을 만들기 전,

프로젝트 생성부터 안드로이드로도, 아이폰으로도 확인할 수 있게 초기세팅을 해보았다.

원래 초기세팅할 때는 애먹어야되는데 뭔가 수월하게 진행되어서 기분이 좋으면서도 뭔가 모를 불안감.. ㅎㅎ

암튼 초기세팅 성공! 이거 보시고 다른 분들도 수월한 세팅하시길 바랍니다. 그럼 안뇽

Day13 리스트(배열)

• n번째 원소부터
• 순서 바꾸기
• 왼쪽 오른
• n번째 원소까지
• n개 간격의 원소

n번째 원소부터

문제 설명

정수 리스트 num_list와 정수 n이 주어질 때, n 번째 원소부터 마지막 원소까지의 모든 원소를 담은 리스트를 return하도록 solution 함수를 완성해주세요.

def solution(num_list, n):    
    return num_list[n-1:]

3번째 원소면 2번째 인덱스부터 시작해야 하니 슬라이싱 n-1부터 끝까지

순서 바꾸기

문제 설명

정수 리스트 num_list와 정수 n이 주어질 때, num_list를 n 번째 원소 이후의 원소들과 n 번째까지의 원소들로 나눠 n 번째 원소 이후의 원소들을 n 번째까지의 원소들 앞에 붙인 리스트를 return하도록 solution 함수를 완성해주세요.

def solution(num_list, n):
    return num_list[n:] + num_list[:n]

슬라이싱할 때 n번째 원소, 인덱스 헷갈림 주의

왼쪽 오른쪽

문제 설명

문자열 리스트 str_list에는 "u", "d", "l", "r" 네 개의 문자열이 여러 개 저장되어 있습니다. str_list에서 "l"과 "r" 중 먼저 나오는 문자열이 "l"이라면 해당 문자열을 기준으로 왼쪽에 있는 문자열들을 순서대로 담은 리스트를, 먼저 나오는 문자열이 "r"이라면 해당 문자열을 기준으로 오른쪽에 있는 문자열들을 순서대로 담은 리스트를 return하도록 solution 함수를 완성해주세요. "l"이나 "r"이 없다면 빈 리스트를 return합니다.

def solution(str_list):
    for i in range(len(str_list)):
        if str_list[i] == "l":
            return str_list[:i]
        elif str_list[i] == "r":
            return str_list[i+1:]

    return []

계속 65, 75점으로 실패하다가 코드 간단하게 수정했더니 이왜진 ...??

간단하게 생각해서

리스트에서 l이 있으면 그때의 인덱스 왼쪽 값 return

r이 있으면 그때 인덱스부터 오른쪽 값 return 

둘다 아니면 빈 배열 리턴 ㅎㅎ;

간단한 문제에서 시간 빼앗긴 기분이라 허무하다

n번째 원소까지

문제 설명

정수 리스트 num_list와 정수 n이 주어질 때, num_list의 첫 번째 원소부터 n 번째 원소까지의 모든 원소를 담은 리스트를 return하도록 solution 함수를 완성해주세요.

def solution(num_list, n):
    return num_list[:n]

n개 간격의 원소들

문제 설명

정수 리스트 num_list와 정수 n이 주어질 때, num_list의 첫 번째 원소부터 마지막 원소까지 n개 간격으로 저장되어있는 원소들을 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요.

def solution(num_list, n):
    return num_list[::n]

파이썬아 고마워 .. 날먹하면서도 이게 맞는건지 싶음. ㅋㅋㅋ

빨리 기초 끝내고 난이도 올리고 싶다 !!

쉽다고 갑자기 어려운 문제 풀어버리면 꾸준히 못할 것 같아서

느리지만~ 천천히 한단계씩 올라가는 중

세번째 문제에서 헷갈려서 계속 반례 ...

근데 생각보다 너무 간단한 답이어서 허무 ..

그래두 해냈어요 오늘두 야호

2023년도 멋쟁이사자처럼 운영진으로 아기사자들에게 CSS 강의를 했었다.

그때는 운영진도 처음, 강의도 처음이라 정말 걱정이 컸다.

CSS에 대해 대충은 알고 있었지만, 사람들에게 알려줄 만큼의 실력일까하는 의문도 있었다.

그래도.. 해야하기에 일단 준비는 했다.

아기사자를 맞이하기 전 겨울방학에 운영진들끼리 운영진 스터디를 진행했고, 먼저 운영진들 앞에서 강의를 연습하기로 했다.

강의자료 준비

강의자료를 만들면서 머릿속으로만 아는 개념을 사람들한테 어떻게 설명할지가 제일 고민이었다.

뭔가 머릿속으로는 다 아는데 사람들에게 설명하려니까 말이 안 나왔다.

그래서 그 개념들에 대해 구글링도 해보고 책도 찾아보며 설명할 수 있는 방법을 찾았다.

지금 생각해보면 그 개념들을 잘 설명하지 못한 이유는 100% 내가 알지 못해서 였던 것 같다.

다 안다고 생각했지만, 사실은 반만 애매하게 알고 있었던 거다.

내가 사람들한테 잘 설명할 수 있을 때 그리고 그것을 사람들이 잘 이해할 수 있을 때, 그게 내가 정확하게 아는 것이었다.

그래서 강의자료를 만들 때 시간이 정말 오래 걸렸다.

ppt 장수도 많았지만 이걸 내가 100% 이해하고 설명할 수 있을 때 까지 연습하는 시간이 길었다.

사실 내가 100% 이해하지 않았어도 슈슈슉 넘어갈 수 있는 부분들도 있었지만,

강의자료를 하나부터 열까지 내가 다 만드는 거니까 대충하고 싶지 않다는 생각도 있었던 것 같다.

그렇게 하나하나 만들어간 것이 거의 장수가 100장이 넘어가고.. part3까지 만들어버렸다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 나도 양이 이렇게 많이 나올 줄 몰랐다.

만들면서 이 페이지에서는 이 부분을 강조하고 어떻게 설명해야지! 이런 생각까지 다했던 것 같다

지금 생각하면 진짜 열심히 했던 것 같음. . 암튼 기나긴 강의자료 준비시간이 끝나고 운영진 스터디를 진행했다.

겨울방학 운영진 스터디

참 정직하게 연습한 만큼 수월하게 강의가 흘러갔다.

첫 강의라 좀 떨리기는 했지만 그래도 ppt를 쭉 보면서 내가 연습한대로 설명할 수 있었다.

뭔가 강의하려고 앞에 섰는데 버벅 거리는 건 조금 가오가 상하니까.. ㅎㅎ

잠을 잃었지만 그래도 성공적으로 강의를 마쳤다는 것으로 아주 만족했다.

제일 뿌듯했던 것은 내가 실습자료까지 하나하나 만들었는데 모든 사람들 노트북에 내가 만든 자료들이 있고

그걸 모두가 열중해서 해주고 있는 거였다. 이때 뭔지모를 성취감이 들었었던 것 같다.

CSS 세션 강의

이제는 실전이다 실제 아기사자들 앞에서 강의를 진행해야했다.

24명 정도의 인원 앞에서 강의를 한다는게 ,, 어우 생각보다 쉬운 일이 아니었다.

보는 눈이 몇개인지 정말 ,, 앞에 서니까 목소리가 떨리고 심장이 정말 쿵쾅쿵쾅 했다.

강의를 총 3번했는데 1번째 강의는 3시간이 어떻게 흘러갔는지도 모를 정도로 긴장하면서 강의했다

인간은 적응의 동물이라 그런지 2,3번째 강의는 그래도 좀 덜 긴장했다.

그래서 내가 설명해주고 싶은 것들을 다 설명해주고 온 것 같다.

뭔가 내가 준비한 모든 것을 다 알려주고 싶다는 생각에 혼자 열정적으로 강의하다보니 3시간이 훌쩍 지나갔다.

총 3번의 강의를 무사히 마치고.. CSS 세션이 끝이 났다.

아기사자들이 그래도 잘 이해하고 열심히 따라와줘서 고마웠다.

끝까지 열심히 강의한 내 자신도 참 고마웠다 ㅎㅎ

사람들 앞에서 한 첫 강의였는데 교수님, 강사님들이 참 대단하게 느껴졌다.

그리고 이 많은 사람들한테 알려줘야 된다는 생각이 드니까 절대로 적당히(?) 공부하지 못했다.

잘못된 지식을 알려주면 안된다는 생각에 모든 부분은 확실하게 짚고 넘어가야만 했다.

그래서 Flex, Grid 이 부분 공부할 때 진짜 이것저것 찾아보고 ,, 골머리 좀 썼다

근데 그때 이렇게 하니까 그냥 뇌리에 박혀서 아직까지도 확실하게 기억하고 있는 것 같다.

애매하게 공부하는 것보다 이렇게 확실하게 뇌에 때려박아버리니 .. 장기기억으로 남은 것 같다. ㅋㅋㅋㅋㅋ

아무튼 이것도 거의 일년 전 일이라 생각하니 시간이 진짜 빠른 것 같다.

이때 열심히 만든 강의 자료는 내년 css 강의 때 또 사용될 예정이고, css 강의는 다른 프론트 운영진이 하기로 했다.

2024년에는 React 강의를 맡게 되었는데 이것도 지금 강의자료가 없어서 만들어야 한다..

사실 오늘도 만들었어야 했는데 귀찮아서 미루고 있던 중이었다 ..ㅎㅎ

React는 또 어떻게 설명할 것이며 어떤 강의자료가 탄생할지,

그리고 1년 뒤의 나는 얼마나 또 성장할지 아주 아주 기대가 된다!

꾸준히 기록하면서 나의 발자취를 남겨야겠다. 아무튼 23년 CSS 강의 회고록 끝 !

Day12 리스트(배열)

• 리스트 자르기
• 첫 번째로 나오는 음수
• 배열 만들기 3
• 2의 영역
• 배열 조각하기

리스트 자르기

문제 설명

정수 n과 정수 3개가 담긴 리스트 slicer 그리고 정수 여러 개가 담긴 리스트 num_list가 주어집니다. slicer에 담긴 정수를 차례대로 a, b, c라고 할 때, n에 따라 다음과 같이 num_list를 슬라이싱 하려고 합니다.
n = 1 : num_list의 0번 인덱스부터 b번 인덱스까지
n = 2 : num_list의 a번 인덱스부터 마지막 인덱스까지
n = 3 : num_list의 a번 인덱스부터 b번 인덱스까지
n = 4 : num_list의 a번 인덱스부터 b번 인덱스까지 c 간격으로 올바르게 슬라이싱한 리스트를 return하도록 solution 함수를 완성해주세요.

def solution(n, slicer, num_list):
    answer = []
    a, b, c = slicer[0], slicer[1], slicer[2]
    if n == 1: answer = num_list[0:b+1]
    elif n == 2: answer = num_list[a:]
    elif n == 3: answer = num_list[a:b+1]
    else: answer = num_list[a:b+1:c]
    return answer

a, b, c = slicer

배열 값을 각 변수에 저장하는데 이렇게 간단하게도 할 수 있었다 역시 파이썬 

첫 번째로 나오는 음수

문제 설명

정수 리스트 num_list가 주어질 때, 첫 번째로 나오는 음수의 인덱스를 return하도록 solution 함수를 완성해주세요. 음수가 없다면 -1을 return합니다.

def solution(num_list):    
    answer = [idx for idx, value in enumerate(num_list) if value < 0]
    return answer[0] if answer else -1

리스트 컴프리헨션 표현식은 대괄호로 리스트를 생성해서 바로 정수를 출력하지 못했다

그래서 답이 5이면 [5]로 테스트 실패

근데 어차피 결과값은 1개뿐이니 리스트의 0번째 인덱스를 출력하도록 함!

배열 만들기 3

문제 설명

정수 배열 arr와 2개의 구간이 담긴 배열 intervals가 주어집니다.intervals는 항상 [[a1, b1], [a2, b2]]의 꼴로 주어지며 각 구간은 닫힌 구간입니다. 닫힌 구간은 양 끝값과 그 사이의 값을 모두 포함하는 구간을 의미합니다.이때 배열 arr의 첫 번째 구간에 해당하는 배열과 두 번째 구간에 해당하는 배열을 앞뒤로 붙여 새로운 배열을 만들어 return 하는 solution 함수를 완성해 주세요.

def solution(arr, intervals):
    a, b = intervals 
    return arr[a[0]:a[1]+1]+arr[b[0]:b[1]+1]

배열 intervals의 꼴은 항상 같으니 배열 하나씩 저장하고 인덱스를 활용하여 풀었다.

def solution(arr, intervals):
    s1, e1 = intervals[0]
    s2, e2 = intervals[1]
    return arr[s1:e1+1] + arr[s2:e2+1]

비슷한 풀이지만 가독성이 더 좋아보이는 코드

2의 영역

문제 설명

정수 배열 arr가 주어집니다. 배열 안의 2가 모두 포함된 가장 작은 연속된 부분 배열을 return 하는 solution 함수를 완성해 주세요.단, arr에 2가 없는 경우 [-1]을 return 합니다.

def solution(arr):
    answer = []
    idx_range = [idx for idx, value in enumerate(arr) if value == 2]
    min_range = min(idx_range, default=-1)
    max_range = max(idx_range, default=-1)
    
    return arr[min_range:max_range+1] if arr[min_range:max_range+1] else [-1]

배열 안에서 값이 2인 인덱스를 모두 찾고

2인 인덱스의 최소, 최대를 구해서,

최대, 최소 인덱스의 값을 포함한 배열을 리턴하도록 했다.

근데 -1을 깔끔하게 처리하지는 못한 것 같음.

최소, 최대 구할 때 배열이 빈 값이면 ValueError가 나서 기본 값을 임의로 -1로 정해두기도 함. 

def solution(arr):
    if 2 not in arr:
        return [-1]
    return arr[arr.index(2) : len(arr) - arr[::-1].index(2)]​

다른 사람 풀이 :

앞쪽부터 순회해서 값이 2인 인덱스 번호

뒤쪽부터 순회해서 값이 2인 인덱스 번호를 찾아서 슬라이싱

arr[::-1].index(2) > 역순 순회해서 인덱스를 구하고,

그 값 전체 길이에서 빼줘야 내가 최종으로 구하는 인덱스 값이 나온다.

len(arr) - arr[::-1].index(2)

깔끔하다.. 

배열 조각하기

문제 설명

정수 배열 arr와 query가 주어집니다.query를 순회하면서 다음 작업을 반복합니다.짝수 인덱스에서는 arr에서 query[i]번 인덱스를 제외하고 배열의 query[i]번 인덱스 뒷부분을 잘라서 버립니다.홀수 인덱스에서는 arr에서 query[i]번 인덱스는 제외하고 배열의 query[i]번 인덱스 앞부분을 잘라서 버립니다.위 작업을 마친 후 남은 arr의 부분 배열을 return 하는 solution 함수를 완성해 주세요.

def solution(arr, query):
    for i, query in enumerate(query):
        if i % 2 == 0:
            arr = arr[:query+1]
        else:
            arr = arr[query:]
    return arr

며칠 연속으로 리스트, 배열, 문자열 연습하니까 조금씩 감이 오는 것 같다!

쉽지만 쉽지 않은 것들 .. 기초 단계에서 다양한 풀이들을 잘 익히고 넘어가야겠다

오늘도~ 성공~