본문 바로가기

분류 전체보기130

React 1 - react.js 소개 및 개발환경 세팅 React.js? 리액트 JS는 페이스북에서 사용자 UI구축을 위해 제작한 자바스크립트 라이브러리입니다. 특징 리액트는 크게 세가지 특징을 가지고 있습니다. 1. JSX 문법 사용 JSX는 Javascript Syntax Extension의 약자로, 자바스크립트 문법 내에 HTML형태로 정보를 전달하거나 표기할 수 있게하는 기술입니다. 2. Component 기반 기존에 HTML/CSS로 서비스를 제작할 때에는, 서비스의 복잡도에 따라 코드가 굉장히 길어지고 여러번 사용되는 요소 또한 모두 일일이 작성해줘야 했습니다. 리액트에서는 서비스 내에 재사용이 가능한 요소르 컴포넌트 형태로 분리할 수 있어, 개발 과정에서 많은 효율성을 가져다줄 수 있습니다. 3. 가상 DOM 가상 DOM은 추상화된 DOM을 생성.. 2020. 8. 30.
wecode +11 (8/28) 배운 것/개발한 것/정리한 것 - 오전 : JS 비동기 처리 III - async & await 공부 및 블로깅 (참고) - 오후 1) westagram 코드 리뷰 받은 것 반영 및 push (완료) 2) React 설치 및 개발환경 세팅 (완료) 주말 할 것 (~일요일) react.js 공부 1. codecademy (react) 공부 (Learn React.js - part 1 끝내기) 2. React.js 공식문서 내 튜토리얼 3. freecodecamp React 공부 (React 부분 끝내기) 2020. 8. 30.
JS : 비동기 처리 & 콜백 공부 III async & await async & await 함수는 ES8에서 새롭게 정의된 문법으로, 비동기 처리 함수를 쉽게 정의하고 다룰 수 있게 돕는다. 함수를 비동기로 처리할 수 있는 방법은 1) 콜백, 2) Promise가 있는데, async/await을 통해 위 문법들의 단점을 보완하고 보다 가독성이 좋게 코드를 변환할 수 있다. 선언 비동기 처리를 하고자 하는 함수 앞에 async키워드를 설정하고, 해당 함수 내부에 비동기 처리를 해야하는 코드 앞에 await 키워드를 지정하여 실행할 수 있다. * await을 선언한 비동기 처리 코드는 항상 promise 객체를 반환해야한다 // 1. 일반적인 함수 function getUrl() { let response = fetch('API주소'); if (r.. 2020. 8. 28.
git branching and merging 외부 프로젝트 clone 깃헙에 있는 외부 프로젝트를 clone하여 작업을 계속 진행할 수 있다. git clone 를 사용하여 local(내 컴퓨터)에 복제한다. 보통 협업 프로젝트를 진행할 때, remote(원격 저장소)와 local(내가 실제로 작업하는 컴퓨터)로 나누어 진다. 또한 바로 remote에 master에 내 코드를 push하는 경우는 매우 드물기 때문에 (master는 최종 작업물을 위한 최종 코드), remote에 브랜치를 생성한 후 해당 브랜치에 내 local 코드를 push한 후, 추후에 master코드와 merge하는 프로세스로 작업을 진행하게 된다. git pull 자신의 로컬 코드를 remote의 master 브랜치 (또는 다른 브랜치)에 업데이트했다면, 이제 자신의 컴퓨터(.. 2020. 8. 28.
wecode +10 (8/27) 배운 것/개발한 것/정리한 것 - 오전 : git 공부 - 오후 : westagram 리뷰, git/github 세션, westagram 코드 리팩토링 - 저녁 : 10기가 12기에게 세션 1. git/github Git은 프로그램의 버전 별로 변경 사항을 추적하고 관리할 수 있는 분산 버전 관리 시스템(VCS)이며, 한 프로그램/서비스를 여러 명의 개발자나 팀에서 각자 작업한 사항을 합칠 때 사용한다. repository는 git으로 관리하는 프로젝트 저장소이며, 본인의 컴퓨터에서 작업할 시에는 local repository에서 작업하게 되고, 해당 코드를 외부 서비스 배포를 위해 서버에 배포하거나 합칠 경우에는 remote repository (원격 저장소)를 사용하게 된다. git 관련하여 새로 배.. 2020. 8. 28.
wecode +9 (8/26) - git/github(중요!) 포함 배운 것/개발한 것/정리한 것 - westagram : html, css, js 작업 (계속) 1. westagram 우측 메뉴 상단 프로필 클릭시 팝업 열기(.popup .show css 추가) - 처음에는 toggle기능을 이용해서 구현하였는데, 프로필 아이콘을 클릭해야만 팝업이 닫히는 현상이 발생하였다. - 문서 전체에 addEventlistener를 하여 click 타겟이 팝업이 아닐 경우 팝업을 닫는다. (classList.remove) const profileClick = () => { document.body.querySelector(".popup").classList.add("show"); }; // 프로필 아이콘 이외의 것을 클릭시 팝업 닫기 document.addEventListener.. 2020. 8. 27.
wecode +8 (8/25) 배운 것/개발한 것/정리한 것 - westagram : html, css, js 작업 (계속) 1. DOM을 이용한 JS 작업 - 메인 화면 const commentUl = document.body.querySelector(".commentList"); const commentInput = document.body.querySelector(".commentDesc"); const commentBtn = document.body.querySelector(".commentBtn"); const uploadComment = () => { if (commentInput.value) { let liNew = document.createElement("li"); liNew.innerHTML = `youngkwon3.. 2020. 8. 25.
wecode +7 (8/24) 배운 것/개발한 것/정리한 것 - westagram html/css 작업 회고 CSS공부 더 하기 내일 할 것 오전 - westagram -> js 작업 시작 (로그인 화면) 오후 - westagram 작업 (계속) -> CSS (검색창, 우측 메뉴, 프로필 그라데이션 적용) -> 메인 js 작업 (댓글달기) 저녁 - westagram 작업 (계속) -> JS 2020. 8. 25.
wecode +6 (8/23) 배운 것/개발한 것/정리한 것 - JS 비동기처리 & 콜백 블로깅 (1. 비동기 처리와 콜백함수, 2.프로미스, 3.Async/await(내일 이어서 작성) 회고 옆 사람에게 해당 개념을 쉽게 설명할 수 있을 정도의 수준까지 이해해야한다. 내일 할 것 오전 - 7시쯤 코엑스 도착 (차에서 좀 자기) - 9시 위코드 도착 - westagram 작업 시작 -> 로그인 html/css/js 작업 완료하기 - 자바스크립트 프로그래머스 문제 하나 풀기 오후 - westagram 작업 (계속) -> 메인 html 레이아웃 완료하기 -> 메인 CSS 완료하기 - westagram 좀 쉴때 -> TIL 블로깅 -> 자바스크립트 비동기 처리/콜백 블로깅 (async & await) -> 코드카데미 react 수업 듣기 .. 2020. 8. 24.

티스토리툴바