전역공간을 최대한 사용하지 말라는 이유는?(전역공간 최대한 더럽히지 않기) 어디서나 접근이 가능하기 때문이다. 파일을 나누면 스코프가 나뉜다고 생각 할 수 있지만, 나뉘지 않는다. 따라서, 애초에 전역변수 만들지 않기 지역변수 사용 window, global 조작하지

이전에 개인적으로 했던 프로젝트를 보다가 react-roter가 v5로 되어 있어서 v6로 고치는 작업을 하였다.추가적으로 오랜만에 포스팅도 할겸, V5에서 V6로 어떤 부분이 어떻게 바뀌었는지 살펴보도록 하자.V5 에서 Switch 용도 Switch - Route로

React를 학습하면서 가장 많이 들었던 말 ! React에서 state의 값이 immutable 해야한다.왜 그런지 이유를 알고 계신가요 ? 🥸흔히 React 컴포넌트의 state 를 변경해야 한다면 객체의 값을 직접적으로 수정하면 절대 안되고, 무조건 setSta

CRA란?초기개발 환경 세팅을 말하며 아무런 초기 설정이 없어도 CRA통해 React기반의 SPA사이트를 구현 할 수 있게 됐다.Web pack, babel등 복잡한 세팅을 거치지 않아서 React기반의 웹 프로젝트 확산에 큰 기여를 하였다.그! 런! 데! CRA로 b

( ⭐️ 면접 Tip: 정의와 함께 예시를 함께 답변하여 어필하자)웹 서버가 HTML 페이지 전체를 클라이언트(ex. Web browser)에게 전송했다.정적인 html만 보여지는 보고서 형태의 ‘위키피디아’처럼 정보만을 보여주기 위해서 a태그로 연결되어 있는 형태였다

앞서 input type=file 을 사용하고 해당 버튼이 아닌 customize 한 이미지 버튼을 구현하여 ref로 접근, customize 버튼을 클릭하여 이미지가 올라가는 것 까지 성공하였다.이제 하고 싶은 것은 셀렉한 파일의 name과 size를 보여주는 것!거

이미지를 올릴때에 사용되는 형태는 간단하다.이렇게 하면 알아서 상단에 보이는 것과 같이 Choose Files가 뜨고, 파일을 선택하면 No file chosen대신, 파일의 이름이 뜨게 된다.다만, 우리는 저 형태의 디자인이 아니라 다른 디자인으로 하고 싶을때 여기

input에 입력되는 값을 이벤트를 통해서 그 값을 받아와서 띄워줄 수 있는 방법들이 있다.세가지 모두 동일하게 input 입력 값을 받아준다.

 State값 수정 테크닉! 리액트 대원칙! -> immutable data! 따라서 state는 직접 건들지 않는다. spread를 사용하게 되면 값을 공유하게 되는 것이 아니라 서로독립적인 값을 가지는 복사가 일어나게 된다.spread를 사용하게 되면 원래 갖고

리액트onClick ={클릭될 때 실행 할 함수}{}안에는 {1+1}같은 표현식이 바로 들어가면 안된다! 그 수식이 바로 들어가기 위해서는 함수를 사용하여야 한다.또한 만약 함수를 따로 만들어서 넣기 귀찮다면 arrowfunction을 직접 넣어버려도 된다.onClic

1차 프로젝트를 진행하면서 가장 큰 수확은 내가 제대로 알지 못했던 '빈틈'이 무엇이었는지 명확해졌다는 사실이다. 마치 모레성에 집을 지은듯한 느낌을 계속해서 받았는데 아무래도 기초 지식의 빈틈이 많았기 때문이었다. 백앤드로부터 데이터를 받아오려면 api를 호출하고

이제서야 익숙해진 class component를 보내줘야 할 때....힝 🥲React에서도 함수를 더 선호하기도 하고, 실제 현업에서도 함수를 더 사용하고 있기 때문에 '그렇다면 왜 고생해서 배웠담?'하고 야속할 수 있겠다.히지만 지금 사용하지 않고 있다 하더라도 이

리액트에서 DOM 에 직접적인 접근을 해야 하는 경우가 있다. input / textarea 등에 포커스를 해야 할때특정 DOM 의 크기를 가져와야 할 때특정 DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때외부 라이브러리 (플레이어, 차트, 캐로절 등) 을

제로초 강의 Fragment와 기타 팁들 1) 대신 사용하면 된다. 2) return 다음에 오는 ()의 경우는 그룹연산자라고 부르며, 해당 사항은 굳이 없어도 된다. 다만 연산자를 사용할 경우, 우선순위를 높일때 의미를 갖고 사용된다. Ex) (3+2)*5 3

총 2주간에 걸쳐 쿡잇이라는 밀키트 사이트를 참고하여 필수/추가 구현을 하여 진행한다.현재 3명의 FE와 2명의 BE로 이루어진 우리 팀, '꾸깃(Ggugit:다양한 기능을 꾸깃꾸깃 넣겠다!)'이 진행하는 쿡잇 사이트에 대해 설명해보겠다.쿡잇?쿡잇은 다양한 음식을 집에

위코드 5주차! children에 대한 수업을 하면서 모달창에 대해서 배우게 되었다.엇...? 그게 모달?우선 팝업창이란 현재 열려있는 브라우저 페이지에 또다른 브라우저 페이지를 띄우는 것을 말한다. 창 + 창n 인 것이다. 브라우저에서 이 창을 열기 닫기를 제어할 수

map을 쓰는데 이해가 잘 안되서 article을 보고 퍼온 내용이다.출처: https://www.kpiteng.com/blogs/javascript-tips-tricks-best-practices/Map is widely used by developers i

처음으로 BE분들과 함께하는 실습.뭔가 주고 받을 수 있었던게 신기했던 시간들이었다.해당 실습의 학습목표는 무엇이었는지 살펴보자. ☺️로그인 과정에서 일어나는 프론트엔드, 백엔드 간 통신 흐름을 설명할 수 있다.Access Token 과 JWT의 개념을 이해하고 설명할

인증(Authentication)은 무엇이고 왜 해야할까?Authentication은 유저의 identification을 확인하는 (= 유저의 아이디와 비번을 일치 ) 절차이다. 이를 통해 회원을 식별하고 누가 어떻게 쓰는지 추적, 데이터를 얻을 수 있다.인증에 필요한