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

리액트에서 배열이나 객체를 업데이트해야 할 때에는 직접적인 수정을 하면 안되고 불변성을 지켜주면서 업데이트를 해야한다. const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; 위와 같이 spread연산자를 이용해서 새로운 객체를 만들어준다. 배열 또한 마찬가지로 push, splice등의 함수를 사용해 직접 수정하면 안되고, concat, filter, map등의 함수를 사용해야 한다. 대부분의 경우 spread연산자 또는 배열 내장함수를 사용하는건 어렵지 않지만 데이터 구조가 조금 까다로워지면 불변성을 지키면서 새로운 데이터를 생성하는 코드가 복잡해진다. Immer라는 라이브러리를 사용하면 불변성을 유지하며 간결한 코드로 필요한 내..

툴킷을 이용했을 때 기존 버전과 큰 차이점: action value와 action creator를 직접 생성해주지 않고 action value, action creator, reducer가 하나로 합쳐짐. 툴킷의 slice API를 이용한 간단한 모듈작성. createSlice라는 api로 생성. 모듈의 name, initial state, reducers 로직 reducer를 작성함과 동시에 action creator가 됨 Action value도 함수의 이름으로 자동생성됨. export도 제일 밑에 이렇게 작성한다. 간결해짐. 객체 내에 함수명만 추가해주면 됨 //필수로 설정해줘야하는 값은 name, initialState, reducers. const counterSlice = createSlice..

Thunk 리덕스에서 dispatch를 하면 action이 리듀서로 전달이 되고, 리듀서는 새로운 State를 반환하는데, 이 중간에 미들웨어를 넣어서 원하는 작업을 중간에 실행할 수 있다. 미들웨어로 가장 많이 이용되고 있는 방식이 redux Thunk이다. Thunk의 핵심은 객체가 아닌, 함수를 dispatch할 수 있게 해준다는 것이다. 리덕스 툴킷에서 thunk함수를 생성할 땐, **createAsyncThunk()**를 통해 생성하며, 첫번째 자리에는 action value, 두 번째 자리에는 함수가 들어간다. 🔐 프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요? 🐹 동기와 비동기의 차이 동기 Synchronous : 요청 후 응답을 받아야 다음 동작 실행. 비..

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(){}) 맵 함수는..

첫째날에 Html 회원가입창 구현하기 SA개인과제를 하고, 쭉 리액트 강의 들으면서 공부하다가 개인과제 어제 만들어서 오늘 제출하고 (to do list 만들기) , 팀 과제는 화요일에 끝냈다. to do list 만들기는 내 첫 리액트 과제물이라 여기 저기 또 자랑을 많이 했다.. 지난 토요일에도 공부를 오후 6시까지밖에 못하고 일요일에도 너무 놀아서 이번 주 월화수가 더 빡셌다 🥲 시험을 보면 3주차가 끝이 난다. 이번 주의 나는 팀원들에게 예쁜말로 소통하고, 100시간을 충분히 알차게 보냈을까.. 오늘은 수업 끝나고 영화 보러 가기로 했다. 앞으로 평일에 사람들 만날 일이 있으면 모두 목요일로 해야겠다. 다음 주 리액트 숙련주차는 더욱 힘내야지!!!!!

컴포넌트 만들기 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을 만지니 기억이 가물가물하면서도 손은 기억..

메리크리스마스 :) + 코드 트리 공유드립니다. function solution(star){ answer='\n\n 🎅 Merry Christmas 🎄' for (let i=0; i

두 시간을 잡고있었던 문제.. 최대한 다른 사람들의 답안을 먼저 보지 않고 내가 아는 방법만으로 해결해보고싶은 오기때문에 한참 고민했다. 우선 내가 이번 문제에 써보고 싶었던 method들이 있었다 1. 삼항연산자 2. &&와 || 논리연산자 첫 번째 시도 & 두 번째 시도 function solution(s) { var answer = false; Array.from(s).includes('a'||'b'||'c'||'d'||'e'||'f'||'g'||'h'||'i'||'j'||'k'||'l'||'m'||'n'||'o'||'p'||'q'||'r'||'s'||'t'||'u'||'v'||'w'||'x'||'y'||'z')? answerA="alphabetincluded" : answerA="notinclud..