profile
My Moto:: 내 스스로와 더불어 주변에게도 좋은 영향을 행사하도록 점검 & 노력..!!
post-thumbnail

[2nd Project] GREAM - Chart.js 라이브러리를 이용한 그래프 구현

라이브러리 설치 Line Component import Line Component의 width, height 지정 data 객체 생성 label : x축 data : y축 데이터 fill : 그래프 안을 채울 것인지 정하는 속성 backgroudColor: 그래

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

position: absolute일 때 중앙정렬하는 법

left의 값을 50% 으로 잡기margin-left의 값을 정렬하려는 div등의 넓이값/2 나누고 음수(-)값을 입력출처: https://webdir.tistory.com/31 WEBDIR

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

[2nd Project] GREAM Review

바람보다도 빠르게 휙~ 지나갔던 1차 프로젝트를 마감하고 2021.7.19일부터 7.30일까지 새로운 팀원들과 매칭되어 2차 프로젝트에 돌입했다. 이미 1차 프로젝트에서 많은 체력을 소모하였기 때문에 2차 프로젝트를 진행할 때는 내 기분이 필요 이상으로 많이 다운되지

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

[2nd Project] GREAM - 경로와 쿼리 변경될 때마다 최상단으로 이동

공용 컴포넌트 디렉토리에 위치시켜두고 Routes.js 폴더에 선언하여 pathname과 search를 인식하도록 함

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

[2nd Project] GREAM - push로 props 넘겨주기

history.push 사용법 일반적으로는 이렇게 사용하지만 다음페이지로 넘어갈 때 특정 값을 가지고 가야 할 경우가 존재한다. 그럴 때는 어떻게 해야 할까? props 넘기기 전달받은 props 불러오기 Example

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

[2nd Project] GREAM - DropDown

KREAM 웹에 나와있는 드롭다운 메뉴이다. 이것을 바탕으로 기능을 구현해보고자 한다.내 코드는 map으로 여러 개의 확인사항이 출력되고 있는 상황이다.Click한 상태인지 아닌지 구별하기 위한 State가 필요하다.해당 드롭다운 메뉴가 클릭되었는지 판별하기 위한 St

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

[2nd Project] GREAM - Radio를 이용한 Carousel 구현

label을 클릭 시 해당 이미지로 이동다음 버튼을 클릭 시 다음 이미지로 이동이전 버튼을 클릭 시 이전 이미지로 이동이동 시 fade 효과 부여label의 속성인 for=<id값>을 이용하면 된다. React에서는 for가 아닌 htmlfor이라는 명칭을 사용한

2021년 7월 25일
·
0개의 댓글

[2nd Project] GREAM - Carousel styled-components(3D 표현)

Carousel을 구현하면서 뭔가 심심한 느낌이 들어서 상품을 더욱 강조하기 위해 3D로 보이도록 디자인해보았다.

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

[1st Project] 녹차록 List & Detail

녹차록 페이지에서 내가 맡은 부분인 List, Detail의 기능에 대해 간단히 설명하고자 한다.버튼을 클릭하면 이동하는 슬라이드카테고리별로 동영상이 하나씩 존재하여 현재 재생되는 동영상의 카테고리 이름이 밑에 보이도록 동시에 슬라이드되는 기능이 추가됨카테고리 이름 ⇒

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

[1st Project] 녹차록 Detail - Kakao Link

첫 단계에서 이런 식으로 적었더니 제대로 동작은 되었지만 키가 그대로 노출되는 문제점이 발생연욱님이 리뷰를 주셔서 .env 파일을 만들어서 이 안에서 키를 관리하도록 하고 .gitignore 파일에 추가하여 gitHub에 업로드되지 않도록 수정But!! 여기서 CROS

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

[1st Project] 녹차록 Review

드디어 2주간의 긴 것 같지만 짧은 1차 프로젝트가 마무리되었다. 처음 시작했을 땐 나의 첫 정식 프로젝트였기 때문에 어떻게 마무리될지 걱정도 앞서고 내가 나의 위치에서 잘 행동할 수 있을지 염려도 되었지만 수현님, 재경님, 성준님, 수종님의 도움을 받으며 잘 해결해나

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

TIL 43 - React CSS

React에서 CSS 속성은 camelCase로 작성한다.ex) backgroundColor

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

TIL 42 - spread와 rest

Spread와 rest 문법은 ES6에서 도입된 문법들이다.'펼치다', '퍼뜨리다'이 문법을 사용하면 객체 또는 배열을 펼칠 수 있다.spread 문법의 핵심은 기존의 것을 건드리지 않고 새로운 객체를 만들 수 있다는 것이다.객체, 배열, 함수의 파라미터에서 사용 가능

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

TIL 41 - 비구조화 할당

프로젝트를 진행하면서 비구조화 할당 문법에 대해서 접하게 되었는데 잘 이해가 되지 않아 글로 정리해보면서 다시 복습해보고자 한다.

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

[Code Kata] Week 2 - Day 4

저번 코드 카타 문제 중에서 과반수가 넘는 숫자를 반환하는 문제가 있었는데 객체를 이용하여 푼 기억이 났다.이번 문제도 객체 안에 받은 인자 배열에 있는 숫자를 키로 하고 이 숫자가 몇 개가 나왔는지 value로 저장한 다음에 정렬을 하면 될 것 같아서 이대로 진행해보

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

TIL40 - fetch 함수 로그인 & 회원가입 logic

유저가 이메일과 패스워드를 입력한다.email input, password input의 onChange 함수가 실행된다. input의 value를 setState를 통해 업데이트한다.로그인 버튼을 누르면 onClick 함수를 실행한다.onClick 함수 안에 있는 fe

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

[Code Kata] Week 2 - Day 3

문제 > #### s는 여러 괄호들로 이루어진 String 인자입니다. s가 유효한 표현인지 아닌지 true/false로 반환해주세요. > 종류는 '(', ')', '[', ']', '{', '}' 으로 총 6개 있습니다. 아래의 경우 유효합니다. 한 번 괄호를 시작했

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

[Code Kata] Week 2 - Day 2

문제 > 숫자로 이루어진 배열인 nums를 인자로 전달합니다. 숫자중에서 과반수(majority, more than a half)가 넘은 숫자를 반환해주세요. > 예를 들어, > nums 배열의 길이는 무조건 2개 이상 Code My Code 객체를 이용해서 배열

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

[Clone] Instagram - React 댓글 삭제

들어가기 전에 React 댓글 추가 글에서는 컴포넌트를 분리하지 않고 Feed.js에서 댓글을 추가하였는데 이 뒤에 컴포넌트를 분리하는 것이 관리하기 편해질 것 같아 CommentList와 Comment 컴포넌트로 분리하였다.Comment 컴포넌트가 반복적으로 렌더링된

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

[Clone] Instagram - React 댓글 추가

Intro React의 state 객체를 활용한다. input 창에 적은 댓글 값을 받는다. state 객체에 선언한 키에 받은 댓글 값을 setState 해 준다. state의 댓글이 차례대로 나오게 map 함수를 사용하여 render 메서드 안에 선언한다. Co

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