목록코딩 (332)
미새문지
if문 만큼 많이 사용되는 것들이 - map - find - filter 가 있습니다 백엔드를 받아오는 데이터의 형식은 대부분이 배열인 경우가 많습니다. 따라서 이러한 배열들을 화면에 보여주기 위해 사용하는 함수들입니다. (그래서 배열일 경우에만 사용이 가능하다) 1. map [반복문, 한줄 씩 읽어오는 것] => 주로 배열의 길이만큼 반복할 때 사용 ex) 배열명.map((결과값 변수명) => ( 실행문 )) ex) 실행문의 경우 state.map((item) => console.log(item.id)) (id만 넣었으므로 name은 안오고 id값 1,2,3 만 들어온다) ex) HTML 반복의 경우 state.map((item) = ( )) (백엔드의 데이터를 가져올때 데이터가 배열로 오기 때문에 데..
Hook함수란? react에서 상태 변경, 즉 가상돔의 상태를 변경할 수 있는 함수이며 그에 따른 생명 주기를 통해 다양한 이벤트를 실행할 수 있는 함수입니다 react의 초기 상태는 Class형 컴포넌트를 사용했었습니다 지금의 컴포넌트가 const 컴포넌트명 = () => { ... } 이라면, 옛날의 컴포넌트는 Class 컴포넌트명 extends Components { ... } 이런 방식이였습니다 이 클래스 컴포넌트에는 라이프 사이클이라는게 있었는데 이 생명주기(라이플사이클)는 페이지가 처음 열렸을 때부터 닫혔을 때까지 사이에 일어나는 이벤트나 값 변경 등을 관리합니다 Class는 다양한 기능을 상용할 수 있으나 기계와 사용자들을 혼동시킵니다 숙련된 React 개발자조차도 Class를 통한 Reac..
조건부 랜더링 방식에 사용되며 조건에 충족할 경우 해당 부분을 리랜더합니다 - 식 - { 조건식 ? true인 경우 : false인 경우 } {조건식 && true 인 경우} = {조건식 ? true인경우 : null} {}, [] => 값이 있는걸로 쳐져요 따라서 배열일 때는 {조건식.length > 0 && true인 경우} 상위 컴포넌트(부모컴포넌트)의 값을 하위 컴포넌트에 전달할 변수를 칭하는 말입니다 구조분해할당이라고도 하며 배열이나 객체의 속성을 해제하여 그 값을 개별 변수에 담을 수 있도록 사용하는 JavaScript 표현식이며, 객체의 키값을 찾아오는 것입니다 vscode에서는 저번 강의와 마찬가지로 파일 정리와 기본 설정을 합니다 ..
react 의 핵심은 re-render(리랜더) 와 Components(컴포넌트)입니다 한가지 이상의 기능을 수행하는 UI 단위 기존에 있던 html을 쪼갠 느낌입니다. html을 통으로 다 작성하면 보기도 힘들고 작성할 때 불편함이 있어 여러 컴포넌트로 나누어 작성하는 것입니다 업데이트 이전의 가상 돔트리와 업데이트 이후 가상 돔트리 상태를 비교하여 업데이트 된 내용이 있다면 컴포넌트를 사용자의 화면에 구성할 때 사용합니다 사용자 화면을 구성할 때 사용하는 render 함수를 다시 호출하는 것이 Re-render(리랜더)입니다 컴포넌트는 말그대로 부분부분 따로 작업해 붙이는 느낌인데 이렇게 div 구조가 있다 하면 헤더는 헤더 컴포..
이전 글에서 리액트 라이브러리의 기본 설정들을 간단하게 해봤습니다 이번 글에선 설정을 완료하여 웹브라우저를 잘 실행시켜보겠습니다 먼저 React의 기본 주소와 포트는 localhost:3000 입니다 localhost는 본인의 IP주소이며, 3000은 127.0.0.1:3000 입니다 주소는 변경도 가능하여 밑에서 설명하겠습니다 npm i란? node_modules가 없는 상태로 전달되며 git에 있는 클론을 받아도 같은 형태입니다 이런 형태의 파일은 package.json이라는 파일이 있으며 리액트의 모든 기능을 총괄하는 역할을 하는 파일입니다 package.json의 코드입니다 위에서부터 이 폴더의 이름과 버전, 등등이 작성되있고 dependencies라는 코드는 의존성을 부여한 것으로 node.js..
자바스크립트 강의가 끝나고 리액트 강의가 시작했습니다 리액트가 프론트엔드의 메인이라고 할만큼 중요하고 복잡하다고 하여 열심히 따라잡을 예정입니다 리액트란? - 사용자 인터페이스를 만들기 위한 자바 스크립트의 라이브러리 중 하나이며, 모듈형 개발로 빠르게 지원이 가능하고 라이브러리 특성상 붙여 사용하기 때문에 간편하여 프론트엔드의 표준으로 자리 잡았습니다 이러한 리액트를 사용하기 위해 vscode에서 기본적인 설정을 해야합니다 먼저 터미널을 실행할 폴더안에 리액트 파일을 만들어야합니다 npx create-react-app "파일 이름" 으로 폴더를 생성해줍니다 여기서 npx는 npm, yarn과 같은 프로젝트 패키지 관리툴입니다 create-react-app은 CRA라고 부르며 react에서 따로 설치하지..
저번글에서 전체적인 홈페이지의 div구조와 이벤트 구상을 하였습니다 구상한 이미지를 보며 조원들과 홈페이지 제작을 완료했습니다 구상한 이미지에서 애매하거나 좀 부족한 부분은 빼고 구현했습니다. 원래 개인페이지도 각자 맡아 링크를 붙이려 했었는데 프로젝트 기간이 생각보다 짧은관계로 메인홈페이지에 다 쏟아부었습니다.. 구현한 이벤트의 이미지입니다 프로젝트 시간만 넉넉하게 잡았으면 마음같아서는 부족한 이벤트랑 개인페이지까지 같이 구현을 하고싶었는데 다음에 배우는 리액트가 제일 중요한 파트여서 js를 이용한 2차 홈페이지는 여기까지 만들기로 했습니다 다음은 리액트에 대한 공부와 프로젝트에 대해 작성하겠습니다
저번에 이어 중고나라가 어플리케이션에 최적화되어있어 새로 홈페이지 구조를 짜기로 했었습니다 먼저 전체적인 div구조 상단부터 헤더 부분과 광고 부분, 실시간 물품 부분, 거래게시판, 푸터, 사이드바로 구성되어 있습니다 헤더는 두 줄로 구성했는데 첫 번째 줄은 어느 홈페이지에 가든 보이는 메인로고와 검색창 그리고 내 정보가 있고 두 번째 줄은 메뉴 카테고리입니다 첫번째 헤더에는 검색창에 input을 넣어 텍스트를 입력가능하게 만들고 내 정보에는 텍스트대신 아이콘을 넣어 잘 꾸며줍니다 두번째 헤더에는 카테고리만 있되 카테고리 좌측의 목록 아이콘을 누르면 숨겨진 카테고리가 밑으로 내려오며 마우스로 가져간 목록은 검은색에서 주황색으로 글자가 변경됩니다. 그리고 각 카테고리 부분마다 다른 하위 ..