본문 바로가기

전체 글

첫 사이드프로젝트 그리고 새로운 내용들 1. styled-components 사이드프로젝트를 하며 styled-components를 써보게 되었다. css파일을 따로 분리하지 않고 js나 jsx 파일내에 스타일을 한 눈에 볼 수 있는 점이 편리하다. 이름처럼 컴포넌트로 구분해 각 컴포넌트에 스타일을 줄 수 있다. 2. atomic design 5 단계로 나누어진 atomic design의 atoms > molecules > organisms > templates > pages 를 리컴포넌트 기반의 리액트에 적용시켜보았다. 제대로 사용하고 있는지는 잘 모르겠지만, 재사용 여부를 염두해두며 나누어보았다. 더 나은 사용법을 위해 이 글을 참고해봐야겠다. 3. gathertown 매우 재밌게 생긴 공간이다. 가상의 회의실들이 있고, 그 자리에 모여있.. 더보기
console.warn() 반 년 가까이 자바스크립트를 배우며 console.log()와 console.error()는 써봤지만, console.warn()은 오늘 처음 봤다. According to MDN definition, console.warn() "outputs a warning message to the Web console." error()와 비슷하게 쓰이는것 같다. 더보기
Chapter 2 보호되어 있는 글입니다. 더보기
눈오는 밤 보호되어 있는 글입니다. 더보기
오늘의 문제.. github Github엔 다같이 공동작업을 하는 remote repository와 그로부터 fork해서 만든 local repository가 있다. 각 repository는 여러 branch(버전)를 만들어 관리를 할 수 있는데, 보통 master(default) 브랜치는 배포용으로 사용된다. 따라서 "배포용"과 "개발용"을 분리하기 위해 development의 줄임말로 dev브랜치를 만들어 사용했다. 보통 이렇게 사용하는건지 확실하지 않아 경험 위주로 기록해본다. 팀 프로젝트에서 remote repository의 master branch는 주로 배포용으로 사용되기 때문에, local repository에서 merge를 위해 pull request를 날릴 땐, dev branch를 사용했다. 더보기
안되는 코드 useState 버튼 온스크롤에 사라지게 하려고 했던 건데.. const [isScrolling, setIsScrolling] = useState(false); const onScroll = () => { const timeout = setTimeout(() => { setIsScrolling(current => !current); }, 200) setIsScrolling(true); clearTimeout(timeout); } useEffect(() => { window.addEventListener("scroll", onScroll); }) 더보기
D-15 안녕~ 합치다 튕겨져 나간 나의 코드들아 안녕~ 랜딩 페이지가 이렇게 비워져 돌아왔다....... 이것은 머지가 아니라 대체 작업이라 볼 수 있겠다. 시간이 얼마 없기 때문에 일단 빨리 내 할일부터 마쳐야한다!! 내가 할게 아직 남아있는게 다행이라고 생각하고... 할많하않.. 더보기
D-15 코드 합치기 + 배포하는 날! (5시간도 채 안남았다) 오늘까지가 기능구현을 완료하기로 한 날이기때문에, 이따 배포 시간까지 기능 구현이 다 안된 기능들은 과감하게 없애기로 했다. 아마 내가 지난 일주일동안 본 즐겨찾기 페이지도 날라갈지 모른다. 만지면서, 차라리 이번 배포때 제거될 페이지면 차라리 다른 페이지를 만져볼까하는 유혹도 들지만, 아직까지 프로젝트도 배우는 과정의 일부라는 생각이 더 강하다. 그래서 실패도 의미있는 경험이 될 것 같다. 그 동안 좀 더 여유있게 공부해온 지난 날의 댓가가 꽤나 혹독하다. 프로젝트엔 좀 더 준비가 돼서 왔어야했는데, 그러지 못했다. 적어도 이번 프로젝트를 통해 리덕스의 필요성을 느꼈고, 리액트도 더 복습해야겠다는 "lesson"을 얻었으니 이로 만족하려고 한다. 부끄럽지만, 여전히 state와 lifecycle에 대한.. 더보기