UIUX Full-Stack Developer (49) 썸네일형 리스트형 [0821] REACT DAY05 리액트에서 라우팅(경로에 따라서 알맞은 페이지를 보여주는 방법) 1. react-router-dom 라이브러리 2. next.js 프레임워크 를 사용하는 방법 next js 리액트를 활용하여 만든 프레임워크 라우팅까지 자동으로 될 수 있도록 리액트 SPA + CSR(Client Side Rendering) html파일은 하나밖에 없기 때문에 페이지 별 서로 다른 meta 태그를 설정할 수 없고, 검색 했을 때 노출이 쉽게 되지 않는 단점이 존재(SEO에 불리하다) 넥스트js 기존 react + 라우팅기능 + SSR(Server Side Rendering) SEO에 최적화가 가능, 라우팅도 쉽게 다룰 수 있다 app 폴더 내의 layout.js가 그려지고, 비어있는 body태그 안에 page.js 에서 e.. [0821] 반응형 웹사이트 React flex box 물론입니다! React와 Flexbox를 사용하여 반응형 웹사이트를 개발할 때 코드 변경을 수월하게 하는 방법에 대한 예시를 제공해 드리겠습니다. 가정: 이 예시에서는 간단한 레이아웃을 가진 웹사이트를 만든다고 가정하겠습니다. 웹사이트는 네비게이션 바, 사이드바, 메인 콘텐츠로 구성되며, 화면 크기에 따라 레이아웃이 조정되도록 할 것입니다. 프로젝트 설정 및 구조 설정: 먼저, React 프로젝트를 설정하고 기본적인 구조를 만들어야 합니다. 프로젝트를 생성하고 필요한 컴포넌트와 스타일 파일을 생성합니다. 스타일링을 위한 Flexbox 사용: 스타일링을 위해 Flexbox를 사용하여 레이아웃을 설정합니다. 각 컴포넌트에 Flexbox 속성을 적용하여 유연한 레이아웃을 구성합니다. 예를 들어, 다음과 같이 .. [0821] chatgpt 코드가 길 때 해결책 코드 작성이나 디버깅과 같은 기술적인 문제에 대해서는 GPT-3.5 기반의 ChatGPT가 완벽한 해결책을 제공하기는 어려울 수 있습니다. 그러나 몇 가지 도움이 될 수 있는 전략과 리소스가 있습니다: 코드 분할: 코드를 작은 덩어리로 나누고, 각 덩어리에 관련된 질문을 따로 물어보는 방식으로 코드 작성 과정을 보다 단순화시킬 수 있습니다. 이렇게 하면 ChatGPT가 하나의 큰 문제 대신 작은 부분에 대한 도움을 줄 수 있습니다. 구체적인 질문과 설명: GPT-3.5는 질문이나 요청이 구체적일 때 더 나은 결과를 제공할 가능성이 높습니다. 코드와 관련된 질문을 작성할 때 가능한 한 구체적이고 명확하게 설명하는 것이 중요합니다. 코드 주석 활용: 코드 주석을 활용하여 코드의 목적이나 각 부분의 역할을 설.. [0821] 반응형 웹사이트 react 기준 반응형 웹사이트를 개발하기 위한 표준 기준점은 주로 "미디어 쿼리(Media Queries)"를 활용하는 것입니다. 미디어 쿼리는 CSS의 일부로서, 뷰포트의 크기와 디바이스의 특성을 감지하여 웹사이트의 레이아웃 및 스타일을 조정하는 데 사용됩니다. React와 함께 이를 적용하기 위해 다음과 같은 단계를 따를 수 있습니다. Viewport 설정: 모든 반응형 웹사이트는 뷰포트의 크기에 따라 다르게 보여지도록 설계되어야 합니다. HTML의 태그를 사용하여 뷰포트 설정을 추가할 수 있습니다.위 코드는 뷰포트의 너비를 디바이스의 너비와 동일하게 설정하고, 초기 확대/축소 비율을 1로 설정합니다. htmlCopy code CSS 미디어 쿼리 사용: CSS 미디어 쿼리를 사용하여 특정 뷰포트 크기에 따라 스타일.. [0814] REACT DAY03 let a = 10; function tmp(){ return '배상엽'; } function Test(){ return( Test컴포넌트 Test컴포넌트를 만들었습니다 ); } // 다른 파일에서 함수, 변수, 컴포넌트를 사용할 // 수 있도록 export 하기 export {a}; console.log(a); html과 동일한 이름으로 만들어진 jsx(p, h1....) 에 style 속성에다 적용시키고자 하는 css 스타일을 자바스크립트 객체로 만들어서 대입한다 이때 css 속성 이름이 객체의 key되고, css 속성 값이 객체의 value가 되는데, value는 반드시 문자열로 작성을 해야하며, key는 특수문자 사용이 안되기에 카멜표기법으로 변경하여 적용 [0811] REACT DAY02 node_modules 폴더 리액트 프로젝트를 실행시키는 데에 필요한 여러가지 라이브러리(코드모음)가 들어있는 폴더 만약 node_modules 가 없으면 컴퓨터가 코드 해석 못함 public 폴더 이미지, 영상 등 리소스를 모아놓는 폴더 favicon.ico 탭부분에 표현되는 아이콘 index.html body 태그 안쪽에 오로지 id가 root인 비어있는 div 하나만 갖고 있는 html 파일 html파일은 index.html 파일 하나만 있어야 한다 안쪽에 내용물은 누가 넣어주는 것인가? index.js가 src 폴더 index.js index.html의 root div의 자식으로 요소를 추가해준다 App.test.js App.js에 만들어놓은 코드가 버그가 없는지 확인하는 파일 초기단계에는 필요없.. [0810] React React.js V(view)에 집중하여 개발할 수 있도록 고안된 라이브러리 개발을 주도하는 회사(페이스북) 핵심개념 : 화면단에서 자주 쓰이거나 반복이 되는 부분을 쉽게 다루자 컴포넌트(Component) UI상의 특정 부분(개발자가 결정)을 일컫는 말 리액트 숙련도의 기준은 UI에서 컴포넌트를 어떻게 분리 할 것인가? 1. 반복이 된다(여러페이지에 사용이 된다) 레이아웃 2. 데이터가 변경이 된다 3. 최소한의 기능을 가지고 있다 버튼 렌더링(Rendering) 화면에 UI를 사용자에게 보여주는 행위(그려주는 행위) 초기 렌더링(Initial rendering) 빈 도화지에 최초로 UI 그려지는 행위 리렌더링(re-rendering) 이미 그려져있는 UI가 다시 그려지는 행위 node.js 다운로드 .. [0808] 공부 # 요즘 돈에 미쳐서 알바하고 놀고 그러니까 내 삶이 망가지는 거 같다. 이럴 때 일수록 더욱 긴장감을 갖고 공부를 해야할 것 같다. 정신 차리자 너 3학년이고 곧 졸업이고 취업이 현실인건데 이 현실을 왜 몰라할까. 달콤한 유혹에 빠져서 너 자신을 잃지 말자^^ 파이팅 [분기처리] api호출 ... 리액트에서 응답을 json으로 받는다? 액시우스 상태값임 유효성 검사 정규 표현식 react hook form - 전송 폼 yup - 유효성 검사 Axios - 백엔드 API 통신 이전 1 2 3 4 ··· 7 다음