리액트
-
[2020.08.27] 우아한 테크러닝 3기에 선발되었다핵인싸 개발자의 길/Life Log 2020. 8. 27. 16:27
평소 리액트를 이용하여 여러 페이지와 서비스 기능들을 구현할 때마다, 항상 컴포넌트를 어떤 식으로 설계해야 재활용성을 높이고 효율적인 개발을 할 수 있을지 고민이 많았다. 같은 패턴일지라도 재활용을 하기에는 내부적으로 각기 다른 기능과 디자인 요소들이 너무나 다양했고, 이를 구분하기 위해 요구되는 파라미터들이 하나하나 추가될 때마다 코드의 가독성과 효율성이 극도로 떨어지는 것을 많이 느꼈기 때문이다. 나름 시간을 들여 고민도 많이 해보고 시도도 해봤지만, 항상 만족스럽지 않은 방향으로 컴포넌트를 사용하게 되었고 그때마다 정말 컴포넌트 설계를 잘하는 고수에게 제대로 배워보고 싶다는 생각을 많이 했다. 우아한 테크러닝 3기 그러다 며칠 전, 우아한 형제들에서 리액트와 타입스크립트를 이용하여 컴포넌트 설계와 ..
-
[2019.08.18] Next.js - React의 Server Side Rendering 프레임워크개발 블로깅/Next.js 2019. 8. 18. 20:28
우선 Next.js를 설명하자면, 리액트를 서버사이드 렌더링 방식으로 쉽게 구현할 수 있도록 환경을 제공해주는 프레임워크이다. # 서버사이드 렌더링이란? 서버사이드 렌더링이란, 클라이언트 단에서 작업하던 View와 Controller를 서버에서 직접 작업하는 것이다. 클라이언트 사이드 렌더링은, 리액트로 뷰를 만들고, 각 각 필요로 한 데이터를 서버 API에 요청하여 사용하는 방식으로, 클라이언트와 서버가 분리되어 가동되는 방식이다. 서버사이드 렌더링은 클라이언트에서 하는 모든 작업을 서버에서 작업하여 뷰를 사용자에게 보여주는 방식이다. Next.js를 사용하면, 리액트에서 이러한 서버사이드 렌더링을 쉽게 구현할 수 있다. # Next.js 기본 세팅 프로젝트 환경을 우선 구축한다. 프로젝트 폴더 생성과..
-
[2019.05.19] 오늘의 TIL개발 블로깅/오늘의 TIL 2019. 5. 19. 18:34
오늘 리액트 2주 프로젝트 작업을 하다가 정말 알 수 없는 문제로 1시간을 아깝게 버린 일이 있었다.. 해당 문제는 아래의 예시와 같다.. var names = ['inyong','jack','carry','luck']; return ( {names.map((data,index)=>{ })} ) 위와 같이 name,key를 props로 던져준다. key는 동적으로 생성하여 사용시, 각 컴포너트 마다의 고유의 key값을 가지게 하는 것을 권장한다. 그래서 저렇게 key = {index}로 넣어서 각 고유의 키 값을 전달해주지만, MyComponent 태그 안에서는 key 값을 찾으면 계속 undefined로 나온다. class MyComponent extends Component { render(){ co..
-
[2019.04.15] React의 개념 - LifeCycle API개발 블로깅/React 개념 2019. 4. 15. 20:32
lifeCycle 즉, 나타나기 전, 나타난 직후, 나타난 후, 사라지기 전 등등, 어떠한 것에 대해 나타나기 전부터 나타난 후 사라지기까지의 모든 과정을 말한다. 모든 컴포넌트는 이러한 lifeCycle 동안 발생할 수 있는 함수들을가지고 있다. -- [2019.04.17] 수정사항 -- 현재 리액트 버전 16.4에 들어서면서 왠만한 라이프사이클이 불필요하게 되었다. 현재 공식문서에 나오는 라이프사이클 API componentDidMount : 초기 컴포넌트가 생성될 때 componentDidUpdate : 중간에 컴포넌트가 변경사항이 있을 때 componentWillUnmount : 컴포넌트가 삭제될 때 ------- # 브라우저에 나타나기 전 호출되는 API constructor constructo..
-
[2019.04.15] React의 개념 - state개발 블로깅/React 개념 2019. 4. 15. 18:44
내가 이해한 대로 적는 설명 state는 해당 컴포넌트가 가지고 있는 상태, 즉 데이터를 말한다. 각 컴포넌트들은 자신의 데이터들을 가지고 있을 수 있다. (함수형의 컴포넌트는 state를 가지지 않는다! 오로지 class 방식만!) # state를 선언하는 법 class Hello2 extends React.Component{ constructor(props){ super(props); this.state = { //여기에 Object 방식으로 state를 저장 name : 'inyong', age : 27 } } render = () => ( Hello {this.props.todo} ) } constructor 생성자에서 state변수를 만든다. 그리고 그 안에 object 방식으로 데이터를 추가해..
-
[2019.04.15] React의 개념 - props개발 블로깅/React 개념 2019. 4. 15. 16:50
내가 이해한 대로 적는 개념 설명 기존의 자바스크립트와는 다르게 react에는 클래스나 함수 하나하나가 컴포넌트로 볼 수 있다. 컴포넌드는 여러 html요소가 구현되어 있는 하나의 html구성(?) # 함수 방식으로 컴포넌트를 생성하는 방법 const HelloWorld = () => { return ( 헬로월드 ); }; ReactDOM.render(, document.getElementById("root")); 컴포넌트 생성 방법은 두가지가 있다. 위 코드처럼 함수 형태로 생성하는 방법. return 괄호 안의 태그들이 호출되는 곳에 렌더될 부분이다. 이 방법은 따로 state를 가지지않고 짜여진 틀만 가져와서 사용하면 될 때 쓰면 될 듯하다. const HelloWorld = () => ( 헬로월드..
-
[2019.02.22] React로 Twittler 작업 완성..(하루만에..대박!)핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 23. 01:07
대박...오늘 아침까지 리액트 첫번째 프로젝트 작업한거 개념 정리하고, preCoure 과제로 진행했던 트위틀러를 똑같이 리액트 방식으로 구현해 보았다.솔직히 내일까지는 걸릴 줄 알았는데, 오늘 점심부터 작업해서 방금 구현을 다 끝냈다! # 기존의 과제 때 구현했던 페이스북 형식의 twittler를 React 방식으로 구현한 모습 외관 상으로는 변경된 점이 당연히 없다. 정말 많이 변한 부분은 안의 소스코드 내용이다. # 리액트로 작성한 소스코드 기존의 html, css, javascript로만 작성했던 것을 거의 뒤집어 엎었다. 리액트 방식으로 작업을 하니 코드 구조가 전체 다 바뀌고, 데이터를 주고받는 형식, 렌더링 방식 등이 전부 달라서...작업 중에 정말 많이 헷갈렸다. 그래도 첫번째 작업한 전화..
-
[2019.03.22] React로 작업한 첫번째 프로젝트를 진행해보며..핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 22. 14:16
이머시브 수강 전에 리액트를 어느정도 다뤄보는게 좋을 것 같아서 미리 공부를 하고 프로젝트를 진행해 보았다.리액트는 앵귤러처럼 프레임워크가 아니라 라이브러리 형식으로 붙여서 사용하는거라 쉬울 줄 알았는데, 역시나... 뭐든 쉬운건 없나보다..처음 리액트를 접할 때 기초개념을 잡아야 하는 부분이 의외로 많았다.. # 기초개념을 다져야 했던 부분ES6문법렌더링 개념과 방식가상의 DOMprops와 state 블로그와 영상을 엄청나게 뒤져보며 공부하고 코드를 끄적여 본 다음에, 프로젝트를 따라서 작업해 봤다. # 첫번째로 작업한 프로젝트 '전화번호부' 이름과 전화번호를 클릭하여 등록 버튼을 누르면 밑의 리스트에 해당 내용이 추가가 된다. 검색할 이름을 입력박스에 입력을 하면 실시간으로 리스트가 렌더링 되어 해당..