지코딩

미니프로젝트의 절반이 지나갔다. 오늘은 처음으로 서버와 연결에 성공한 날이다. 토요일에도 짧은 데이터를 주고 받기는 했지만, 오늘은 실제로 작성한 게시물을 보내고, 다시 서버에서 게시물을 받아와 리스트로 만들었다. 서버와 통신하기 위해서는 몇 가지 약속이 필요하다. 미리 약속한 주소(url)가 있어야 한다. 어떤 요청(get, post, put, delete 등)인지 알려야 한다. 필요한 데이터를 넘기고, 누가(토큰) 요청했는지도 알려줄 수 있다. 이번 프로젝트에서는 axios라고 하는 비동기 통신 라이브러리를 사용하기로 했다. axios는 헤더로 유저정보(토큰)를, 바디로 데이터를 보내고 응답을 받는 간단한 구조이다. 헤더나 baseURL의 겨우에는 전역 객체로 만들고, 각 상황별 요청에 해당하는 객체..

보호되어 있는 글입니다.

와 드디어 미니프로젝트를 시작한다. 아는건 쥐뿔도 없는데 뭔가 만든다는 생각에 기대된다. 비록 지금 미리보기 이미지 크기에 고통받는 중이지만, 오늘은 아주 재밌는 시간을 보냈다. 팀원들과 이야기하면서 계획을 짜는 것도 재밌고, 지난주엔 안 풀렸던 것 들이 이상하게 조금 알 것 같으니 불안하면서도 좋다. 비록 지난 주에 했던 과제를 다시 한 번 하는 수준에 가깝지만 해야 할 일을 나름대로 계획해서 처리하는 와중에 문득 첫 날이 생각났다. 항해 시작하고 바로 첫 날 아무것도 모르는 상태로 보드에 뭔가 이해하지 못한 내용들을 적고 깃허브가 뭐지? 계속 파이참만 썼는데 왜 VSC를 쓰는거지? 어디서부터 시작해야 하지? 적응은 안되는데 뭔가는 해야했던 그 때를 생각하면 오늘은 정말 즐거운 날이었다. 1. < 백엔..

로그인, 게시판, 사진 업로드, 댓글까지 .. 몰아치는 CRUD쓰나미에 정신 못 차리고 허우적대는 3주차이다. 나름 리덕스와 파이어베이스를 알차게 공부하고 3주차를 맞이했다는 생각은 조금씩 머리속에서 사라졌다. 기능을 하나하나 추가할 때 마다 더 복잡해지는 코드를 보면 어디부터 뜯어봐야 하나 고민이 된다. 도대체 CRUD 뭐길래 이렇게 어려운거지? 생각해보면 사실 차근차근 풀어갈 수 있다. 로그인이든, 사진이든, 게시글 내용이든 형태는 다르지만 결국 만들고, 보여주고, 수정하고, 삭제하기인데 왜 이렇게 어렵게 느껴지는 것 일까? 불과 지난주에 했던 단어장과 다를게 없는데 컴포넌트가 나눠져서 일까? - 새로 만드는 데이터: 1. 어딘가에(input, textarea 등) 작성되는 값을 state에 넣는다...

항해를 시작하고 가장 어려웠던 한 주가 지나갔다. 재밌게만 느껴지던 코드가 정말 어렵다는 생각이 들었고 남들은 잘 이해하는 것 같은 개념도 잘 이해가 되지 않아 힘들었다. 특히 과제로 단어장을 만들어보면서 여러 번 위기가 있었는데 결국 마지막에 가서는 잘 마무리할 수 있어서 다행이었다. 하지만 이런 고민들이 있어서 리액트와 좀 더 깊이 알게 된 것 같다. 중간에 한 번 코드를 통째로 갈아엎을 때는 무섭기도 했지만 그러면서 state를 어떤 방식으로 써야 하는지도, props가 왜 중요한 개념인지도 조금은 느낄 수 있었다. 코드가 눈에 들어오지 않아 손으로 쓰면서 분석해보기도 했는데 화면으로 다른 사람 코드를 읽는 연습도 필요하다는 생각이 들었다. 리덕스에 파이어베이스까지 사용하다보니 구조가 점점 복잡해지..

CRUD는 각각 create, road, update, delete 를 말하는 것으로 데이터 처리의 가장 기본적인 요소이다. 이번 주차에 계속 사용한 리덕스는 CRUD에 사용되는 데이터(state) 관리를 위한 라이브러리였다. 결국 state를 잘 다룰 수 있어야 한다는 사실을 또 한번 느낄 수 있었다. 하지만 리덕스 또한 상태관리를 위한 도구일 뿐 데이터를 저장하지는 않는다. 데이터를 저장하는 곳은 서버인데 리덕스가 서버는 아니기 때문이다. 그래서 오늘 그 서버의 역할을 대신할 수 있는 파이어베이스를 사용해 새롭게 생성되는 데이터를 저장하고 그 외의 나머지 기능 또한 구현할 수 있도록 했다. 액션 함수가 리듀서에 CRUD 동작을 디스패치할 때 중간에 잠깐 파이어베이스를 거쳐간다. 사실 생각해보면 매우 ..

항해 중 폭풍같은 리덕스를 만났다. 사실 props도, use들도, 렌더링되는 컴포넌트도 모두 폭풍이긴 하다. 리액트한테 처참하게 발리는 중이다. 어제 오늘은 기분이 몹시 안 좋았다. 첫 만남은 좋았던 리덕스였는데, 기능 하나 할 때 마다 새로운 것 들이 엄청 쏟아진다. 새로운 데이터 저장하기를 겨우 끝내니 삭제가 문제였고, 삭제를 끝내니 완료하기가 발을 잡더니 끝판왕 수정하기를 만나 벽을 느껴 버렸다. 그렇게 이틀을 날리고 나니 왠지 오기가 생겨 수정하기만큼은 꼭 잘 해보고 싶었다. 갈 길이 멀긴 하지만 ( 과제는 파이어베이스까지 해야 한다. ) 이렇게 하다간 이해도 못하고 계속 끌려다닐 것 같은 기분이었다. 코드를 직접 짜는건 못해도 이미 완성된 코드도 못 읽는건 말이 안됐다. 이상하게 나는 컴퓨터로..

아무것도 모르는 채로 항해99에 합류한지 벌써 20일이 지났다. 늘 그랬지만 항해에서의 시간은 유독 빠르게 지나간다. 아침부터 밤 늦게까지 쉴 틈을 주지않는 커리큘럼에 뭐를 어떻게 했는지도 모를 정도로 시간이 지나가고 있다. (사실 항해에서 직접 몰아부치는건 아니지만.. 주어진 과제를 보면 거의 그런 셈이다.) 그 덕분인지 어쨌든 코딩 공부는 확실히 되고 있는 것 같다. 여전히 매일 아침 처음 보는 개념들을 공부하고 여전히 공부한 만큼의 새로운 것들이 두 배, 세 배 씩 늘어나는 느낌이지만 문제가 생기면 스스로 찾아보고, 어떤 기능에 어떤 코드가 필요할지 고민하게 된다. 또 코드가 원하는대로 작동할 때 기분이 좋은걸 보면 나름 즐기고 있는 듯 하다. 이번주엔 처음으로 리액트를 배우고 리액트로 간단한 웹페..

return ( {my_lists[bucket_num].text} 삭제하기 ); //에러 메세지 Uncaught TypeError: Cannot read property 'text' of undefined 오늘 이런 타입에러를 확인할 수 있었다. 처음에는 undefined만 보고 text 만 확인했는데 알고 보니 변수명이 잘못된게 아니었다. undefined 안에 있는 속성 'bucket'을 읽을 수 없다: undefined는 text가 아니라 my_lists[bucket_num]에 해당하는 말이었다. 1. 위의 div 가 렌더링 된다. 2. 버튼을 누르면 리덕스를 통해 div의 텍스트에 해당하는 버킷이 삭제된다. 3. state가 바뀌어 div가 리랜더링된다. 4. 하지만 해당하는 버킷이 삭제됐기 때문..

오늘 드디어 파이어베이스 이전까지의 강의를 다 들을 수 있었다. 예상치 못한 부분에서 시간을 많이 보냈지만 시간을 들인 만큼 리덕스에 대해 조금 더 이해할 수 있었던 것 같다. 이해와는 별개로 코드를 짤 때 유독 연산자와 관련된 실수를 많이 한다. 잘 이해되지 않는 함수를 사용하거나, 새로 배운 개념과 관련된 어려움은 어쩔 수 없지만 === 같은 연산자를 헷갈리는건 문제가 있다. 어쨌든 강의는 다 들었고 이제는 진짜 과제를 해볼 차례이다. 이번 과제는 단어장 만들기로 페이지는 총 3개로 보인다. - 단어장 카드가 모여 있는 메인 페이지 / 단어를 추가하는 페이지 / 단어를 수정하는 페이지 1. 가장 상위 컴포넌트는 메인페이지이며 App.js - 단어카드 - 버튼 컴포넌트로 구성된다. 2. 추가 단어 페이..