profile
프론트엔드 개발자입니다.
post-thumbnail

[Next.js] Next.js?

Next.js는 Node.js를 기반으로 구축된 오픈 소스 웹 개발 프레임워크로, 서버 측 렌더링 및 정적 웹사이트 생성과 같은 React 기반 웹 애플리케이션 기능을 가능하게 합니다. React 문서에는 "Node.js로 서버 렌더링 웹사이트 구축"할 때 개발자에게

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

[TS] interface

interface interface 선언은 object 유형의 이름을 지정하는 또 다른 방법이다. type alias와 용도와 기능이 똑같다. 대문자로 작명. {} 안에 타입을 명시하면 된다. ※ 한 줄 끝나면 콤마대신 세미콜론도 사용 가능 interface 장점

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

[TS] class, Constructor ,Methods

TypeScript는 ES2015에 도입된 class 키워드를 완벽하게 지원한다.JavaScript 언어 기능과 마찬가지로 TypeScript는 유형 주석 및 기타 구문을 추가하여 클래스와 다른 유형 간의 관계를 표현할 수 있도록 한다.class 의 기본 구조필드 선언

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

[TS]타입스크립트로 HTML 변경과 조작할 때 주의점

자바스크립트의 원래 목적은 html 조작과 변경이다.HTML셀렉터로 html을 찾으면 타입이 Element | null 이기 때문에 error 발생changeTitle이라는 변수가 union type이기 때문에 if문으로 type narrowing 하거나 as 문법으로

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

[TS]Literal Types, as const, function type 에 type alias 저장

string, number 뿐 아니라 일반 글자도 타입이 될 수 있다.john이라는 변수는 이제 'park' 이라는 글자만 할당할 수 있습니다.bob이라는 변수는 이제 'lee' 라는 글자만 할당할 수 있습니다.위처럼 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입

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

[TS]Narrowing & Assertion, Type Aliases, readonly

타입스크립트에서는 위처럼 사용하면 위와같은 에러가 발생된다.따라서, Narrowing 또는 Assert 해주면 된다.if문 등으로 타입을 하나로 정해주는 것을 뜻한다.위처럼 typeof 도 사용 가능하고 in, instanceof 키워드도 사용가능하다.assertion

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

[TS]Union Type, 함수에 타입 지정하는 법 & void 타입

유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다.아무 자료나 집어넣을 수 있는 타입, 쉽게 비유하면 실드해제.any 타입은 버그가 생기면 추적이 어렵기 때문에 잘 사용하지 않으며 타입스크립트를 사용하는 의미가 없어진다. 따

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

[TS]TypeScript?

TypeScript TypeScript? 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. TypeScript 사용 이유? 에러의 사전 방지 코드 가이드 및 자동 완성(개발 생산성 향상) 설치

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

위코드 2차 프로젝트 회고록

megaboxu 이미지2차 프로젝트 기간: 2022.06.07 ~ 2022.06.17클론코딩 사이트: 메가박스(https://www.megabox.co.kr)팀명: MEGABOXU(메가박수)개발인원: 프론트엔드 4명, 백엔드 2명Git Hub 페이지필수 구현

2022년 6월 18일
·
1개의 댓글
post-thumbnail

REST API

REST API란? 개발자들이 사용하는 일종의 형식쉽게 말하면 인터페이스는 기계와 인간관의 소통 창구이다.개발자들이 만든 소프트웨어 사이에도 소통 창구가 필요하다. 소프트웨어가 다른 소프트웨어로부터 지정된 형식으로 요청, 명령을 받을 수 있는 수단을 API(Applic

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

React Custom Hooks: useFetch()

컴포넌트를 만들다 보면 반복되는 로직이 자주 발생된다. 따라서 custom hooks를 만들어서 반복되는 로직을 쉽게 재활용 할 수 있다.Custom Hooks는 "use"라는 단어로 시작한다. (ex: useFetch)기존에 사용했던 fetch는 아래처럼 모든 com

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

git rebase

git merge와 git rebase의 기능은 비슷하지만 다르다고 한다.merge rebase 차이 모든 feature branch마다 "merge commit" 이 남습니다. 만약 main branch를 공유하는 개발자가 많고, 프로젝트의 규모가 크다면, branc

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

setInterval carousel

위코드 1차 프로젝트 중 carousel 중 한 부분이 시간마다 다른 사진으로 이동이 되어 사용하는 법을 찾던 중 동기분들의 도움으로 useEffect에 setInterval method를 사용하여 carousel이 자동으로 이동되는 방법에 대해 도움을 받았다.setI

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

token 조건부 렌더링

프로젝트 진행 중 로그인하기전에는 sign in 내용이 나타나고 로그인 이후에는 my page 내용이 나타게 진행을 하고 싶었다. 어떻게 해야할지 검색을 했을 때 윗 기수 분들의 코드를 도움을 받았다.useNavigate를 먼저 선언하여 useNavigate를 사용할

2022년 6월 5일
·
1개의 댓글
post-thumbnail

carousel

carousel 1차 프로젝트를 진행하면서 나는 메인페이지를 맡았는데 carousel을 진행해야했다. 라이브러리를 사용이 금지되어 직접 작성하려니 어떻게 진행해야할지 감이 안와 동기분들께 물어보니 각자 알고 계신 사이트를 알려줬다. 프로젝트 진행중에는 페이지를 완성하느

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

위코드 1차 프로젝트 회고록

1차 프로젝트 기간: 2022.05.23-2022.06.03클론코딩 사이트: 룰루레몬(https://shop.lululemon.com)팀명: 신난아이셔(luluisher)운이 좋았던건지 나빴던건지 내가 선택한 사이트가 선정이 되었다. 그에 대한 업보로 내가 P

2022년 6월 5일
·
4개의 댓글
post-thumbnail

map method in react(위코드 1차 프로젝트)

위코드 1차 프로젝트중 내가 맡은 업무는 navbar와 main 페이지를 담당하게 되었는데 navigation bar를 만드는 업무 중 map을 사용해야 데이터 관리가 쉽다는 것을 깨닫게 되었다.map method는 예전부터 많이 보긴했으니 실제로 적용하는 것에 이해가

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

code-kata(Week3 - Day2)(TIL)

문자로 구성된 배열을 input으로 전달하면, 문자를 뒤집어서 return 해주세요.새로운 배열을 선언하면 안 됩니다.인자로 받은 배열을 수정해서 만들어주세요.새로운 배열로 선언하면 안되고 인자로 받은 배열을 수정하라고 했는데 reverse를 검색해보니 위의 조건에 해

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

code-kata(Week3 - Day1)(TIL)

두 개의 input에 복소수(complex number)가 string 으로 주어집니다. 복소수란 a+bi 의 형태로, 실수와 허수로 이루어진 수입니다.input으로 받은 두 수를 곱해서 반환해주세요. 반환하는 표현도 복소수 형태의 string 이어야 합니다.복소수 정

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

searchbox 기능 구현(Monster 과제)

monster 과제 중 searchbox 의 추가 기능 구현이 있어 혼자 고민해보고 검색하여 진행하려 했으나 원하는 답이 나오지 않아 올려준 영상을 보고 진행을 하게 되었으며 정리가 필요하다는 생각이 들었다.SearchBox 컴포넌트에 정의한 handleChange 메

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