이번 과제에서는 지금까지 배웠던 내용들을 토대로 Modal, Toggle, Tab, Tag UI을 구현해보았다. 🖥️ Modal 컴포넌트 Modal 컴포넌트에서 핵심은 새로운 창이 아니라, 레이어를 깔아야한다. 먼저, useState를 사용하여 isOpen 상태를 만들어주어, 모달창이 켜진상태와 꺼진상태의 상태를 만들어준다. 그리고, openModalHandler 함수를 통하여 함수가 호출되어 실행되면, 모달창의 켜짐여부인 isOpen의 상태가 바뀌게 만들어주었다. ModalBackdrop과 ModalView의 부모 컨포넌트인 ModalBtn에 이벤트 핸들러를 주어 자식 컴포넌트에도 같은 핸들러가 작동이 되기때문에 자식 컴포넌트에서는 작동이 되지않게 하기위해 해당 이벤트 핸들러 e에 stopPropaga..
오늘은 재귀함수를 처음 들어봄과 동시에 코플릿 문제를 풀어보았다. 아니 너무어려운거 아닌가요...?? 프로그래머스 입문풀고있는 나에게 너무 가혹하였다,,, 먼저 재귀란?? 컴퓨터 과학에서 재귀란 자신을 정의할 때 자기 자신을 재참조하는 방법 (나무위키 백) 그럼 재귀함수(Recursion Function)이란?? 재귀의 설명대로 함수에서 자기 자신을 다시 호출해 작업을 수행하는 방식이다. 그렇기에 특정 분기까지 자기 자신을 계속 호출한다. 주로 반복문을 구현할 때 사용한다. 흔히 사용하는 for, while 등과 같은 반복문으로 구현가능한 로직은 모두 재귀함수로도 가능하고, 그 반대도 역시 가능하다. 재귀 함수의 장단점 장점 변수를 여럿 만들 필요가 없다. 예를 들어, 현재 상태를 저장해야 할 경우 변수..
오늘은 sprint 과제를 진행하면서 처음 알게된점, 다시한번 복습하게된점, 중요한점을 다시 정리하여 나의 것으로 만들어보려고 한다. 이번과제를 진행하면서 저번에 포스팅하였던 상태 끌어올리기에 대해서 더 잘 이해하게 된 것같아서 아주 유익한 sprint였다. 6. State 끌어올리기(Lifting State Up) 정말 화가나는 예비군훈련을 마치고 다시 현생으로 돌아오자마자 마주친건 state끌어올리기.... 생전 처음들어보았다. 그래서 이게 뭔지 알아보기위해 포스팅을 하려고한다. 👉🏻 상태 끌어올 jhbljs92.tistory.com 먼저, 이번 스프린트는 항공권 정보를 받아와서 도착지를 입력하여 입력된 도착지에만 해당하는 항공권 정보를 필터링해서 리스트를 렌더링해주는 스프린트이다. 먼저, 구조를 살..
이번 스프린트를 하면서 새롭게 배운점을 작성해보자!! filter 배열메소드를 통해 dummyTweets 배열에 있는 트윗목록 중에 유저이름이 parkhacker인 사람의 트윗만 가져오도록 하였다. useState 훅을 사용하여 user에는 초깃값 "parkhacker", msg에는 초깃값 "" 빈 문자열, tweets에는 초깃값 dummyTweets를 주었다 handleChangeUser 함수가 호출 됐을때, user를 setUser 데이터변경함수를 통해 event.target.value로 변경해주었다. 위의 내용과 마찬가지로, handleChangeMsg 함수가 호출 되면, msg를 setMsg 데이터변경함수를 통해 event.target.value로 변경해주었다. Tweets을 하나씩 돌면서, ma..
오늘은 리액트를 시작하는 날이였다 하지만 첫날부터 이런 고비가...?? 이거 jsx 뭐야..?? 왜이래? 내가했던 HTML, JS 어디감...?? 여튼 이번 과제는 이름, 사진, 내용 등등이 들어있는 데이터 더미가 주어지고 이 데이터 더미에서 내용을 뽑아와서 구현해보는 과제를 풀었다. 처음에 딱 app.js 보자마자 든생각은 이걸 뭐 어쩌라고??? 어떡하라고 하지만 마음을 다잡고 다시 이해해보니 오?? 이렇게하는건가? 하나씩 맞춰가다보니 생각보다 간단했다. 완성된 브라우저는 다음과 같이 된다. 1. import로 모듈 불러오기 먼저 import 를 통해 export로 내보낸 모듈을 가져온다. 2. Sidebar 컴포넌트 구성 Sidebar 컴포넌트는 위의 브라우저 사진에서 왼쪽 빨간색 사이드바의 컴포넌트..
오늘 진행했던, fetch를 이용하여 HTTP 요청을 보내고, 응답을 받는 연습을 정리해볼겸 포스팅하려고 한다. fetch에 대해서는 제대로된 정리글을 다시 포스팅할 것이기 때문에 문제 위주로 적으려고 합니다. 먼저, 간단하게 fetch가 뭐야...?? fetch API 는 Promise 기반으로 구성된 비동기 처리 프로그래밍에 잘 맞는 형태인 기능이다. 그래서, then이나 catch와 같은 체이닝으로 작성할 수 있는 장점이 있다. 또한, JS 기본기능이기 때문에 CDN과 같은 다른 작업 없이도 바로 사용할 수 있다. 기본 문법을 보면, fetch("여기에 URL 입력") .then(response=>response.text()) .then((text)=>{ 요청 끝나고 할일 }) 위의 문법으로 아래처..
브라우저는 자바스크립트를 해석하고, 실행할 수 있는 자바스크립트 엔진을 내장하고 있음. 또한, Node.js도 자바스크립트 엔진을 내장하고 있음. 따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행 가능 하지만, 브라우저와 Node.js는 용도가 다르다!! 브라우저 Node.js 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장, ECMAScript 를 실행가능(몇몇 기능은 호환 X) HTML, CSS, Javascript를 실행하여 웹페이지를 브라우저 화면에 랜더링 하는 것이 주 목적 브라우저 외부에서 자바스크립트 실행 환경을 제공해주는 것이 주 목적 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공 DOM API 을 제공하지 않음..
3월 17일 진행한 underbar 풀이를 정리해본다. underbar?? 밑줄...?? 내가 처음 과제를 받자마자 든생각은 이랬다. underbar는 배열 메서드가 브라우저에서 자체적으로 지원하지 않았을 시절, 보다 나은 방법으로 배열이나 객체를 다루기 위한 도구 모음집을 만들었는데 이를 라이브러리(Library)라고 불렀다. 따라서 이번 과제는 배열, 객체를 다루는 Underbar 라는 라이브러리를 직접 구현하면서 내장 메서드가 어떻게 동작하는지 원리를 학습. 여기서 collections가 나오는데, 이게 무엇이냐!!! collection을 직역해보면 , '모음', '무리' 라는 뜻이다. cs(컴퓨터 사이언스)에서는 '데이터(data, 자료)의 모음'이라고 생각할 수 있다. 우리가 배운 collect..
