profile
Front-End Developer 'Coming Sooooon'
post-thumbnail

[JS] 배열 안에 있는 객체의 value 바꾸기

이러한 배열이 있을 때, 이 배열속 객체의 value를 바꾸려한다면 map으로 배열에 접근하여 객체의 value를 바꿀 수 있다.

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

[React] Pagination(query string)

흔히 게시판의 '이전/다음' 페이지를 끊어 보여주는 기능으로 익숙할 것이다.pagination은 FRONT, BACK 양쪽에서 모두 구현해야 한다. 프론트에서는 현재의 위치 (Offest)과 추가로 보여줄 컨텐츠의 수(Limit)을 백앤드에 전달한다. 백엔드에서는 그에

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

[위코드 회고록] 3개월간의 위고두 생활😎

나는 원래 음악을 하던 사람이다. 그중에서도 작곡을 했었다. 작곡을 처음 시작할 때는 호기럽게 내 음악을 만들겠다는 포부가 있었는데 점점 시간이 지날수록 대중성을 맞춰가며 타협하는 내 모습이 싫어졌다. 그러다 보니 자연스럽게 음악도 싫어지더라. 한동안은 아예 음악 자체

2021년 1월 26일
·
6개의 댓글
post-thumbnail

[기업협업] 디뉴로(Dneuro) 후기

라는 여의도에 위치한 핀테크 기업이었다.고객의 투자성향을 분석하여 맞춤형으로 제안해주는 b TO c 기업이다.디뉴로는 로보 어드바이저 서비스를 하는 핀테크 회사로 데이터와 알고리즘을 바탕으로 고객의 투자를 도와주는 서비스를 개발하는 회사다.총 5개의 선택지가 있었다.

2021년 1월 26일
·
0개의 댓글

[React] 새로고침을 해야 함수가 작동하는 경우

여러 삽질을 한 결과, react-router-dom의 <Route ... />의 props인 history를 이용한 이 코드가 문제였다.클라이언트 단에서 url을 변경한 것처럼 보이게하는 방식이기 때문에, 여기에서는window.location.replace("/

2021년 1월 6일
·
0개의 댓글

[JS] Spread 연산자, Rest 파라미터

Spread 연산자는 ... 을 통해 사용할 수 있다. MDN에서는 아래와 같이 Spread 연산자를 설명한다.전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개

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

[React] Chart.js2

먼저 관련 라이브러리를 설치한다.react-chartjs-2에서는 사용하고자 하는 Chart를 불러오고 렌더링해준다.예로 Bar Chart를 사용해보자. 모든 chart들은 data, option props를 가진다.datachart의 데이터 값optionchart의

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

[JS] String.prototype.indexOf()

찾으려는 문자열. 아무 값도 주어지지 않으면 문자열 "undefined"를 찾으려는 문자열로 사용한다.문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값이다. 어떤 정수값이라도 가능하다. 기본값은 0이며, 문자열 전체를 대상으로 찾게 된다. 만약 fromIndex 값이

2020년 12월 29일
·
0개의 댓글

[React] LifeCycle보충

React의 컴포너트는 생명주기(Life cycle)을 가진다. 생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말한다.이러한 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다.생성자 메소드로 컴

2020년 12월 27일
·
0개의 댓글

[React] Hooks

Hook >Hook은 함수 컴포넌트에서 react state와 lifecylcle을 연동 할 수 있게 해주는 함수이다. hook은 class 안에서는 동작하지 않는다. 대신 class 없이 react를 사용할 수 있게 해준다. Hook 사용규칙 최상위에서만 Hoo

2020년 12월 27일
·
0개의 댓글
post-thumbnail

[2차 프로젝트 회고록]

기간: 2020/11/30~2020/12/11 (총 12일간)레퍼런스 페이지: Class101 (https://class101.net/) 팀명: ClNASS 101이번 프로젝트 또한 scrum방식으로 진행하였다. 저번 프로젝트때도 같은 방식으로 진행하였지만 조

2020년 12월 13일
·
1개의 댓글

[React] Styled Component

지금까지 css작업은 SSAS로 진행했었다. css에서 SASS로 넘어가면서 편리함을 느꼈었는데 SSAS에서 styeld component로 작업 방식을 바꾸면서는 의문점이 많았다. 오히려 처음에는 더 불편함을 느꼈었던 것 같다. 그렇지만 좀 더 깊이 있게 사용해보면

2020년 12월 13일
·
0개의 댓글

1차 프로젝트 회고록

기간: 2020년 11월 16일(월) ~ 2020년 11 27일(금)사이트: HourPlace (https://hourplace.co.kr/)팀명: OurPlays (프론트 2, 백엔드 3)첫 프로젝트는 scrum 방식으로 진행해보았다. 스크럼(Scrum)은

2020년 11월 29일
·
0개의 댓글

[React] 동적라우팅

IndexSPA, React Router리스트 페이지 >>> 상세 페이지유동 라우터유동라우터란?유동라우터 방법 두 가지1) Query parameters2) URL parameters두 가지 방법을 각각 언제 사용하는게 좋을까?Wrap UpSPA, React Route

2020년 11월 22일
·
0개의 댓글

[React] 부모-자식 간 Lifecycle & 조건부 렌더링

에러메시지를 읽어보면 말 그대로 undefined에 대하여 map 함수를 실행하려 했다는 뜻입니다. 분명 우리가 없는 값에 map을 사용하려 했던 건 아니었을텐데 말이죠. 하지만 이는 분명 해당 값이 어느 순간에는 비어있었다는 뜻이고, 상태값의 시점에 관한 문제라

2020년 11월 22일
·
0개의 댓글

[React] props

링크텍스트props : properties(속성)단어 뜻 그대로 컴포넌트의 속성값이다.props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다.props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄

2020년 11월 14일
·
0개의 댓글

[React] state

State >- 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다. state는 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체이다. state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다. state 객체

2020년 11월 14일
·
0개의 댓글

[React] SSAS

Syntactically Awesome Style Sheet nesting이 가능한 css 이다. SSAS의 확장자 명은 .scss이다.Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있다. JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게

2020년 11월 3일
·
0개의 댓글

[React] Router

SPA(Single Page Application) - 페이지(html)가 한개인 애플리케이션()리액프 프로젝트에서 .html 파일의 개수는 1개이다.Routing이란 다른 경로에 따라 다른 view(화면)을 보여주는 것이다.리액트 자체에는 이러한 기능이 내장되어 있지

2020년 11월 3일
·
0개의 댓글

[React] Component & JSX

componet: 재활용 가능한 UI 구성 단위 예제. westagram 메인페이지 \- main 페이지를 Component로 나눈다면, \- Nav컴포넌트, Main컴포넌트, 그리고 Main 컴포넌트 안에는 Feed 컴포넌트와 MainRight 컴포넌트로

2020년 11월 2일
·
0개의 댓글