profile
디자이너인가 퍼블리셔인가 프론트엔드개발자인가 정체성의 혼란을 겪는 개린이
post-thumbnail

[JavaScript] Object(객체) 원소 삭제하기, key 삭제하기

아래 animal 객체가 있고, rabbit을 삭제하는 코드이다.const animal = { rabbit: "토끼", lion: "사자", tiger: "호랑이"};console.log("const { rabbit, ...otherAnimal } = animal

2022년 6월 24일
·
0개의 댓글
post-thumbnail

[리액트를 다루는 기술] 5장 ref:DOM에 이름 달기

이 포스팅은 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다.일반 HTML에서 DOM에 이름을 달 때는 id를 사용합니다.리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 바로 ref(reference의 줄임말) 개념입니다.ref는 전역적으로 작동하지 않고 컴

2022년 6월 22일
·
0개의 댓글
post-thumbnail

[리액트를 다루는 기술] 4장 이벤트 핸들링

이 포스팅은 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다.이벤트 : 웹브라우저에서 DOM 요소들과 상호작용 하는 것함수가 호출될 때 this는 호출부에 따라 결정되므로, 클래스의 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this

2022년 6월 22일
·
0개의 댓글
post-thumbnail

[리액트를 다루는 기술] 3장 컴포넌트

이 포스팅은 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다.컴포넌트를 선언하는 방식은 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다.클래스형 컴포넌트와 함수형 컴포넌트의 역할은 같으나 둘의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능

2022년 6월 22일
·
0개의 댓글

ES6의 화살표 함수 자세히보기

이 포스팅은 김민준님의 '리액트를 다루는 기술'에서 일부를 발췌하여 요약한 글입니다.화살표 함수(arrow function)는 ES6 문법에서 함수를 표현하는 새로운 방식입니다. 그렇다고 해서 기존 function을 이용한 함수 선언 방식을 아예 대체하지는 않습니다.

2022년 6월 22일
·
0개의 댓글
post-thumbnail

[리액트를 다루는 기술] 2장 JSX

이 포스팅은 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다.1장에서 만든 프로젝트를 VS Code에서 열고 파일 > 열기 메뉴를 선택하여 생성한 프로젝트의 디렉터리를 엽니다.그리고 src/App.js 파일을 열어보세요.이제부터 코드를 하나씩 이해해 봅시다.이 코

2022년 6월 22일
·
0개의 댓글
post-thumbnail

Node.js, npm, yarn 설치방법

먼저 터미널을 열고 다음 명령어를 입력하세요.그 다음 터미널을 재시작하고, 다음 명령어를 입력하여 nvm을 잘 설치했는지 확인하세요.터미널을 재시작해도 버전이 나타나지 않는다면, vim 명령어를 입력하여 ~/.bash_profile 파일에 다음 스크립트를 추가해야 합니

2022년 6월 22일
·
0개의 댓글
post-thumbnail

[Javascript] e.target과 e.currentTarget의 차이점

블로그를 보면서 타입스크립트를 공부하다가 e.target과 e.currentTarget이 다르다는 것을 알고, 무엇이 어떻게 다른지 개념을 이해하고자 정리해본다.event.currentTarget == the element to which the event handle

2022년 6월 15일
·
0개의 댓글
post-thumbnail

카우치코딩 팀 프로젝트 2차구현 정리 및 회고

1차 회고록 : https://velog.io/@sunkim/%EC%B9%B4%EC%9A%B0%EC%B9%98%EC%BD%94%EB%94%A9-%ED%8C%80-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-1%EC%B0%A8%EA%B5%A

2022년 4월 23일
·
0개의 댓글

[Javascript] use strict란?

use strict암묵적인 "느슨한 모드(sloppy mode)"를 해제하고,명시적인 "엄격 모드(Strict Mode)"를 사용하는 방법이다.ECMAScript 5부터 추가된 use strict는 JS(자바스크립트)의 제한된 버전을 선택함으로써 런타임시, JS 코드에

2022년 4월 20일
·
0개의 댓글
post-thumbnail

[Javascript] script async 와 defer의 차이점

모던 웹브라우저에서 돌아가는 스크립트들은 대부분 HTML보다 ‘무겁다’. 용량이 커서 다운로드받는 데 오랜 시간이 걸리고 처리하는 것 역시 마찬가지이다.사용자가 HTML파일을 다운로드 받았을 때 브라우저는 HTML을 한줄씩 읽으며 CSS와 병합하여 DOM 요소로 변환한

2022년 4월 20일
·
0개의 댓글
post-thumbnail

[React]소스코드 하이라이트

회사에서 60장 분량의 API 규격문서를 하드코딩해서 올리라는 말을 듣고 잠시간 할 말을 잃었었다.. API연동 문서에는 많은 테이블과 텍스트들이 있었지만 그 중 가장 관건은 request와 response 예시인데리퀘스트 예시이렇게 되어있는 내용을 highlightj

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

React.memo, useMemo, useCallback 역할 및 차이점

React는 컴포넌트를 렌더링 한 뒤, 이전 렌더된 결과와 비교하여 Dom 업데이트를 결정한다. 이 때 재렌더가 필요없는 컴포넌트의 렌더를 방지하여 이 업데이트 속도를 높일 수 있는 방법들이 있는데 정확한 역할과 차이점을 구분하기 위해 정리해 보고자 한다.썸네일Reac

2022년 3월 22일
·
0개의 댓글
post-thumbnail

[React] axios 와 fetch 차이점

react에서 네트워크 통신을 도와주는 api인 axios와 fetch.이것은 어떨 때 사용하고, 무슨 차이가 있는지, 그래서 사용법은 어떤지에 대해서 정리해보려한다.나의 경우에는 camp-us프로젝트를 하면서 axios를 먼저 써보고, 회사 프로젝트인 Hisms에서는

2022년 3월 21일
·
0개의 댓글

.git/index.lock': File exists. 에러해결

이유는 모르겠지만 갑자기 커밋을 추가하려니 다음과 같은 에러메세지가 떴다.그래서 찾아본 해결법을 하니까 해결이 되었다!구글링 하다보니까 아래와 같은 해결법도 있었는데이 명령은 듣지 않았다. 혹시 모르니까 일단 기록해두고 다음에 같은 에러가 발생했을 때 시도해보려한다.

2022년 3월 6일
·
0개의 댓글

카우치코딩 팀 프로젝트 1차구현 정리 및 회고

1차 프로젝트가 눈 깜짝할 사이에 끝났다. 약 한달정도 되는 기간 내내 매일 성장하는 기쁨을 느끼면서 코딩할 수 있게 해준 우리 팀원분들 모두 고맙습니다~ 💛 여러분들과 함께했기 때문에 프로젝트를 잘 마칠 수 있었어요! 🥳🏆 프로젝트 소개care/of우리가 진행한

2022년 3월 4일
·
0개의 댓글
post-thumbnail

[수업과제] 카우치코딩 팀 프로젝트 리뷰 ⑧

리뷰 길이에 따라 더보기 버튼 생성기존 Figma 디자인 상에서는 리뷰가 길어지면 3줄 이상이 되었을 때 ...으로 표시하도록 하였는데, 생각해보니 그렇게 하면 리뷰 내용 전체를 아무도 볼 수 없는 UI가 되어버렸다. 이 부분을 modal로 처리할 지, 더보기 버튼을

2022년 2월 28일
·
0개의 댓글
post-thumbnail

[수업과제] 카우치코딩 팀 프로젝트 리뷰 ⑦

antd 커스텀앤트디자인 primary컬러 커스텀우리 프로젝트의 메인 컬러는 햄버거바에서 보이는 바와 같이 연두색에 가까운 초록색인데, React UI library를 앤트디자인으로 사용하였더니 default컬러가 저런 파란색으로 나왔었다. 우리가 직접 css한 부분은

2022년 2월 28일
·
0개의 댓글

[수업과제] 카우치코딩 팀 프로젝트 리뷰 ⑥

작성한 리뷰 / 알림 등의 업데이트 날짜포맷 변환날짜변환대부분의 개발 언어가 그렇지만 기본으로 표시되는 날짜 포맷이 우리나라나 동양권의 날짜 표시 방법과는 차이가 있다. 자바스크립트의 많은 라이브러리들과 날짜 관련 UI 프레임워크들도 마찬가지로 날짜 포맷 표현에서 우리

2022년 2월 28일
·
0개의 댓글
post-thumbnail

[React]부모-자식 컴포넌트간 함수 및 데이터 전달

아래 코드에서 VideoDetailPage.js는 영상의 상세페이지를 보여주는 컴포넌트이고, <Movie />는 해당 동영상이 표시되는 영역, <CommentArea>는 동영상 아래의 댓글 영역이다.VideoDetailPage.js에서 만든 refreshFu

2022년 2월 22일
·
0개의 댓글