React

리액트 강의 들으면서 정리하기 > 💻 설치 및 실행 방법 node.js 하위버전을 설치합니다. (최신버전 에러 걸릴 확률 높음) VScode에 터미널을 열고 'npx create-react-app 프로젝트명' 이라고 작성하고 설치한다. 그 프로젝트 파일을 열고 sr

오늘도 리액트 공부 해보겠다. 이곳저곳에서 강의를 듣고 정리해보는간략 설명: 프로그램 제작 시 필요한 기능비교 설명: 자동차 바퀴, 자동차 헤드라이트, 자동차 에어백 등재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지필요한 곳에서 호출하여 사용할 수

다시 기초 강의부터 봐봅시다. 5년전 강의인데 봐도 될 지 모르겠지만 일단 봅니다..!실제 DOM을 직접 처리하는건 사실 성능도 느리고, 비효율적이고 관리하기가 힘듭니다.사실 간단한 처리는 상관없는데, 처리할 데이터가 많아지면 관리하기도 힘들어집니다. 반면 버츄얼 DO

강의를 들으며 정리해봅쉬다~!!3세대 웹, 복잡성 증가 -> 기술 발전사용자들이 원하는 기능은 늘어나고 처리해야하는 것도 많아진다. 프론트앤드 기술자들은 새로운 기술들을 개발하게 됩니다. 그 기술들이 바로 프론트앤드 프레임워크라고 통칭되는 기술들입니다.1세대 프론트앤드

React의 대해서 조금 배웠다.일단 js는 무조건 function 함수명 () { }로 묶어줘야하고 return ( );를 안에 넣어줘야합니다.마지막에 꼭 export default 함수명; 을 써줘야지 제대로 작동이 됩니다. img 태그 src 값으로 /images

SPA가 무엇인지 설명할 수 있다.react-router-dom를 이용해 Router Component를 구현할 수 있다.react-router-dom에서 Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다.<Link> Component 와 <

State 와 Props의 대해서 알아보자

오늘 구현한 것들을 마구잡이로 적어본다.아이디에 @가 들어가거나 비밀번호가 5개 이상일 경우 로그인 버튼이 활성화 되는 것을 구현하였습니다.무언가 비교할 때는 꼭 원래 값을 써야합니다. console.log를 자주 이용해야한다. 먼저 active, setActive 를

💻 React에 대해서 다시 공부해봅시다.무언가를 나눈 파일 (폴더로 안해도 됨)function 컴포넌트만 쓸겁니다. function을 쓰면 무조건 return값을 써야합니다.그 안에는 JSX문법을 써야합니다. HTML 문법과는 다릅니다.위에 코드를 첫번째에 꼭 적어

이렇게 작성하니까 'key'가 없다는 오류가 떴다. 그래서 index를 만들어주고 key에 index 값을 적어주니 오류는 사라졌다. Key는 React가 어떤 항목을 변경하거나 추가 또는 삭제할 지 구분하는 것을 돕는다.Key는 element에 안정한 고유성을 부여하

오늘도 힘차게 리액트에 대해서 알아봅시다!변수를 { } 안에 넣으면 랜더링을 시킬 수 있습니다. 함수도 넣을 수 있습니다. src,id,href 등의 속성에도 {변수명,함수 등}, 상상하는 모든 곳에 { }로 변수 집어넣기가 가능합니다.style도 집어넣을 수 있는데,

너무 바빠서 블로그 안쓴지 오래됐다. 힘내서 블로그 정리하기 React state 변경하는 법 onClick 이벤트 안에는 무조건 { 함수 } 만을 넣을 수 있습니다. onClick ={ 제목바꾸기() } 이건 함수를 바로 실행하라는 뜻입니다. 소괄호는 빼는 것이

이번 프로젝트를 진행하면서 알게 된 것들을 작성합니다.fetch 파일은 하나의 useEffect에 적어도 됩니다. , 가 없으면 무한랜더링이 일어납니다.반드시 작성해야합니다.모든 함수는 return 안에 존재해야합니다.Component의 이름을 작성하고 useState

프로젝트를 진행하면서 알게 된 무한스크롤을 되짚어보겠습니다.정보를 한번에 가져와서 보여주기엔 정보량이 너무 많아서 API fetch로 받는 결과가 느릴 때, 스크롤을 통해서 아주 작은 일부분만 가져와서 추가로 보여주는 기술을 말합니다.즉, Scroll End 지점까지

스크롤바를 최상단으로 고정하기인디케이터란?일의 현황/사정 변화 등을 나타내는 지표를 말합니다. 스크롤을 하면 상단에 게이지가 쌓이면서 어느정도 스크롤링이 됐는지를 보여주는 것입니다. 라이브러리 없이 구현하기..!검색해서 여러가지를 보았지만 방법은 의외로 간단했습니다.s

React로 구현하게 된 카카오 소셜로그인에 대해서 작성해보도록하겠습니다.REST-API말고 자바스크립트 팝업로그인으로 구현하였습니다.저처럼 서성이는 분들께 도움이 되길 바라면서 작성해보았습니다.💻 사용한 것: React / style-component / kakao

React slick 을 이용하여 Carousel을 구현해보자!라이브러리를 사용하는데도 시간이 오래걸렸고 이것을 정리해서 올려봅니다.2차 프로젝트를 시작하면서 슬라이드(캐러셀)을 구현해야하는 일이 생겼고, 이것을 라이브러리로 적용해보자는 마음을 먹고 구현을 해보았습니다

React로 페이지네이션을 라이브러리로 구현해보았습니다.많이 해매가지고 제가 어떻게 구현을 했는지 차근차근 써보겠습니다.1차 프로젝트때는 무한스크롤을 구현하였고 2차 프로젝트에서는 페이지네이션을 구현하게 되었습니다. 좋은 라이브러리가 많이 있었는데 그 중에서 react

프론트 마지막 세션데이터의 흐름이 복잡하기 때문에 데이터의 흐름을 제약할 필요가 생겼습니다.그래서 상태 변화가 일어나는 시점과 형태에 제약을 두어서 상태 변화를 예측 가능하게 만들고자 시도을 한 것입니다. 단방향 데이터 바인딩을 하는 Flux패턴의 자바스크립트 구현체

이번 프로젝트를 진행하면서 모달창을 두 번 만들었는데 이번에 만들었던 코드를 올려봅니다.

기업협업에서 백엔드와 API통신을 하던 중 에러를 마주하게 됐는데...현재 프론트엔드, 백엔드를 분리하여 프로젝트를 진행하던 중 둘 다 로컬서버로 run server를 하였는데이러한 에러가 뜨면서 진행이 안되는 일이 발생하였다. 많은 검색을 해본 결과 이것이 CORS

변명 중에서도 가장 어리석고 못난 변명은 "시간이 없어서"라는 변명이다. -에디슨- 잠깐의 2021년 회고 블로그를 작성하기전에 현재의 내가 느끼고 있는 것들의 대해서 잠시 얘기를 해보겠다. 나는 2달전에 부트캠프를 들어와서 현재 기업협업을 나와있다. 부트캠프에 다

요새 또 블로그를 게을리하고 있었는데 다시 차근차근 써보도록 하겠습니다. 기본기가 많이 없어서 한동안은 React의 기본적인 Hook 이나 메서드 같은 걸 공부하도록 하겠습니다.일반적으로 함수형 컴포넌트 내부에서 발생하는 side effect를 처리할 때 React 모