부트캠프

코드스테이츠 프론트엔드 부트캠프

[회고] 코드스테이츠 프론트엔드 부트캠프 section3 회고

👍 keep 꾸준한 운동 교육 초반에는 주 3회 달리기였으나 갈수록 시간 여유가 없고 미세먼지 이슈로.. 주 2회로 줄였습니다. 그래도 꾸준히 운동을 하다 보니 체력도 좋아지고 하루를 좀 더 활기차게 보낼 수 있었습니다. 런데이 8주 코스를 전부 완료해서 이제 30분 연속 달리기가 가능합니다! 5km 넘게 뛸 수 있습니다!!🙌 블로깅 평일에는 되도록 1일 1블로깅을 하려 하고 있습니다. 블로깅을 위해서라도 공부를 하게 되고 블로그 글을 쓰면서 배웠던 것들을 정리해 둘 수 있어 좋습니다. 그리고 공부했는데 기억이 안 나는 것이 생겼을 때 가장 먼저 찾아보게 되는 곳도 블로그입니다. ❌ problem 정체된 공부.. 방향성 상실 처음에는 그냥 주어진대로 공부하기만 하면 돼서 시간을 투자하는 대로 효과가 나는..

코드스테이츠 프론트엔드 부트캠프

[회고] 코드스테이츠 프론트엔드 부트캠프 section2 회고

KPT 회고법 Keep, Problem - Try를 의미하는 KPT 회고법에 따라 Section2를 돌아보았습니다. 👍 Keep(계속 유지하면 좋을 것) ✔️ 동료들에게 도움 요청하기 지난번 회고 때 어려운 점이 있을 때 동료들에게 도움을 받자는 다짐을 했었습니다. 그래서 실제로 잘 모르는 것이 있을 때, 코딩하다 막힐 때 도움을 요청했고 많은 분들이 제 기대보다 훨씬 적극적으로 도움을 주시고, 제가 궁금했던 것 그 이상을 알려주셨습니다. 이 자리를 빌어 감사드리고(?) 앞으로도 많은 분들께 신세를 지면서... 살아가 보려합니다. 아 물론 제가 도울 수 있는 것이 있다면 동료들에게 적극적으로 도움 주도록 하겠습니다. ✔️ 스터디 참여 섹션2 때부터 본격적으로 스터디에 가입해서 공부하기 시작했습니다. 부..

프로젝트/미니 프로젝트 & 과제

[과제] StatesAirline 서버 구현

과제 목표 flight Router ✓ GET /flight 요청은 파싱 가능한 JSON 문자열을 돌려줘야 합니다 ✓ GET /flight 요청의 응답은 배열의 형태여야 합니다 ✓ GET /flight 요청의 응답 객체는 `uuid, departure, destination, departure_times, arrival_times`를 포함해야 합니다 ✓ GET /flight?departure_times=2021-12-03T12:00:00&arrival_times=2021-12-03T12:00:00를 입력하면 조건에 해당하는 객체를 응답으로 보냅니다 ✓ GET /flight?departure=CJU&destination=ICN 을 입력하면 조건에 해당하는 객체를 응답으로 보냅니다 ✓ GET /flight/..

React

[React] useEffect 사용하기

useEffect useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정한다. useEffect를 사이드이펙트를 다루는 훅이라고도 하는데, 사이드이펙트란 컴포넌트의 주요 목적인 화면에 렌더하는 것 이외의 효과를 말한다. 즉, ui를 생성하고 변경하는 것 이외에 애플리케이션에서 벌어지는 모든 변화를 사이드이펙트라고 할 수 있다. 예를 들면 http 요청을 보내거나, 타이머를 설정 및 관리하는 것 등이다. 다음과 같은 경우 useEffect가 유용하다. 1) 마운트/ 언마운트 시에 특정 함수를 실행하고 싶다면 2) 특정 값의 변화에 따라서 어떤 조작을 하고 싶다면 useEffect는 매개변수로 콜백 함수와 그 함수의 의존성을 담은 배열을 받는다. 의존성이란 무엇이 변했을 때 콜백 함수가 ..

React

[React] state, props

props 컴포넌트 속성을 설정할 때 사용하는 요소로, 부모로부터 전달받은 값을 담고 있다. props는 객체 형태로, 어떤 형태의 값도 자유롭게 담아서 전달할 수 있다. 또, props는 읽기 전용이므로, 하위 컴포넌트에서는 수정하지 못한다. 이는 리액트에서 데이터 흐름이 top-down의 단방향 흐름이라는 것을 보여준다. 이런 특징 때문에 여러 컴포넌트에서 공유하는 데이터가 있다면 해당 컴포넌트들이 공유하고 있는 부모 컴포넌트에 데이터를 위치시키고 props를 통해 각 후손 컴포넌트들에 전달해야 한다. 실습하면서 useState를 어디에 둬야 할지 계속 헷갈렸는데 이 점을 꼭 기억하자! state 컴포넌트 내에서 계속 변하는 값이 state다. '상태'라는 것은 지속적으로 변화한다는 의미를 내포하고 ..

React

[React] React Router 사용해 SPA 만들기

1. SPA(Single Page Application) SPA는 사용자가 느끼기에는 여러 페이지가 존재하는 것 같지만 실제로는 하나의 페이지인 것을 말한다. 멀티 페이지 애플리케이션 기반으로는 페이지를 이동할 때마다 매번 새롭게 리소스를 받아와 표시하지만 SPA는 html을 한번만 받아 오고 페이지 이동 시에는 변화가 필요한 부분만 새롭게 데이터를 받아 온다. 이렇게 페이지를 구성하면 사용자와의 상호작용이 많은 애플리케이션에서 속도가 향상되고 더 부드러운 페이지 업데이트가 가능하다는 장점이 있다. 그에 비해 처음 페이지를 표시할 때 거의 비어 있는 html 페이지를 받아 오고 나머지는 자바스크립트를 통해서 내용을 구성하다 보니 첫 로딩 시간이 길어질 수 있다는 단점도 있다. SPA에서 또 한가지 단점이..

React

[React] 리액트의 원리와 특징

1. 리액트의 주요 특징 리액트는 자바스크립트 기반의, 오로지 UI에만 집중한 라이브러리다. 리액트는 선언형 프로그래밍을 지향한다. 선언형 프로그래밍이라는 것은 내가 이해한대로 표현하자면 '목적'을 분명히 밝힌다는 것이다. 명령형 vs 선언형 프로그래밍을 말할 때 'how'와 'what'의 차이라고도 하는데, 'what'을 밝힌다는 것은 지금 이 코드의 목적이 무엇인지를 분명히 한다는 것이다. 그에 비해 'how'가 중점이 되면 어떻게 목적에 도달하는지를 그 과정을 상세하게 표현한다. 리액트는 컴포넌트를 기반으로 하는데, 컴포넌트라는 것 자체가 하나의 기능을 하는 코드들을 묶어 놓은 것이기 때문에 컴포넌트를 제 용도에 맞게 잘 활용하면 그 기능을 어떻게 구현했는지는 컴포넌트 속에 감춰진 채 겉으로 드러난..

Javascript

[Javascript] 비동기 프로그래밍

1. 비동기 프로그래밍 동기 냐 비동기냐 하는 구분은 두 개 이상의 작업의 처리 방식에 따라 나누는 구분 방식이다. 즉, 호출한 함수가 있고 호출되는 함수가 있을 때 이 두 가지를 어떻게 처리할 것이냐 하는 것인데, 동기 처리 방식을 따르면 호출된 함수의 수행 결과를 호출한 함수에서 동시에 계속 신경 쓰고 있다. 비동기 처리 방식에서는 호출된 함수의 수행 결과를 호출된 함수 혼자 신경 쓰고 처리한다. 따라서 비동기 프로그래밍 방식은 호출된 함수의 실행 및 완료와 별개로 다른 태스크를 계속 수행할 수 있다. 2. 비동기 프로그래밍의 필요성 비동기 프로그래밍을 하면 한 작업이 완료되기를 기다리지 않고도 다른 작업을 수행할 수 있다. 서버에서 사용자 정보를 받아오거나 동영상을 로드하는 등 오래 걸리는 작업을 ..

JeanneLee57
'부트캠프' 태그의 글 목록