profile
Web Developer
post-thumbnail

Recoil

사이트의 dark mode, light mode를 만들기 위해 Recoil에 대해서 배웠다.Recoil은 props를 여러 컴포넌트에 단계별로 전달할 필요없이 하나의 Recoil을 컴포넌트에서 가져다가 쓸 수 있다.기존에는 부모 -> 자식 경로로 props를 전달해 s

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

useQuery

react-query hook에는 useQuery라는 기능이 존재한다.아래는 react-query를 사용하기 전 coins컴포넌트의 코드이다.보다시피 렌더함수를 제외하고 api를 사용하기 위해 10줄의 코드를 작성하였다. 코드 설명을 하자면 coin api를 fetch

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

styled-components

styled-components는 css를 JavaScript로 사용할 수 있게 해준다.또, 컴포넌트 안에서 사용되기 때문에 css가 중첩되지 않는다.위 코드처럼 동일한 컴포넌트를 사용하지만 한가지 속성만 바꾸고 싶을 땐 props를 사용하면 된다.Box라는 컴포넌트에

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

ReactHooks 배우기

이름을 입력하는 input 태그 안에 글자가 10자를 넘는다면 maxLen은 false를 반환한다.그럼 useInput에 onChange 안에 willUpdate는 false가 되고 setValue(value) 는 실행되지 않는다.반대로 10자 이내라면 true를 반

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

바닐라JS 24기 졸업

드디어 !! 24기 신청을 하고 근 한달만에 졸업을 했다사실 난이도는 크게 어렵지 않았다 ..ㅎㅎ 우수졸업생은 되지 못했지만 ㅠ리액트 마스터 2주과정을 하기 위해 쿠폰을 받아놓은 상태!오늘부터 다시 리액트 중급 마스터과정 시작이다내가 자주 애용하는 사이트인 넷플릭스 클

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

js 카운트다운

xmas 와 today 의 날짜를 빼서 gap을 구해준다.Math.floor를 이용해서 같거나 작은 수 중에 가장 큰 정수를 반환한다.시, 분과 초는 한자리수일때 앞에 "0"을 추가해주기 위해서 padStart를 이용하였다.완성된 모습이다!

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

github page만들기

github에 올린 react프로젝트를 github page를 이용해 웹사이트로 만들기vscode에서 terminal을 연다.'npm i gh-pages' 를 실행한다.'npm run build'를 실행한다.\-build폴더가 생성되고 이 폴더는 내 웹사이트의 prod

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

react-router-dom

react-router-dom 은 컴포넌트의 모음집이다.App.js에 컴포넌트를 지정해줄때 Router을 이용해서 경로도 지정해줄 수 있다.나의 경우 terminal에 'npm i react-router-dom@5.3.0' 를 명령해주었다.BrowserRouter, S

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

useEffect

useState에 이어서 useEffect를 정리해볼까 한다.useState는 그 안에 있는 값이 변화할때마다 App()안에 있는 다른 함수들도 자동으로 호출이 된다.만약 여러번 호출되지 않기를 원하고 딱 한번만 호출 하길 원한다면 useEffect를 사용하면 된다.코

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

props

state에 이어서 props에 대해 정리해볼까 한다! 예를 들어 애플리케이션에서 여러개의 버튼을 사용한다고 가정해보자. 버튼의 디자인을 동일하게 통일시키는 것이 사용자가 보기에 깔끔하고 좋을 것이다. 그럼 버튼에 style을 지정 해주어야하는데 props를 사용하지

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

state

보다시피 render라는 함수를 만들고 cnt라는 data가 업데이트가 될때마다 render()를 호출해야 화면에 바뀐 데이터로 뿌려지게 된다. 만약 cntUp함수에서 render()를 호출하지 않으면 웹 화면에는 cnt의 초기값인 0으로만 보일 것이다.다시 말해 st

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

VanillaJS 4021

arr.filter() : filter는 기존 arr에는 영향을 주지않고 조건을 걸어서 값을 필터링할 수 있다. 예를 들면 API를 사용해서 위치와 날씨 표시하기 사이트: openweathermap.org weather.js 단 10줄로 사용자의 위치와 날씨를 가

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

VanillaJS 0420

js 에서 if else문을 이용하는거 보다는 html기능인 required 와 maxlength를 사용해서 같은 기능을 구현할 수 있다.따라서 위 코드는 아래 코드와 같다.js에서 if 문을 삭제하고 html에서 input에 기능을 추가한 것을 볼 수 있다.js에 너

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

VanillaJS 0419

위 코드는 아래 코드와 한줄이 되었다는 점을 제외하고 같은 이벤트를 발생한다.classList.toggle 은 기존에 있던 className을 제거하지 않고 새로운 className을 add와 remove 할 수 있다.

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

정보처리산업기사 필기 후기

나는 3년제 전문대학을 졸업했다. 물론 개발과는 전혀 상관없는 과이다. 취업준비를 하면서 시간을 너무 헛되이게 쓰는 것 같아 정보처리산업기사 원서접수를 했다. 2,3년제 졸업자들은 정보처리산업기사를 응시할 수 있고 4년제학사라면 정보처리기사를 응시하면 된다. 조금은 즉

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

VanillaJS 시작기

오늘 노마드 코더의 리액트JS 강의를 시작하려고 했는데 먼저 바닐라JS를 듣고 오는게 도움이 된다고 해서 바닐라JS강의를 챕터2까지 들었다.HTML, CSS, JavaScript로 Momentum과 같은 크롬 앱을 만드는 것이다.마침 약 2주뒤에 챌린지가 있길래 그것도

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

velog 가입기

국비학원을 수료하고 4개월이 흘렀다. 취업할 곳도 알아보고 이것저것 찾아보다가 역시 요즘은 리액트가 대세구나..를 느끼고 리액트를 공부하기로 결심했다. 사실 학원강사님께서도 리액트 특강을 조금 해주셨고 1개월전쯤 생활코딩 유튜브에서 리액트의 기초에 대해서 강의는 다 들

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