이 날은 본격적인 3차 팀플에 앞서, 브랜치 관리하는 방법과 React에서 환경변수를 사용하는 방법을 간단하게 배웠다. 벌써 마지막 팀플이라니 시간이 참 빠르다는 생각이 든다. 각설하고 본론으로!🙂Github에서 Default 브랜치 변경하기기본적으로는 메인 브랜치가 디폴트로 되어있는데, 개발 시에 주로 merge하게 되는건 devel 브랜치라서 디폴트 브랜치를 devel로 변경해주면 좋다. 아래 사진처럼 해당 레포의 Settings > General > Default branch에서 변경하면 된다.Github에서 머지된 브랜치 자동으로 삭제하기한번 머지된 브랜치는 더이상 사용하지 않는 경우가 대부분이라, 해당 기능에 대해 개발이 끝났다면 바로 정리해주는게 좋다. 하지만 이걸 일일이 삭제하기엔 번거롭기..

드디어 이번 교육과정 마지막 프로젝트의 공식적인 첫 날이 되었다.팀 구성은 지난 두 번의 프로젝트와 다르게 각자 마음이 맞는 사람들끼리 뭉치라고 해서, 월초에 다른 동기분(지금의 팀장님)의 제안으로 B팀에 합류하게 됐다. 당시에는 팀장님과 나, 다른 동기분까지 셋이었는데 지난주에 3명이 영입되고 수요일에 추가로 1명이 더 영입되어 총 7인으로 팀이 구성되었다.👏 오늘이 프로젝트의 공식적인 첫 날이지만, 개인 사정으로 3분이 출석하지 않아서, 나머지 4명이서 첫번째 기획 회의를 진행했다. 일단 아이템은..가장 초기에 멤버를 모집하는 단계에서 '사주'를 선택했지만 사용 가능한 OPEN API가 부족하고 사주 내용을 목데이터로 직접 작성해야해서 포기하고, 다른 아이템들을 찾다가 '타로'로 결정했는데 이것도 ..

이전 포스팅에 이어서, TS에서의 함수 표현법과 TS를 React에서 사용하는 방법에 대해 기록하려고 한다.✍TS의 함수 선언TS에서는 함수를 어떻게 선언하는지 설명하기에 앞서, JS와 TS의 차이부터 알아야 한다.💡JS는 매개변수를 넘겨주고 호출할 때, 넘겨준 인자만큼 전달하지 않아도 오류가 나지 않는다.TS는 매개변수가 2개면, 호출할 때도 반드시 2개의 파라미터를 전달해야 한다./* JS와 TS의 차이 */// 1. JS의 함수funtion sum (a, b, c){ return a + b + c;}sum(1, 2); // 파라미터가 하나 빠져도 에러 없음// 2. TS의 함수function sum(a:number, b:number, c:number){ return a + b + c;}sum(..

3차 프로젝트 전 마지막 수업 내용은 이름만 익히 알고 있어서 궁금했던 TypeScript였다. 수업 시간에 실제로 사용해보니 상당히 쉽고 직관적인 느낌이었다.TypeScript2012년에 마이크로소프트에 의해 개발된 오픈 소스 프로그래밍 언어. JS로 컴파일되는 JS의 타입이 있는 상위집합으로, '타입이 있는 자바스크립트'라는 의미를 갖고 있다.TypeScript의 특징JS의 기본 문법에 자료형을 체크하는 기능이 추가되어, JS가 자의적으로 데이터 타입을 해석하고 코드를 실행했을 때, 의도와 다른 방식으로 쓰이지 않게 방지한다.정적 파일 언어 - 실행하지 않고도 코드의 에러를 알려준다. (실시간 디버깅)TS는 JS로 변환되어야 브라우저가 해석할 수 있어서 '트랜스파일러(Transpiler)'를 사용해야..

오늘은 React의 상태 관리 라이브러리인 Redux에 대해서 배웠다. 이건 수업 시간에 따라가긴 했는데 제대로 이해하지는 못했어서, 수업에서 실험했던 코드들을 살펴보면서 완전한 내 것으로 만들려고 한다.State의 종류Local State : useState()를 통해 각각의 컴포넌트가 소유하고 있는 상태. 해당 컴포넌트 내에서만 관리되고 사용된다.Cross-Component State : 두 개 이상의 컴포넌트 간에 props를 통해 공유되는 상태.App-Wide State : 애플리케이션의 전체 영역에서 사용되는 상태. 여러 컴포넌트, 혹은 앱의 전체 영역에서 공유해야하는 데이터나 상태에 사용됨.React의 상태관리npm으로 설치해야하는 라이브러리 사용, 또는 React의 기본 기능인 context..

지난 포스팅에 이어서, 이번 포스팅에서는 SASS에 대해 설명하려고 한다.SASSSyntactically Awesome Style Sheets.이전 포스팅에서 잠깐 설명한 것처럼, CSS 전처리기 종류 중 하나로서 기존의 복잡했던 CSS 작업을 보완하여, 스타일링 코드의 재활용성과 가독성을 높여주고 유지/보수도 쉽게 해준다.SASS에는 .sass와 .scss라는 두 가지의 확장자가 존재하고, 아래 사진처럼 작성법이 다르다.sass 확장자는 들여쓰기와 줄바꿈으로 스타일을 정의하고, scss 확장자는 CSS 파일처럼 중괄호와 세미콜론을 사용한다.sass, scss 확장자 모두 변수를 선언할 때는 $ 기호를 앞에 붙여줘야 한다.SASS 기능을 사용하려면 터미널에서 아래 명령어로 설치해야 한다.$ npm ins..

매우 간단한거라 굳이 새로운 포스팅을 하고 싶지는 않았지만, 나 같은 개발자 지망생을 위해..😉가끔 다른 개발자들 github 프로필을 보면, 위 사진처럼 왼쪽 아래 Achievement 라는 영역에 다양한 뱃지가 붙어있는게 멋져보여서 나도 가질 수 있으면 좋겠다고 생각했다. 오늘 문득 뱃지 생각이 나서 구글링을 했더니..상어 뱃지는 2개 이상의 PR을 오픈하면 얻을 수 있고,YOLO는 코드 리뷰 없이 PR을 머지하면 얻을 수 있는 뱃지라는걸 알게 됐다!현재 수강중인 SeSAC 교육과정 중에 프론트엔드 팀 프로젝트를 진행하면서 코드 리뷰 없이 PR을 머지해보기도 했고, 전체 PR 횟수가 16번이라 나도 뱃지 획득 조건을 충족하는 상태였다. 그런데 왜 뱃지가 안 뜨는지 의아했는데, 프로필에서 설정되어있지..

오늘은 React에서 파라미터와 쿼리를 다루는 법, 스타일링하는 법, SASS를 배웠다!👏사실 이번 교육과정 두번째 파트에서 JS 학습 초기에, 리더님이 $ 기호에 대해 설명하며 "React를 배울 때 SASS도 배우게 될 예정"이라고 하셔서 SASS가 뭔지 궁금했었는데, 직접 배워보니 굉장히 편리한 CSS 라이브러리였다.오늘 배운 내용을 여기에 전부 적으면 글이 너무 길어질 것 같아서, 일단 파라미터&쿼리와 스타일링부터 정리해보겠다.React - Parameter & Query파라미터(Parameter)는 주소 뒤에 슬래시로 구분되는 부분, 쿼리(Query)는 주소 뒤에 물음표부터 시작되는 부분이다. JS의 DOM 요소에 대해 배우던 당시에 쿼리스트링도 배웠기 때문에, 둘의 차이에 대해서는 이해하기 ..

이 날은 useContext()라는 React Hook과 router에 대해 배웠다. 얼른 학습내용을 정리하며 소화시켜보자!React Hook - useContext()많은 컴포넌트에 props를 한번에 전달해야하는 경우에 사용한다.useContext를 사용하면 컴포넌트의 재사용이 어려워질 수 있어서 꼭 필요할 때만 사용해야 한다.수업시간에 실험했던 예시 코드를 살펴보자.// ThemeContext.jsimport { createContext } from 'react';export const ThemeContext = createContext();// Box.jsximport { useContext } from 'react';import { ThemeContext } from '../contexts/Th..

React를 배우기 시작하면서 정리(복습)의 중요성을 크게 느끼고 있다. 이번 포스팅도 오늘 배운 React의 Lifecycle과 Hook을 정리하면서, 완전한 내 것으로 소화시켜보도록 하겠다.React - Lifecycle'컴포넌트의 생애주기'로서, 특정 컴포넌트가 실행/갱신/제거될 때 이벤트를 발생시키는 것을 의미한다. 원래는 클래스형 컴포넌트에서만 사용 가능한 기능이었지만, React Hook이 등장하면서 함수형 컴포넌트에서도 사용할 수 있게 되었다.React 컴포넌트의 생애주기는 아래 3가지로 분류할 수 있다.종류설명자주 사용되는 메서드Mount컴포넌트가 가장 처음 화면에 등장할 때,DOM이 생성되고 웹 브라우저에 나타나는 것constructor()render(), componentDidMount..