nevertheless🍄

아주 바쁜 나날을 보내고 있다. 아주아주 바쁘고 빡세지만 또 그만큼 엄청난 성취감과 재미로 가득찬 하루들이다! 우아한테크캠프 2주차 미션은 vanilla js 으로 '투두 리스트 구현하기' 였다. ( 우리가 가볍게 생각하는 그 투두 리스트(?)가 아닌 트렐로, 지라 등 협업 도구에서 사용하는 칸반 보드 형태의 투두 리스트 였다 ㅎㅎ..🙄 ) 우리 팀은 프로젝트에 web component를 도입하였고, 이 경험은 우리에게 새로운 도전이였기 때문에 그 과정에서 겪었던 문제들과 배운점들을 기록하고자 한다. web component 란? 웹 구성 요소는 코드의 나머지 부분에서 캡슐화된 기능을 사용하여 재사용 가능한 사용자 지정 요소를 만들고 웹 앱에서 활용할 수 있도록 하는 다양한 기술 모음 - mdn mdn ..

프로젝트 동기 이 프로젝트가 지뢰찾기여야 하는 큰 이유는 없다. mobx를 써보는 것에 큰 의미를 둔 프로젝트였다. 기본적인 기능은 구현이 완료되었고 앞으로는 추가적인 기능, 버그 수정을 진행할 예정이다. stack🔗 CRA-typescript eslint prettier styled-component mobx 지뢰찾기를 만들기로 했다면, 이런 게임 구현이 익숙하지 않을 때 막막할 수 있다. 바로 코드를 보고 따라 하는 것도 좋지만 직접 생각해보며 구현해보고 싶은 사람은 내가 구현하면서 생각한 순서를 작성했으니 가이드가 필요하다면 참고하시길!🙏🏼 지뢰찾기 구현 가이드 matrix 형태의 게임 보드를 만든다. ( 나는 8x8 로 세팅했다. Array의 내장 메서드인 from() 과 fill()을 사용했다...

책을 중간까지 읽고서 개인적으로 기록 하고 싶은 부분들은 정리했었다. 그 뒤로 금방 다 읽을 수 있을거라 생각했는데, 차분한 상태에서 하나하나 소화하고 싶었던 마음이라 좀 오래 걸렸다. (나의 상황이 안정될 때만을 기다렸다-!) TMI👻 +내가 좋아하는 동네 중 한 곳인 후암동의 오르소 에스프레소바에서 나머지 부분을 읽었다. 개인적으로 좋았던 부분들💫 신뢰 자산이 높은 조직은 커뮤니케이션 효율이나 생산성이 높다신뢰를 쌓는 방법들 -> 투명성과 공유, 인터랙션 작업물 = 나 가 되는 순간 피드백은 나에 대한 공격이 될 수 있다. -> 복수 작업물 공유 복수 공유는 신뢰도 높아지고 성과도 더 좋았다. 자신이 한 작업물을 투명하게 서로 공유하고 그에 대해 피드백을 주고받으며 인터랙션 하는 것 신뢰자산이 높다는..

객체에선 key를 이용해 프로퍼티를 쉽게 찾을 수 있는데, 두 가지 방법이 있다. Dot notation ( 점 표기법 )과 Square-Bracket notation( 대괄호 표기법 ) 점 표기법 const user = { name : '빌라갱', gender: '🚺', 'favorite food' : '🍕' //복수의 단어는 따옴표로 묶어줘야 함 } alert(user.name) // 빌라갱 위와 같이 점 표기법을 이용해서 name이라는 key로 해당 프로퍼티를 읽어왔다. 하지만 'favorite food'와 같이 여러 단어를 조합해 프로퍼티 key를 만든 경우 점 표기법으로 프로퍼티를 읽을 수 없다. user.favorite food = '🍗' //❎ 자바스크립트는 위와 같은 코드를 이해하지 못한다..

정기 배포가 나가야 하는데 빌드중에 eslint 에러로 멈춘 적이 있다. 해당 파일은 tsx 이고, 점 표기법으로 객체를 조회하는 부분에서 나는 에러였다. 해당 에러를 수정한 PR을 코드 리뷰하며 처음에서는 객체 조회 형식 간의 차이 때문인가? 싶었는데 찾아보니 타입스크립트에서 객체를 조회할 때의 문제였다. 위 코드를 보면 target.childNodes를 복사하여 내부 배열을 순회한다. 이때 각 배열에는 객체가 들어있는데 이 객체를 가리키는게 cur이다. 하지만 cur에 대한 어떠한 타입 정의도 되어있지 않다. 타입스크립트에서는 객체에 대한 타입 정의를 type 또는 interface를 통해서 제공하는데 타입이 명시되어 있지 않은 경우 점 표기법을 통해 객체를 조회하면 에러를 뿜는다. 바닐라 자바스크립..

주말에 유튜브 개발바닥에서 현재 우아한형제들에서 개발 팀장을 맡고 계신 김영한님이 나온 영상을 봤다. 총 3편까지? 있었던거 같은데 워낙 재미있는 내용이라 쉬지 않고 본 것 같다. 마지막 즈음에 책을 하나 추천해주셨는데 '함께 자라기_애자일로 가는 길' 이라는 책이다. 아직 다 읽지는 못했지만 그 전에 느끼고 생각한 것들을 정리하려고 한다. 개인적으로 좋았던 부분들💫 피드백은 짧은 주기로 학습에서는 피드백이 중요하다. 잘했는지 못 했는지를 알지 못하면 조정할 수 없기 때문이다. 그런데 피드백 만큼 피드백의 시점도 중요하다. 예를 들어 골프 퍼팅 연습을 한다고 해보자. 공을 치기만 하고 공이 홀에 들어간 결과를 1주일 뒤에 알려준다면? 나의 스윙 자세에 대한 피드백을 한 달 뒤에 알려준다면? 극단적인 예라..

SPA 의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. 다른 주소에 따라 다른 화면을 보여주는 것을 라우팅이라고 한다. 리액트 자체에 이 기능이 내장되어 있지는 않지만, 브라우저 API를 직접 사용하여 이를 관리하거나, 라이브러리를 사용하여 이 작업을 더욱 쉽게 구현할 수 있다. 리액트 라우팅 라이브러리는 리액트 라우터 ( react-router ), 리치 라우터 (reach-router), Next.js 등 여러가지가 있다. 그 중 우리는 리액트 라우터에 대해 다뤄보자. 리액트 라우터는 클라이언트 사이드에서 이루어지는 라우팅을 아주 간단한게 구현할 수 있도록 한다. 더 나아가 나..