post-thumbnail

Recoil 예제

![](https://im

3일 전
·
1개의 댓글
post-thumbnail

Recoil 개념 정리

Recoil의 데이터 흐름 : Data-flow Graph로 표현.Data-flow Graph : 계산이나 데이터의 흐름을 nod로 표현. Atom이 셀렉터를 따라 흘러서 React Components로 도달.상태의 데이터 조각 키와 기본값만 설정하면 됨.아톰에서

3일 전
·
1개의 댓글
post-thumbnail

[컨버스컨버스송 CONCONSONG] 카카오 함수 안에서 this가 인식이 안 될 때

카카오 소셜 로그인 구현 중 카카오 함수 안에서 this가 인식이 안되는 문제가 발생했다. (TypeError: Cannot read property 'history' of undefined)로그인 성공 후 main 페이지로 가고 싶은데 history.push를 쓸 수

2021년 4월 11일
·
0개의 댓글
post-thumbnail

[컨버스컨버스송 CONCONSONG] 카카오 소셜 로그인

Kakao Developers 사이트에 가이드가 친절하게 나와있다. 늘 그렇듯 하고 나면 별 것 아닌데 처음에 개념 이해와 큰 그림을 파악하는데 시간이 걸렸다. 웹 브라우저 환경이므로 우리 팀은 JavaScript SDK 방식으로 구현하기로 했다. 소셜 로그인하면 프론

2021년 4월 11일
·
0개의 댓글
post-thumbnail

Rebase

git checkout mastergit pull origin mastergit checkout feature/xxgit rebase -i masterpull = fetch(가져오기) + merge(병합하기)리모트 master에 merge된 커밋들까지 내 브랜치에 다

2021년 4월 4일
·
0개의 댓글
post-thumbnail

TypeError: Cannot read property 'history' of undefined

Kakao.Auth.login() 안에를 넣으니 페이지 이동을 하지 않는다..this.props 자체가 undefined 뜸.왜인지는 모르겠지만 Kakao.Auth.login() 안에 있어서 그런가 싶어서 밖으로 빼주고 localStorage.conconsong_tok

2021년 4월 3일
·
1개의 댓글
post-thumbnail

동적 라우팅 (유동 라우팅, (Dynamic Routing))

SPA에는 라우팅 기능이 필요 : React Router 라이브러리 사용하여 구현.location : 현재 경로(??)에 대한 정보 & URL 쿼리 (/company_list?category=3)에 대한 정보props.location.search=> /company_l

2021년 4월 3일
·
0개의 댓글
post-thumbnail

🌈 라인 어벤져스 LINE AVENGERS 프로젝트 후기

프로젝트 후기를 쓰는 날이 오다니...정말 2주가 이틀같이 지나갔다😇 기본적인 commerce 기능을 구현해보고 싶어 라인 프렌즈 스토어를 제안했는데, 다행히 클론 사이트 리스트에 들어가면서 PM으로 프로젝트에 참여할 수 있었다. 원하는 사이트로 프로젝트를 진행하게

2021년 3월 28일
·
4개의 댓글
post-thumbnail

[라인 어벤져스 LINE AVENGERS] localStorage의 token이용한 로그인/로그아웃

로그아웃 상태일 때는 로그인 버튼만, 로그인 상태일 때는 각 페이지의 링크와 함께 유저 정보와 로그아웃 버튼이 있는 박스가 보이도록 만들었다.로그인/로그아웃 상태에 따라서 nav bar의 상태를 다르게 만들어야 한다는 것을 뒤늦게 깨닫고(ㅠㅠㅋ) 백엔드에서 token을

2021년 3월 28일
·
1개의 댓글
post-thumbnail

GIT!!!!!

(내 branch + 새로운 master)1) local의 master로 가서 git pull origin master2) 내 브랜치로 checkout 해서 git merge masterlocal의 브랜치 삭제하기 git branch -d 브랜치이름remote의 브랜

2021년 3월 25일
·
1개의 댓글
post-thumbnail

[라인 어벤져스 LINE AVENGERS] 찜 기능 구현하기

로그인 페이지에서 토큰 받은 상태로 메인 페이지로 오면...

2021년 3월 23일
·
1개의 댓글
post-thumbnail

[라인 어벤져스 LINE AVENGERS] Slick을 이용한 캐러셀(슬라이드) 기능 구현

$ npm install react-slick --save$ npm install slick-carousel --saveSlick을 사용할 js file에 import한다.import "~slick-carousel/slick/slick.css";import "~slic

2021년 3월 21일
·
2개의 댓글
post-thumbnail

[라인 어벤져스 LINE AVENGERS] 카테고리 Drop-down 메뉴 구현 / Data 연결

받아온 데이터 중 menuName 키의 값만 map으로 뿌려준다. menuObj는 메뉴 하나하나(데이터 배열의 한 요소로, 객체 형태) map 함수 안에서 다시 map 함수로 Drop-down 메뉴(categoryName)의 키의 값을 뿌려준다. Drop-down

2021년 3월 21일
·
1개의 댓글
post-thumbnail

[라인 어벤져스 LINE AVENGERS] 메인 페이지 레이아웃 구현

실제 라인 프렌즈 사이트는 로그인, 회원가입, 장바구니 등이 모두 네이버와 연동되어 있다. 팀 프로젝트에서는 연동 부분은 제외하고 사이트 자체에서 해당 기능들이 이루어지는 것처럼 구현하기로 했다. div 지옥에 빠졌다...살려주세요 😵 헤더는 3가지 영역으로 구성했다

2021년 3월 17일
·
1개의 댓글
post-thumbnail

[라인 어벤져스 LINE AVENGERS] 팀 프로젝트 초기 세팅하기

세팅할 폴더로 이동cd Desktop/wecode프로젝트 (CRA) 설치npx create-react-app linefriendsReact Router 설치npm install react-router-dom --saveSass 설치npm install node-sass

2021년 3월 15일
·
1개의 댓글
post-thumbnail

setState 비동기 특성

\[얄팍한 코딩사전] 비동기 프로그래밍이 뭔가요? 자바스크립트는 웹 브라우저나 Node.js의 자바스크립트 엔진에서 실행된다. 자바스크립트가 도는 환경에는 Javascript 엔진 뿐만 아니라 Web API가 함께 동작한다. Web API: 시간 소요하는 작업(타이머

2021년 3월 14일
·
1개의 댓글
post-thumbnail

[React] Mock Data 활용하기

실제로 API에서 데이터를 보내주는 것처럼 fetch 함수로 json 파일에 담긴 데이터를 받아 올 것이다. 파일의 위치는 public 폴더 > data 폴더 > commentData.json객체를 요소로 하는 배열의 형태전달할 데이터를 객체 형태로 만들어 각각 배열의

2021년 3월 13일
·
1개의 댓글
post-thumbnail

[React] Props

Happy.js의 자식 컴포넌트인 Joy.js (pages/Happy 폴더 안에 Joy.js 파일 만들기)부모 컴포넌트에 import 해주고<Joy /> 넣어주기 부모 컴포넌트의 상태값(state.titleColor의 값)에 따라서 className이 바뀌게 한

2021년 3월 13일
·
0개의 댓글
post-thumbnail

[React] State

UI에 집중한 자바스크립트 라이브러리SPAJSX 문법을 사용한다Router, Sass 등의 써드 파티 라이브러리를 사용한다. Component를 사용한다. HTML은 딱 1개. (SPA이기 때문)=> 여러 페이지를 보여주기 위해 Router 사용. 라우팅 기능을 제

2021년 3월 13일
·
0개의 댓글