profile
(아직은) 초라한 개발자
post-thumbnail

타입스크립트 리액트에 적용하기

state의 타입지정은 위와 같이 제네릭으로 지정한다.ShoesData는 미리 만들어 둔 interface다. shoesData에는 ShoesData형식의 객체로 채워진 배열이 들어온다FC는 react안에 저장되어있는 모듈로 FunctionComponent라는 뜻이다.

약 12시간 전
·
0개의 댓글
·
post-thumbnail

2개월 전과 로그인로직 코드비교

두 달전에 했던 위스타그램 클론코딩을 최근에 타입스크립트로 옮겨보았다..조금 뭔가 예전에 짰던 로직들은 난잡하게 느껴졌다. 조금 더 간결하게 수정할 수 있을 것 같아 한번 수정해보고 비교해보았다.우선 input에 아이디와 패스워드를 받아 특정 조건을 만족하면 메인페이지

약 13시간 전
·
0개의 댓글
·
post-thumbnail

nextJs에서 Tailwind Css설치하기

tailwind css설치!

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

[TypeScript] 타입지정

타입스크립트란 자바스크립트가 기존에 데이터타입 지정없이 유연하게 활용해 왔던 것을 엄격한 타입지정을 통해 오류를 방지하고, 의도치 않게 프로그래밍 되는 것을 막기 위해 생겨났다.예전에 자바스크립트 에서는 문자열과 숫자간의 연산도 가능했다.타입스크립트는 타입을 엄격하게

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

[2차프로젝트] 회고 및 시연영상

나는 누군가가 나를 이끌어 주고 믿고 맡겨줄 때 더 성장할 수 있는 것 같다. 솔직히 말하면 더욱 많이 성장하고 싶었기에 나를 이끌어줄 누군가와 팀을 함께 하고 싶었고, 그렇기에 2차 프로젝트를 시작하며 팀 발표가 제일 걱정되고 기대되었다.팀 발표가 되었을 때는

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

[Swiper]리액트 캐러셀 라이브러리

스와이퍼란 캐러셀을 더 쉽게 만들 수 있도록 도와주는 라이브러리이다.스와이퍼 설치 명령어스와이퍼를 쓰기를 위한 기본양식은 다음과 같다Swiper태그에 원하는 설정을 적어주고 원하는 컨텐츠의 양 만큼 SwiperSlide태그를 만들어준다.SwiperSlide안에 컨텐츠를

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

[Git & GitHub] 추가 명령어

git stash : 현재 작업중인 작업물을 임시저장소에 저장한다. 작업 중이던 작업물을 commit 없이 checkout할 수 있게 하거나 현재 작업한 작업물을 다른 브랜치에 가져올 수 있도록 한다.git stash를 하기전에 add를 꼭 해줘야한다.git stash

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

[React] useParams

useParams는 RestFul API의 경로상 달라지는 부분을 추적해온다.라우터를 다음과 같이 설정해준다.그러면 detail/1, detail/2, detail/3 등등 detail뒤에오는 모든 경로상에서 Itemdetail이라는 컴포넌트가 나타난다.꼭 숫자가 아니

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

[React]useSearchParams

useParams가 path Parameter를 활용해 React이 동적라우팅을 도와줬다면,useSearchParams는 Query Parameter를 활용한 React동적 라우팅을 도와주는 훅이다.우선 다음과 같이 사용한다.쿼리스트링을 이용한 api에는 ?로 Quer

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

[Javascript] fetch요청

특정 정보가 필요할 때 클라이언트는 서버에 http통신으로 요청을 보내고, 정보를 응답받을 수 있다. 이때 사용되는 메서드가 fetch인데, fetch메서드로 데이터를 요청해서 받거나 생성, 수정, 삭제할 수 있다.(CRUD)항상 클라이언트의 입장에서 서버에게 요청한다

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

[1차프로젝트] 회고 및 내 코드리뷰

https://youtu.be/wxar1wj1cNQ내가 웹개발을 시작하고 처음으로 진행했던 프로젝트였다. 프로젝트에 들어가기 전 주말부터 어떤 팀을 만날지에 대한 기대와 ‘내가 잘 할 수 있을까?’ 라는 걱정감이 컸다.프로젝트 팀이 발표되고 미팅을 진행하고 역

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

[Web]REST API

REST는 representational state transfer의 약자로 상태를 전달하는 것을 나타내는 방법으로 소개되었다. API시스템을 구현하기 위한 아키텍쳐 중 가장 널리 쓰이는 형식이다. Restful API는 말 그대로 Rest하게 설계된 API를 의미한다

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

[React]useRef

useRef는 변경된 값을 저장한다는 점에서 useState와 비슷하다.useState는 변경될 때 마다 페이지를 렌더링하며 값을 최신화하지만, useRef는 동작을 해도 값을 변경시키기만 할 뿐, 페이지를 렌더링하지않는다.다음과 같이 선언한다. 선언된 refConta

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

[React]useEffect

useEffect의 필요성 React의 장점은 서버와의 통신필요 없이 바뀌는 부분만 렌더링을 해주기 때문에 효율적이다. 효과적이지만 만약 데이터용량이 큰 자료를 가져오는데 그 작업이 렌더링 될 때마다 자료를 가져오는 동작을 수행한다면, 비효율적이 된다. useEf

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

[React]useReducer

위와 같이 Reducer를 선언한다.선언한 배열의 첫 번째 인자인 state는 상태값이고 두 번째 인자인 dispatch는 행동을 추적하는 함수이다. 행동을 추적하여 감지된 행동에 따라 다른 함수를 가져와 실행할 수 있다. useReducer의 함수의 첫 번째 인자로

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

[React]useState

useState는 리액트에서 가장 많이 쓰이는 훅이다.기존 VanilaJs에서는 페이지를 이동할 때 html페이지를 항상 새로 불러와서 화면에 표시해주었다. 하지만 리액트에서는 이런식으로 하기보다는 바뀌는 부분만 렌더링을 새로 해서 효율적으로 화면에 표시해준다.리액트에

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

[Javascript] Promise 맛보기

1. 프로미스란? 프로미스란 비동기처리를 효과적으로 처리해 줄 수 있는 장치이다. 그냥 콜백함수만 썼을 때 보다 코드가 옆으로 길어지지 않아 보기에도 편하고, 유지보수도 쉽다. 보통 데이터를 가져오거나, 시간이 오래걸리는 연산을 한다거나 할 때 사용된다. 프로미스는

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

[React, 클론코딩, 위스타그램] 댓글기능 리액트로 다시 구현하기

react에서 훅을 사용하여 새로운 값들을 어떠한 식으로 배열안에 저장을 하는지 그 값들을 하나하나 어떻게 화면에 구현하는지 살펴보자. 코드 다음은 컴포넌트 내부이다. 위를 살펴보면 state를 두개를 선언했다. 위의 것은 input창에서 값이 바뀌면 바뀔 때마다

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

[Javascript] 콜백함수란?

콜백함수 1. 콜백함수의 정의 함수 안에 인자로 들어가는 함수, 함수를 순차적으로 실행하고 싶을 때 사용한다. 가장 간단한 예시는 addEventListener, setTimeout들도 기본적으로 내장 함수인데, 이 함수 안에는 인자로 함수가 들어가야 한다. 이

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

[Js, 알고리즘] 숫자를 뒤집어 반환하는 알고리즘

reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요.x: 숫자 return: 뒤집어진 숫자를 반환!예들 들어, x: 1234 return: 4321x: -1234 return: -4321x: 1230 return: 321처음 접

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