profile
프론트엔드 개발자 지망생 (react/next/js/ts)

[React] react-beautiful-dnd를 이용한Drag and Drop 구현

프로젝트를 기획하며 예전에 보았던 Drag and Drop이 매우 인상적이였기에 프로젝트에 이 기능을 추가하고 싶어 react-beautiful-dnd 라이브러리를 사용하여 DND를 만들어 보았다. 라이브러리여서 처음에는 '크게 어렵지 않을것이다.' 라고 생각을 했

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

[React, TypeScript] types

프로젝트 진행중 무수한 any를 보고 "이러면 JS와 다를게 없지않나?"라는 생각 이 들어 모든 any를 지우는 목적으로 TypeScript를 열심히 작성해봤다.그 과정중 공부한 내용들이다.generic 타입은 어떤 타입인지 모르지만 들어온 타입을 그대로 사용한다. 문

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

git / GitHub

팀 프로젝트를 진행하며 처음으로 git을 통한 협업을 해보았다.개인 프로젝트를 진행하며 한개의 master branch를 통해 코드와 버전을 관리 하였기 때문에처음엔 많은 어려움을 겪게 되었다. 그래서 글을 쓰며 내용을 정리하고자 한다. git은 local 영역내에서

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

[JS] new Date()를 이용한 시작일~마감일 사이모든날짜 배열에 담기

프로젝트 중 시작일과 마감일 사이의 모든 일정을 출력받아와야하는 상황이 나왔다.고민하던 중 toISOString(), split() 메서드와setDate(), getDate()를 이용하여함수를 만들어 봤다.아래의 출력결과처럼 5~25일 까지의 모든 날짜를 받아올 수 있

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

[JS] new Date()를 이용한 초 단위까지 D-day 만들기

new Date()를 이용하여 D-day 기능을 만들어보자위 처럼 간단한 함수로 구현을 할 수있지만결과값이 딱 떨어지지 않는다.그래서 위 예제 에서는 Math.trunc()를 사용하여 소수점을 버려주었다.기능에 따라서 올림 / 내림 / 반올림 Math.ceil() /

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

[JS] new Date()

new Date()는 연도부터 초 단위까지 국제 표준시(UTC)를 기준으로 결과를 보여주는 함수이다.new Date()는 매개변수에 따라서 아래와같이 다양한 형태로 생성할 수 있다.위 매개변수를 토대로 글 작성일인 6월4일을 예제로 들어보게 된다면위와 같은 결과가 나

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

Virtual DOM

Virtual DOM 이란 영어 뜻 그대로 가상 돔 이라는 뜻이다.리액트에서는 Virtual DOM 에서 변경된 DOM의 위치를 기존의 DOM과 비교하여 변경 된 DOM 위치에서만 변경 시키는 특성을 가지고 있다,따라서 기존의 방식처럼 DOM처럼 다시 한번 전체를 렌더

2022년 5월 7일
·
0개의 댓글

React-router vs Next-router

Next.js와 React에서 차이를 유일하게 크게 보이는 곳이 Router부분이다. 라우팅을 할 때 Next에서는 상대적으로 쉽게하는 반면 React는 상대적으로 경로 및 컴포넌트 설정에 있어서 복잡하다.React-routerreact-router에 경우 주소창의 주

2022년 5월 7일
·
0개의 댓글
post-thumbnail

this, binding

this는 상위 객체를 가르키는 변수이다. 예를 들면 콘솔에 this를 써보자이 때 this는 바로 본인의 상위인 windows를 불러오게 된다.그렇다면 클래스에서의 this는 어떨까?this는 실행 위치에 binding 방식에 따라 다른 값을 참조하기 때문에아래 bi

2022년 5월 7일
·
0개의 댓글

Atomic Pattern

이 개발 방식은 사실 개발에만 적용되는 개념이 아니라 디자인에도 적용되는 설계 패턴이다.말 그래도 작은 단위의 컴포넌트를 재사용성이 강하고, 단단하게 잘 설계함으로서 점진적으로 지속적으로 개발하기 용이하게 하는 방식이다.웹 프론트 개발에 가장 많이 쓰이는 프레임워크인

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

OOP

객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다. 장점으로는 아래와 같은 점이 있으며,코드 재사용이

2022년 5월 5일
·
0개의 댓글

SQL / NoSQL

SQL을 사용하면 RDBMS에서 데이터를 저장, 수정, 삭제 및 검색 할 수 있음관계형 데이터베이스에는 핵심적인 두 가지 특징이 있다.데이터는 정해진 데이터 스키마에 따라 테이블에 저장된다.데이터는 관계를 통해 여러 테이블에 분산된다.데이터는 테이블에 레코드로 저장되는

2022년 5월 5일
·
0개의 댓글

Type / Generic

Type(Generic) 브라우저 저장 (Cookie, Local/SesionStorage) 비회원 장바구니 (Basket) Type any/unknown TS를 사용하게 되면 타입을 모를경우 any 라는 type를 자주 사용하게 된다. 하지만 TS의 목적은 타입

2022년 5월 5일
·
0개의 댓글

Event Loop

Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여,Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣는다.V8 엔진에서 코드가 실행되면, Call Stack에 쌓인다.St

2022년 5월 5일
·
0개의 댓글

Immutable & Mutable

mutable은 값이 변한다는 뜻이고, immutable은 값이 변하지 않는다는 의미이다.이름에서 알 수 있듯이 변경 불가능,바뀌지 않는 객체이다.immutable 객체의 종류에는 대표적으로 String, Boolean, Integer, Float, Long 등이 있다

2022년 5월 5일
·
0개의 댓글

HTTP/SSL/TLS

HTTP - HTTPS/SSL/TLS 3-WAY-Handshake SSR HTTP - HTTPS/SSL/TLS HTTP(포트번호: 80) - http:// : 80 으로 접속가능(80은 생략이 가능하다.) HTTPS(포트번호: 443) - https:// :

2022년 5월 5일
·
0개의 댓글

CI/CD

CI/CD는 애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법입니다.CI/CD의 기본 개념은 지속적인 통합지속적인 서비스 제공지속적인 배포세 가지 입니다.개발자를 위한 자동화 프로세스인 지속적인 통합을 뜻하며CI를 성공적으로 구

2022년 5월 5일
·
0개의 댓글

SEO (CSR, SSR, SSG)

SEO(검색엔진 최적화) 검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업을 통틀어서 말합니다. CSR SSR SSG

2022년 5월 5일
·
0개의 댓글

Domain, DNS, Hosting

도메인이란?? 기존의 사이트는 각각의 IP가 있다.사이트를 들어갈때 IP를 이용해서 들어갈 수 있지만, 사용자가 IP를 직접 쳐서 들어간다면 많이 사용자가 불편함을 느낄 것이다.따라서 IP를 이름으로 둔갑시켜서 사용자가 좀더 편하게 사이트에 접속 할수 있도록 만들어 준

2022년 5월 5일
·
0개의 댓글

docker

(GCP)LB와 VM연결 lB와 VM을 연결하게 되면 우리가 배포한 페이지를 ip가 아닌 도메인 주소로 들어갈 수 있게 된다. 방법을 알아보자 LB는 vm 인스턴스가 있는 인스턴스 그룹으로 부하를 분산시켜주는 역활을 한다. 그 과정에서 round-robin(순서대로)

2022년 5월 5일
·
0개의 댓글