profile
하고싶은게 많은 사람. 프론트엔드 개발자로 거듭나는 중입니다.
post-thumbnail

2차 프로젝트 - React Hook으로 구글 소셜 로그인 구현하기

DataUSA에는 제대로 된 로그인 페이지도, 더불어 소셜 로그인 기능도 없지만 DataWeSA에는 멋진 로그인 페이지와 소셜 로그인 기능까지 갖춰져있다^^레이아웃 짜주신 효식님께 박수10번..👏👏👏소셜 로그인 기능 구현을 경험해보기 위해 우리 팀은 각자 하나씩

5일 전
·
0개의 댓글
post-thumbnail

2차 프로젝트 - React - Navbar / Sidebar styled component로 구현하기

DataUSA 사이트의 Navbar는 Scroll을 감지하여 처음에는 배경색이 없었다가 일정부분 내려가면 배경색이 생기면서 페이지의 타이틀이 추가된다. 스크롤을 감지하는 이벤트를 활용하여 구현할 수 있다.1차 프로젝트 때 Nav 바를 멋지게 구현해주신 경배김님 덕분에

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

2차 프로젝트 - React - 복잡한 데이터 useState, useEffect Hook으로 관리하기

제목 그대로 복잡한 데이터, 즉 변경될 데이터를 포함하는 여러 형태의 데이터를 함수형 컴포넌트 내에서 useEffect와 useState를 사용하여 다루려고 한다.2차 프로젝트에서 highchart 라이브러리를 사용하고 있다.highchart는 options라는 객체

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

1차 프로젝트 회고록 - 29CM 웹사이트 클로닝

1차 프로젝트가 끝나고 화끈하게 뒷풀이도 했습니다. 짧다면 짧은 2주지만 시간에 비례하지 않게 저에게 많은 경험을 남겨준 1차 프로젝트를 마무리하며 회고록을 남겨보려고 합니다. 프로젝트 소개 국내외 패션, 라이프 스타일을 한눈에 볼 수 있는 유명 온라인 편집샵 29

2020년 8월 2일
·
2개의 댓글
post-thumbnail

1차프로젝트 - 부모/ 자식 컴포넌트의 State 관리

지난주부터 끙끙앓던 문제를 해결하였고 그 문제가 도대체 무엇이였는지..회고록을 남겨보고자 한다.우선 내가 구현하고 있던 페이지인 29TV는 총 4개의 컴포넌트가 존재한다.최상위 부모 컴포넌트인 TwentyNineTV컴포넌트에서 fetch를 통해 데이터를 받고, 이 데이

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

1차 프로젝트 - state 끌어올리기

공식문서 : https://ko.reactjs.org/docs/lifting-state-up.html1차 프로젝트를 진행하면서 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 하는 순간이 찾아왔다..나의 상황...공식문서 ctrl+c, ctrl+v..

2020년 7월 29일
·
0개의 댓글
post-thumbnail

1주차 프로젝트 - My Heart 페이지 Active Tab기능 구현

프로젝트 진행중 카테고리 버튼을 클릭할 시 안에 컨텐츠만 변경이 되는 기능을 구현하게 되었다.귀한 세션을 듣고 바로 적용한 것...안비밀..변경될 부분만 다른 컴포넌트로 바꿔주어 그 부분만 렌더를 하면 되기 때문에 React의 주요 특징 중 하나인 SPA가 돋보이는 페

2020년 7월 26일
·
0개의 댓글

Linux & Terminal

리눅스의 구조 커널 : 하드웨어를 제어하는 커널 쉘 : 커널과 유저가 대화할 수 있도록 제공되는 쉘 응용프로그램 : 그와 별개로 존재. 커널은 리눅스의 핵심, 프로세스관리, 메모리관리, 파일 및 장치등 컴퓨터의 하드웨어를 모두 제어 쉘은 커널과 사용자간의 접점으로

2020년 7월 26일
·
0개의 댓글
post-thumbnail

1주차 프로젝트 - 이중 모달창 띄우기

1주차 프로젝트가 시작되었다.나는 29CM 사이트 클론 팀에서 29TV 페이지를 맡게 되었다.29CM는 국내 온라인 편집숍 사이트이며 29TV는 자체 소셜 네트워킹 서비스 페이지로, 입점 브랜드들이 브랜드 제품을 홍보하거나 사진, 비디오를 공유하는 페이지이다.페이지 구

2020년 7월 24일
·
0개의 댓글
post-thumbnail

React 컴포넌트의 Lifecycle

fetch함수로 API를 호출하는 실습을 진행하면서 React의 Lifecycle을 다시 살펴보면 좋을 듯 하여 정리 해보려고 한다. a

2020년 7월 19일
·
0개의 댓글
post-thumbnail

Westagram 시작과 마무리

들어가며 2주동안 html,css 그리고 바닐라 자바스크립트를 배우고 드디어 React에 접어들었다. 자바스크립트로 클론코딩 했던 인스타그램을 다시 리액트 컴포넌트로 세분화, Sass 적용을 하고 리액트 라우팅을 통해 SPA의 특징을 이해해보는 시간이였다. 마지막으로

2020년 7월 18일
·
1개의 댓글

fetch 함수로 API 호출하기

API 호출 (백엔드 서버 호출) API는 백엔드랑 통신해서 받아오는 과정의 모든 것이라고 생각하면 된다. JSON은 객체 값을 갖고오듯이 가지고올 수 없고 JSON을 자바스크립트로 변환해주는 과정이 fetch안에 들어와있다. 데이터가 들어 왔을 때 하고자 하는 것

2020년 7월 17일
·
0개의 댓글
post-thumbnail

인증(Authentication) & 인가(Authorization)

인증과 인가는 API에서 가장 자주 구현되는 기능중 하나이다. 프라이빗한 API는 물론이고 퍼블릭한 API도 기본적인 인증과 인가를 요구한다.Authentication은 유저의 identification을 확인하는 절차이다. 쉽게 말해 유저의 아이디와 비밀번호를 확인하

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

데이터구조 Data Structure - #2 Set, Dictionary, Hash

Set이란? >Set은 array나 list처럼 순열 자료구조이다. 하지만 Set은 array나 list와 다르게 순서라는 개념이 존재하지 않는다. Set의 특징 데이터를 비 순차적으로 저장할 수 있는 순열 자료구조(collection) 삽입 순서대로 저장되지 않는

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

Code Kata - Week2

Code Kata 2주차. *문제 로마자에서 숫자로 바꾸기 1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다. 로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다. II

2020년 7월 13일
·
0개의 댓글
post-thumbnail

React - .map함수 & .filter함수로 댓글 기능 구현하기 ( 댓글 리스트 추가 및 삭제)

바닐라 자바스크립트로 인스타그램 클론 코딩을 마친 후 이를 이용해 React 로 컴포넌트를 생성하여 기능 구현을 하고있다.아직 리액트의 개념을 익히고 있는 와중에 ... 댓글 기능 구현에서 큰 난항을 겪고 삭제기능까지 애쓰며 겨우 구현해내었던 과정을 살펴보고자 한다.먼

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

데이터 베이스 Database

데이터를 저장 및 보존하는 시스템데이터베이스를 사용하는 이유는 데이터에 접근 및 관리가 편리하기 때문이다.하나의 셀 안에 하나의 데이터만 Database의 종류RDBMS(관계형),NoSQL(비관계형)관계형 데이터 베이스 RDBMS모든 데이터들은 테이블로 구성. 마치 엑

2020년 7월 9일
·
0개의 댓글
post-thumbnail

HTTP & RESTful HTTP API

HyperText Transfer Protocol하이퍼 텍스트 문서를 교환하기 위해 만들어진 통신 규약.프론트앤드와 서버와 클라이언트간의 통신에 사용 또한 백엔드와 프론트앤드 서버간의 통신에도 사용.TCP/IP의 특성을 가지고 통신을 한다.HTTP 기본적으로 요청과 응

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

React 시작하기 - JSX, Component(Props, State)

리액트는 자바스크립트를 사용한 dom변형 ui를 어떻게 업데이트 할지 X ui를 어떻게 보여줄지! component 쉽게 말해 사용자 정의 태그. 장점 가독성 재사용성 유지보수

2020년 7월 6일
·
0개의 댓글
post-thumbnail

데이터 구조 Data Structure - #1 Intro, Array & Tuple

자료 구조란 데이터에 편리하게 접근하고 조작하기 위한 데이터를 저장하거나 조직하는 방법.각각의 자료구조가 갖는 장점과 한계를 잘 이해하고 상황에 맞게 올바른 자료구조를 선택하고 사용하는 것이 중요!자료구조는 언어별로 지원하는 양상이 다름상황과 문맥에 맞게 데이트럴 담을

2020년 7월 6일
·
0개의 댓글