profile
내 이름 고은정, 은을 180deg 돌려 고긍정 🤭
post-thumbnail

React | 동적라우팅 (Dynamic Routing)으로 상세페이지 구현하기

오늘은 SPA를 기반으로하는 리액트에서 어떻게 상품 리스트에서 개별 상품 페이지로 넘어가는지, 그리고 개별적으로 데이터를 받아올 수 있는지 알아보기로 하자. 다음의 페이지를 보면 '몬스터'들의 리스트다. 해당 주소를 보자. 자 그렇다면 어떻게 각각의 몬스터들의 상세 페

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

Project | 인스타그램 클론 프로젝트

약 1주일 동안 혼자 바닐라 자바스크립트로 인스타그램을 구현하고, 다음의 2주 동안 팀으로 React를 활용하여 구현.CRA 활용한 초기 세팅Github 기반 PR 활용하여 피어 코드 리뷰 진행공용 컴포넌트를 공유한 협업 프로젝트JavaScript 1주(10/26 ~

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

JavaScript | event target과 currentTarget의 차이점

이 글에서는 React onClick 이벤트 상황에서 event.target과 event.currentTarget의 차이점을 정리해본다.흔히 쓰는 event.target은 이해할 수 있다. 다만 currentTarget과 다른 점은 무엇일까?MDN 문서를 먼저 빠르게

2020년 11월 15일
·
0개의 댓글
post-thumbnail

Git | Github commit 삭제 및 초기화

오늘은 Git Commit History 삭제 및 초기화에 대해 정리해보려고 한다.바로 일 분 전까지 필자가 github commit history 삭제를 하고 왔기 때문에 굉장히 확실하고 간단한 방법임을 밝힌다.. 필자는 코딩에 있어선 뭘 하든, 모든 것이 인생의 첫

2020년 11월 15일
·
0개의 댓글
post-thumbnail

Think | 요행을 바라지 않는 개발자

늦지 않은 시기에 한 번쯤은 생각을 정리하고 싶었는데 위코드 생활 한 달을 맞이하여 용기를 내어봅니다. 왜 개발자가 되려 하는지, 어떻게 공부하고 있는지, 그리고 앞으로의 다짐을 담은 개인적인 글입니다.(요즘 근황.jpg)아버지께서는 개발과 무관한 업을 하시지만 프로그

2020년 11월 14일
·
10개의 댓글
post-thumbnail

React | 틱택토 게임 만들기 (2/2)

(1편에서 이어지는 문서입니다..)튜토리얼은 리액트 공식 문서를 참고했다.자세한 내용은 여기에서 찾을 수 있다.리액트를 공부하다보면 Immutable data라는 말을 자주 듣는다. 즉 불변하는 데이터를 만들어놓는 것이 중요하다. 일반적으로 데이터 변경에는 두 가지 방

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

React | 틱택토 게임 만들기 (1/2)

튜토리얼은 리액트 공식 문서를 참고했다.자세한 내용은 여기에서 찾을 수 있다.먼저 CRA로 간단하게 tic-tac-toe 폴더를 만들어주었다. 초기 세팅을 해두고 CSS툴은 공식 문서에서 제공하는 것을 가져왔다.필요 없는 파일들은 미리 지워두었고 (로고, 기타 js 파

2020년 11월 6일
·
1개의 댓글
post-thumbnail

JavaScript | Class 클래스

클래스는 객체 지향 프로그래밍의 핵심이다. '객체 지향 프로그래밍'이라는 단어에서 '객체'는 JavaScript의 데이터 타입을 말하는 것이 아니다. 여기서 객체는 말 그대로 사물을 뜻한다.하지만 클래스는 결국 key와 value를 갖는 object를 잘 설계하기 위한

2020년 11월 4일
·
0개의 댓글
post-thumbnail

React | Component의 Lifecycle

React는 컴포넌트 단위로 화면에 렌더링하는데, 이 때 각각의 컴포넌트는 Lifecycle을 갖는다. 다음은 라이프사이클 다이어그램이다. 이번에는 리액트의 LifeCycle API에 대해 알아보자. Lifecycle 자세한 다이어그램은 이곳에서 볼 수 있다.컴포넌트

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

React | Component의 State

state란 말 그대로 컴포넌트의 상태 값입니다. state와 props는 둘 다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 합니다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고, state는 컴포넌

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

React | Component와 Props

리액트는 컴포넌트 기반 라이브러리이다. 컴포넌트는 UI의 여러 부분을 분할해서 코드의 재사용성과 유지 보수성을 향상시킨다. 즉, 컴포넌트는 독립적으로 재사용 가능한 코드로 관리할 수 있도록 도와준다. 웹페이지를 하나의 완성품이라고 했을 때, 컴포넌트는 하나의 부품이다.

2020년 11월 1일
·
0개의 댓글
post-thumbnail

React | JSX란? 렌더링 Rendering이란?

JSX를 정리하기에 앞서 간단히 리액트를 정리해보자. 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다. 하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크다. 이 리액트는 3가

2020년 11월 1일
·
0개의 댓글
post-thumbnail

JavaScript | Object 객체의 개념과 사용

아마 자바스크립트를 배우기 시작하신 분들은 '객체'에 대해 들어보셨을 것이다.이 글은 초심자, 혹은 어느 정도 객체를 들여다 본 분께 도움이 될 것 같다. 객체를 자유롭게 쓰고 수정하는 것이 아직은 어색한 분들께 이 글이 도움이 되었으면 좋겠다.자바스크립트의 거의 모든

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

JavaScript 아코디언 메뉴 만들기

위의 코드에서 panel-question 에 active가 활성화 된 부분은 패널-바디가 열리고,active가 없는 panel-question 은 닫히게 만드려고 한다.또한 button으로 모든 panel-question이 닫히는 기능을 추가한다.panel-questi

2020년 10월 4일
·
0개의 댓글
post-thumbnail

JavaScript | event.target 이벤트 위임

오늘은 event.target (이벤트 위임)에 대해 정리한다.자바스크립트의 이벤트 중에서 클릭한 요소를 가져오는 방법이다.아래와 같이 li 안에 button이 있는 상황에서 button을 누르면 li가 사라지는 객체를 만들 때, event.target은 button이

2020년 10월 1일
·
0개의 댓글
post-thumbnail

JavaScript | sort()

오늘은 array의 내장 함수 중 sort()에 대해 간략히 정리해본다.sort() 메소드는 배열의 요소를 적절하게 정렬한 후 리턴한다. 원 배열이 바뀐다는 것을 유의하자. 기본 정렬 순서는 문자열의 유니코드 기준을 따른다. 위의 결과로 보아 숫자의 경우 오름차순이 아

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

JavaScript | Local storage 사용하기

오늘은 localStorage와 sessionStorage의 차이점을 알아보고 localStorage에 접근해 저장된 값을 가져오는 방법에 대해 정리해본다.sessionStorage는 브라우저 탭이 열려 있는 동안만 유효하다. 따라서 창을 닫거나 종료 시에는 저장된 값

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

JavaScript | Clock 만들기

오늘은 간단하게 JavaScript로 시계를 만들어본다.먼저 HTML문서에 div로 클래스명이 js-clock인 요소를 만들고 그 안에 h1 요소를 생성한다.그 후, clock.js로 넘어와서 다음과 같이 작성한다.new Date()로 시간을 생성하고 각각의 secon

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

200927__JS querySelector와 querySelectorAll의 차이

오늘은 JavaScript에서 querySelector와 querySelectorAll의 차이를 알아보겠다.그리고 querySelector로 쓰여진 함수 실행을 querySelectorAll로 어떻게 바꾸어 처리해야 되는지 살펴본다.지정된 선택자와 일치하는 도큐먼트의

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

200926__CSS background image 비율 유지 확대

다음은 자바스크립트로 10장의 이미지를 랜덤으로 백그라운드 이미지로 넣어주는 상황이다. 따로 div를 생성하지 않고 바로 img 요소로 넣어주었다.이런 상황에서 창에 크기에 맞춰 이미지가 확대되고 축소되지만, 비율은 유지하고 싶다면?width와 height을 100%로

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