서버 개발 썸네일형 리스트형 React 학습을 위한 초보자 가이드: 팁, 요령 및 샘플 코드 안녕하세요! React를 처음 배우는 개발자를 위해 첫번째 글을 읽으신 분들을 위한 다음 스텝을 준비했습니다. 이번 글에는 코드 예제도 실제로 첨부해서 알려드리겠습니다! React는 동적 사용자 인터페이스를 구축하는 데 사용되는 널리 사용되는 JavaScript 라이브러리이며 모든 개발자의 기술 세트에 큰 도움이 됩니다. 그러나 React를 배우는 것은 특히 JavaScript 프레임워크의 세계를 처음 접하는 경우 어려울 수 있습니다. 이 가이드에서는 환경 설정, 구성 요소 생성, 상태 관리 및 이벤트 처리를 포함하여 React의 기본 사항을 안내합니다. 개발 환경 설정 React 애플리케이션 구축을 시작하기 전에 개발 환경을 설정해야 합니다. Node.js, NPM 및 원하는 텍스트 편집기를 사용하는 .. 더보기 리액트 초보자를 위한 시작 기본 가이드: 리액트란 무엇인가? 리액트란 무엇인가요? 리액트는 페이스북에서 개발한 사용자 인터페이스 라이브러리입니다. 리액트를 사용하면 웹 애플리케이션에서 다양한 UI 요소를 만들고 관리할 수 있습니다. 리액트의 주요 특징은 무엇인가요? 리액트는 가상 돔(Virtual DOM)을 사용하여 빠른 UI 업데이트를 지원합니다. 또한, 컴포넌트 기반 아키텍처를 사용하므로 코드의 재사용성과 유지 보수성이 높습니다. 리액트를 시작하기 위해 필요한 것들은 무엇인가요? 리액트를 시작하기 위해선 기본적으로 Node.js와 npm을 설치해야 합니다. 그리고, 코드를 작성할 수 있는 편집기나 IDE가 필요합니다. 리액트 애플리케이션을 만드는 방법은 무엇인가요? 리액트 애플리케이션을 만드는 방법은 다양합니다. 가장 기본적인 방법은 Create React A.. 더보기 맥북(Mac)에서 백쿼드(`) 원화 위에 표현 사용하기 윈도우 키보드에 있던 ` 를 맥북에서 찾지 못해서 어려움을 겪었다. 방법은 간단했다. Option 키와 ₩(~)를 누르면 => ` 백쿼드가 나온다. 즉 Option과 함께 누르면 가능하다. Mac 사용자라면 키보드의 Tab 키 바로 위에 있는 역따옴표 기호(`)에 익숙할 것입니다. 이 키는 Macbook에서 텍스트 또는 이미지로 작업할 때 유용할 수 있는 다양한 표현 및 문자에 액세스하는 데 사용할 수 있습니다. 역따옴표 키의 가장 유용한 기능 중 하나는 macOS의 기본 이미지 뷰어인 미리보기에서 이미지의 원래 크기를 표시하는 기능입니다. 미리보기에서 이미지를 열었을 때 역따옴표 키를 누르면 이미지의 원래 크기를 볼 수 있습니다. 이는 이미지의 해상도를 확인하거나 이미지의 실제 크기를 확인해야 할 때 .. 더보기 [React] Hook 간단하게 정리하는 라이프 사이클 기존 라이프 사이클에 익숙해 지기전에 Hook 라이프 사이클을 간단하게 정리해봄. Hook // componentDidMout useEffect(()=>{ // 처음 화면이 랜더링 된 후 실행 할 로직. }, []} 우선 useEffect 즉 화면이 처음 랜더링(표시) 된 뒤 실행하는 로직임. //componentDidUpdate const mounted = useRef(false); //랜더링 되지않는 (화면에 표시하지 않는) 값은 useRef를 활용 useEffect(()=>{ if(!mounted.current) mounted.current = true; // 실행할 로직 }, [/*변경되는 값 or 변경이 되면 위 함수를 실행*/]); 그 다음은 화면이 표시 된 후 useEffect의 []를 활용.. 더보기 [React] sass 파일 compile 오류 해결 방법 sass 파일을 vsc 를 통해 사용하려 하면 오류가 발생하는 경우가 있다. - 오류 코드 ㅇ Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 - 해결방법 Workaround: don't install node-sass 5.0.0 yet (major version was just bumped). ㅇ Uninstall node-sass: npm uninstall node-sass ㅇ Then install the latest version (before 5.0): npm install node-sass@4.14.1 종료 후 다시 시작하면 정상적으로 사용이 가능하다. 더보기 로컬 포트 3000 닫기, 포트 죽이기 문제 yarn start 여러번 할 때 VSC를 그냥 닫게 되면 아직 포트가 살아있어서 아래 처럼 경고 문구가 나오고 3001, 3002, 3003 .. 계속 늘어나게 된다. react 실행에서 yarn start, npm start 명령어를 사용할 때 자주 발생하는 현상이다. Something is already running on port 3000. (...) 해결 kill -9 $(lsof -t -i:3000) 이제 깔끔하게 3000 포트만 사용해서 개발을 하자! 더보기 비쥬얼 스튜디오 코드(Visual Studio Code) 폰트 (Font) 설정하기 안녕하세요. Visual Studio Code 에서 Font 변경하는 방법을 오늘 소개하려고 합니다. VSC(Visual Studio Code) 는 아래 웹사이트에서 다운로드 받으실 수 있습니다. 현재 무료로 사용가능하니 부담없이 다운로드 하세요~ code.visualstudio.com Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - L.. 더보기 [JAVA] HashMap 기본을 활용하여 코딩테스트 문제 풀어보기 이번에 코딩테스트를 하면서 중복값에 관련한 문제를 풀게 되었다. 중복값 하면 'HashMap' 을 쓰면 코드 수 를 줄이고 문제를 풀 수 있을 것같다. 이번에는 문제를 풀어보면서 HashMap을 쓰는 법을 포스팅해보려한다. HashMap은 그냥 쓴다고 하면 쓸 수 있지만 문제를 풀기위해서는 값을 알아야 하므로 간단하게 정리한 아래 코드를 보면 쉽게 사용할 수 있다. 지금 당신이 코딩테스트 중 이라면 아래 내용을 조금만 집중해서 보고 활용하면 금방 풀 수 있다! 1. HashMap 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 package 해시맵; import java.util.*; .. 더보기 이전 1 2 다음
