저번 포스팅까지 페이지 이동에 대해 배웠다. 그럼 이제 페이지를 이동시킬 수는 있는데 상위 컴포넌트가 하위 컴포넌트에 값을 전달해줘야, 하위 컴포넌트가 그걸 받고, 렌더링을 해줄것이 아닌가!! 그걸 하기 위해서 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번째 문자가..
오늘 배운 것은 리액트 라우터!! 사실 JSX에 익숙해지기도 전에 벌써 페이지 이동을...?? 나 이래도 되는걸까..? 지금까지 앞에서 JSX를 쓰는법과, 구조를 나눠서 작성하는 컴포넌트까지 배웠다. 이제 그 컴포넌트들을 연결해서 페이지 이동을 시켜봐야 하지않겠나!?? 🔗 라우팅..?? 샤우팅은 알아도 라우팅은 뭐야... 누가 나에게 라우팅이 뭐야?? 라고 물었을 때 나는 이렇게 대답할 것 같다. 사용자가 요청을 한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 리액트 라우터는 라우팅을 하기 위한 사용도구!! 라고 생각 일단, 라우팅이 왜 필요한지 알아야 쓰지... 그걸 알기 위해서는 SPA에 대해 알아야한다. 리액트는 SPA (Single Page Application)이다. 싱글 페이지 어플..
문제 : 문자열을 입력받아 해당 문자열에 등장하는 두 칸의 공백을 모두 한 칸의 공백으로 바꾼 문자열을 리턴해야 합니다. 입력 : string 타입의 문자열 출력 : string 타입의 문자열 주의사항 : 두 칸을 초과하는 공백은 존재하지 않는다고 가정합니다. 입출력 예시 : 풀이 : 나만의 해설: 정규식을 활용하여 풀었다. 정규식을 크게 풀어보면, 문자열의 시작부분에 있는 하나 이상 또는, 두개 이상의 연속 공백를 대체하는 단일 공백 문자 (" ") 를 주었다. 자세하게 정규식을 뜯어보면, ^\s+ : 문자열의 시작 부분에 하나 이상의 공백 문자를 찾습니다. \s{2,} : \s는 모든 공백 문자를 나타내며, {2,}는 연속으로 두번 이상의 공백을 나타낸다. 이것들을 마지막에 " " 를 통하여 단일 공..
React포스팅 중 첫번째 포스팅인 jsx문법을 마치고 문법을 알았다면! 그다음에 아주아주 중요한!! 컴포넌트에 대해 써보자! 리액트로 만들어진 웹사이트 및 화면은 컴포넌트로 구성이 되어있기 때문에 리액트를 쓴다?? 하면 엄청나게 중요하다. 빡세게 기초부터 공부해두자!! 알아야쓰지... 리액트 컴포넌트가 뭐야?? 그쵸?? 알아야 쓰든가말든가 하죠 한번 알아봅시다!! 리액트 컴포넌트는 역할도 많고 이점이 상당히 많은 친구다 뭐... 한마디로 정해보면 리액트의 핵심 빌딩 블록중 하나 즉, 리액트에서 개발한 모든 애플리케이션은 컴포넌트라는 조각으로 구성이 된다. 그런 컴포넌트로 UI구축 작업을 훨씬 쉽게 만듬. 그리고, "props"라는 임의의 입력을 받고 화면에 어떻게 표시되는지 기술하는 리액트 엘리먼트를 ..
첫 리액트 포스팅은 !! React에서 사용하는 문법 JSX에 대해 쓰려고 한다. 바로 본론으로~ ⭐️ JSX가 뭘까?? JSX(Javascript XML)는 Javascript에 XML을 추가한 확장문법. JSX는 리액트로 프로젝트 개발할 때 사용되므로 공식적인 Javascript 문법은 아님. 브라우저는 Javascript형태의 코드를 읽기 때문에, 브라우저에서 실행하기 전에 바벨을 사용하여 JS 형태의 코드로 변환. JSX는 하나의 파일에 JS와 HTML 동시 작성. 위의 이유 때문에 가독성이 높고 작성이 쉬움. 🖋️ 그럼 JSX를 어떻게쓰는거야?? (문법) JSX는 기본 규칙이 존재한다. 어떤게 있는지 살펴보자! 1. 구성요소에서 여러 요소를 반환하려면 단일 상위 태그로 요소를 래핑해야함. 쉽게 ..
오늘은 리액트를 시작하는 날이였다 하지만 첫날부터 이런 고비가...?? 이거 jsx 뭐야..?? 왜이래? 내가했던 HTML, JS 어디감...?? 여튼 이번 과제는 이름, 사진, 내용 등등이 들어있는 데이터 더미가 주어지고 이 데이터 더미에서 내용을 뽑아와서 구현해보는 과제를 풀었다. 처음에 딱 app.js 보자마자 든생각은 이걸 뭐 어쩌라고??? 어떡하라고 하지만 마음을 다잡고 다시 이해해보니 오?? 이렇게하는건가? 하나씩 맞춰가다보니 생각보다 간단했다. 완성된 브라우저는 다음과 같이 된다. 1. import로 모듈 불러오기 먼저 import 를 통해 export로 내보낸 모듈을 가져온다. 2. Sidebar 컴포넌트 구성 Sidebar 컴포넌트는 위의 브라우저 사진에서 왼쪽 빨간색 사이드바의 컴포넌트..
문제 : 2차원 배열(배열을 요소로 갖는 배열)을 입력받아 각 배열을 이용해 만든 객체를 리턴해야함. 입력 : 배열을 요소로 갖는 배열 arr[i] 는 string 타입을 요소로 갖는 배열 arr[i].length 는 0 또는 2 출력 : arr[i] 의 첫번째 요소를 키, 두번째 요소를 값으로 하는 객체를 리턴해야 함. 주의사항 : 중복되는 키의 경우, 초기의 값을 사용합니다. 빈 배열을 입력받은 경우, 빈 객체를 리턴해야 합니다. arr[i]의 길이가 0인 경우, 무시합니다. 입출력 예시 : 풀이 : 나만의 해설: 리턴을 객체로 해야하니까 먼저 result에 빈객체를 만들어주었다. 2차원 배열들을 하나하나 돌면서 값을 받아와서 객체의 키와 값으로 만들어줘야 하니까 for문을 사용하여 2차원 배열들을 ..
