TIL

[Day 30] 2022-0803 : state 배열 데이터 필터링과 데이터 삭제

오늘 배운 것 리액트 state를 특정 조건에 따라서 필터링하여 갱신하고, 또 삭제하여 갱신하는 연습을 했다! 새롭게 알게 된 것 오늘 내용은 Advanced 요구사항 구현을 빙자한 삽질이 대부분이라 어떻게 정리를 해야 할지 감이 안 온다. 일단 오늘의 요구사항부터 정리해보자! 과제의 주요 요구사항은 C:사용자 입력데이터로 트윗 생성, R:모든 트윗 불러오기, D:버튼 클릭 시 트윗 삭제이다. 여기에 추가로 select와 option을 활용해 선택한 사용자가 쓴 글만 보이도록 하는 드롭다운 메뉴가 필요하다. 드롭다운 메뉴 만들기 먼저 드롭다운 메뉴를 만들기 위해서.. 처음에는 컴포넌트로 생각하고 접근했다. 이 부분까지 컴포넌트로 따로 분리하여 작성하는 것이 맞는지 잘 모르겠는데, 분리해서 작업을 한 결과..

[Day 29] 2022-0802 : props, state 활용해 SPA 만들기

오늘 배운 것 리액트의 Props와 State 개념에 대해서 정리해보았다. [React] 리액트 Props 와 State 를 알아보자! 리액트에서 컴포넌트는 하나의 기능 단위로 구분된 코드 모음, 즉 데이터 + 화면이 같이 존재한다. 따라서 컴포넌트 내부 로직은 데이터가 변경되면 화면이 바뀌는, 데이터 중심으로 동작한다. friedegg556.tistory.com 새롭게 알게된 것 Props와 State 활용 오늘은 어제까지 진행했던 twitter 클론 과제에 이어서, 사용자가 입력한 데이터를 화면에 렌더링할 수 있도록 props와 state 개념을 활용하여 연습했다. 과제가 진행될수록 컴포넌트간 분리가 더욱 확실해졌는데, 오늘 과제에서는 컴포넌트와 컴포넌트를 포함하는 페이지들 그리고 전체 페이지 경로를..

[Day 28] 2022-0801 : SPA와 리액트 라우터/ useNavigate

오늘 배운 것 SPA Single-Page Application 의 장점과 단점 리액트 라우터 라이브러리 사용 방법 useNavigate 컴포넌트 활용 [React] SPA 는 무엇인가? / React Router 활용하기 SPA 란 무엇인가? 기존에는 웹페이지를 미리 준비해두었다가, 로딩할 때 새 페이지를 서버 측에서 전달받아와 렌더링을 했었는데 규모가 커지고 사용자와의 상호작용이 많아짐에 따라서 속도 저 friedegg556.tistory.com 새롭게 알게된 것 SPA 하나의 페이지로 구성된 웹 애플리케이션으로, 전체 페이지중 변화되는 부분만을 업데이트하여 새로고침 하지 않고 화면 전환을 할 수 있다는 장점이 있다. 모든 데이터 리소스를 클라이언트 사이드에서 렌더링하는 CSR (클라이언트 사이드 렌..

[Day 26] 2022-0728 : fetch API 다양한 방법으로 활용하기

오늘 배운 것 클라이언트 - 서버의 통신 과정에 대해서 간략하게 정리 Fetch API 호출 결과를 promise - then, Promise.all, async / await 세 가지 방법으로 핸들링. 프론트엔드 개발자가 왜 자료구조와 알고리즘을 알고있어야 하는가? - 스터디 주제 새롭게 알게된 것 API 요청과 응답은 어떻게 이루어지는가? 클라이언트(브라우저) 측에서 request 요청을 보내면, 서버가 그에 응답하여 해당하는 데이터를 클라이언트측으로 response 한다. 이를 Request-Response 모델 혹은 Client-server 모델이라고 한다. https://friedegg556.tistory.com/manage 라는 url이 있을 때, http 혹은 https 부분을 프로토콜, f..

[Day 25] 2022-0727 : 프로미스와 한 판 붙은 하루

오늘 배운 것 프로미스 객체의 다양한 활용법 콜백함수, promise와 then 체이닝, Promise.all, async / await으로 비동기처리 구현 과제 w. node.js 의 fs 모듈. 프로미스까지 겨우겨우 정리한 상세한 블로깅... [JavaScript] 비동기 함수 제어 : 콜백함수, promise, async / await 비동기란 무엇이죠? 왜 비동기가 필요한가요? 🤔 유튜브를 보려고 하는데 실수로 다른 영상을 클릭해버렸다... 그런데 이 유튜브세상은 모든 것이 순차적으로 동작하기 때문에, 다른 버튼을 클 friedegg556.tistory.com 새롭게 알게된 것 프로미스 객체 프로미스 객체란 자바스크립트에서 비동기 작업을 처리할 때 사용되는 특별한 객체이다. 프로미스란 이름처럼 미..

[Day 24] 2022-0726 : 내장 함수 직접 구현하기, 비동기 Day

오늘 배운 것 자바스크립트의 각종 내장 함수를 직접 구현하며 동작 원리에 대해 심도있게 알 수 있었다. 동기와 비동기, promise 와 async, await 새롭게 알게된 것 동기와 비동기 작업이 순차적으로 실행되는가, 혹은 그렇지 않은가의 차이이다. 동기적 코드에서는 뒤에 실행될 작업이 앞 작업이 끝나기를 기다리는 블로킹이 발생한다. 비동기적 코드에서는 이전 작업이 끝나는 것과 관계없이 작업을 실행할 수 있기 때문에 논블로킹 방식이라고 할 수 있다. 비동기 방식에서는 모든 작업들이 같은 순차적으로 실행되기 보다는 순서에 상관 없이 실행될 수 있다. 예시로, 이미지 태그가 있고, 이 이미지가 로드되자마자 실행되는 이벤트 리스너가 있고 그 다음에 작성된 코드가 있다고 하자. 이미지 태그는 src를 로드..

[Day 23] 2022-0725 : 쉬운 듯 어려웠던 ES6 클래스 문법 + props

오늘 배운 것 프로토타입 체인에 대해서 강의 듣고, 이해한대로 블로그 정리 [JavaScript] 프로토타입 체인 프로토타입 상속과 프로토타입 체인 생성자 함수(클래스)의 프로토타입 속성은, 그로부터 생성된 인스턴스의 프로토타입이 된다. 인스턴스의 constructor 속성은 해당 클래스를 가리키고, 클래스 friedegg556.tistory.com 클래스 간의 상속에 대해 ES5 방식과 ES6 클래스 문법 방식으로 나누어 정리 [JavaScript] 클래스간의 상속 (프로토타입 상속) 클래스간의 상속 자바스크립트에서는 엄밀히 따지면 일반적인 클래스 개념이 존재하지 않지만, 편의를 위해 클래스라고 지칭함. 하나의 클래스에서 다른 클래스에게 프로토타입을 상속하는 것 friedegg556.tistory.co..

[Day 22] 2022-0722 : 객체지향과 프로토타입 블로깅 데이

오늘 배운 것 선택 정렬 알고리즘 개념 정리 [알고리즘 JS] 선택 정렬 알고리즘 : Selection Sort Algorithm 유데미 쉽게 배우는 JavaScript 알고리즘 입문 강의의 내용을 정리한 글입니다. 정렬 알고리즘이란? 일단 정렬 알고리즘이란, 말그대로 주어진 범위 내의 불규칙적으로 나열된 데이터들의 순서를 friedegg556.tistory.com 객체 지향 프로그래밍 패러다임, 클래스와 인스턴스 개념 [JavaScript] 객체지향 프로그래밍 : OOP란 무엇인가? 객체 지향 프로그래밍 : Object Oriented Programming 말 그대로 객체의 개념에 기반을 둔 프로그래밍 패러다임이다. (여기서 패러다임이란 우리가 작성하는 코드의 스타일, 코드를 어떻게 작성하고 조 fri..

[Day 21] 2022-0721 : 고차함수!

오늘 배운 것 자바스크립트 일급 객체와 고차 함수 내장 고차 함수 (배열 메서드 : filter, map, reduce 학습) + 코플릿 문제풀이 고차함수의 중요성 : 추상화 클로저와 커링의 차이? 초간단 정리 [JavaScript] 클로저와 커링 초간단 정리 클로저와 커링의 차이가 무엇일까? 클로저 함수 Closure 외부 함수의 변수에 접근 가능한 내부 함수. 내부함수를 리턴하는 외부함수가 존재할 때, 내부 함수에서 외부함수에 있는 변수를 조회하고 friedegg556.tistory.com 새롭게 알게 된 것 일급 객체란? 다른 객체들에게 적용 가능한 연산을 모두 지원하는 객체이다. 아래의 세가지 특징을 가지면 일급 객체라고 할 수 있다. 1. 변수에 할당할 수 있다. 2. 다른 함수의 전달인자로 전..

[Day 20] 2022-0720 : 섹션 1 마무리✨

오늘 배운 것 기술 면접 준비 : css 태그는 왜 태그 안에 위치하고, javaScript 태그 안에 위치시키는가? 섹션 1 회고 진행 [회고] 코드스테이츠 FE 섹션 1 회고 목표가 무엇이었는지? 기본기 있는 개발자 되기. 코스를 처음 시작하며 정했던 목표이다. 지금도 이 목표는 그대로이다. 다만 구체적인 기간을 추가하자면 내년 상반기에는 개발자로써 첫 커리 friedegg556.tistory.com 내일 있을 스터디 발표자료 준비 : 자바스크립트의 동작 원리 리액트 강의 듣기 : 리액트는 무엇이며 왜 사용해야함? [React] 리액트는 무엇이고, 왜 리액트를 사용해야 하는가? 본 게시글은 한입 크기로 잘라 먹는 리액트 (인프런) 강의를 보고 정리한 내용입니다. 리액트란 무엇인가 node.js 기반의..