profile
PM & 프론트엔드 개발자 꿈나무..🔥

[개발일지 #5] 새로고침해도 로그인 상태 유지하기

현재 카카오 로그인을 통하여 마이페이지 구현을 완료해가던 중 리액트에서는 로그인 유지를 어떻게 할까에 대한 궁금증이 생겼다.구글링을 통해 공부한 내용을 정리해보고자 한다.로그인을 한다고 해서, 앱 내에서 로그인 상태가 유지되지 않는다.새로고침을 하면 스토어 값이 초기화

2022년 8월 10일
·
0개의 댓글
·

[개발일지 #4 ] useContext로 로그인 유저 정보 관리하기

get으로 가져온 유저 정보를 어떻게 마이페이지 화면에 띄워야 하나 매우매우 고민을 하던 시기가 있었다.. 이것을 도대체 어떻게 관리해야지 마이페이지 화면에 보여줄 수 있고, 로그인된 상태를 유지시킬 수 있을까?그러다가 구글링을 열심히 하면서 알아본 결과를 공유하고자한

2022년 8월 10일
·
0개의 댓글
·

[React] react-router-dom 사용하기!

라우팅이란, 호출되는 url에 따라서 페이지 이동을 시켜주는 것이다.react에서 view는 component를 사용하게 된다. react에서 라우팅을 지원하는 친구들은 많지만, 가장 많이 쓰이는 것은 단연 react-router-dom이다. 이것도 패키지이기 때문에,

2022년 8월 10일
·
0개의 댓글
·
post-thumbnail

[React] React에서 Cookie를 사용해보자

쿠키란 사용자가 접속한 웹 사이트의 서버를 통하여 사용자 컴퓨터에 설치되는 정보를 말한다. 보통 크롬과 같은 웹 브라우저에 쿠키가 저장된다. 쿠키는 사용자 정보를 저장하거나, 마케팅을 위한 목적으로 사용될 수 있다. cmd창을 열어서 npm install react-c

2022년 8월 10일
·
0개의 댓글
·

[React] React에서 재사용성을 높여보자.

커링(Currying)은 함수의 재사용성을 높이기 위하여 함수 자체를 return하는 함수이다. 함수를 하나만 사용할 때에는 필요한 모든 파라미터를 한번에 넣어야 하지만, 커링을 사용하게 되면, 함수를 분리할 수 있으므로 파라미터도 나누어서 전달할 수 있다! plusN

2022년 8월 9일
·
0개의 댓글
·
post-thumbnail

[React] 비동기적인 것을 동기적으로 구현할래..

자바스크립트는 비동기적으로 동작하기 때문에, 먼저 실행된 작업이 끝나지 않았더라도 다음 작업이 시작할 수 있다. 콜백 함수를 이용하면 특정한 코드에 순서를 정하여 원하는 시점에 실행을 할 수 있다. 예시를 살펴보도록 하자.logPrint라는 함수를 호출하는 데 파라미터

2022년 8월 9일
·
0개의 댓글
·
post-thumbnail

[React] get과 post 제대로 이해하기

get과 post를 axios를 이용하여 수박 겉햝기 식으로 공부했었는데 (..) 오늘에 와서 제대로 이 부분에 대해서 짚고 넘어가고 싶어서 포스팅을 작성하게 되었다.먼저, 자바스크립트의 내장함수 fetch를 이용하여 get을 실행해보고자 한다.fetch를 이용하게 되

2022년 8월 9일
·
0개의 댓글
·
post-thumbnail

기타 그래프 이론

서로소 집합은 공통 원소가 없는 두 집합을 의미한다. 예를 들어, {1,2}와 {3,4}는 서로소 관계인 집합이라고 설명할 수 있따.서로소 부분 집합들로 나누어진 원소들의 데이터를 처리하기 위한 자료구조이다.합집합 : 두개의 원소가 포함된 집합을 하나의 집합으로 합치는

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

[React] React에서 Bootstrap 사용해보기

우리가 왜 프론트엔드 개발자가 되는 것일까..!! 바로 눈에 보이는 웹을 멋있게 만들기 위해서이다. ㅎㅎ 이번에는 React에서 BootStrap을 이용해 보는 실습에 대한 기록을 하려고 한다.bootstrap을 react에서 사용할 수 있도록 패키지로 만든 것이 바로

2022년 8월 5일
·
0개의 댓글
·
post-thumbnail

[React] 함수형 컴포넌트에 대한 이해

리액트를 처음 시작하게 된 계기는 멋쟁이사자처럼을 통해서 알게 되었다.멋쟁이 사자처럼의 강의는 대부분 함수형 컴포넌트를 사용하였고, 나는 리액트에 그러한 컴포넌트의 종류만 존재하는 줄 알았다.하지만 이번 여름방학에 리액트에 대해서 차근차근 공부하다가 보니까, 함수형 컴

2022년 8월 5일
·
0개의 댓글
·
post-thumbnail

[React] 컴포넌트의 전역변수, state에 대해서 이해하자.

state는 하나의 컴포넌트 안에서 전역 변수처럼 사용할 수 있는 것이다. this.state.변수명=value와 같이 state를 직접 변경하면, render()함수를 호출하지 않아서, 화면에 보이는 state값은 바뀌기 전 상태로 남게 된다. setState() 함

2022년 8월 5일
·
0개의 댓글
·
post-thumbnail

[React] React의 다양한 함수들 - forEach, map

배열 함수 forEach()는 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다. 다만, 배열의 처음부터 마지막 순번까지 모두 작업하는 경우에는 forEach()함수를 사용하는 것이 간편하다. 다음 예시를 확인해보자. 두 코드를 비교해보면 차이점이 느껴

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

[React] 화살표 함수 이용하기

리액트를 공부하면서 낯설었던 것 중의 하나가 바로 화살표 함수이다. 화살표 함수는 ES6에 처음 등장하였고, 함수를 보다 간략하게 선언할 수 있다는 강점이 있다.화살표 함수는 callback 함수에서 this를 bind해야 한다는 문제도 발생하지 않는다. :)callb

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

[React] React에서의 전개 연산자

React를 공부하면서 가장 신기했던 것 중 하나가 바로 전개 연산자이다. 전개 연산자는 배열이나 객체 변수를 조금 더 직관적이고, 편리하게 합치거나 추출할 수 있게 도와주는 문법이다. 변수 앞에 ...를 입력하여 사용한다. (마침표 3개 입력) 이 전개 연산자는 배열

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

[React] React에서 사용하는 변수

var 변수를 사용하는 방법에 대해서 아래 코드를 보자.이미 varName이라는 변수를 선언하였는데, 200으로 다시 선언을 하고 있다. 이때, 콘솔창에 다음과 같은 경고가 뜬다.하지만 var 변수는 재선언, 재할당을 허용하기 때문에 경고 메세지가 출력되어도 페이지가

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

최단 경로 알고리즘

최단 경로 알고리즘은 가장 짧은 경로를 찾는 알고리즘을 이야기한다.한 지점에서 다른 지점까지의 최단 경로 한 지점에서 다른 모든 지점까지의 최단 경로모든 지점에서 다른 모든 지점까지의 최단 경로각 지점은 그래프에서 노드로 표현되고, 지점 간 연결된 도로는 그래프에서 간

2022년 7월 30일
·
0개의 댓글
·
post-thumbnail

[BOJ] 1149 - RGB거리

https://www.acmicpc.net/problem/1149DP (다이나믹 프로그래밍)RGB거리에는 집이 N개 있다. 거리는 선분으로 나타낼 수 있고, 1번 집부터 N번 집이 순서대로 있다. 집은 빨강, 초록, 파랑 중 하나의 색으로 칠해야 한다. 각각의

2022년 7월 30일
·
0개의 댓글
·
post-thumbnail

[BOJ] 1003번 - 피보나치 함수

https://www.acmicpc.net/problem/1003DP (다이나믹 프로그래밍)다음 소스는 N번째 피보나치 수를 구하는 C++ 함수이다.fibonacci(3)을 호출하면 다음과 같은 일이 일어난다.fibonacci(3)은 fibonacci(2)와

2022년 7월 30일
·
0개의 댓글
·
post-thumbnail

[BOJ] 1463번 - 1로 만들기

https://www.acmicpc.net/problem/1463DP (다이나믹 프로그래밍)정수 X에 사용할 수 있는 연산은 다음과 같이 세 가지 이다.X가 3으로 나누어 떨어지면, 3으로 나눈다.X가 2로 나누어 떨어지면, 2로 나눈다.1을 뺀다.정수 N이

2022년 7월 30일
·
0개의 댓글
·
post-thumbnail

[개발일지 #3] UseEffect는 왜 두번 실행되는걸까?

팀원들과 카카오 로그인 구현 중.. 인가코드를 자꾸 두 번 보내게 되는데, 그 원인을 몰라서 한참을 해메다가 UseEffect 때문에 이러한 문제가 발생되는 것을 알 수 있었다.왜 날...괴롭히는거임아무튼, useEffect의 기능을 다시 한 번 생각해보면서 이 문제를

2022년 7월 29일
·
0개의 댓글
·