드디어 42서울의 이너서클의 마지막 과제에 도달했다. 이번에는 과제 완료 후 정리해서 쓰는것이 아닌, 부분적으로 새로 배운 것이나 적용해본 것들을 위주로 글을 써볼까 싶다. 먼저, 우리 팀은 7월 초부터 프로젝트를 시작했다. 웹 프로젝트를 어떻게 시작해야하는지 모르겠어서 주변 사람들에게 도움을 좀 받았었다. 고맙게도 여러 조언들을 들을 수 있었고, 그 중에서도 여러 사람들이 공통적으로 조언을 했던 부분은 "설계"였다. 설계를 잘 하자 설계를 잘 하자는 말은 사실 42서울 과제를 하다보면 매번 듣는 말이었다. 하지만 개인 과제를 할 때는 뭔가 "하다보면 답이 나오겠지" 라는 생각으로 설계를 조금 소홀히 했었다. 그래서 막상 과제를 끝내고 코드를 다시 보면... ㅎ 점점 상위 과제를 할 수록 팀 프로젝트의 ..
리덕스란? 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 이용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 리덕스는 전역 상태 관리를 지원하며, 단방향 데이터 흐름을 따른다. 이는 애플리케이션에서 상태를 변경할 때, 컴포넌트에서 발생한 이벤트가 아닌, 액션(Action)을 발생시켜 상태를 변경한다. 액션은 일종의 객체이며, 해당 객체는 상태를 변경하는 데 필요한 정보를 가지고 있다. 예를 들어, 사용자가 로그인하는 경우, 로그인 액션은 사용자 정보를 가진 객체를 생성한다. 액션을 생성한 후, 이를 리듀서(R..
비동기란? 자바스크립트에서 비동기 작업은 특정 작업을 수행하고 결과를 반환하기 전에 다른 작업을 수행할 수 있는 방법이다. 이를 통해 애플리케이션의 반응성을 높일 수 있다. 예를 들어, 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 Ajax 기법을 사용해 서버의 API를 호출함으로써 데이터를 수신한다. 이렇게 서버의 API를 사용해야할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 이 과정에서 해당 작업을 비동기적으로 처리하게 된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지상태가 되어야 하기 때문에 다른 작업을 할 수 없다. 하지만 이를 비동기적으로 처리한다면 웹 ..
리액트 웹에서 자바스크립트의 역할이 증대함에 따라, 자바스크립트 개발을 위한 수많은 프레임워크가 개발되었다. Angular, Backbone.js, Derby.js, Vue.js 등의 프레임워크들은 주로 모델과 뷰로 이루어져 있다. 모델 : 애플리케이션에서 사용하는 데이터를 관리하는 영역 뷰 : 사용자에게 보이는 부분 이런 구조는 사용자에게서 어떤 작업등을 받으면 모델을 수정하고 변경된 사항을 뷰에 반영하도록 설계된다. 이로인한 단점은 애플리케이션 규모가 커지게 되면 상당히 복잡해지고 관리가 잘 되지 않을 시, 성능도 저하될 수 있다는 점이다. 이런 점을 리액트에서는 데이터가 변할때마다 처음부터 새로 렌더링하는 방식으로 애플리케이션 구조를 간단하게 설계할 수 있도록 만들어주었다. 리액트 이해 리액트는 자..
들어가며 새로 시작한 프로젝트에서 프론트엔드는 타입스크립트로의 개발이 확정되었다. 타입스크립트를 한번도 사용해보지 않았던지라, 레퍼런스를 빠르게 훑고 넘어가는 시간을 가지기로 했다. 그나마 자바스크립트를 약간 경험해봐서 둘의 차이를 위주로 알아가는것이 좋아보였다. 타입스크립트 레퍼런스를 참고했다. Documentation - TypeScript for the New Programmer Learn TypeScript from scratch www.typescriptlang.org Why typescript? 자바스크립트가 스크립팅언어로써 웹 브라우저 상에서 엄청난 존재감을 드러내고 있다는 것은 이제 더이상 놀랄 일이 아니다. 자바스크립트는 브라우저의 영역을 벗어나 서버를 구축하는데도 사용할 정도로 매우 유..
이번주 과제는 다리 건너기 게임이다. 이 게임은 다리를 건너는 데, 위, 아래라는 두가지 선택을 통해 다리의 끝에 도달하면 되는 게임이다. 오징어 게임에 나오는 징검다리 게임과 같다. 이번 과제는 기능 구현 목록 문서를 최대한 자세하게 작성하는 것을 목표로 하였다. 기능 구현 목록만 작성하는 것이 아닌, 각 클래스 별 메서드의 의도와 테스트, 구현 과정 등을 상세히 적었다. 과정은 이런식으로 작성해보았다. 저번주 과제랑 이번주 과제의 큰 차이점은 에러를 발생시킨 뒤 다시 입력값을 받도록 하는 부분이었다. 이로 인해 try-catch 구문을 사용해야 했고, 입력값을 받는 메소드가 3개가 있어서 try-catch 구문도 3번을 써야했다. 중복되는 기능을 하나로 합치고자 함수를 하나 더 만들어 사용했고, 다음..
이번주 과제는 로또 게임이다. 로또 게임이란, 사용자에게 구매 금액을 입력받고, 로또를 구매 금액만큼 사서 출력한 뒤, 당첨 번호도 사용자에게 받아 수익률을 계산하는 게임이다. 사용자에게 다시 당첨 번호를 받는게 ... 로또가 맞나 ...? 싶긴 하지만 프로그램이기에 넘어가보자 ! 먼저, 구현할 기능 구현 목록을 작성했다. 기능 구현 목록 구입 금액을 입력받습니다. 금액은 1000원 단위로 입력받아야합니다. 만약 금액이 1000원 단위로 입력이 되지 않았을 경우, throw문을 통해 예외를 발생합니다. 입력받은 금액이 유효하다면, 반복문을 통해 구매 가능한 로또의 수 만큼 중복되지 않는 무작위의 6자리의 값을 배열에 저장합니다. 구매 내역을 출력합니다. 당첨번호를 입력받습니다. 만약 당첨번호가 유효하지 ..
이번 주의 과제는 숫자 야구 게임이다. 숫자 야구 게임이란, 1부터 9까지의 숫자를 3개 골라, 상대방이 고른 숫자를 먼저 맞추는 게임이다. 이번 과제에서는 컴퓨터가 무작위로 숫자를 뽑으면, 사용자가 맞출 수 있도록 만들어야한다. 숫자 야구의 룰은 상대방의 숫자를 맞출 때, 3개의 숫자 모두 맞추지 못하면 '낫싱', 숫자는 포함되지만 위치가 다르면 '볼', 숫자와 위치를 다 맞추면 '스트라이크'로 3스트라이크가 되어야 게임을 끝낼 수 있다. 이번 과제는 1주차의 공통피드백을 충분히 숙지하고 진행하기로 했다. 또한, git_flow 전략을 사용하여 개발하며 커밋메세지 또한 의미있게 작성하려 노력했다. 먼저, 구현할 기능 목록을 작성하였다. 기능 목록을 상세하게 작..
