Frontend

string으로 저장하고 싶을 때 많이 사용하는 함수string을 자바스크립트 obejct로 만들어주는 함수실제로 array에서 item을 삭제하는 것이 아니라,지우고 싶은 item을 제외한 새로운 array을 생성하는 것이다.onGeoOk(): 정상 작동 시 onGe

Javascript를 사용하는 이유는 HTML 과 상호작용 하기 위해서이다.즉, HTML의 Element들은 Javascript를 통해 변경하고 읽을 수 있다.HTML의 도움을 활용하려면 <form>을 사용해야 한다.input을 form 안에 넣을 경우

말로만 듣던 CORS를 직접 보게 되었다.. 일단 열심히 구글링해보고 있는데 일단 오류 메시지는 아래와 같다.Access to XMLHttpRequest at 'http://127.0.0.1:8000/sentence_similarity' from origin

React는 UI를 interactive하게 만들어준다.웹사이트에 interactivity(상호작용)을 아주 간단하게 만들어준다. React JS와 Vanilla JS를 비교해보자! 버튼을 몇 번 클릭했는지 세는 어플을 만들어보고Vanilla JS에서 React JS

💡React의 State state는 기본적으로 데이터가 저장되는 곳이다. 어떻게 하면 React.js 어플에 값이 바뀔 데이터를 담아줄 수 있을까?

업로드중..React에서 핵심은 필요한 기능을 하나의 component로 만들 수 있다는 점이다. 로직을 갖는 컴포넌트를 만들고, 이 컴포넌트를 또 재사용할 수 있게 된다.📌 component란 어떤 JSX를 반환하는 function이다.무엇이 component가 되

✨Point는 Divde and Conquer이다.먼저 node.js와 npx을 설치한다.위 두 명령어가 실행되면 제대로 설치된 것이다.그럼 자동으로 위처럼 웹페이지가 열린다.create-react-app으로 application을 만들 때 CSS에 관해 아래와 같이

계속 다시 render될 때마다 반복실행되어도 괜찮은 코드가 있을 수 있다.하지만, 컴포넌트가 처음에 render될 때만 코드가 실행되길 원할 수 있다.🚩 API를 통해 데이터를 가져올 때: 첫 번째 component render에서 API를 call, 이이후 sta

보편적으로 fetch 대신 async-await를 사용한다.대신굉장히 중요 👉 key, 고유한 값을 주어야 한다!!!key는 React.js에서 map 안에서 component들을 render할 때 사용하는 것이다. api로 불러온 영화들의 제목들을 보여주려면?api

styled-components 사용 시, 자동완성 기능이 꼭꼭 필요하다!!!!extension으로 vscode-styled-components를 설치하면 되는데, 설치했는데도 적용이 안 되는 문제가 발생했다..여기를 보면 아래 JavaScript and TypeScr

리액트(React) 기반으로 제작된 UI 라이브러리 중 가장 인기 있는 라이브러리. 레퍼런스도 많고 커스터마이징도 잘 된다.여기에서 설치 관련 정보를 확인하자.아래처럼 각종 아이콘 종류를 확인할 수 있다. 위처럼 보라색 홈 버튼을 만들어보자.react-router 의

State Management 없이 Toggle을 구현해보면, ThemeProvider를 App() 로 옮겨주고, useState를 사용하여 구현할 수 있다.위처럼 toggleDark를 Component 간 계속 전달해줘야 한다!!!이것이 바로 Global State이

다양한 form 관리 방법과 라이브러리들 중 리액트에서 form으로 작업하기에 좋은 방법이다.회원가입 기능을 구현하기 위해서는 입력으로 받아야 하는 값이 이메일, 이름, 성, 비밀번호, 비밀번호 확인 등 정말 많다.react hook form을 사용하지 않는다면, fo

업로드중..프리온보딩 프론트엔드 인턴십 바로가기 프리온보딩 인턴십은 교육형 인턴십 프로젝트이다.프리온보딩 인턴십을 통해 체계적인 과제를 수행하고, 기술적인 역량과 협업역량을 향상하여 취업까지 성공하는 것이 목표라고 할 수 있다.대학교 4학년 1학기 때 학교 연계형 인턴

github에서 제공하는 무료 서비스로, 결과물을 github pages에 업로드 할 수 있게 해주는 패키지package.json에 "scripts" 아래를 보면 “build” 가 있다.이 scripts를 실행하면 웹사이트의 production ready code를 생

하는 질문에서 출발했다. 하는 기능은 비슷한 것 같은데 어떤 상황에서 Link 혹은 button 컴포넌트를 사용하는 것이 적절한가 궁금해졌다.button ✅does something, a link ✅goes somewherebutton 은 웹사이트의 상태(state)를

Javascript에서는 fetch로 리소스를 비동기 요청을 할 수 있다. fetch 는 Promise 객체를 리턴한다.비동기 처리란, 시간이 소요되는 작업이 완료될 때까지 계속 기다리지 않고 따로 처리하며, 일단 다른 코드들도 먼저 실행할 수 있게끔 하는 작업이다.이

Prettier, ESLint를 배우고 코드 가독성을 위한 관리가 필수라는 걸 깨달았다. 내 코드를 읽는 다른 사람을 위해서도 코드를 작성하는 나를 위해서도 적절한 포맷팅이 필요하기 때문에! ESLint와 Prettier을 설정해보자.Mac OS로 넘어온 이후 다시 P

react query는 아무 옵션을 설정하면 않으면 ❗️ 캐싱되지 않는다. ❗️❓why❓staleTime 과 cacheTime의 기본값이 각각 0분 과 5분 이다. 따라서 데이터는 캐싱 되지만, staleTime 이 0분 이므로 항상 caching 되어 있는

일괄처리(batching) 는 setState 함수를 호출하여 일어나는 state(상태)의 변화에 따른 리렌더링 횟수를 줄이는데 도음울 준다. 이전에는 이벤트 핸들러(event handlers) 내에서만 batching을 수행했다. 즉, 이벤트 핸들러 밖에서

💡NextJS를 처음으로 배우게 되면서 왜 NextJS를 사용해야 하는지 궁금해져서 읽게 된 글을 번역해보았다. 구글에 검색하면 제일 먼저 뜨는 포스팅(Next JS vs React : Which Framework to choose for Front end in 20

업로드중..NextJS의 가장 큰 장점은 SSR이라는 점, 그리고 앱에 있는 페이지들이 pre-rendering 된다는 점이다. 그렇다면 NextJS 와 React-Query를 어떻게 같이 잘 사용할 수 있는가? 궁금해서 잘 정리된 영문 기술 블로그와 공식문서를 참고해

🤔 특정 상황에 data fetch 하기 - Disabling/Pausing Queries 사이드 프로젝트를 진행하던 중에 버튼을 클릭했을 때, 혹은 form을 submit 했을 때 API data fetch을 하도록 구현해야 하는 부분이 있었다. 지금까지의 dat

최근 사내에서 개발자들을 위한 간단한 코드 에디터 UI를 개발해야 일이 생겼다. > Task: Create UI to see/edit the configuration snapshot 개발 배경은 다음과 같다. Customize가 가능한 대시보드를 만드는 프로젝트를

지금껏 개발을 시작한 이후로 사실 "공식문서" 만을 참고해서 개발한 적이 거의 없다. 그나마 React에 대한 더 깊은 이해가 필요할 때 React 공식문서를 참고했던 정도?이렇게 라이브러리를 사용하면서 공식문서를 참고하기보다는 나와 동일한 에러 혹은 문제를 미리 겪은

Amchart 라이브러리는 공식문서가 잘 되어있는 편인 것 같긴 하지만, 간혹 공식문서에 나온 내용을 토대로 응용(?)이 필요한 feature들이 있다.이번에는 위와 같은 양방향 막대 그래프를 만드는데, "대칭"이 되도록 만들고 싶은 경우다. 공식문서를 보면 코드가 나

🤔 새로운 탭에서 URL 링크를 열게 하고 싶을 때 어떻게 구현하지?<a> 태그를 사용하되, target prop을 \_blank로 설정해준다. 여기서 \_blank 는 이동할 주소나 화면을 새창으로 열어주는 기능을 한다.rel prop을 noopener nor

라이브러리 설치 > - Style 데모 사이트 🎨 react-syntax-highlighter ❗️이런 에러를 마주하셨나요 Unexpected token 'export' 예시를 따라서 위처럼 import를 하면, 아래의 에러를 보게 된다. syn 아래처럼