분류 전체보기
-
✔ 우아한 테크러닝 3기: React & TypeScript 4회차우아한 테크러닝 3기 2020. 9. 11. 23:26
✌ 9월10일 (목) 우아한 테크러닝 3기 4회차 강의 정리 🚀 4회차 강의 목표 💻 React 컴포넌트의 상태와 관리 🎯 커뮤니케이션!! 😤 비동기와 제너레이터 타입스크립트는 다음주부터! 🤩 🚀 React 컴포넌트의 상태와 관리 React 애플리케이션을 만든다. index.jsimport React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( , document.getElementById("root") ); App.jsimport React from "react"; const App = () => { return ( React and TypeScript 1회차: Overview 2회차: Redux 만들기 3회차: React 만들기 ..
-
✔ 우아한 테크러닝 3기: React & TypeScript 3회차우아한 테크러닝 3기 2020. 9. 9. 22:52
✌ 9월08일 (화) 우아한 테크러닝 3기 3회차 강의 정리 🚀 3회차 강의 목표 리액트 만들어보기 리액트의 기본적인 부분들과 리액트를 구현해보자! 😤 📌 리액트를 구현해보는 이유! 개발자가 사용자입장에서만 사용하지 않았으면 좋겠다. 이렇게 구현해보면서 더 좋은 개발자가 되었으면 좋겠다. 🚀 React를 만들기 전에.. list와 같은 데이터를 기반으로 JavaScript를 사용할 땐 아래와 같이 rootElement.innerHTML사용하여 화면에 표시할 수 있다. // index.js const list = [ { title: "React에 대해 알아봅시다." }, { title: "Redux에 대해 알아봅시다." }, { title: "TypeScript에 대해 알아봅시다." } ]; const r..
-
✔ 우아한 테크러닝 3기: React & TypeScript 2회차우아한 테크러닝 3기 2020. 9. 7. 22:45
✌ 9월 3일 우아한 테크러닝 3기 2회차 정리 🚀 2회차 강의 목표 JavaScript에 대한 지식을 A~Z까지 할 수 있는 만큼 해보기! (70%) JavaScript의 아주 기초적인 내용보단 전체적인 흐름을 타면서 스펙들을 쭉 훑어보기 상태관리자인 Redux를 직접 만들어보기! 만들어보면서 어떤 기술로 이루어져있는지! (30%) 🚀 JavaScript 훑어보기 변수에 이 값이라는 것을 넣을 수 있다. var x = 10; //x: 변수 10: 값 let y = 10; const z = 10; 🌈 값에 대해서 📌 값에 대해서 굉장히 강조를 하셨다. 아주 바닥의 절대불변의 원칙같은 것들을 세워놓고 (ex. 1=1, 1+1=2 불변(공리)) 이런 원칙을 충분히 이해하면 아무리 복잡한 것이라도 그 원칙으로..
-
✔ 우아한 테크러닝 3기: React & TypeScript 1회차우아한 테크러닝 3기 2020. 9. 2. 23:10
🚀 우아한 테크러닝 3기 교육생 원래 오프라인으로 100명정도 뽑아서 한다고 하는데, 이번에는 코로나의 영향으로 온라인으로 진행되었습니다. 거기다가 이번에는 코로나 때문에 띄어 앉아야해서 약 30명 정도 뽑을 생각이시라고 하셨지만, 코로나가 심해져 온라인으로 진행되서 약 400여명의 교육생으로 뽑았다고 하셨습니다. 근데 이 교육을 듣고싶어서 지원한 사람만 1200여명.. 😤 열정적인 사람이 굉장히 많은 거 같다.. 이번 교육은 zoom을 이용해서 온라인으로 진행되었고, 강사님은 우아한형제들의 김민태님(웹프론트엔드개발 그룹장)이 진행하셨습니다. 또한, 9월 한달동안 화, 목으로 진행되고 총 8회차로 진행될 예정이고 저도 계속 끝날때마다 블로깅을 할 예정입니다. ✌ 🚀 우아한 테크러닝 3기 그 첫 시간 소개..
-
[React]리액트에서 react-draft-wysiwyg , DraftJS 사용하여 에디터(Editor) 적용 후 Redux로 상태관리하기React 2020. 8. 31. 23:32
✔ 개요 블로그 글쓰기나 기타 게시글을 쓸 때 textarea로 작성을 하면 많이 밋밋하고, 기능적으로 많은 구현을 하기 힘듭니다. 그렇기 때문에 글쓰기가 필요하고 게시글을 만들 때 오프소스 에디터들을 사용하여 좀 더 많은 기능의 게시글을 작성할 수가 있습니다. 많은 오프소스 에디터들 중에 react-draft-wysiwyg(리액트드래프트위지윅) 에디터를 사용해봤습니다. 다른 오픈소스 기반 리액트 에디터의 종류를 사용해보고 싶으면 참고 사용하면서 react-draft-wysiwyg의 장점은 기본적인 사용은 쉽고, 유명한 페이스북에서 관리하는 에디터인 draft.js를 사용하기 쉽게 리액트로 구성한 것입니다. 하지만, 기능적으로 디테일이 부족하다는 점이 있다고 느꼈습니다. 예를 들어, 한글을 입력할 때 바..
-
2020 NAVER DEVELOPER OPEN CLASS 후기(정리)IT이것저것 2020. 8. 29. 11:22
✔ NAVER DEVELOPER OPEN CLASS 후기 NAVER DEVELOPER OPEN CLASS의 목적은 네이버 신입 개발자 채용 설명회이다. 작년에는 오프라인으로 진했다고 하는데 올해는 코로나 때문인지 온라인으로 매주마다 업데이트되면서 진행됐다. 매주 금요일마다 업데이트 내용을 기다리는 재미?가 있었고, 생각보다 알차서 좋았던거 같고, 6주동안 모두 출석체크하면 소정의 상품인 네이버 립스탑 백 (RIPSTOP BAG)을 주는 이벤트도 진행하고 있었다. 🌈 1. TUTORIAL TUTORIAL은 시작인 만큼 가볍게 영상으로 시작됐다. 네이버 웹툰작가 기안 84님이 네이버 사옥을 돌아다니며 소개하는 영상이였는데 네이버 참 좋아보이더라.. 가고싶다는 생각이 팍 들정도로 너무 좋아보였다. 그리고 각 ..
-
[React] 리액트에서 react-moment, moment.js 사용하여 실시간으로 변경되는 시간 만들기React 2020. 8. 23. 16:30
Moment.js는 현재 유지 관리 모드에 있는 레거시 프로젝트입니다. 다른 라이브러리를 사용하시는 것을 추천드립니다. (참고) 다른 대안 라이브러리 (2023.02.25 수정) ✔ moment.js moment.js는 시간이 포함된 데이터를 받아 조작해야 할 경우 가장 많이 사용되는 편리한 라이브러리입니다. 스터디를 모집하는 사이드 프로젝트를 만들 때 사용하였습니다. 현재 시간에 따라서 스터디 신청 마감, 신청중인지 에 따라 실시간으로 변경이 되게 많드는 것이 목표였기 때문에 moment.js를 사용하였습니다. moment.js는 워낙 많이 사용되기 때문에 공식 문서 뿐만 아니라 잘 설명된 블로그들이 많이 존재하기 때문에 moment.js를 사용하는 자세한 방법은 생략하겠습니다. 🔸 moment 라이브..
-
🌈 2020 FrontEnd 개발자가 되기 위한 10가지 방법IT이것저것 2020. 7. 26. 20:53
이 글은 2020년 07월 15일에 있었던 7월 우아한세미나(주니어개발자로 성장하는 우아한 방법들)를 듣고 요약한 것입니다. https://www.youtube.com/watch?v=Qtg5xe6B_vA 📌 세상은... 웹 프론트엔드 기술이 활용되는 서비스 범위가 매우 넓어지고 웹의 기술 역시 다양하고 복잡하게 발전하고 있다. 또한, 서비스와 제품의 기술적 요구사항도 다양해지는 중이다. 이런 세상에서 우리가 어떻게 대응할 것인가를 10가지로 알아본다. ✌ 1. 현장 이해하고 대응하기 첫 번째 주제인 현장을 이해하고 대응하는 것이 사실상 결론이고 가장 중요한 것이다. 🎈 현장의 세가지 특징 함께 일하기 분석, 개발, 테스트, 배포, 피드백, 개선 제품과 서비스의 지속적인 운영 product를 만들고 서비스..