YEV.log

레이아웃과 제품 컴포넌트 작업을 끝내고 한 페이지에 sub_category 별로 직접 url 을 수정하여 제품을 띄우는 것은 성공시켰다. 하지만 카테고리를 클릭할때는 카테고리에 해당하는 제품들로 업데이트가 되어야하는데 이게 한페이지에서 어떻게 일어나는지에 대한 이해가 잘 가지 않았고 이 모든게 쿼리파라미터를 이용한 동적 라우팅 기능을 사용하면 해결할 수 있다는 걸 알았다. 구현 기능 카테고리를 클릭할 때마다 url 주소를 변경하고 그 url 주소를 가져와 컴포넌트를 변경한다. ⭐Key Point onClick 이벤트 history.push() location.search() componentDidUpdate Output Code 🥕 API Data ${BASE_URL}/categories=1 더보기 { ..

1주차에 보라님이 상수 데이터로 구현했던 nav 바의 카테고리 목록을 2주차에는 백엔드에서 주는 API 데이터로 교체해야하는 상황이 오게 되었다. 보라님의 코드에서 상수데이터를 API 데이터로 교체 + 내가 구현한 카테고리별 쿼리 파라미터 주소를 link 연결하는것이 목표이다. 구현 기능 상수데이터를 API 데이터로 교체 + 내가 구현한 카테고리별 쿼리 파라미터 주소를 link 연결하기 ⭐Key Point API 데이터 분석 map 메소드 이중으로 사용하여 카테고리 이름 표시 개별 링크 연결 Output Code 🥕 API Data ${BASE_URL}/categories 더보기 { "results": [ { "category_id": 1, "category_name": "샤워", "sub_categor..

프로젝트 소개 Sprint Routine 전체 데모 영상 기술 스택 내가 구현한, 담당 기능 1차 프로젝트 회고 마무리 💻 프로젝트 소개 러쉬(LUSH)는 영국 프레쉬 핸드메이드 베지테리언 코스메틱 브랜드이다. 웹사이트 디자인이 정말 깔끔하여 기본적인 커머스 사이트에 필요한 핵심 기능들을 구현해 볼 수 있어 선택하였다. 팀명 : WASH KOREA 개발기간: 2021/11/1 ~ 20201/11/12 개발인원: Frontend(박보라, 석예주, 이수경) / Backend(권은경, 허규빈) Github : Frontend / Backend 🎞 Sprint Routine 🎞 전체 데모 영상 🍑 구현페이지 및 기능 NAV Drop & Down Footer 회원가입 / 로그인 페이지 - 유효성 검사 - 조건 충..

Routing 동적 라우팅 (Dynamic Routing) Routing 라우팅이란 다른 경로 (url주소)에 따라 다른 view(화면)을 보여주는 것을 뜻합니다. React는 SPA(Single Page Application) 단일 페이지 애플리케이션의 기술을 사용합니다. 즉, 페이지 전체를 새로고침하는 것이 아닌 페이지 뷰를 단일 페이지에서 동적으로 그린다고 생각하면 됩니다. 다음은 react-router-dom을 사용한 라우팅에 필요한 기본적인 코드 구조 입니다. // index.html // index.js ReactDOM.render(, document.getElementById("root")); // Routes.js const Routes = () => { return ( ); }; inde..

Component Lifecycle 관계 부모 자식 컴포넌트 관계에서의 라이프 사이클 Component Lifecycle 단계 constructor render componentDidMount 전체 과정에서 한번만 실행된다. (fetch 완료) (setState) render componentDidUpdate componentWillUnmount 부모 자식 컴포넌트 관계에서의 라이프 사이클

상수 데이터 mock data 상수 데이터 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있습니다. 상수데이터는 반복되는 UI를 상수 데이터 + Array.map( ) 함수의 조합을 이용해서 간결하게 표현할 수 있어 유지보수가 용이합니다. 상수 데이터의 활용 - 댓글 예제 상수 데이터는 별도의 JS 파일로 분리하거나, 필요한 파일 내부에서 선언해서 사용할 수 있습니다. 상수 데이터 변수는 대문자 + snake case 를 이용해서 변수의 이름을 짓는 컨벤션이 있습니다. 별도의 JS파일로 분리할 경우 export / import를 통해서 필요한 파일에서 사용합니다. JS파일은 데이터를 impor..

Props Props & event State Event & setState Props props는 컴포넌트의 속성값으로 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체입니다. 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있습니다. Props 객체 //Parent.js import React from 'react'; import Child from '../pages/Child/Child'; class Parent extends React.Component { constructor() { super(); this.state = { color: 'red' }; } render() { return ( Parent Component ); } } exp..

Component란 Class vs Functional Component 컴포넌트 생명주기 Component Lifecycle Component란 component란 재활용 가능한 UI 구성단위를 뜻합니다. 컴포넌트를 사용하면 반복되는 코드가 길어지는 것을 방지해주기 때문에 코드 유지보수에 좋고 해당 페이지가 어떻게 구성되어있는지 한눈에 파악하기가 좋습니다. 또한 컴포넌트는 또 다른 컴포넌트를 포함할 수 있습니다 (부모 컴포넌트 - 자식 컴포넌트) Class vs Functional Component 컴포넌트를 선언하는 방식에는 크게 class형 컴포넌트와 함수형 컴포넌트가 있습니다. Class Component import React from 'react' class Component extends R..

JSX JSX 문법의 특징 및 준수사항 JSX const element = Hello, world!; 리액트에서는 JSX라는 독특한 문법을 가지고 있습니다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어입니다. JSX 문법의 특징 1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 합니다. 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다. import React from 'react'; function App(){ return( header1 header2 ) } 2...

인스타그램 클론코딩의 가장 첫번째 관문인 로그인 페이지를 만들었다. html/css로 형태를 구현하는 것에는 크게 문제되는 것이 없었지만 Javascript의 dom형태로 기능을 구현하는 것이 처음이라 많이 막혔지만 해결방식을 잘 정립해두고 배운 개념, 모르는 개념을 검색하면서 찾아내어 첫 로그인 페이지를 완성했다. 구현 기능 DOM으로 html에 접근하고 1. id에 @가 포함된 이메일 형식의 문자를 입력했을 때 2. 비밀번호를 5자 이상 입력했을 때를 동시에 충족했을 때 로그인 버튼이 활성화되면서 버튼을 클릭하면 main페이지로 이동하게 된다. ⭐Key Point 문자열의 길이 파악 "@"를 찾아내는 메소드 로그인 버튼 활성화 비활성화 기능 + 스타일 속성 변경 다른 링크로 이동 Output Code..

DOM (Document Object Model) DOM Tree 문서객체를 생성하는 방식 DOM (Document Object Model) 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. DOM은 웹 페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델이며, document라는 전역 객체를 통하여 HTML과 javacript를 잇는 역할을 합니다. 자바스크립트의 document객체는 DOM구조를 접근하는 관문이며 document 객체는 HTML 문서를 나타낸다고 할 수 있습니다. DOM Tree DOM을 제대로 이해하기 위..

프로그램 설치 Github | 레파지토리(Repository) 만들기 VS Code | Github의 레파지토리 연동하기 VS Code | 변경한 파일 터미널을 사용하여 commit & push 하기 프로그램 설치 Git https://git-scm.com/downloads Visual Studio Code https://code.visualstudio.com/ Github | 레파지토리(Repository) 만들기 Repository name을 지정하고 Public으로 공개 설정을 하며 Add a README file를 체크한 후 레파지토리를 생성한다. VS Code | Github의 레파지토리 연동하기 Github으로 로그인을 한다. 명령팔레트를 실행하여 Git:Clone 실행을 한 후 복사한 레파지..

0. 프로그램 설치 1. Repository (저장소) 2. Initializing a repository 4. Branch 0. 프로그램 설치 Git https://git-scm.com/downloads Visual Studio Code https://code.visualstudio.com/ 🥨 Git이 설치 되었는지 확인 (Terminal) Git이 정상적으로 설치되었다면 설치되어있는 Git 버전이 뜸 git --version 🥨 이름 & 이메일 설정 (Terminal) Git에 본인 정보 등록 git config --global user.name "본인 이름" git config --global user.email "본인 이메일" 1. Repository (저장소) git으로 관리하는 프로젝트 저장..

문제 설명 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. 제한 조건 str은 길이 1 이상인 문자열입니다. 예시 입출력 s return "Zbcdefg" "gfedcbZ" 첫 문제풀이 function solution(s) { return s.split('').sort().reverse().join(''); } console.log(solution("Zbcdefg")); 문자열을 배열로 변환한 뒤, 배열의 속성들을 사용하여 문자열을 내림차순으로 배치하는 문제이다. split(' ') 문자열 하나하나를 배열의 요소로 담는다. sort( ) 오름차순으..

display inline block inline-block float display CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다. inline display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. inline 엘리먼트를 사용할 때 주의할 점은, 콘텐츠 크기 만큼만 공간을 차지하도록 되어있기 때문에 width와 height 속성을 지정해도 무시된다는 것이다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다. inline 요소의 종류의 태그 a, abbr, acronym, b, bdo, big, br, but..

position position 사용법 position position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정하며 top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. position 사용법 static (기본값) : 위치를 지정하지 않을 때 사용한다. relative : 요소 자기 자신을 기준으로 배치 absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다. static stati..

시맨틱 웹 (Semantic Web) 시맨틱 태그 (Semantic Tag) 시맨틱 웹 (Semantic Web) 의미 시맨틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 한다. * 메타데이터의 목적은 정보검색의 처리과정을 줄여주고, 사용자가 원하지 않는 데이터를 미리 걸러주며, 관련성이 많은 정보의 발견 가능성은 높여줌으로써 정보검색을 향상 시키기 위한 것이다. 시맨틱 웹의 사용 많은 사용자들이 필요한 정보를 얻기 위해 Goolgle 이나 Naver과 같은 검색엔진을 이용한다. 즉, 웹사이트들은 이러한 검색엔진에 노출되어야만 외부로부터의 유입을 일으킬 수 있다. ..

문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 제한 조건 seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다. 예시 입출력 seoul return ["Jane","Kim"] "김서방은 1에 있다" 첫 문제풀이 function solution(seoul) { return "김서방은 " + seoul.indexOf("Kim") + "에 있다"; } console.log(sol..

문제 설명 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 제한 조건 n은 길이 10,000이하인 자연수입니다. 예시 입출력 n return 3 "수박수" 4 "수박수박" 첫 문제풀이 function solution(n) { var answer = ''; for(let i = 0; i

문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한 조건 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 예시 입출력 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. 첫 문제풀이 function solution(s) { return Number(s); } 다음 문제풀이 function solution(s) { return s/1; } * 문자열을 숫자 연산자와 함께 사용하면 자바스크립트가 계산을 하기 위해 ..