두번째 팀 프로젝트가 끝났다. 1차 때 아쉬웠던 점들과 배웠던 점들을 잊지 않고 챙기려고 노력했다. 확실히 두번째 프로젝트인 덕인지 첫번째보다는 우여곡절이 적었다. 어디까지나 첫번째보다'는'22퍼센트 전체 시연 영상 네비게이션 바css 작업 전반로그인 전, 후 노출되는

19일부터 2차 프로젝트를 시작했다. 이번에도 백, 프론트 각 3씩 총 6명으로 팀을 이뤘다. 이번에 클론할 사이트는 P2P 대출 사이트 8퍼센트이다. 사실 내가 8퍼센트를 하게 될 줄 모르고 사이트만 슬쩍 봤을 때는 직방이나 다방 같은 부동산 관련 사이트인 줄 알았는

아래의 아이콘 세 개는 내가 css를 처음 배울 무렵에 연습 삼아 만들어봤었던 것들이다. 어디선가 css만으로도 아이콘을 만들 수 있다는 말을 듣고 무작정 해봤는데 걱정과는 달리 정말 뚝딱뚝딱 만들어졌다. 아마도 나는 이때 처음으로 css가 생각보다 똑똑하다는 생각을

웹과 앱이 어쩌고저쩌고 하는 시대에 살면서도 개발이란 단어는 내 일상과는 전혀 동떨어져 있는 것이었다. 그도 그럴 것이, 독서를 즐기는 가정의 막내로 태어난 나는 사춘기 내내 옆구리에 책을 끼고 다니면서 미술 공부를 하다가 영문학과에 진학했다. 그러니 이공계와 관련

드디어 2주 동안 달려온 팀 프로젝트가 막을 내렸다. 첫 팀 프로젝트여서 아쉬운 점도 많이 남았지만 배운 점이 정말 많았던 귀중한 시간이다.싸우지망고 전체 시연영상처음에는 트렐로만을 이용해 일정과 태스크 관리를 했었는데 프로젝트를 진행하다 보니 기록해야 할 사항들이 많

이번 프로젝트를 진행하며 서버와 통신 과정에서 처음으로 쿼리스트링을 사용해보았다. 쿼리스트링은 요청하는 데이터에 대한 정보를 담고 있기 때문에 페이지네이션 등에 굉장히 유용하게 활용이 가능하다. 처음에는 페이지네이션을 위해 쿼리스트링을 활용하면 편하겠다는 생각만 했지

kakao Developers카카오가 제공하는 api를 이용하기 위해서는 우선 카카오 개발자 사이트에서 앱 키를 발급받아야 한다. 회원가입 후 프로젝트를 등록하기만 하면 간단하게 발급받을 수 있다.앱 키를 발급받았다면 오른쪽 상단 내 애플리케이션 메뉴에서 발급받은 앱

모든 슬라이드의 기본 동작 원리는 동일하다. 브라우저에 보이는 슬라이드의 큰 틀이 있고 그 내부에 슬라이드의 컨텐츠들이 들어있다. 이때 슬라이드 컨텐츠 전체의 길이는 당연히 한번에 보이는 틀의 길이보다 길어지게 된다. 틀 부분에 css로 overflow: hidden

상세 페이지 필수 구현 사항상단 이미지 슬라이드매장 상세 정보지도 api 리뷰 작성리뷰 삭제리뷰 수정리뷰 10개 단위로 끊어서 더보기 가고싶다(wishlist) 기능총 프로젝트 기간인 2주 중 1주차가 끝난 오늘을 기준으로 6번을 제외하고는 기능 구현이 완료되었다. 하

이번 주 월요일부터(7/5) 백과 프론트 각 3명씩 총 6명으로 팀을 이뤄 망고플레이트 클론코딩 프로젝트를 시작했다. 팀 프로젝트를 진행하는 기간동안 원활한 의사소통으로 다툼없이 협력하고 싶은 마음을 담아 '싸우지망고'라는 귀여운 팀명도 붙여주었다. 프론트는 React

댓글 삭제는 훨씬 수월했다. 댓글 생성 과정에서 많은 부분을 수정한 덕이 크다고 생각한다. DELETE 요청을 보낼 때는 삭제할 요소의 id값이 필요해 fetch 요청을 보내는 주소의 제일 뒷 부분에 id 값을 추가해 보냈다. 또, DELETE는 body부분이 필요하지

fetch로 댓글 생성 및 삭제 사용자에게 받은 input을 서버에 넘겨서 화면을 재렌더링하고, 사용자가 댓글을 삭제하면 서버의 데이터를 삭제해

오늘 서버와 통신을 통해 회원가입 및 로그인 과정을 진행해보았다. 오픈된 API를 사용할 때는 데이터를 받아오면서도 통신을 하고 있다는 게 와닿지 않았었다. 그런데 서버 화면을 같이 보면서 데이터를 요청해보니 통신이 이루어지는 과정을 명확하게 이해할 수 있었다. 로그인

map()함수와 key props map()함수는 React에서 특정 컴포넌트를 원하는 횟수만큼 생성시키기 위해 굉장히 자주 사용된다. React에서 자주 사용하지만 map()함수 자체는 React의 특별한 기능이 아닌 순수 JS메서드이다. Array.prototype

Routing Routing은 경로(url)에 따라 다른 화면을 보여주는 것으로 한 개의 페이지(html)로 이루어진 SPA에서 여러 화면을 보여주고 싶다면 Routing은 필수이다.

리액트의 데이터 관리 props(properties)와 state는 둘 다 일반 JS 객체이며, 리액트 내에서 데이터를 관리하기 위해 사용된다. props props는 부모 컴포넌트에서 자식 컴포넌트로 전달 가능. 일방향적인 상속 자식 컴포넌트는 props를 받아오기

JSX란 JavaScript와 XML을 합쳐서 만든 단어로 React에서 사용되는 JavaScript 확장 구문이다. <span style="color: JSX는 위처럼 JavaScript와 HTML이 합쳐진 것처럼 생겼다. 위의 코드에서 return 내부에 들어

Virtual DOM이란 문자 그대로 가상의 DOM을 뜻하며, React의 핵심 원리이다.<span style="color: 동적인 웹에서는 사용자의 요청이나 조건 등에 따라 사용자가 보게 될 뷰(view)를 변경해주어야 한다. 그런데 이렇게 특정 부분의 뷰를 변

Hoisting (호이스팅) hoisting이란 '끌어올리다'라는 뜻의 hoist에 ing를 붙여 만든 개념으로, 자바스크립트가 실행될 때 현재 실행되는 컨텍스트와 관련된 코드의 식별자 정보들이 우선적으로 수집되는 과정이다. hoisting을 변수 및 함수 선언이 작

DOM(Document Object Model)은 그대로 번역해서 문서 객체 모델이라고 부르기도 한다. '문서 객체 모델'에서 사용된 문서는 우리가 작성하는 html파일을 뜻한다. 즉, DOM은 우리가 작성한 html을 객체화하여 JavaScript가 이용할 수 있도록