profile
하고싶은게 많은 사람. Front-end Developer

코어 자바스크립트 : 03. this 정리

대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다. 클래스에서만 사용할 수 있기 때문에 혼란의 여지가 많지 않지만, this는 자바스크립트의 어디서든 사용할 수 있다. this는 상황에 따라 바라보는 대상이 달라지게 되는데, 어떤 이유로

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

코어 자바스크립트 : 02. 실행 컨텍스트 정리

실행 컨텍스트란? > 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜스택에 쌓아 올렸다가 가장 위에있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의

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

코어 자바스크립트 : 01. 데이터 타입 정리

자바스크립트 데이터 타입은 기본형, 참조형 이렇게 크게 두가지로 볼 수 있다.일전 자바스크립트 이해하기-2 에서도 간략하게 살펴보았었지만 책을 읽고 정리해보면서 더욱 자세하게 살펴보려고한다. 이 둘을 구분하는 기준은 무엇일까?둘 다 복제를 하지만 기본형은 값이 담긴 주

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

2차 프로젝트 회고록 - DataWeSA 클로닝 프로젝트

내가 할 수 있을까? 하는 마음으로 시작했는데 정말 다 해낸 2차 프로젝트 회고록을 남겨보려고 합니다. 그치만 언제나 아쉬움은 존재..코로나 바이러스를 비롯한 여러 데이터를 수집, 분석 및 차트와 지도로 시각화한 dataUSA Web사이트 클론 프로젝트입니다.개발 기간

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

Redux + Redux persist 를 사용하여 Data Cart 구현

Redux는 자바스크립트 앱의 상태(state)를 관리해주는 하나의 도구, 라이브러리이다. React 뿐만 아니라 어디에서도 사용할 수 있지만 이번 프로젝트에서 React와 함께 Redux로 state를 관리해보면서 Data Cart 페이지를 구현하였다.프로젝트 규모가

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

git rebase란?

2차 프로젝트에 들어가면서 git rebase라는 새로운 flow를 익히게 되었다.기존에 적용하였던 git flow는 각자 작업하던 branch에서 새로운 업데이트 사항이 생기면 git addgit commitgit push origin master conflict 발

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

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

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

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

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

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

2020년 8월 7일
·
1개의 댓글
·
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개의 댓글
·

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개의 댓글
·
post-thumbnail

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

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

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