이노베이션캠프 학습노트 (22년)

2022.08.14 회고록

2022.08.08 회고록

2022.08.14 회고록

파이널 프로젝트를 진행하며 폴더구조 및 extension이 반영된 클론파일을 다운받았는데 다음과 같은 에러가 발생하였다.혹은을 통해 babel-eslint를 설치해준다.이후 .eslintrc 파일을 열어 를 추가해주도록 한다.

axios 인스턴스를 활용하며 GET방식으로 데이터를 불러오려는데라는 error가 발생하였다. 200이 뜨는 걸 봐서는 정상적으로 응답을 받은 건데 왜 발생한걸까?instance를 생성 할 때에 다음과 같이 코드를 작성하였는데withCredentials를 주석처리하니

프로젝트를 진행하며 카카오 로그인을 구현함에 있어 발생한 이슈를 공유하려고한다. 카카오 로그인시 로고이미지가 특정 페이지에서 깨지는 현상이 발생하였다. 간단하게 경로를 바꾸고 컴포넌트화 시켜 해결 할 수 있었다.원래 이미지파일을 public 파일에 위치시켰었는데, sr

몇일동안 해결하지 못했던 이슈를 해결하게 되었습니다. 로그인 시 새로고침을 해도 로그인이 풀리지 않도록 sessionStorage에 토큰을 담았습니다. 그리고 로그인이 필요한 서비스들은 인터셉터를 활용하여 요청이전에 토큰을 헤더에 담아주었습니다. 문제는 인터셉터를 통해

자바스크립트에서 값은 문자열이나 숫자형에 속한다. 8가지의 자료형이 있는데 함께 알아보도록 하자.숫자형은 정수 및 실수를 나타낸다.뿐만 아니라 infinity, -infinity, NaN도 포함된다.let a = 2a = 1.5a = -1/3자바스크립트에서는 2^53-

유사배열객체와 배열의 차이에 대한 내용을 다루고 있습니다.

양방향 바인딩과 단방향 바인딩

테스트코드 작성하기

하지만 나는 팀 프로젝트를 진행하면서 이러한 장점을 제대로 활용하지 못한 것 같다. 폴더구조가 지저분하여 나중에 용도를 잊게되고 컴포넌트를 재사용하지 않고 다시만드는 경우가 발생하였다. 이러한 문제점들을 개선하고자 이 글을 쓰게되었고 이를 통해 매뉴얼을 확립하여 리액트

axios instance 기능을 활용할 때 우선적으로 이 코드를 활용하면 용이하게 인스턴스를 생성할 수 있다. 이를 Requests.jsx 파일로 이름을 지어 shared에 위치시켜주자. 더 자세하게 알고싶다면... 링크텍스트

카카오 로그인을 연동시키며 카카오내에서 발급받은 KEY값을 안전하게 관리하기위해 환경변수를 설정하게 되었다.다음순서로 진행되었다.root파일 아래 .env파일 생성이런 형식을 준수하여 환경변수를 설정해준다. (이렇게 해야지 오류안난다)git.ignore에 .env파일을

마지막 프로젝트를 진행하며 카카오 로그인 기능을 맡게 되었다. 웬만한 요즘 서비스들이 유저의 편의를 위해 SNS로그인 연동을 지원하기에 한 번 경험해 보고싶어 지원하게 되었다. 우선 카카오 로그인 홈페이지에서 나의 어플리케이션을 등록하였다. 나의 어플리케이션을 등록하면

협업을 진행하며 다른 팀원들이 작성한 코드에서 많은 라이브러리를 배울 수 있었다. 그 중 하나인 react-icon에 대해서 얘기해보려한다react-icon 문자로만 UI를 구현하면 유저들은 얼마나 피로하겠는가? 따라서 UI를 구현할 때 유저의 피로를 덜어주기 위해선

React | 서브라우터서브라우터서브 라우터는 라우터의 자식 컴포넌트 같은 녀석이다. 앞으로 더 많은 페이지가 생성될텐데 라우터가 한눈에 안들어 오지 않을까? 개발자라면 좀 더 효율적인 관리를 지향해야한다.위의 코드를 이렇게 다시 표현할 수 있다.좀 더 깔끔하지 않은가

이번 프로젝트에서는 이전에 해보지 못한 이미지파일을 POST하는 기능을 구현하게 되었다. 유저 로컬로부터 업로드된 파일을 백엔드로 전송해야하는데 기존엔 으로 지정했던 것과는 달리 이렇게 설정해줘야하였다.axios인스턴스 디폴트값을 json형태로 지정해줬던터라 새로운 인

유저 입장에서 이미지파일을 올리면 미리보기 기능이 없다면 서비스에 대한 만족도가 떨어질 수 있다. 프로젝트를 진행하며 미리보기 기능을 구현하려고 하였고, 좋은 오픈소스를 발견하여 이것을 활용하여 조금 수정을 하였다. styled-component로 입맛에 맞게 이미지

프로젝트를 진행하며 카카오 로그인으로 로그인 서비스를 구현하였다. 로그인은 문제가 없으나 로그인 후 특정페이지로만 이동되어 로그인 이전의 페이지로 돌아가는 것을 구현하려고 하였다. 그래서 redux를 활용하여 이전 페이지 주소를 store에 저장하는 방식으로 구현하려고

만든 여러 컴포넌트를 import하는 과정에서 '../'이 많아지면 코드가 지저분해 보이고 읽는것이 까다롭다. 간단한 설정으로 절대경로를 통해 import할 수 있다.최상위폴더에 jscofig.json파일을 만든다. 파일에 다음의 코드를 복붙한다.그럼 앞으로 impor

프로젝트를 진행하며 화면 이동시 최상단이 아닌 이전페이지의 스크롤위치와 동일한 위치로 이동되는 이슈가 발생하였다. 간단한 컴포넌트를 생성하여 해결 할 수 있었다.

alert를 사용하다보면 디자인면에서나 기능측면에서 까다로울 때가 있다. 예를 들어 게시글 작성중 나가기 버튼을 눌렀을 때, '작성한 내용이 날라갈수도 있습니다. 그래도 나가시겠습니까?'라는 alert창을 띄운다고 가정해보자. 계속 작성하기 위해 아니오를 누른다면 새

테일윈드를 사용하여 스타일링을 하면서 비효율적인 방식으로 className을 사용하다 프로젝트를 통해 코드를 줄일 수 있는 방법에 대해 알게되었다. 기존에는 이런 식으로 동일한 부분을 중복해서 코드를 작성했었다.className이 짧으면 크게 상관이 없을지는 몰라도 길