profile
안녕하세여
태그 목록
전체보기 (83)리액트(32)JavaScript(9)자바스크립트(8)스터디(8)State(5)Props(5)nodejs(5)프론트엔드(5)useEffect(5)함수(4)CSS(4)컴포넌트(4)setTimeout(3)API(3)json(3)객체(3)localstorage(3)배열(3)Map(2)연산자(2)addEventLister(2)padStart()(2)조건문(2)Effect(2)반복문(2)for(2)Flex(2)onchange(2)foreach(2)부트스트랩(2)스택(2)코딩(2)프로젝트(2)proptypes(2)front end(2)setInterval(2)useState(2)화살표함수(2)align items(1)flex direction(1)flex wrap(1)justify content(1)lifecycle(1)include(1)모듈(1)수학객체(1)nodemon(1)navigator(1)url(1)표현식(1)Math.round(1)네임스페이스(1)라우팅(1)프로토타입(1)do/while문(1)HashRouter(1)데이터(1)while문(1)Prototype(1)서버(1)ajax(1)exact(1)insertBefore(1)중첩함수(1)Math.ceil(1)HR(1)class(1)export(1)argument객체(1)sendFile()(1)이벤트리스너(1)nesting(1)위치(1)입력값(1)UI(1)이름공간(1)createTextNode(1)이터레이터(1)콜백함수(1)body parser(1)프로토타입체인(1)classList(1)클로저(1)Cleanup(1)filter(1)실행문맥(1)Math.floor(1)복사(1)console.dir(1)삼항연산자(1)재귀함수(1)ClearTimeout(1)스타일(1)@Target(1)날씨(1)axios(1)stringify()(1)first-child(1)Sass(1)styled components(1)그리드(1)html(1)BrowserRouter(1)reduce(1)asi(1)getCurrentPosition(1)preventDefault(1)[...변수](1)데이터타입(1)break문(1)제어구문(1)appendChild(1)continue문(1)array(1)setState(1)extends(1)시계(1)Fetch(1)POST요청(1)geolocation(1)parse()(1)style(1)상속(1)JSX(1)express(1)setAttribute(1)내장함수(1)semicolon(1)Math.random(1)postman(1)CRUD(1)iframe(1)CreateElement(1)Date(1)grid(1)memo(1)이벤트(1)생성자(1)apply(1)call(1)git(1)switch문(1)mixin(1)믹스인(1)component(1)parentElement(1)math(1)parentNode(1)BEM(1)import(1)백엔드(1)요소(1)접근자(1)link(1)GET(1)querySelector(1)prepend()(1)노드(1)라이브러리(1)모더레이터(1)bind(1)CRA(1)PRE(1)프로퍼티(1)세미콜론(1)조코딩(1)className(1)for문(1)
post-thumbnail

Nodejs에서 api서버 만들기(postman)

개발환경을 만들어 준다. express를 설치하고 서버 포트를 지정.API 테스트 툴인 "Postman"을 통해 API서버가 잘 구동되는지 확인한다.2-1. postman에 가입 후, workspace에서 내 서버를 테스트해본다.뒤의 type을 "jeju"로 바꿔주면

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

URL간단이해하기

통신규칙. 사용자가 서버에 접속할 때 어떤 방식으로 접속할지에 대한 부분.HTTP는 웹브라우저와 웹서버가 서로 데이터를 주고 받기 위해 만들어진 통신규칙.FTP라는 것을 쓴다면 FTP 라고 되어있을 것인터넷에 접속된 각각의 컴퓨터. 어떤 특정한 인터넷에 연결된 컴퓨터를

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

NodeJS - form에 입력한 데이터를 서버에 보내기(POST요청)

저번엔 GET요청을 하는 법을 포스팅했었다.이번에는 POST요청을 해본다.POST요청은 주로 글쓰기, 회원정보 입력 등에 사용한다.HTML 내 form태그 내부의 정보들을 서버로 보내려면?백엔드에서 action은 "데이터를 전송할 경로가 어디인지"method 는 "데이

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

NodeJS - 서버에서 HTML파일 전송하기

앞서 했던 것은 텍스트를 전송했었는데(express 라이브러리 사용해서)HTML파일을 전송할 수도 있다.홈 접속시 HTML파일을 보내주고 싶다면이번엔 send가 아닌 sendFile 을 사용해준다. sendFile(__dirname + "HTML파일");

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

NodeJs - nodemon 설치하기

서버 껐다 켰다 하는 작업을 일일이 터미널에 적어주는게 귀찮으면을 설치해 자동으로 해줄 수 있다.

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

Node.js와 express 사용하기

이렇게 하면 서버가 하나 만들어진다.그리고 터미널을 열어 node server.js 를 입력한다.브라우저를 열어 localhost:8080 에 접속하면 확인가능하다.URL을 입력해서 주소를 요청하는 것이 GET요청이라 했었다.네이버 쇼핑창을 가면 https:/

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

리액트-ajax 요청하기(axios)

Ajax 요청은 "서버에게 요청을 하는데 새로고침 없이 이루어지는 것"이다.보통은 jQuery설치 후 ajax 요청을 많이 하는데리액트 환경에서는 fetch함수를 사용하거나, axios라이브러리를 많이 사용한다고 한다.서버는 간단하게 말하면 그냥 "누군가 요청하면 데이

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

리액트-n초 지나면 메시지창 없애기 with useEffect( )

이전에 UI 모달창 클릭할때마다 없애고 띄우고 했던 방법을 활용한다.alert, setAlert 라는 상태(UI가 보이고 안보이고)를 만들고 기본값을 true로 잡는다.삼항조건연산자 를 이용해 state가 true일땐 창을 보이게 하고, false이면 보이지 않는 조건

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

리액트-링크 워닝 지우기

<Nav.Link> 안에 <Link> 쓰면 위와 같이 <a>태그 안에 <a>있을수 없다라고 하는 것 같은 워닝이 콘솔에 뜬다. 없애고 싶다면<Nav.Link as={Link} to="/"> Home </Nav.Link> 위와같이 Nav.

2022년 1월 31일
·
0개의 댓글

리액트-Lifecycle Hook과 useEffect( )

리액트에서 사용하는 덩어리, 컴포넌트는 lifecycle이라는 개념이 있다.탄생-변화-소멸, 즉 생성, 업데이트(state변경됐을때), 삭제이 과정을 거친다고 해서 이름이 저렇게 붙었나보다.그리고 공부하면서 몇번씩 들어본 Hook을 컴포넌트의 삶 중간에 걸어줄 수 있다

2022년 1월 31일
·
0개의 댓글

리액트-SASS 사용방법

SASS는 CSS가 너무 길어졌을 때 변수, 함수, 반복문 등을 사용해서 보다 간결하게 코드를 작성할 수 있다. 변수사용, @import, nesting(셀렉터 안에 셀렉터 작성), extends문법, @mixin / @include문법 등이 있다.

2022년 1월 27일
·
0개의 댓글

리액트-styled-components: 스타일 입힌 컴포넌트 만들기

우선 styled-components를 설치하기 위해선 터미널을 열고yarn add styled-components혹은npm install styled-components 입력 후사용하고 싶은 컴포넌트 최상단에 import 해준다.import styled from 's

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

리액트 style연결하기

css파일을 import해준다. import styles from "파일경로";적용 원하는 곳에 import해온 style을 넣어준다.style.클래스이름 형식으로 넣어준다!css를 적용해 이런식으로 적용이 잘 된다.

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

API 체험하기

카카오, 네이버 등의 Open API에 가입해 개인API key를 발급받고,사용하고자하는 API를 선택한다.조코딩 유투브를 참고해 작성한 것으로, 코드작성은 jQuery로 이루어진다.구글에 jquery ajax를 검색해 EXAMPLE 에 있는 코드를 그대로 넣는다.카카

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

간단하게 API 란?

API란? (Application Programming Interface) 사용규칙을 제공하는 것. 클라이언트의 "요청"과 서버의 "응답"을 관리하기 위한 체계

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

동적(dynamic) url : url에 변수넣기

ㄴㅇurl에 있는 값, 즉 변수를 반환해주는 함수React Router에 이 url이 변수를 받을거라고 말해준다.id 말고 아무 이름으로나 설정할 수 있다.중요한건

2022년 1월 14일
·
0개의 댓글

toDo pt.2 - map( ) 함수

기존 배열에 함수를 넣어서 새로운 배열을 리턴할 수 있게 한다.기존 배열 안의 모든 item에 대해 실행된다.첫 번째 인자는 각 item의 value, 두 번째 인자는 각 item의 index이다.콘솔창에 "Warning: Each child in a list shou

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

toDo pt.1 - state로 배열 추가하기 [...배열]

리액트에선 JS에서 하듯 직접적으로 state를 수정해선 안된다.toDos의 배열을 수정해주고 싶다면와 같은 방법을 써야한다.에서6 이라는 값을 넣으려면,즉 6을 포함한 새로운 배열을 만들고 싶다면이 아닌방법을 써야하는 것이다.

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

CleanUp

useEffect를 이용해서 컴포넌트가 생성될때는 물론 파괴될 때도 무언가를 할 수 있다.이 함수를 통해 컴포넌트가 언제 create 그리고 destroy됐는지 알 수 있다.위 코드는 아래의 코드와 같은 이야기를 한다.Hello 컴포넌트가 생성될 때 hiFn 이 실행되

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

EFFECTS-2

전체 코드 input창에 이벤트발생할때마다 API를 매번 새로 호출하고 있다. 매우 별로.검색을 예로 들면, console.log("SEARCH FOR", keyword);를 하면, 입력창이 변할때마다 인식하는건 좋은데,counter라는 state가 변할때도 검색이 되

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