프론트엔드 기록

터미널 / 브라우저 콘솔창에 warning이 뜨는 이유 개발하다보면 에러메세지는 터미널이나 브라우저 개발자도구에 뜬다고 했는데 간혹 노란색 warning 메세지가 등장하는 경우가 있습니다. 빨간 error는 해결해야하지만 warning은 무시해도 됩니다. 대부분 eslint라는 친구가 잘못된 코딩관습 교정해주는건데 "변수만들었는데 안쓰고 있네요 지우는게 어떰" 이런 식의 잔소리를 warning 으로 띄워줍니다. 초보때는 이런거 지키는거 보다 코드짜보고 실행하는게 중요해서 /*eslint-disable*/ 이라는 주석을 js 파일 최상단에 추가해주면 eslint 기능을 잠시 끌 수 있습니다. 좋아요 버튼 만들기 버튼을 누르면 좋아요 갯수가 1씩 증가하는 기능을 만들어봅시다. 그래서 일단 html 레이아웃이..

리액트 2023. 8. 29. 10:15

일단 블로그 글 레이아웃을 만들어봅시다 return () 안에는 병렬로 태그 2개 이상 기입금지 function App(){ let posts = '강남 우동 맛집'; return ( 개발 blog 글제목 2월 17일 발행 ) } (App.css) div { box-sizing : border-box } .list { text-align : left; padding-left : 20px; border-bottom : 1px solid grey; } 대충 이렇게 디자인해봤습니다. 그럼 메인페이지에 멋진 블로그 글목록이 하나 생성됩니다. state 만드는 법 자료 잠깐 저장할 때는 변수 ( let, var, const 변수명) 리액트에서 자료 잠깐 저장할 땐 state 써도 됩니다. 이전 강의에서는 그냥 l..

리액트 2023. 8. 29. 10:13

이상한 사람들이 리액트 쓸데없이 어렵게 가르치는데 리액트라고 뭔가 어렵고 복잡하게 코드짜야하고 그런거 아닙니다. 그냥 기존처럼 html css 짜서 웹페이지 만들어나가면 됩니다. 그런데 html 대신 JSX라는걸 쓰는데 이거 사용법을 알아봅시다. 미리보기 띄우기 시작하기!!(터미널에 npm start 입력) 원래 html은 당연히 .html 파일에 적어야 하는데 .js에 써도 동작하는 이유는? 이것은 html이 아니라 JSX 이므로 JSX = 자바스크립트 안에서 html을 쉽게 작성할 수 있게 해주는 ".js 파일에서 쓰는 html 대용품" 왜 JSX를 사용하는가? 리액트에서 만드는 법 React.createElement('div',null,'Hello World') (JSX 사용하면) 리액트프로젝트의 ..

리액트 2023. 8. 29. 09:53

개발환경 셋팅 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - 13버전이하 아니면 17버전은 쓰면 안됩니다. - 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다. - 설치 중 chocolatey 어쩌구는 설치 안하셔도 됩니다. 2. Visual Studio Code 에디터도 구글에 검색해서 설치합니다. (기존 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 필수) Q. 맥북은 다른가요? A. 다른거 없음 똑같습니다 리액트 프로젝트 생성은 1. 작업용 폴더를 하나 만들어줍니다 찾기좋게 바탕화면에 만드는게 어떨까요. 2. 폴더에 shift + 우클릭해서 여기서 powershell 열기를 누릅니다. 맥북은 손가락 두개 클릭해서 터미널열기 누르면 됩니다..

리액트 2023. 8. 29. 09:26

React 왜 씁니까 리액트 문법부터 들이밀면 누구나 이해가 가지 않습니다. 리액트의 정확한 용도를 알아야 리액트라는 라이브러리를 이해할 수 있는데 Naver Vibe, Flipkart, Instagram 이런 웹사이트 들어가봅시다. 들어가면 페이지 전환 같은게 새로고침 없이 부드럽게 동작합니다. 이런 사이트들을 Single Page Application 이라고 하는데 - html 파일을 1개만 쓰고 - 다른 페이지를 보여주고 싶을 때 html 부분만 샥 갈아치워서 보여줍니다. 그래서 부드럽게 동작합니다. UI의 상태를 자동으로 업데이트해준다 !! UI = reder(state) 가상 돔을 통해서 UI를 빠르게 업데이트한다. 가상 돔 = 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계..

리액트 2023. 8. 29. 09:22

"run-time check failure - stack around the variable 'histo' was corrupted" 오류는 C/C++ 프로그래밍에서 발생하는 오류로, 스택 메모리 영역에 있는 변수 'histo' 주변이 손상되었음을 나타냅니다. 스택은 함수 호출과 로컬 변수 할당을 처리하는데 사용되는 메모리 영역으로, 이 오류는 일반적으로 스택을 초과하여 배열 또는 로컬 변수에 액세스할 때 발생합니다. 이 오류의 주요 원인은 다음과 같습니다. 배열 인덱스 초과: 배열의 인덱스를 벗어나는 위치에 값을 할당하거나 액세스할 경우 발생할 수 있습니다. 예를 들어, 배열의 크기가 5인데 인덱스를 6으로 설정하여 값을 할당하거나 액세스하는 경우 오류가 발생할 수 있습니다. 로컬 변수 초과: 함수 내..

카테고리 없음 2023. 4. 14. 19:43

동기와 비동기 동기 동시에 일어나는 요청과 결과가 동시에 일어난다는 약속입니다. 작업이 순차적으로 실행됩니다. 여러가지 작업을 함께 수행할 수 없으며, 어떤 작업이 수행 중이면 다음 작업은 대기 상태가 됩니다. console.log("start"); console.log("end"); 비동기 동시에 일어나지 않는 요청과 결과가 동시에 일어나지 않을 거라는 약속입니다. 작업의 병렬적 실행입니다. 어떤 작업을 수행하는 중에도 다른 작업을 수행할 수 있으며, 여러 작업을 동시에 수행할 수 있습니다. 비동기와 동기 비교 장점 단점 동기 설계가 쉽고 직관적입니다. 결과가 주어질 때까지 아무것도 하지 목하고 대기해야 합니다. 비동기 여러개의 작업을 동시에 수행 가능하고, 효율적인 자원 사용 가능합니다. 설계가 복잡..

자바스크립트 2023. 4. 13. 19:03

내부에서 스크립트 사용 외부 스크립트 사용 자바스크립트를 사용하는 언어를 따로 파일로 생성해서 저장할 수 있습니다. 따로 저장한 파일을 src 속성을 통해 HTML 문서 내부에 불러와서 사용할 수 있습니다. DOM Document Object Model(문서 객체 모델) HTML 페이지에 태그를 추가, 수정, 제거할 수 있습니다. 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방법, 좁은 의미로는 document 객체와 관련된 객체의 집합입니다. 웹 브라우저에 HTML 파일을 끌어다 놓으면 웹 브라우저는 HTML 파일을 분석해 화면에 출력합니다. 이때 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식이 DOM입니다. 문서 객체란? -HTML 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 ..

자바스크립트 2023. 4. 13. 18:46