분류 전체보기

TIL] 2022/10/07

아침에 일어나 공부방에 오늘 할 일들의 우선순위를 정하며 공부방에 갈 준비를 했습니다. 공부방에 도착 후, 티켓을 확인했습니다. 제가 작업할 티켓을 정하는 시간을 갖고 기수 오픈 알림 신청 요청 성공 여부에 관한 작업을 진행했는데 코드를 바로 짜는 것이 아닌 이 작업의 의도를 파악한 후, 코드를 설계하는 시간을 가졌습니다. 이 코드를 사용하는 부분을 생각하고 코드를 설계하는 시간을 가지다 보니 어느덧, 점심시간이 되었습니다. 점심을 먹은 후, 설계한 코드를 구현하기 시작했고 확실히 설계를 하고 코드를 작성하다 보니 코드를 작성하는 게 수월했습니다. 코드를 전부 작성 후, 테스트 코드를 작성하고 테스트를 통과한 뒤, Pull Request를 했고 코드 리뷰를 받았고 코드 리뷰의 주된 내용은 함수명이 불분명..

TIL] 2022/10/06

아침에 일어나 늦잠을 잤다는 것을 바로 체감했습니다. 정신없이 공부방에 갈 준비를 마친 뒤, 공부방으로 가는 길에 오늘 해야 할 일들을 머릿속에서 정리했습니다. 점심을 먹은 후, 스프린트를 진행했습니다. 스프린트에서 나온 주된 내용은 현재 중요한 부분을 집중해야 한다는 것이었고 현재 중요한 부분은 배너를 만들고 배너를 통해 새로운 페이지를 진입하는 것이었습니다. 따라서, 기존에 영후님이 배너를 혼자 담당하셨는데 제가 함께 붙어서 배너 작업을 진행하기로 결정됐습니다. 스프린트가 끝난 후에 프론트엔드 팀만 따로 모여서 회의를 진행했는데 회의의 주제는 스터디와 업무 분배였습니다. 매일 정기적으로 모던 자바스크립트 튜토리얼 스터디를 진행하기로 결정됐고 티켓을 기능단위로 세분화하여 한 사람당, 한 티켓만 진행하기..

React] JSX란

JSX const elemnt = Hello, world!위의 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하여 JavaScript를 확장한 문법입니다. JSX는 JavaScript의 모든 기능이 포함되어 있습니다. JSX란? React에서는 렌더링 로직이 UI로직과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. UI로직 이벤트가 처리되는 방식,시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 JSX에 표현식 포함하기 아래 예시에서는 name이라는 변수를 선언 후 중괄호로 감싸 JSX안에 사용하였습니다. c..

TIL]2022/10/05

아침에 늦지 않게 일어났지만 어제 조금 빨리 잤더라면 피곤하지 않았을 텐데 피로감이 확 몰려왔습니다. 준비를 하며 오늘 해야 할 일들을 정리하는 시간을 가졌습니다. 어제 조금 빨리 잤더라면 피곤하지 않았을 텐데 공부방에 도착 후, 어제 만든 amplitude 관련 함수들에 대한 pull Request를 올린 후 피드백을 기다리며 다른 분들의 코드를 리뷰했습니다. 다른 분들의 코드를 볼 때면, 나는 왜 이런 생각을 못했을까?라는 생각이 드는 것 같습니다. 또한, 피드백을 어떻게 드려야 할지... 내가 맞는 걸까?라는 생각에 확신이 서질 않아 리뷰를 하는 게 어려운 것 같습니다. 그렇게 리뷰를 하다가 제 코드의 피드백을 받았는데 amplitude는 util보다 service에 가까운 것 같다는 피드백을 받고..

TIL] 2022/10/04

아침에 상쾌하게 일어났습니다. 오늘 해야 할 일을 머릿속으로 정리를 하며 준비를 하고 버스를 안탔으면 안 늦었을 텐데... 버스 시간에 맞춰나가 버스를 탑승하였습니다. 버스를 안 탔으면 안 늦었을 텐데... 내일부터는 꼭 지하철을 타야겠다는 다짐을 하게 되었습니다... 공부방에 도착 후, 데일리 스크럼을 진행했습니다. 데일리 스크럼을 진행하며 현재 제가 팀에 기여를 제대로 하고 있나?라는 생각이 들었고 앞으로는 항상 현재 맡은 티켓을 완료한 뒤, 중요한 것이 무엇인지 생각할 예정입니다. 우선 트래킹이 정상적으로 동작 하나 트래킹 하는 부분을 어떻게 하면 더 잘할 수 있을까 집중하다 보니 중요한 것을 놓치고 있었다는 생각이 들었습니다. 데일리 스크럼이 끝난 후, 기능 작업을 하는 민석 님에게 제가 도울 일..

TIL]2022/10/03

아침에 일어나 씻고 다음주에 이사를 가야하기 때문에 짐을 정리하기 시작했습니다. 안입는 옷, 버려야 할 물건들을 정리하는 시간을 가졌습니다. 정리해야할 물건들을 정리하고 청소를 하다보니 어느덧 저녁 여덟시가 되었습니다. 저녁 여덟시가 되어서야 책상에 앉을 수 있었고 emotion을 복습하며 정리하는 시간을 가졌습니다. 어제emotion을 공부한 내용을 복습하다보니 확실히 이해가 더 잘되는 느낌을 받았고 Best Practices를 한번 더 보며 emotion을 프로젝트에 적용할 때, 어떠한 상황에서 어떻게 적용해야 emotion의 취지에 맞게 사용하는 건지 한번 더 생각하게 되었습니다. emotion에 대해서는 한번 글을 정리해서 블로그에 포스팅 할 예정입니다! emotion복습을 한 후, 프로젝트에 A..

TIL]2022/10/02

아침에 일어나 간단히 씻은 후 집안일을 시작했습니다. 집안일이 끝나고나니 어느덧 한시가 되었습니다. 한시가 되서야 책상에 앉아 어제 emotion 공식문서 공부가 끝났으면 좋았을텐데 어제 끝내지 못한 emotion 공식문서를 통한 공부를 진행했습니다. 어제 emotion 공식문서 공부가 끝났으면 좋았을텐데.. 오늘 emotion 공식문서를 공부하며 느낀 것은 반응형을 emotion과 facepaint를 활용해 더욱 간결하게 작업할 수 있다는 것을 느꼈고 반응형을 할 때, 사용해야겠다는 생각이 들었습니다. 또한, 중첩 선택을 할 때 주로 자식 컴포넌트를 중첩 선택하여 스타일링을 하였는데 부모 컴포넌트도 중첩 선택이 가능하단 것을 보고 제가 emotion을 잘 사용하지 못했었구나를 느꼈습니다. 위의 부분을 ..

TIL]2022/10/01

아침에 일어나 씻고 집안일을 했습니다. 집안일을 하며 오늘 해야할 일들의 우선순위를 정했습니다. 점심을 먹은 후 이모션 공식문서를 토대로 공부를 진행했습니다. 역시 공식문서는 중요한 것 같습니다. 이모션을 공부하면서 느낀점은 emotion에 기능이 많다는 것을 느꼈고 잘 알지 못하고 사용하는 부분이 많았다는 것을 느꼈습니다. 역시 공식문서는 중요한 것 같습니다. 기존에 잘 알지 못해서 사용하던 방식만 고수하여 사용했던 것 같습니다. 공식문서를 읽다가 emotion을 사용할 때, jsx 버전에 따라 설정하는 부분이 달라 이 부분이 궁금하여 리액트 공식문서를 공부했습니다. 리액트 공식문서를 읽고 정리하며 이 부분은 포스팅하는 것이 좋을 것 같다는 생각이 들어 블로그에 글을 작성했습니다. 잠시 휴식 후, Ne..

리액트 17버전 이상부터 React를 import 하지 않아도 되는 이유

JSX Transform은 무엇인가? 브라우저는 JSX를 알아듣지 못하기 때문에 대부분의 리액트 사용자는 바벨 또는 타입스크립트와 같은 컴파일러에 의존하여 JSX 코드를 일반 자바스크립트로 변환합니다. CRA 또는 Next.js와 같은 사전 구성된 많은 설정에는 JSX Transform도 포함되어 있습니다. JSX Transform의 달라진 점은? JSX를 사용할 때, 브라우저가 리액트 함수를 이해하도록 컴파일러가 transform 해줍니다. 이전 JSX Transform은 JSX를 React.createElement(...)호출로 변경였습니다. import React from 'react'; function App() { return Hello World; } 이전 JSX버전에서 JS로 변경하는 것은 ..

TIL]2022/09/30

아침에 일어나 늦었음을 인지하고 아침에 늦게 일어나지 않았더라면 하루의 계획을 세우며 느긋하게 준비할 수 있었을 텐데… 아무 생각도 하지 못하고 급하게 공부방에 갈 준비를 했습니다. 아침에 늦게 일어나지 않았더라면.. 공부방에 도착해 짐을 풀고 PR이 올라온 것이 있어 코드 리뷰를 하는데 어떻게 리뷰를 달아야 할지 감이 오질 않았지만 코드를 천천히 살펴보며 이해하기 어려운 부분이 없는지 확인했는데 살짝 이해하기 어려운 부분이 있어 그 부분에 대한 코멘트를 달았습니다. 코드 리뷰를 한 후에는 해야 할 일 티켓을 만드는 작업을 진행했는데 어떤 식으로 티켓을 나눌지 상의하다 나온 결론은 컴포넌트 별로 티켓을 나누면 티켓의 양이 너무 많아지니 페이지 별로 티켓을 나누어 e2e테스트 및 단위 테스트 작업을 진행하..