프론트엔드 킹왕짱이될테다 프론트엔드 킹왕짱이될테다

Axios: promise를 기반으로 http를 이용해서 서버와 통신하기 위해 사용하는 패키지 AXIOS에서 get메서드를 이용하려면 인자로 url과 config를 받아야 함. Async, await를 이용해 비동기처리 비동기처리? Promise? Async? Await? 이 네가지를 알아보겠음! 동기 Synchronous : 동시에 발생하는 순차적/직렬적으로 태스크를 수행한다. 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다. 순차적으로 실행되므로, 어떤 작업이 수행중이라면 뒤의 작업은 대기한다. 블로킹(작업 중단)이 발생한다. 비동기 Asynchronous : 동시에 발생하지 않는 병렬적으로 태스크를 수행한다. 현재 작업의 종료여부와 무관하게 다음 작업을 실행한다. 그러므로 동기 방식과는 달리..

함수내부에서 이용하는건 간단하지만, 이벤트 리스너를 함수 외부로 분리하는 경우! 이벤트 리스너를 외부로 분리해서 textarea에 접근하는 방법은 두 가지가 있다. 1. event.currentTarget 속성을 이용한다. 이벤트가 적용된 부모요소 혹은 자신. 이벤트 범위를 가리지 않고 직접적으로 사용이 가능. 2. this키워드 이용(화살표함수 이용 불가능) 함수가 호출되는 시점에 참조하는 객체가 결정된다. this선언시 코드가 어떤 스코프가 호출되는지에 따라 this가 참조하는 객체는 달라질 수 있다. Document.addEventListner(‘DOMContentLoaded’, () =>{ const h1 = document.querySelector(‘h1’) const textarea = doc..

열심히 고쳐보는 중... 아직 하루남았다.. 어려웠던 점 1. 상세페이지의 id (=주소 뒤에 올 id=화면에 보이는 number) 고유값을 지정해서 만들어줘야했는데, length를 이용하면 안된다. todo 하나를 삭제 하면 length가 삭제된todo랑 제일 마지막으로 만든 todo가 겹쳐서 주소가 혼동됨 그래서 Math.random()을 이용함 Math.floor로 반내림, 그리고 100을 곱해 자연수로 만듦 const newID = Math.floor(Math.random() * 100); 2. 상세페이지에 각각 제목, 내용 넣는 부분... map돌렸더니 난리났다.... 어찌어찌 고쳐보니 리스트 전체가 다 나와버리는 대참사 {todo.map((a, i) => { return ( Number {to..

스파르타코딩클럽 리액트 숙련강의 7강까지의 내용이다........ 8강 넘어가기 전에 정확히 파악해야 8강에서 헤매지 않을 것이라하셔서 9강까지 먼저 보는게 목표였는데 중간 복습을 한번 하려한다.. Redux 쓰는 이유 모든 component가 props 없이도state를 직접 꺼내서 쓸 수 있기 때문에 용이하다. 부모에서 자식방향으로만 프롭스 전달이 가능하다는 불편함을 보완한 것이 리덕스이다. 2~99번의 불필요한 과정이 props drilling이다. Global state 전역상태 : 컴포넌트가 아닌, 중앙 state관리소에서 state들을 생성, 관리한다. 어떤 컴포넌트에서 state가 필요하다면 컴포넌트가 어디에 위치하고있든 상관 없이 state를 불러와 사용 가능. Local state 지역상..

map매서드 왼쪽 array자료 요소의 갯수만큼 함수 안의 코드를 반복실행해줌 함수의 파라미터는 array안에 있던 자료 Return에 뭘 적으면 array로 담아준다. 그리고 map()쓴 자리에 남겨준다. 알고리즘 풀 때부터 map은 써도 써도 완전히 이해하기 어려웠다. map뒤에는 콜백함수가 따라 붙는다. 콜백함수라는 개념도 구글링을 아무리 해도 이해가 안됐는데, 코딩애플에서는 "소괄호 안에 들어가는 함수"라고 간단히 정리해주었다. 그렇게 생각하니 갑자기 쉽게 느껴지는 magic 😳 배열자료 요소의 갯수만큼 함수 안의 코드를 반복실행해준다. [1,2,3].map(function(){ console.log(1) }) 오.. 이렇게 보니 더 잘 이해된다. 배열.map (function(){}) 맵 함수는..

컴포넌트 만들기 1. function을 다른 함수 바깥에 만들고 대문자로 시작하는 컴포넌트를 작명한다. 2. return() 소괄호 안에 표현할 html을 담는다. 여기서, 태그는 두개 이상 병렬할 수 없다. return ( "Hello" "How are you?" ) 이게 안된다는 거다. return 내에 꼭 html을 병렬로 두개 이상 기입하고싶다면, 이렇게 아무 의미 없는 를 대신해서 를 사용할 수 있다. 이를 Fragment문법이라고 한다. 3. 컴포넌트를 표현하기 원하는 위치에 을 입력 (위치는 함수 밖이어야한다) 그리고 보통은 이렇게 쓰지만 이렇게 하나에 다 담고 닫아도 된다. 컴포넌트 어떨 때 쓰면 좋을까 컴포넌트의 단점은 state를 가져다쓸 때 문제가 생긴다는거다. A함수에 있던 변수는 ..

애플코딩 리액트 강의를 샀다. 이틀 전에도 state관련 TIL을 썼는데 또 쓰는 이유는, 이제야 진짜로 100%이해가 되었기 때문... 사람들이 애플코딩 많이 사길래 나도 궁금해하다가 개인과제하는데, 도저히 안되겠어서 어젯밤에 결제했다.... 애플코딩 오늘 하루 공부하고 든 생각은 진작 살걸.. 처음부터 이거만 들을걸 스파르타강의는 들을 수록 코딩은 따라하겠는데 이해도 안가고 ,, 별로다 다시 정리하는 JSX문법과 State JSX문법 1. class대신 className 이용 2. 변수 넣을 땐 중괄호이용. 전에도 작성했지만, return문을 기준으로 위에는 JS문법 그대로 이용이 가능하고 그 아래로는 JSX로 작성해야한다. 중괄호 없이 그대로 변수 post를 넣으면 단순문자열로 인식된다. post라..

State component내부에서 바뀔 수 있는 값을 의미한다. react에서는 let으로 값 바꾸는게 즉시 반영 불가능. useStare()이라는 훅을 이용해서 state를 만든다. import React, { useState } from 'react'; function GrandFather() { const [name, setName] = useState("김씨할아버지"); // 이것이 state! return ; } // .. 중략 const name="김씨할아버지" 에서 const [name, setName] = uesState("김씨할아버지")); 로 바뀜. useState훅을 이용하는 방식 const [ value, setValue ] = useState( 초기값 ) const[value, ..

주말을 너무 쉬어버려서 정신차리고자 오늘의 목표는 리액트 강의 16강까지 모두 완강하는 것이다. 이번 주차동안 오전은 자바스크립트 언어공부, 그리고 오후1시 부터 6시까지는 온전히 리액트에만 집중할 계획이다. 6시부터 10시까진 알고리즘도 풀고, 리액트 공부한 내용 정리도 하고.. 자꾸 집중력이 깨지는데 잡생각이 많아져서인 것 같아서 얼마 전에 원인을 제거했다 이제 점차 집중력이 돌아오겠지 🥲.. 나는 ENTP니까 리액트 심볼 간지난다 Props part3시작하다가 이거 먼저 정리 안하면 안될 것 같아서 하는 정리.. JSX문법 -리액트에서는 딱 하나의 html파일만 존재한다. -리액트에서 뷰를 그릴 땐, JSX문법을 사용해서 react요소를 만들고 DOM에 렌더링시킨다. -자바스크립트 안에서 html태..

알고리즘주차는 끝났고! 어느정도 JavaScript의 메서드나 함수를 활용하는 연습을 다 하고, (아직 애기수준) 본격적으로 react주차에 접어들었다. 리액트는 신세계다 너무 꿀잼이다 ☺️ (아직은ㅎㅎ..) 알고리즘문제풀기 첫날에도 너무 신기하고 이게 풀리는게 또 재밌고, 고등학교 때 수학은 되게 못했었는데 이건 수학적이면서도 좀 더 편하게 컴퓨터의 언어로 풀어간다는게 흥미로웠다. 초반엔 엄청 틀렸지만, 점점 메서드활용에 능숙해지는게 느껴져서 기분 좋고 코드리뷰하며 다른 사람들의 코드를 구경하는 것도 재밌어서 후딱 지나간 일주일이었다!! 새로운 언어와 문법을 배운다는건 뭔가 설렌다 처음 영어를 배우던 때 같다 리액트 강의를 듣기 시작하고나서도 오랜만에 HTML을 만지니 기억이 가물가물하면서도 손은 기억..