본문 바로가기

분류 전체보기

 (170)
불변성_TIL(36) 리액트는 배열과 객체의 불변성을 지켜주는게 중요하다고한다. 자바스크립트 심화에서 다룬 얘기중에 배열과 객체는 원시형이 아니라서 그 값을 직접 가지고 있는게 아니라 화살표, 즉 값을 가르키고 있는거라고 한다. 만약에 let arr = [1,2,3] 이면 arr라는 저장공간을 가지고 값 1,2,3을 가지고 있는 메모리의 위치를 화살표로 참조한다고 생각하면 되겠다. 그래서 내가 state에 저장해놓은 값을 변경하고 싶을 때 useState를 사용하는데 let [value,setValue] = useState([1,2,3]) 이라는 예시가 있다. 내가 근데 1을 5로 바꾸고 싶다면? value[0]=5; setValue(value) 이렇게하고 브라우저를 하면 아무것도 변경되는게 없다 분명 나는 setValue를..
버전이 달라서 고생한 WIL(07) 이번 주는 리액트 숙련으로 넘어가면서 리덕스와 리액트 라우터에 대해서 중점으로 공부를 했다. 주어진 강의를 거진 3~4번은 돌려서 봤다. 돌려 보면서 처음은 손으로 직접 정리하고, 두번째는 같이 따라 적어보고 세번째는 혼자 만들어보고 이렇게 과정을 가졌다. 그런데도 뭔가 혼자 이 기능들을 가지고 만들어보라고하면 못만들꺼같은 느낌이 들었다. 프로젝트가 갑자기 걱정이 됬다. 1인분은 해줘야하는데 더군다나 지금 조는 한명이 부족하니까 1인분은 더 해야하니까 내가 스스로 부족한걸 찾아서 공부를 해보자라고 생각하고 다른 강의들도 찾아봤다. 나와 맞을꺼 같은 강의를 선택해서 듣는데 왠열 뭔가 내가 지금 배우는 문법과 쫌 달랐다. import해서 가져오는 부분이라던가 파일을 나눈다거나..? 분명 잘못된건 없지만 어색..
근자감에 의해서 2시간을 날림 리덕스 강의를 거진 3~4번을 돌려보니까 강의 없이 혼자서 카운터 정도는 충분히 만들겠는데? 라는 근자감에 의해서 여기까지 왔다. 근데 확실한건 삽질하니까 삽질한 부분은 확실히 알겠다.....ㅇㅇ 그래서 아예 그냥 카테고리 만들어서 기록해볼까 한다 약간 코너속의 코너느낌으로다가 과정을 적기 보다 그냥 문제가 있었던 부분을 나눠서 다뤄볼까한다. 내 목표는 그냥 카운터 만들기였다. 그냥 버튼 +1 ,-1 누르면 숫자가 올라가고 빼지고 하는거 그게 다다. 첨엔 왠지 사용자의 입력값까지 받아서 만드는것도 후딱 할껏만 같았다. 근데 지금 쓰는 이시간에 겨우 +1 -1버튼 기능구현을 했다. 막 시간이 아깝고 이런건 절때 아니고 진심은 이렇게라도 삽질해서 다 만들어냈다는게 기분이 좋다. //configStore.js..
아침부터 오류 만남 ㅎ TIL(34) 오류가 생겼다 그것도 컴퓨터 키자마자 파일하나 npm start~치자마자 원래 이때까지 이런적이 없고 오류를 이쪽에서는 만나본적도 없었는데 아예 localhost가 안되는게 너무 충격이라 심장이 내려앉았다 할꺼가 이렇게 많은데 이렇게 시간을 다 쓰는것인가 하는 생각에 💢 원래 TIL저녁에 쓰지만 오늘은 오류를 너무 빨리 만난 바람에 지금 적는다. 어쨋든 해결은 됬기때문에ㅎㅎ 상황 1.VSC를 켰다. 2.밑에 안뜨던 오류 창이 자꾸 떴다. "네트워크연결이 실패했다?" 무슨 파일을 켜던지간에;; 3....?와이파이가 문제인가?라고 생각하고 안일하게 넘김 4. 그리고 열어야할 파일을 npm start~ 5.localhost:3000열수없다고 브라우저에 뜸 위에서 4,5번 순서를 계속했다 연결이 잘안되나? 하고..
TIL(33) 숙련과정이 계속 진행되고 오늘부터 일주일 뒤에 프로젝트가 시작이 된다. 숙련과정을 하려면 결국에 입문과정이 탄탄해야해서 오전 중으로는 항상 입문과정의 과제를 계속 만들어보고 있다. 그래서 오늘은 최종정리 겸 글을 쓰면서 전체적인 흐름을 상기시켜볼까한다. 내 머릿속으로 이해한 내용들을 다 적어보려고한다. 1.처음에는 코드 한 줄씩 마다 주석을 달면서 해석을 하는 시간을 가졌고 2. 그 다음은 한쪽은 완성본 한쪽은 빈페이지를 해놓고 내가 생각하는대로 적어보고 바로바로 확인을 하면서 진행을 하고 3.마지막으로는 완성본을 보지 않고 나 스스로 만들어보는 과정을 하고 있다. 내일부터 redux로 투두리스트를 만들어보려고하기 때문에 오늘까지 리액트로 투두를 만들어보자는 생각에 3번째 과정을 실행했다. 처음에 {ch..
redux로 카운터를 만들어 보자_TIL(32) 리덕스는 리액트를 쓸때 생겼던 props drilling을 방지할 수 있다. 전역 state를 store에 저장해놓고 어느 위치이던간에 사용할 수 있도록 한다. Ducks패턴을 이용해서 정리를 해보려고한다! 이 순서에 맞게 정리를 하는 습관을 들여놓으면 코드의 가독성이 좋아질꺼같다. action value : value를 상수로 만들어 준다 action creator : 액션객체를 반환하는 함수 하나씩 type:{ }적을 필요 없이 상수를 적어주면 된다. 이렇게 만들어 주고 리듀서를 작성한다. 초기값을 적어 주고 그 초기값을 state에 넣어주고 ,action(명령)과 함께 작성을 한다. 그리고 switch문을 사용해서 그에 맞는 값을 리턴할 수 있도록 코드를 작성해준다. 리듀서의 기본적인 문법을 저렇게..
WIL(06) 리액트 입문주차 과제로 투두리스트를 만들기했다. 늦어도 주말까지는 내달라고 하셔서 주말 내내 봤던 강의 다시 한번 다 보고 만들기를 시작했는데 잠을 거의 못 잔거같다...ㅎ 시험이 있어도 잠은 꼭 잤는데ㅋㅋㅋ 정신차리고 보니까 아침 8시인가 그랬던거같다. 그렇다고 결과물이 잘 나왔냐 그것도 아니였고 오히려 혼란만 가중된 상태였다. 갈수록 기초적인 내용과 문법들을 바탕으로 쌓아 올리다 보니 그 사이에 내가 쉽게 넘어갔던 것들이 티가 나기 시작한 거 같은 느낌이였다. 따로 튜터님이 투두리뷰해주신 강의를 뒤늦게나마 봤는데 거기서 더욱 이런 생각들이 박혔다... 진짜 기본적인 것도 몰랐구나..하는 거 오히려 지금이라도 알아서 다행이다. 앞으로 공부 할 시간이 더 많고 내가 부족한 부분을 채워서 더욱 성장할 수 ..
Redux_TIL(30) 앞 전의 redux정리를 이어 받아서 이젠 값을 변경해보려고 한다. 먼저 오늘 정리 할 내용✅ 1.Redux는 state변경이 reducer에서 일어난다. 2.만약 counter.js module에 있는 number에 값 변경을 해준다면...?! 1.store에 있는 값 변경하기 위의 질문의 답은 Reducer에게 명령을 보낸다. ( reducer가 명령을 받아서 값을 변경한다라고 생각하면 될 듯) 명령을 redux에서는 "action"이라고 한다. => reducer가 명령을 실행하고 이 보내는 명령은 객체로 보내게 된다 (=action 객체) 이 action객체란? {type: "PLUS_ONE"} //대문자를 사용해준다..? 약속이라던데 위와 같은 type를 꼭 같이 적어서 보내야한다. 왜냐면 이 ..

티스토리툴바