문제 : 문자열을 요소로 갖는 배열을 입력받아 문자열을 세로로 읽었을 때의 문자열을 리턴해야 합니다. 입력 : string 타입을 요소로 갖는 배열 출력 : string 타입을 리턴해야 합니다. 주의사항 : 각 문자열의 길이는 다양합니다. 각 문자의 위치를 행, 열로 나타낼 경우, 비어있는 (행, 열)은 무시합니다. 입출력 예시 : 풀이 : 나만의 해설: arr[0][0] + arr[1][0] -> arr[0][1] + arr[1][1] -> arr[0][2] + arr[1][2] 위의 규칙을 활용하여 첫 번째 인수 범위는 arr의 길이까지, 두 번째 인수는 배열의 요소 중 가장 긴 길이를 주었다. 가장 긴 문자열의 길이를 구해준뒤 이중반복문을 통하여 외부에는 가장 긴 문자열의 길이만큼 반복시키고, 내부..
정말 화가나는 예비군훈련을 마치고 다시 현생으로 돌아오자마자 마주친건 state끌어올리기.... 생전 처음들어보았다. 그래서 이게 뭔지 알아보기위해 포스팅을 하려고한다. 👉🏻 상태 끌어올리기 처음엔 이게 뭘까.. 가만히 생각해보다가 멱살 끌어올리기밖에 생각이안나서 여기저기 찾아보았다. 상태 끌어올리기란 ?? 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 타입이 무엇인지만 알 수 있다. 또한 데이터가 state로부터 왔는지, 하드코딩을 통해 입력된 내용인지도 모른다. 따라서, 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름" 처럼 느껴질 수 도 있다. 결국 상위 컴포넌트의 "상태를 변경하는 함수" 그자체를 ..
문제 : 2차원 배열(배열을 요소로 갖는 배열)을 입력받아 'B'의 위치 정보를 요소로 갖는 배열을 리턴해야 합니다. 입력 : 배열을 요소로 갖는 배열 arr[i]는 'A' 또는 'B'만을 요소로 갖는 배열 출력 : 'B'의 위치 정보(행, 열)를 요소로 갖는 배열을 리턴해야 합니다. 배열의 요소는 차례대로 행, 열입니다. ([행, 열]) 행: 'B'를 요소로 갖는 배열 arr[i]의 인덱스 i 열: arr[i]에서 'B'(arr[i][j])의 인덱스 j 주의사항 : arr, arr[i]의 길이는 다양하게 주어집니다. 항상 한 개의 문자열 'B'가 존재합니다. 입출력 예시 : 풀이 : 나만의 해설: for문을 이용하여 2차원 배열내의 배열요소를 순차적으로 돈다. i번째 배열에 'B'가 포함되어있는지 여부..
문제 : 문자열을 입력받아 연속된 한자리 홀수 숫자 사이에 '-'를 추가한 문자열을 리턴해야 합니다. 입력 : string 타입의 숫자 문자열 출력 : string 타입을 리턴해야 합니다. 주의사항 : 0은 짝수로 간주합니다. 입출력 예시 : 풀이 : 나만의 해설: 문자열을 리턴해주어야하기 때문에 result에 빈문자열로 초기화를 해준다. for 반복문을 돌면서 현재의 Idx에서 str[i]를 2로 나누어 나머지가 1일때 즉, 홀수일때 그리고 현재의Idx의 전인 str[i-1]을 2로 나누어 나머지가 1일때 result에 "-"를 넣어주고 그다음에 result에 str[i]를 넣어줌으로써 str[i]앞에 "-"가 위치하도록 하였다.
문제 : 문자열을 요소로 갖는 배열을 입력받아 가장 짧은 문자열과 가장 긴 문자열을 제거한 배열을 리턴 입력 : string 타입을 요소로 갖는 배열 arr[i].length는 20 이하 출력 : 배열을 리턴해야 합니다. 주의사항 : 가장 짧은 문자열의 길이와 가장 긴 문자열의 길이가 같은 경우는 없습니다. 가장 짧은 문자열 또는 가장 긴 문자열이 다수일 경우, 나중에 위치한 문자열을 제거합니다. 입출력 예시 : 풀이 : 나만의 해설: 배열을 리턴해야하기 때문에 빈배열을 먼저 선언해준다. 그리고 가장 긴문자열의 길이(longestLen), 가장 짧은문자열의 길이(shortLen), 가장 긴문자열의 Idx(longestIdx), 가장 짧은문자열의 Idx(shortestIdx)를 각각 초기화를 해준다. 여기..
오늘은 렌더링에 대해서 알아서보려고한다. 먼저 렌더링(Rendering)이란 무엇인가!?? 렌더링은 화면에 표시할 웹 페이지를 만드는 과정을 의미한다. 렌더링 과정은 다음과 같이 이루어진다. 1. Loader가 서버로부터 HTML을 불러온다. 2. HTML을 분류(Phasing)하여 DOM트리를 만든다. 3. css파일과, 스타일 요소를 분류하여 CSSOM트리를 만든다. 4. DOM트리와 CSSOM을 결합하여 렌더링트리를 만든다. 5. 렌더링트리의 요소들의 크기와 위치를 계산한다. 6. 계산된 크기와 위치에 맞게 화면에 출력한다. 렌더링은 Client와 Server중 어느쪽에서 렌더링이 준비되느냐에 따라 CSR(Client Side Rendering) , SSR(Server Side Rendering) ..
이번 스프린트를 하면서 새롭게 배운점을 작성해보자!! filter 배열메소드를 통해 dummyTweets 배열에 있는 트윗목록 중에 유저이름이 parkhacker인 사람의 트윗만 가져오도록 하였다. useState 훅을 사용하여 user에는 초깃값 "parkhacker", msg에는 초깃값 "" 빈 문자열, tweets에는 초깃값 dummyTweets를 주었다 handleChangeUser 함수가 호출 됐을때, user를 setUser 데이터변경함수를 통해 event.target.value로 변경해주었다. 위의 내용과 마찬가지로, handleChangeMsg 함수가 호출 되면, msg를 setMsg 데이터변경함수를 통해 event.target.value로 변경해주었다. Tweets을 하나씩 돌면서, ma..
저번 포스팅에서 작성하였던 프로퍼티(props)는 컴포넌트 내부에서 값을 바꿀 수 없었다. 하지만 분명 컴포넌트에서 값을 바꿔야 할일이 있을터.... 그럼 그때 어떻게해야하나?? 그때는 state를 사용한다!! 💡 1. state가 뭘까?? 컴포넌트 내부의 동적인 데이터 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용한다. 현재 컴포넌트에서 생성, 변할 수 있는 데이터로 오직 state가 생성된 컴포넌트 내에서만 변경이 가능. 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용 즉, 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다. 상태(state)란 계속해서 동적으로 변화하는 특정 상태(=값) 상태(=값)에 따라 각각 다른 ..
저번 포스팅까지 페이지 이동에 대해 배웠다. 그럼 이제 페이지를 이동시킬 수는 있는데 상위 컴포넌트가 하위 컴포넌트에 값을 전달해줘야, 하위 컴포넌트가 그걸 받고, 렌더링을 해줄것이 아닌가!! 그걸 하기 위해서 props라는것이 필요한 것이다. 뉘에뉘에~~ 그거때문에 쓰는 건 알겠고, 그럼 어떻게 쓰는건가요!?? 👉🏻 Props(프로퍼티)란!?? Props= Properties 의 줄임말이라고 생각하면 된다. 위의 사진처럼 프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용. (단방향 데이터 흐름) 프로퍼티는 수정할 수 없다!! (자식입장에선 읽기 전용) 함수에 전달하는 매개변수 ❓ 그럼 Props를 어떻게 사용하나유 일단 jsx문법상으로 프로퍼티에 문자열을 전달할땐 (" "), 문자열 외의..
문제 : 문자열을 입력받아 문자열 내에 아래 중 하나가 존재하는지 여부를 리턴해야 합니다. 'a'로 시작해서 'b'로 끝나는 길이 5의 문자열 'b'로 시작해서 'a'로 끝나는 길이 5의 문자열 입력 : string 타입의 알파벳 문자열 출력 : boolean 타입을 리턴 주의사항 : 대소문자를 구분하지 않습니다. 공백도 한 글자로 취급합니다. 'a'와 'b'는 중복해서 등장할 수 있습니다. 입출력 예시 : 풀이 : 나만의 해설: 대소문자를 구분하지 않기 때문에 str문자열을 모두 다 소문자로 바꿔준다. sol을 빈배열로 준다. 반복문을 돌려 소문자로 바꾼 str을 (1~5), (2~6), (3~7) 이처럼 5개씩 끊어서 sol 배열에 넣어준다. sol배열에 들어간 5개의 문자 중 0번째, 4번째 문자가..
