본문 바로가기

전체 글130

wecode +25 (9/11) 배운 것/개발한 것/정리한 것 - 오전 : 코드카타 (통과) - 오후 1. 세션 : westagram 마무리 세션 2. 세션 : 프로젝트 가이드라인 3. westagram 블로깅 내일 할 일 ★ 밀린.. 블로깅 꼭 하기 - 인증/인가, react component lifecycle, javascript reduce/map/filter, 자료구조(stack & queue), monsters, code KATA (금요일), HTTP 통신, fetch 더 자세히 쓰기, 리액트 배운것 정리글 회고 리액트 westagram 프로젝트가 끝났고, 1차 프로젝트를 앞두고 있다. 주말에는 밀린 세션 블로깅을 하면서 그 동안 배웠던 것들을 정리하는 시간을 꼭 가지려 한다. 조급해하면서 새로운 강의나 codecademy 배.. 2020. 9. 11.
[westagram] 인스타그램 클론 팀프로젝트 후기 1. 프로젝트 소개 1) React.js를 활용한 instagram clone (팀 프로젝트) HTML, CSS, JS DOM 통해 구현한 인스타그램 클론 사이트의 리액트 버전 구현 공통 컴포넌트와 SCSS (common, reset) 활용 git을 활용한 협업 2) 기간 : 2020. 8. 31 ~ 2020. 9. 11 2. 적용 기술 HTML, CSS, JS React.js SCSS(SASS) git 3. 주요 기능 1) 로그인 페이지 레이아웃 & 컴포넌트화 - 로그인 페이지 컴포넌트 분리 (로그인, 로그인이미지, 로그인패널) 2) 로그인 페이지 이벤트 핸들러 적용 - id, password 인풋 setstate 기능 활용한 value 전달 - 버튼 클릭시 main 페이지 이동 - 서버 fetch 통.. 2020. 9. 11.
wecode +23 (9/9) 배운 것/개발한 것/정리한 것 - 오전 : 코드카타 - 오후 1. 세션 (stack & queue) : 영상 다시 보고 복습 2. westagram 코드 리뷰 사항 반영 완료 3. TIL 블로깅 완료 4. monsters 과제 완료 내일 할 일 1. 오전 : 코드카타 2. 세션 - 2시 : 로그인 & 회원가입 3. 오후 - 블로깅 : 인증/인가, react component lifecycle, javascript reduce/map 다시, 자료구조(stack & queue) 회고 여러 일들 때문에 오늘은 코딩을 많이 하지 못했다. 다만, westagram 리팩토링과 monsters과제는 끝낼 수 있었다. 이번 주 남은 시간은 내 westagram 코드를 분석하고 리액트 배운 사항을 복습해보는 시간을 좀 .. 2020. 9. 10.
JS fetch() fetch는 사용자 정보 가져오기, 주문사항 전송, 사용자 정보 삭제 등 서비스의 서버단에 네트워크 요청을 보내야 할 때 사용하는 자바스크립트 내장 메소드입니다. fetch의 기본 문법은 아래와 같습니다. let promise = fetch(url, [options]) url : 접근하고자 하는 url (보통 API) options : 헤더 정보, method등을 지정할 수 있음 fetch 처리순서 fetch 메소드를 호출하게 되면 브라우저는 지정한 url에 네트워크 요청을 보내고, Promise 형태로 반환을 받습니다. 이 때, 서버에서 응답 헤더 데이터를 먼저 받고, 이 때 Promise는 HTTP 상태 코드를 가지고 있어 정상적으로 요청이 처리되었는지를 확인할 수 있습니다. 이후, 본문(body)데.. 2020. 9. 9.
wecode +22 (9/8) 배운 것/개발한 것/정리한 것 - 오전 : 코드카타 문제 더보기 숫자로 이루어진 배열인 nums를 인자로 전달합니다. 숫자중에서 과반수(majority, more than a half)가 넘은 숫자를 반환해주세요. 내 코드 function moreThanHalf(nums) { const count = {}; const arrLen = nums.length; nums.forEach((el) => { count[el] = (count[el]) ? ++count[el] : 1}); const mostUsedKey = Object.keys(count).reduce((pre, cur) => count[pre] > count[cur] ? pre : cur ); return parseInt(mostUsedKey); .. 2020. 9. 9.
wecode +21 (9/7) 배운 것/개발한 것/정리한 것 - 오전 : 코드카타 문제 더보기 로마자에서 숫자로 바꾸기 1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다. Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다. III = 3 XII = 12 XXVII = 27 입니다. 그런데 4를 표현할 때는 IIII가 아니라 IV 입니다. 뒤의 숫자에서 앞의 숫자를 빼주면 됩니다. 9는 IX입니다. 내 코드 function romanToNum(s) { let result = []; let total = 0; for (let i=0; i { return a.. 2020. 9. 8.
React 6 - Props & 이벤트 Props props는 property라는 뜻으로 컴포넌트의 속성값을 뜻하며, 부모 컴포넌트로부터 전달받는 데이터를 가지고 있는 객체입니다. 리액트에서는 이 props를 통해서 부모 컴포넌트로부터 자식 컴포너트에게 state 값, event handler를 넘겨줄 수 있습니다. Props 객체 // Parent.js import React from 'react'; import Children from '../pages/Children/Children'; class Parent extends React.Component { constructor() { super(); this.state = { color: 'red' }; } render() { return ( Parent Component ); } } e.. 2020. 9. 7.
wecode +20 (9/6) 배운 것/개발한 것/정리한 것 - 어제 : Array.filter 기능 사용하여 댓글 삭제 기능 구현 // 클래스 내 함수 { removeComment = (commentId) => { // this.state.comments를 불러온다 const {comments} = this.state; //filter를 사용하여 인자로 받은,지우려는 commentId가 아닌 댓글들만 filteredComments 변수에 저장한다. const filteredComments = comments.filter((comment) => { comment.id != commentId; }) // filteredComments로 setState 해준다. this.setState({ comments : filteredComment.. 2020. 9. 7.
wecode +18 (9/4) 배운 것/개발한 것/정리한 것 - 오전 : code Kata Day5 (완료) 1. 문제 : strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요. 2. 내 코드 const getPrefix = strs => { if (strs.length === 0) return ''; //sort 기능을 사용하여 알파벳 순서로 배열을 정렬하고, 정렬된 배열의 첫 단어와 끝 단어만 비교한다. let result =''; let newArr = strs.sort(); //정렬된 배열을 돌면서, 첫 단어와 끝 단어의 요소들이 같을 경우 result 변수에 넣어준다. for (let i=0; i git commit -> git push origin "브랜치명" : 변경 사항을 추적하고 커밋 후 .. 2020. 9. 5.

티스토리툴바