리액트3 [프로젝트 1차] Cha.Dam.Hwa (3/4 - 5일차) 1. main 페이지 컴포넌트 프로젝트에 들어오기 전까지, props에 대해서 잘 다루지 못했었다. props에 관한 개념도 두루뭉실했고, 왜 써야하는지도 이해가 가지 않았다. 적어도 내눈에는 별로 필요하지 않은, 번거롭다 싶은, 날 괴롭히는 존재에 불과했던 것 같다. 하지만, 직접 써보면서 props가 어떻게 쓰이는지 왜 필요한지에 대해서 좀 더 깊숙하게 이해를 할 수 있었던 것 같다. props는 정말 꼭 필요한 존재다. Component (컴포넌트) 뭘까? 리액트에서는 '컴포넌트'라는 구성단위로 프론트 개발을 한다. 컴포넌트는 구성요소라는 뜻인데, 화면을 구성하는 요소들을 각각 만들고 그것을 하나로 합쳐 하나의 페이지가 되는 형식이다. 이 컴포넌트 또한 작게 쪼개서, 작은 부분을 합쳐 하나의 컴포넌.. 2022. 3. 13. [React] Westagram 코딩 (1) - login HTML과 CSS, JAVASCRIPT(자바스크립트)를 이용해서 만들었던 인스타그램 클론 코딩을 REACT(리액트)를 이용해서 만들어보았다. 우선 이번 시간은 로그인을 리액트로 작업한 것을 포스팅하고 다음에 이어서 메인 페이지 작업을 리액트로 만든 것을 포스팅하려한다. 리액트로 구현한 로그인페이지 완성본 위 영상을 보면 알 수 있듯이, ID와 PassWord에 각각 제한 조건이 걸려있다. 그 조건들을 모두 충족해야 로그인이 가능하며, 그 조건을 모두 만족하면, 아래의 로그인버튼이 활성화가 되면서 cursor모양도 pointer로 바뀌게 된다. 그 후, 버튼을 클릭시 main화면으로 이동하는 것 까지! 이 세가지를 모두 리액트를 사용해서 만들어보았다. 1 step ) 모든 과정을 거꾸로 생각해보기 ! 리액.. 2022. 2. 24. [TIL] 리액트 ( intro ) 이번 글에서는 리액트는 어떤 문제를 해결하고자 나왔는지, 리액트의 철학과 추구하는 방향, 그리고 많은 개발자분들이 느끼고 있는 리액트의 공통적인 장점과 특징을 간접적으로 정리해보고자 한다. 0. 라이브러리 등장 배경 프론트앤드 라이브러리가 등장하게 된 이유는 동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함이다. 여기서 정적, 동적인 웹 페이지가 무엇일까 ? 정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지다. 기업을 소개하는 페이지라면, 단순히 기업 정보를 전달하기 위한 목적이기 때문에 유저의 인터랙션은 중요하지 않은 요소로 볼 수 있다. 이런 경우엔 단순히 HTML과 CSS의 구성만으로도 충분히 멋진 웹 페이지를 만들 수 있.. 2022. 2. 14. 이전 1 다음
