분류 전체보기
-
항해99 47일차 : 회원가입/로그인으로 연습한 axios 사용법항해99_WIL 이따금씩 TIL 2021. 4. 17. 08:10
이번주의 개인 목표의 하나는 프론트엔드 개발자로서 axios를 이용한 클라이언트-서버 통신 코드를 짜는 것에 숙달 되는 것이었다. 클론코딩주에는 뷰를 만드는 등의 다른 부분을 많이하고 axios 코드를 짜는 것은 일부만 해서 axios 사용법을 완전히 알지 못했기 때문이다. 파이어베이스 같은 서버리스 서비스를 이용하는 것이 아니라 정말 진지하게 서버와 데이터 통신을 하려면 axios 사용법은 꼭 숙달해야 한다(물론 fetch도 있지만 대세 같은 axios를 먼저 정복하고 싶었다). 내가 맡은 로그인/회원가입을 하면서 짜는 리덕스 모듈 파일(이름은 user.js)에는 서버와 통신하는 미들웨어함수가 있고 여기에 axios 코드를 넣어서 서버와 통신을 한다. 아쉽게도 지난주 클론코딩을 하면서는 서버의 문제로 ..
-
항해99 6주차(2021.4.5 - 4.11) WIL - 인스타그램 클론코딩, 미니프로젝트항해99_WIL 이따금씩 TIL 2021. 4. 11. 17:08
이번주는 목요일 자정까지 인스타그램 클론코딩, 주말에는 리액트와 자바스크립트 보충 교육을 했다. 1. 클론코딩 인스타그램 먼저 결과물을 보자 instagram99.shop/ www.youtube.com/watch?v=ixMeFdVdCLs&t=98s 리액트 능력자인 동료의 하드캐리가 있어서, 사놓고 묻어 두었던 인스타그램 클론코딩 강좌의 도움이 있어서 이 과제는 무사히 마치는게 가능했다. 다행이다 정말. 나는 리덕스를 많이 이해하지 못하고 있어서 걱정이 많이 되었다. 다행이 리액트 능력자 그분(이하 리능자)에게 귀찮도록 물어서 코드 설명을 들으면서 이해를 하거나 내가 공부를 따로 하면서 코드를 보니 조금씩 이해가 되었다. 리액트 교육주에는 그냥 dispatch가 왜 나오는지 이해도 못하면서 시간에 쫓겨서 ..
-
항해99 1기 클론코딩 결과물항해99_프로젝트 2021. 4. 10. 00:34
항해99 클론코딩 주에는 인스타그램을 클론코딩했다. 나에게는 큰 성장의 한 주였다. 성장의 이유 1. 리액트 - 리덕스를 많이 이해하게 되었다. 리덕스가 리액트의 꽃이고, 이걸로 서버도 통신하는데 이걸 모르고 못 다뤄선 존버도 의미가 없다. 존버도 뭘 이해를 해야 존버지 이해도 못하고 존버? 몸과 뇌가 괴로운 일이다. 나에겐 정말 천운으로 리액트-리덕스를 마스터한 동료가 조원이 되어서 그분과 같이 일을 하면서 어깨너머로든 끈질기게 물어서든 리덕스를 많이 이해하게 되었다. 클론코딩 전에는 이해도가 10% 정도였다면 이제는 75%정도? 장족의 발전을 했다. 2. css와 리액트 앨리먼트들의 사용 능력을 끌어올렸다. 뷰를 만드는 경험을 통해서 비슷하게 만들 수 있단 걸 알게 되었고, 모자란 지식도 많다는 걸 ..
-
항해99 40일차 : 노션의 용이함을 알아차리다.항해99_WIL 이따금씩 TIL 2021. 4. 10. 00:09
나는 언젠가는 개발블로그를 노션으로도 쓸 마음이 생겼다. 그 계기는 오늘 항해99 2주 미니프로젝트를 하면서 정보 공유용으로 쓰게 된 노션의 기특함을 알게 된 일이다. 우리 프로젝트를 다음과 같이 노션에 정리했는데, 한눈에 딱 정리가 되고, 세부내용도 이렇게 세상 편리하게 정리가 된다. 사실 나도 이렇게까지 쓰기 좋은건지 몰랐고 그저 팀 단위 정보 공유에 용이해서 썼다. 그런데 조원들이랑 계획 정리한걸 적다 보니 표가 너무 이상하게 그려지고 사진도 넣는게 되긴 하지만 어딘가 모르게 불합리하게 들어가서 불편하게 생각하고 있었다. 그러던 중에 이번 미니프로젝트 조 중에서 어벤져스급 드림팀 조가 이렇게 쓰는 걸 보게 되었는데 어벤져스들답게 노션을 위의 사진의 모습처럼 일 진행에 도움이 되게 잘 정리해서 사용하..
-
항해99 39일차 : 리액트 훅 useEffect 사용법을 깨닫다.항해99_WIL 이따금씩 TIL 2021. 4. 10. 00:01
useEffect는 함수형 컴포넌트의 훅으로, 이 useEffect 내부의 요소가 페이지가 렌더링될때 같이 실행되면서 마운트 된다. 클래스형 컴포넌트의 componentDidUpmount와 같은것이다. 그런데 수업중에는 내가 이해를 못한건지 튜터님이 설명한걸 편집의 실수로 잘린건지 아니면 튜터님이 학생들이 다 안다고 생각하고 넘어간건지 어쨌든 이해를 못하고 있었다. 그러다가 튜터님께 질문을 청해서 설명을 듣고도 뭔지도 잘 이해 못하고 있었는데, 항해99 클론코딩 주에 이해하게 되었다. 그 이해의 결과가 아래 코드다. React.useEffect(() => { if (is_edit && !_post) { console.log("포스트 정보가 없어요!"); history.goBack(); return; } ..
-
항해 99 38일차 : 리덕스 구조를 이제서야 알아차린다.항해99_WIL 이따금씩 TIL 2021. 4. 7. 11:26
리액트를 쓰면서 리덕스는 뭔지 어렴풋이 알더라도 내 손으로 코드를 구현하는거는 헤매서 쥐약 같은 것이었는데(메타인지의 정의에서 정말 안다는 기준은 말로 바로바로 설명을 해서 남이 내 머릿속에 있는 것과 같은 것을 상상하게 하는 것이다. 프로그래밍에서는 내손으로 구현이 가능한가도 그 기준에 포함된다), 클론코딩주차부터는 리덕스를 꼭 이해하고 가야 해서 각잡고 코드를 보고 구글링으로 개념도를 찾으면서 이제서야 이해를 조금씩 하게 되었다. 코드들을 보면서 설명하고 싶지만, 과제로 급한 마음에 시간내서 쓰기는 어려우니 개념도를 첨부한다. 나처럼 리덕스 이해에 애를 먹는 사람이 있다면 리덕스 모듈 파일과 컴포넌트 파일을 보면서 dispatch가 왜 이 컴포넌트에 나오고 useState가 왜 여기 나오는지 등등을 ..
-
항해99 37일차 TIL : axios put 사용 코드.항해99_WIL 이따금씩 TIL 2021. 4. 6. 21:57
백엔드 서버에 컨텐츠 수정을 위해서 axios를 이용해서 PUT 요청을 구현하는데 애를 먹었다. 해결하고 나니 간단한 코드 같지만 고민을 많이 했던 코드다. const editPostAX = (id = null, edit = {}) => { return function (dispatch, getState){ if(!id) { console.log("게시물이 없어요!") return; } let _edit = { contents: edit.contents, imgUrl: edit.image_url, } axios.put(`http://15.164.217.16/api/contents/${id}`, { ..._edit }) .then((doc) => { console.log(doc) let edit_list ..
-
항해99 36일차 TIL : axios 첫 걸음마 지식항해99_WIL 이따금씩 TIL 2021. 4. 5. 15:37
리액트와 html의 사소한 태그 사용 차이 html : Pointer. 그러나 리액트에선 안된다. 리액트 : const HeartBtn = styled.div` cursor: pointer; `; 이렇게 styled-component로 설정한 요소를 써야 마우스를 올렸을때 pointer가 적용된다. 클론코딩주에 클라이언트(프론트)-서버(백)의 요청-응답에 쓰이는 axios를 처음 접하고 공부를 시작했다. axios : axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리. axio도 네가지 http methods( POST, GET, PUT, DELETE)를 사용한다. 이번 클론코딩주에서 백엔드의 서버와 통신하기 하기 전에 프론트엔드에서 데이터가 뿌..