전체 글

[React] fetch 와 axios 어떤 차이가 있을까? + axios 설치하지 않을 경우 에러

리액트 프로젝트를 진행하면서 fetch와 axios 둘 중 어떤 걸 사용할지 논의를 했었는데 둘 다 큰 차이가 없고 비동기 통신할 때 사용하는 걸로만 알고 있었지만 내가 이걸 왜 사용하는지 알고 쓰고 싶어서 정리해 보았다. fetch와 axios 둘 다 js의 비동기 통신을 할 때 사용하는 방법이다. fetch는 전역 fetch()를 통해 비동기적으로 가져올 수 있고 자바스크립트에서 기본적으로 제공해주는 것이기때문에 별도의 설치가 필요없지만 사용하기 위해서는 .json()을 사용해 JSON데이터 형식으로 변환해서 사용해야한다. axios는 node.js에서 사용할 수 있는 promise 기반 라이브러리로 npm, yarn 같은 패키지 매니저를 통해 설치할 수 있다. 자동으로 JSON데이터 형식이 된다. ..

[Git] 폴더명 대소문자 구분도 못한다면서요?

프로젝트를 진행하다보면 git을 가장 많이 사용하게 되고 절대 실수하면 안 될 것 중 하나이다. 하지만 인간인지라 역시나 실수를 해버렸고 그 해결과정을 정리해보았다. 문제 상황 프로젝트를 진행하면서 컨벤션 중 하나가 폴더명을 소문자로 작성하는 것이었다. 그런데 내가 대문자로 작성해서 push를 했었고 후에 소문자로 바로 변경했었는데 나중에 확인해보니 전혀 반영되지 않았던 것이다. => 폴더명이 동일하고 대소문자의 차이만 있어서 git add로 push 되지 않았다. 해결법 $ git mv 기존폴더명 임시폴더명 $ git mv 임시폴더명 바꿀폴더명 주의할 점 1. git mv 할 경로 위치를 바꿀 폴더명 상위 경로에서 지정해 주어야한다. 2. 임시폴더명으로 한 번 바꿔주는 과정을 거쳐야한다. 만약 거치지 ..

[면접을 위한 CS 전공 지식 노트] 프론트엔드 개발자 취준생이 읽어 본 후기

부트캠프를 수료하고 이제는 정말 취업을 준비해야하는 시기가 되었고 공고를 보다보면 CS 전공지식있는 지원자를 원한다는 경우가 많은데 그 많은 지식을 하나하나 찾아서 공부한다는게 어디서부터 준비해야할지도 모르겠고 막막했습니다. 이때 읽어보면 좋은 책이라고 면접을 위한 CS 전공 지식 노트를 추천 받았습니다. 일단 설명들이 간결해서 읽기 부담스럽지 않았습니다. 1장 디자인 패턴 관련 코드는 자바스크립트, 자바 두 가지 종류로 비교해서 설명해주고 5장 자료구조는 C++을 예제로 설명을 해줍니다. github에 예제코드도 있어서 같이 참고해보면 좋을 것 같습니다. 전공지식 노트라는 이름답게 그림과 같이 설명이 잘 되어있어서 처음보는 사람이라도 이해하는게 쉬울 것 같습니다. 만약 정처기를 준비했던 분들이라면 복습..

타스팀의 타스 프로젝트 시작!

보호되어 있는 글입니다.

프로젝트 회고 5 :: 왜지감자의 프로젝트 끝!

나의 첫 프론트엔드 프로젝트가 끝났다! 말 그대로 프론트엔드로는 처음하는 프로젝트였기때문에 당연히 아쉬움이 많지만 그래도 완성해냈다는 뿌듯함도 크다. 우리팀 리드미에도 썼던 내용이지만 프로젝트를 진행한다는게 코드를 짜는것 이외에 이렇게 많은 것을 할 줄 몰랐다. 회의록이나 에러, 컨벤션 등 많은 것들을 문서화하고 밤낮없이 계속 소통하게된다. 그리고 소통하면서 우리팀에서 가장 많이 했던 말이 두 개가 있다. 왜지? 뭐지? 원인을 못찾으면 다들 '왜지...뭐지.....'이러는데 우스갯소리로 왜지뭐지 노이로제가 걸렸다고 할 정도이다. 그래도 이 만큼의 시간을 들여 고생하여 만든 프로젝트를 완성할 수 있어 뿌듯하다. 함께해준 팀원들한테도 고맙다 :)

프로젝트 회고 4 :: 기능이 적은데 많아요

진행상황 파트 분배를 할 때는 적당하다고 생각하여 진행했는데 진행하다보니 내가 많은 부분을 하고있었다. 나 - 마이프로필, 유저 프로필, 팔로워 리스트, 팔로잉 리스트, 상품 등록, 팔로우 팀원1 - 피드, 검색, 좋아요, 모달 팀원2 - 스플래시, 로그인, 회원가입, 프로필 수정 팀원3 - 게시글 댓글, 일반 게시글 작성, 채팅(UI) 딱 이렇게만 작성하여 분배해서 진행했더니 프로필에서 기능들이 더 많았던 것이다. 일단 프로필 페이지에서 로그아웃, 게시글 조회도 이루어져야하고 상품도 등록뿐 아니라 수정, 삭제, 조회도 이루어졌어야했다. 그래서 팀원들과 빠르게 분배해서 구현했다.. 사실 프로젝트 시작할때는 그렇게 오래 걸릴지 이게 프로젝트로 쓸 수 있을 만큼의 규모일까 걱정했었는데 진행하면서 느꼈던건 협..

[리뷰] 똥손도 쉽게 따라하는 아이패드 드로잉 with 프로크리에이트

안녕하세요! 이번에 리뷰해 볼 책은 '혼자 해도 프로 작가처럼 잘 그리는 아이패드 드로잉 with 프로크리에이트' 입니다. 프로크리에이트를 사둔지는 1년이 넘었는데 무언가를 그릴 생각하니 막막하더라고요. 찾아보면 다들 잘 그리려면 브러쉬가 중요하다. 제스처를 알아두어야 편한다. 이러니깐 시작하기 전부터 어렵더라고요. 유튜브에서 한 번씩 보고 따라그렸었는데 핑계인거 알지만 영상 하나 보려고해도 광고 3~4개는 기본으로 봐야하고 그러다보면 집중력도 떨어지고 손이 잘 안가더라고요. 그런데 이 책은 초보자들도 쉽게 따라할 수 있을 정도로 친절하게 책을 쓰셨더라고요! 이번 달에 바빠서 모든 걸 그려보지 못했지만 앞부분만봐도 너무 쉽고 그림을 그리는게 부담스럽지 않게 느껴졌어요. 책을 볼 때 목차를 먼저 보는 습관..

본격 똥손의 Github 꾸미기 위한 참고

깃허브에서 가장 처음이 리드미는 나를 드러내는 수단이다. 다양하게 꾸밀 수 있도록 참고할만한 사이트를 가져와봤다. 1. 마크다운 문법이 아니라 페이지에서 만들기 https://github.com/rishavanand/github-profilinator GitHub - rishavanand/github-profilinator: 🚀 This tool contains mini GUI components that you can hook together to automatical 🚀 This tool contains mini GUI components that you can hook together to automatically generate markdown code for a perfect readme. - ..

꼬여버린 flex로 캐러셀 만들기

구현하고 싶었던 기능 판매중인 상품이 3개 이상일 때 x축 스크롤바가 생기면서 옆으로 넘길 수 있다. 하지만 현실..😰 // 생략 // 생략 // 생략 .product-list { display: flex; gap: 10px; overflow-x: scroll; } .product-item { width: 140px; } 크게 ul > li 로 나누어 li마다 하나의 카드(이미지와 상품명, 가격)이 들어가게 만들었다. ul에 flex와 gap을 주어 일정한 간격을 유지하려고했으나 되지 않았다. 대체 왜..!! li의 영역이 저만큼 잡혀있지만 보여지는 간격은 반 밖에 되지 않는걸 볼 수 있다. overflow-x: scroll를 했지만 스크롤이 생기기만 할 뿐 영역이 제대로 잡히지 않았다. 해결방법 fle..

첫 베타리더 후기📖 (with. 영진닷컴)

타입스크립트 책을 집필하고나서 책 제작하는 과정에 흥미가 생겼는데 타이밍 좋게도 의 베타리더가 되었다👏🏻 처음 알게 되었는데 출판하기전의 책을 미리 검수하는 베타리더 있었다. 읽어보고 오타나 책 흐름에서 추가하면 좋을 부분을 확인하고 피드백 주는것이다. 써놓고보니 검수라고 할 정도로 거창한 건 아니긴하다. 나의 경우 프로젝트 퍼블리싱하는 기간과 딱 겹쳤었는데 나름 공부를 한 입장에서 읽었을때는 복습하기에 정말 좋았다. 책에서 설명하는 내용이나 코드를 머리속으로 상상해보고 다를 경우엔 직접 쳐보면서 테스트해봤다. 좋은 공부법 중 하나가 의심하고 계속 질문하는거라고 했는데 이 책을 읽어보니 계속 궁금증이 생겼다. 이 태그만을 써야하는 이유가 있을까? 다른 속성으로 할 수 있는 방법이 없을까? 질문하면서 하니..