초보 개발자의 성장 일기

캐로셀이라는 의미를 안지는 사실 얼마 되지 않았다. 에버랜드에서 오랫동안 아르바이트를 했는데 마침 일을 했던 곳이 회전목마랑 같은 구역이었다. 에버랜드에서는 회전목마를 로얄쥬빌리캐로셀이라고 불려서 회전목마인가.. 했는데 그 뜻이 맞았다. 회전목마처럼 데이터를 옆으로 보여주는것을 캐로셀이라고 부르는 것이었다. 라이브러리를 사용하면 간편하지만, 사용하기전에 직접 구현을 해서 어떻게 코드를 짜야하는지 아는게 더 중요한것 같다. 이전에 jquery를 사용해서 이미지 자동 슬라이드 구현을 해 본적이있었다. 이미지를 보여줄 틀을 잡아놓고 그 안에 이미지를 flex로 나열 후 틀을 넘어간 이미지들은 overflow - hidden으로 가려주고 이미지 가로 크기만큼 -마진값을 넣어주어 구현했었다. 리액트로도 비슷하게 ..

1차 프로젝트가 끝나고 약 한달 뒤 자율 주제로 2차 프로젝트가 시작되었다. 1차 프로젝트의 경험 덕분에 2차 프로젝트를 할 때 좀 더 적극적으로 회의를 하고 아이디어도 내보고 기여를 많이 해야겠다는 의욕도 생겼다. 이번 프로젝트를 통해 포트폴리오로 만들고 싶고, 기록을 많이 남겨서 문서화를 꼭 해두고 싶다. 1. 프로젝트 소개 프로젝트의 주제를 정하였지만 오피스아워로 코치님의 피드백을 받고 나니, 다른 팀과 차별화된 기능이 없다고 느껴져서 다시 모여 프로젝트의 주제에 대해서 생각해보고, 브레인 스토밍을 해 보았지만 꽂히는 아이디어가 없어서 마무리 하고 내일 아침 스크럼 시간까지 다시 생각해보고 정하기로 하였다. 1-1. 진행기간 2023년 12월 11일 ~ 2023년 12월 29일 1-2. 팀원 포지..

Grid Flex와 비슷하지만 행과, 열 2차원 레이아웃을 담당한다. display: flex; grid-template-columns: 398px, 398px, 398px; grid-column-gap: 19px; grid-row-gap: 32px; grid-template-columns는 세로로 몇개를 둘지, 한 개당 각각 column의 가로의 길이를 어떻게 설정할지 결정한다. grid-column-gap은 각 아이템 사이 세로(열) 간격을 설정한다. grid-column-gap은 각 아이템 사이 가로(행) 간격을 설정한다. grid-template-columns: repeat(3, 398px); repeat을 사용해서 398px을 3번 반복하도록 간결하게 나타낼 수 있다. 같은 컴포넌트가 반복이 되..

CSS Module class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없다. 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능하다. 스타일링 직접 하나하나 해야 한다. UI framework (ex. Ant Design, Material UI) 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋다. 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다. 해당 framework의 디자인철학을 벗어나기 쉽지 않다. 컴포넌트들을 커스터마이징 하기 어렵다. import "antd/dist/antd.css"; import { Button } from "antd"; export default function App() { r..

코드 테스트가 필요한 경우 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 한다. 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 한다. 코드를 리팩토링하면, 원래대로 동작하는지 테스트한다. 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아진다. 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있다. 언급한 상황들에 대한 테스팅 코드를 작성하여, 미연의 에러를 방지한다. TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상시킨다. 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 된다. 테스트가 용이하게 코드를 작성하여, 코드 품질과 신뢰성을 높인다. 코드가 영향을 미치는 ..

Redux 앱 전체 상태를 쉽게 관리하기 위한 라이브러리이다. Redux의 많은 개념들이 Flux pattern에서 차용된다. 주로 React 앱과 같이 사용한다. 앱 전체의 상태 관리가 필요할 때 사용한다. 복잡한 비동기 처리가 있는 상태 관리가 필요할 때 사용한다. 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때 사용한다. 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을 때 사용한다. logger, devtool 등을 활용하여 상태를 관리할 필요가 있을 때 사용한다. 핵심 원칙 Single source of truth - Store는 단 하나이며, 모든 앱의 상태는 이곳에 보관된다. Immutability – 상태는 오로지 읽을수만 있다. 변경하려면 모든 상태가 변경되어야 한다. P..

상태관리 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것이다. 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포한다. SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리한다. 그 외의 데이터는 Client만의 데이터로 유지한다. 상태 기술 상태가 많지 않거나, 유저와의 인터렉션이 많지 않다면 매 작업 시 서버와 동기화하더라도 충분하다. 하지만 앱이 사용하는 데이터가 점점 많아지고, 유저와의 인터렉션 시 임시로 저장하는 데이터가 많아지는 경우 상태 관리를 고려해야한다. 프론트엔드 뿐만 아니라, 백엔드와의 데이터 통신도 충분히 고려해야 한다. (ex. GraphQL) 높은 품질의 코드를 작성하는 데 유..

동기(synchronous) 해당 코드 블록을 실행할 때 thread의 제어권을 넘기지 않고 순서대로 실행하는 것을 의미한다. console.log("This is synchronous...") for (let i = 0; i < 1000000000; ++i) { console.log("I am blocking the main thread...") } console.log("This is synchronous...DONE!") 비동기(asynchronous) 코드의 순서와 다르게 실행된다. 비동기 처리 코드를 감싼 블록은 task queue에 넣어지며 main thread가 동기 코드를 실행한 후에 제어권이 돌아왔을 때 이벤트 루프가 task queue에 넣어진 비동기 코드를 실행한다. setTimeou..

SPA SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식으로 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낀다. 리액트는 SPA 방식이다. React Router를 통한 SPA 내 화면 전환 및 주소 값 변경은 서버가 아니라 클라이언트 측에서 일어나기 때문에 Client-Side Routing이라고 한다. Client-side routing 기술을 활용, 페이지 진입 시 리로드없이 라우팅한다. AJAX 기술을 활용, 페이지 이동 시 서버에 데이터만 요청하여 자바스크립트로 페이지를 만든다. MPA와 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현한다. 자바스크립트만을 활용해 전체 ..

CSS import CSS(혹은SCSS, Sass) 파일을 import 해서 사용한다. 필요한 모든 CSS스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리가 가능하다. 단순히 CSS 파일만을 import 하여 사용할 수 있어 편리하다. 컴포넌트가 많지 않을 경우, 하나의 CSS 파일에 코드를 관리하는 것도 가능하다. CSS파일은 분리할 수 있으나, namespace를 나눌 수 없다. 스타일이 겹칠 경우 cascading rule에 따라, 마지막에 나온 룰이 덮어 씌워진다. Button.JS import'button.css' functionButton({children}) { return( {children} ) } Button.CSS .button { background-color: ora..