부트 캠프

개발자가 되기 위한 노력도 벌써 2년이 다 되어간다.사실 2년 중에 8개월은 하다 말다 하는 바람에 안 한 것과 마찬가지다.무엇보다도 지금의 개발자가 되기위해, 개발자라는 목표를 가지기로 마음먹기까지상당한 시간이 걸렸다.11월 16일, 개발자 부트 캠프라는 것에 참여하

사실 모든 것이 익숙하다.자바스크립트, HTML, CSS, 부트스트랩...다 이전에 공부할 때 한번씩 보았던 것이다.그러나 몇 가지 몰랐던 것들이 눈에 띄인다. background-image: url();background-position: center;backgrou

항해99 사전 스터디 2주차나에게 있어서 JQuery는 익숙하지 않다. 예전에 맛보기로 배워는 보았지만, 나는 JQuery보다 바닐라 자바스크립트를 더 열심히공부하였기 때문이다. JQuery가 사용하기 편하고 자바스크립트보다 간단한 것은 사실이다. 하지만 과거 나의 편

파이썬은 객체지향적 언어임에도 불구하고 다른 객체지향 언어들과는 차이가 많다. 일단 언어자체가 대화형 언어이기에 코드를 보면 이해하기가 매우 쉽다. 다른 큰 차이점이라고 하면 바로 타입 선언을 안 해준다는 점이다. C++, 자바, C 등을 보면 알겠지만 어떤 변수에 무

4주차에는 클라이언트와 서버가 만났다.서버가 존재하는 하나의 완성된 홈페이지를 만들었다.잡담하지 않고 빠르게 배운 것을 리뷰해보겠다.Flask는 프레임워크다. 서버를 직접 구동 시킬려면 너무 할 것도 많고 복잡하다.그래서 Flask가 그것들을 도와주는 것이다. 일단 F

사전 스터디의 마지막 프로젝트를 공부하면서 최종적으로 과제를 제출할 때는 여러 생각이 머리속을 스쳐 지나갔다. 여러가지 복잡한 생각들을 제쳐 놓고 글을 쓰려고 한다. 프로젝트 마지막 프로젝트는 버킷리스트 만드는 것이었다. GET과 POST가 있는 3주차, 2주차에서

1월 9일 여정이 시작되었다.TIL 그리고 WIL, 오늘 배운 것을 오늘부터 실천하려한다.되돌아 보면, 이것(TIL / WIL)을 배우기 전과 후로 나누어지는 것 같다.내가 블로그를 시작하고 작성해놓은 글을 다시 보았지만, 그 무엇도 여기에 해당되는 것은 없었다.이제는

1월 10일 여정 2일차이다.프로잭트에서 파라미터 값을 불러오는데에 애를 먹었다. 프론트엔드에서 url의 파라미터 값을가져와야 하지만 전혀 가져 올 수가 없었다.ajax를 활용하여 GET 방식으로 백엔드에서 찾아 놓은 id 값을 가져오려 했지만 전혀 작동하지 않았다.뿐

1월 11일 여정 3일차이다. 팀프로젝트의 방향은 이전에 배웠던 것들에서 벗어나지 않고 배운 것을 깊게 파고 들기 위한 프로잭트가 진행되었다. 팀이 원하는 방식은 URL에서 파라미터를 가져와서 그것과 관련된 정보를 클라이언트에게 보여주는 것이었다. 문제는 프론트에서 U

1월 12일 여정 4일차이다.어제(1월 11일) 팀프로젝트를 마무리 짓고, 깃허브에 대해 깊이 공부하고 있었다.깃허브를 공부하면서 Fork라는 개념이 도저히 이해가 안되었다. Fork로 누군가의 repo를 복사하여 작업 수행 후 pull request(PR)을 보낸다.

1월 13일 여정 5일차이다.입학 시험을 치렀다. 내가 열심히 공부를 한 것인지 아니면 난이도가 쉬웠던 것인지는 모르겠지만, 예상과는 다르게 잘 풀어낸 느낌이다.입학 시험 준비 중에 어려웠던 부분에 대하여 정리하고자 한다. 기능은 간단히 이러하다.문제는 보여주는 것은

1월 14일 여정 6일차이다.오늘은 깃허브에 대하여 조금 더 자세하게 이야기 해볼까 한다.Branch 전략? Git-flow? GitHub-flow? 이게 다 무엇일까? 강의를 들었지만 사실 전혀 상상이 가지 않았다. 깃허브에 대해 이제까지 내가 알고 있던 것들과 전혀

1월 15일 여정 7일차이다. 로그인 기능을 구현 중에 methods를 GET을 선택해야 하는지 POST를 선택해야 하는지에 대해 문제가 발생하였다. 이 문제를 고민하는 제일 큰 이유는 methods에 따라 코드가 달라지기 때문이었다. 일단 2가지 methods로 코드

이번주 부트 캠프(항해99)를 하면서 정말 많은 것을 배웠다.일단 무엇보다 내가 세운 이번주 목표인 '입학시험 합격하기'를 달성하였다. 너무도 기쁘다.다음주부터는 다시 바쁜 한주가 시작된다. 나의 다음주 목표는 다음 주 월요일/화요일(16/17) 스파르타톤에서 내가 원

1월 17일 여정 9일차이다. 무박 2일동안의 밤샘 코딩을 하느라 아침에 자고 늦게 일어났다. 깃허브로 협업을 제대로 시작하자마자 시련이 내게 왔다. 깃허브로 merge를 하기만 하면 충돌이 일어나는 것이다. main을 중심으로 develop브랜치 그리고 각자의 브랜치

1월 17일 여정 9일차이다.오늘은 일정이 없었지만, 내가 구현한 기능에 대해 공부하려고 한번 기록해본다. 토큰 기반 인증 방식은 무엇일까? 이전에 세션과 쿠키 방식은 들어보았지만, 토큰 기반 인증 방식은 처음 들었다. 토큰은 유효기간이 짧을텐데 그러면 유효기간이 지나

여정 11일차이다.오늘은 함수에 대해 공부하다가 함수와 메서드에 궁금증이 생겼다. 그래서 자바스크립트의 함수와 메서드에 대해 더욱 자세히 보려고 한다.내가 쓰고 있는 함수에 대해서 그동안 의문을 가진적이 없었던 것 같다. 그래서 함수와 그리고 객체 안에 메서드에 대해서

1월 21일 여정 12일차이다.자바스크립트에서의 얕은 복사와 깊은 복사... 너무 어려웠다. 더 자세한 정보가 필요했다.항해99에서 제공한 문서로는 부족했다. 결국 구글에 검색하여 여러자료를 찾아보기로 했다.일단 자바스크립트에는 원시값과 참조값이 존재한다고 한다.원시값

1월 21일 여정 13일차이다. a !==b;obj1 === obj2위의 내용이 뜻하는 것이 무엇일까?불변성이라는 것은 말 그대로 절대 변하지 않는다는 것이다. 대표적으로 원시 타입들은 불변한다. 그렇다면 왜 불변하는 걸까?'코어 자바스크립트' 책의 설명은 너무 어려웠

1월 22일 여정 14일차이다.오늘은 많이 복잡한 실행 컨텍스트에 대해 정리해볼까 한다.Outer는 무엇이고? Record는 무엇일까? 마지막으로 실행 컨텍스트는 무엇일까?실행 컨택스트라는 것을 공부하면서 많은 의문이 생겼다. 큐와 스택 그리고 호이스팅과 스코프체이닝

1월 22일 여정 14일차이다. 저번에 이어 Outer를 보겠다. 오늘의 Today I Learned problem 자 내가 알아야 될 문제는 스코프체이닝이다. 여기 스코프 체이닝을 무엇일까? 그리고 마지막으로 실행 컨텍스트라는 것은 무엇일까? try 항해99 노

1월 18일 여정 10일차이다.오늘 자바스크립트 공부를 하다가 '파싱'이라는 단어에 궁금증이 생겨 깊게 공부해보았다.기본적으로 스크립트 파일을 읽어올때, 파싱한다 라고 배웠다. 그러나 보다 더 깊이 들어가기 위해 구글에 검색을 여러번 시도해 보았다.브라우가 랜더링을 할

이번주(1월 16일 ~ 22일) 너무 빨리 지나갔다. 밤을 새는 해커톤부터자바스크립트 언어공부까지...1\. 해커톤으로 협업을 경험하면서 git conflict가 났을때, VScode 내부에서 수정하는 것, 그리고 원인을 해결하는 방법에 대해 알게 되었다.2\. JWT

1월 23일 여정 15일차이다.여기 '?'의 출력값 정답은 무엇일까?위의 코드에 정답이 갑자기 궁금해졌다. 물론 그냥 VSCode에 실행시켜 보면 답이 나오지만,더 깊게 이해하고 싶어졌다.MDN Web docs와 항해99 문서를 보았지만 생각보다 설명이 부족했다. 그리

1월 20일 여정 12일차이다.자바스크립트에도 불변성이 존재한다는 것을 알게되었다. 조금더 불변성과 불변 객체에 대하여 알아볼 필요가 있는 것 같다.알아볼 필요가 있는다는 건, 당연히 잘 모르겠다는 뜻이다. 불변성과 가변성에 대해 먼저 알아볼 필요가 있는 것 같다.항해

1월 24일 여정 16일차이다.오늘은 설날 휴일 마지막 날이다. 어떤 때는 undefined가 뜨고 어떤 때는 null이 브라우저 콘솔에 나타난다. 둘의 차이점이 무엇일까?undefined와 null은 나에게 너무 친숙한 단어이다. 코드를 짜다보면 쉽게 볼 수 있는 단

1월 15일 여정 17일차이다. 오늘 클로저에 대해 배웠지만, 전혀 이 코드 내부에서 클로저가 작동되는 것을 모르겠다. 오늘의 Today I Learned problem 오늘 클로저에 대해 배웠다. 이론적 설명을 읽다가 막상 이론을 코드에 대입하려 했으나, 전혀

1월 26일 여정 18일차이다.프로그래밍의 제어권이라는 것은 무엇을 말하는 걸까요?콜백 지옥이란 뭘까요?추상화는 무엇일까요?시작부터 어려운 질문이다. 이 질문에 답하기 위해 나 나름대로 이해한 것을 적어보려고 한다.콜백함수에 대해 공부하던 중에 저 질문에 답을 하지 못

1월 27일 여정 19일차이다.new바인딩? 명시적 바인딩? 암시적 바인딩? 기본 바인딩?this는 여러가지로 자바스크립트에서 헷갈리는 부분이다.자바스크립트의 this는 기본적으로 상황에 따라서 this에 바인딩되는 값이 달라진다. 그럼 어떻게 달라지는지 알아보겠다.자

1월 28일 여정 20일차이다."자바스크립트는 싱글 스레드이며, 비동기처리를 지원한다"싱글 스레드는 무엇이고, 비동기처리 지원은 무엇일까?자바스크립트를 깊게 공부하다 보면 꼭 한번쯤은 듣는 말이다. 하지만 이해가 가지않아 한번 깊게 알아보기로 하였다.항해99에서 제공해

1월 29일 여정 21일차이다.자바스크립트 ES5, ES6문법이 새로 나왔습니다!여러번 많이 들었지만 ES라는 단어는 사실상 그냥 지나쳐왔다.오늘 한번 자세하게 알아보겠다.ES라는 것이 무엇인지는 잘 몰랐다. 항상 자바스크립트 ES6 신문법이 너무 좋다.ES5 문법은

이번주(1월 23일 ~ 29일) 무엇인가 힘들지만 자바스크립트의 실력이 많이 향상된 것 같은 한 주였다.1\. 자바스크립트의 스코프는 크게 2가지가 있다.전역 스코프와 지역 스코프. 더 깊게 들어가 변수 시점에서 보면 전역 변수와 지역 변수가 존재한다. 또한 자바스크립

1월 30일 여정 22일차이다. > 만약 순차적으로 실행하고 싶은 함수를 만들고 싶으면 어떻게 해요? 나는 단순히 그냥 콜백함수 쓰면 되는거 아닌가? 라는 생각을 했다. 하지만 질문에서 요구하는 답이랑은 조금 달랐다. 오늘의 Today I Learned prob

1월 31일 여정 23일차이다.오늘은 내가 풀은 알고리즘 모의고사에 대해 코드 리뷰를 하고자 한다.문제는 항해 1일 차 날짜를 입력하면 98일 이후 이후 항해를 수료하게 되는 날짜를 계산해주는 알고리즘을 만든는 것이다.날짜의 형식을 String으로 바꾸어 주었다.new

2월 1일 여정 24일차이다.타로는 자주 JOI잡화점에서 물건을 산다. JOI잡화점에는 잔돈으로 500엔, 100엔, 50엔, 10엔, 5엔, 1엔이 충분히 있고, 언제나 거스름돈 개수가 가장 적게 잔돈을 준다. 타로가 JOI잡화점에서 물건을 사고 카운터에서 1000엔

2월 2일 여정 25일차이다.오늘은 그토록 기다리던 항해 99 알고리즘 테스트보는 날이었다. 다행히 잘 풀어서 테스트는 합격했다. ㅎㅎ내가 풀은 문제를 여기에 공유하겠다. 전날에 힌트로 준 백준 문제와 거의 동일했다. 덕분에 어렵지 않게 풀 수 있었다.1000엔에서 물

2월 3일 여정 26일차이다.Search Engine OptimizationSEO가 무엇일까? 그리고 왜 리엑트에서 단점이 SEO라고 하는 걸까?SEO에 대해서 오늘 처음 배우게 되었다. 리엑트를 배우면서 전혀 들어보지 못한 단어였다. SEO라는 것을 인터넷에 검색해보

2월 4일 여정 27일차이다.리액트에서 상태 업데이트를 위해서는 불변성을 지켜줘야 한다.자바스크립트에서의 불변성은 들어보았지만, 리액트에서 불변성은 왜 지켜주어야 되는 걸까?자바스크립트에서 불변성은 원시값을 말하는 것이다. String, Number, undefined

2월 5일 여정 28일차이다.SEO가 필요할 때는 SSR을 사용하면 된다. 반면에 데이터 양이 많으면 CSR을 사용하면 된다.리액트를 하면서 한번쯤은 들어봤을 용어 클라이언트 사이드 렌더링과 서버 사이드 렌더링, 오늘 이것들에 대해 알아볼까 한다.이전에 MPA는 기본적

2월 5일 여정 28일차이다.간단하게나마 ES6 문법정리를 해보려고 한다.const는 재할당이 불가능하고 let은 재할당이 가능하다. const는 선언과 동시에 초기화를 해줘야 한다.템플릿 리터럴이란 문자열 표헌법이다. 여러 줄의 문자열과 내장 표현식을 사용할 수 있다

이번주(1월 30일 ~ 2월 5일) 무엇인가 바쁜 한 주였다. 알고리즘 테스트에 주특기 언어를 배우는 주차까지 순식간에 시간이 지나갔다.1\. 어떤 기능을 순차적으로 실행하기 위해서는 콜백함수를 이용한다.그러나 10개 혹은 100개를 순차적으로 진행시키게 되면 콜백 지

2월 6일 여정 29일차이다.리액트에서의 컴포넌트란 무엇일까?리액트를 배우면서 컴포넌트에 대해 의문이 생겼다.그리하여 컴포넌트의 개념에 대해 자세히 들여다볼까 한다.항해99의 문서를 한번 살펴보았다. 물론 그 외에 구글에서도 정보를 찾게 되었다.컴포넌트란 결국 UI를

2월 7일 여정 30일차이다.단방향 데이터 바인딩의 대표적 프레임워크 중에는 React가 존재한다.데이터 바인딩은 들어보았지만, 양방향 데이터 바인딩, 단방향 데이터 바인딩은 처음 들어보았다.내가 알아야 될 문제는 양방향 데이터 바인딩이 무엇인지, 그리고 단방향 데이터

2월 8일 여정 31일차이다.오늘은 짧게 export와 export default에 대해 정리해보려고 한다.사실 차이점은 import를 해올 때 알게 되지만, export를 할 때 2가지로 해올 수 있다.export export default일단 첫번째 export는

2월 10일 여정 32일차이다.리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다.리액트의 Hook들은 너무 많다. 그중에 오늘은 useEffect에 대해 알아볼까 한다.어떤 특정 컴포넌트가 화면에 보여졌을 때 무엇인가 실행할 수 있

2월 10일 여정 33일차이다. 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 할 수 있습니다. 그럴 땐, 리액트에서 ref 라는 것을 사용합니다.자바스크립트를 사용 할 때에는, 특정 DOM을 선택해야 하는

2월 11일 여정 34일차이다.useCallback은 인자로 들어오는 함수를 기억한다.오늘은 useCallback이라는 Hook에 대해 알아보려고 한다.useCallBack이란 무엇인가?인자로 들어오는 함수 자체를 기억하는 hook이다.가령 예를 들어서 어떤 React

2월 12일 여정 35일차 이다.컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두위의 조건은 리액트에서 리렌더링이 일어나는 조건이다.그중에 오늘 3번 조건을 해결하기 위한 Hook

2월 12일 여정 35일차이다.이전에 useCallback, React.memo를 보았다. 하나는 함수를 캐싱하는 것이고, 하나는 컴포넌트를 캐싱하였다. 이번에 볼 Hook은 useMemo이다.useMemo는 무엇을 캐싱할까?결과적으로 useMemo는 값을 캐싱한다.

이번주(2월 6일 ~ 2월 12일) 리액트 입문부터 리액트 숙련과정까지 리액트에 대해 깊이 배우는 시간이었다.리액트의 리렌더링 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두1

2월 14일 여정 14일차이다.리덕스의 액션, 액션 생성함수, 리듀셔, 스토어, 디스패치, 구독 다 무엇을 뜻할까?스토어는 기본적으로 저장소를 말한다. 리덕스에는 한 어플리케이션당 하나의 스토어가 있다. 또한 스토어 안에는 현재 앱 상태, 리듀서가 들어가 있고 내장함수

2월 14일 여정 37일차이다.오늘은 리덕스에 대해 조금 더 깊이 있게 다루어볼려고 한다.리덕스를 사용할 때 몇가지 규칙에 대해 보려고 한다. 하나의 어플리케이션에서는 단 한개의 스토어만 만들어서 사용한다. 물론 여러개를 사용하는 것이 가능하다. 그러나 공식문서에서는

2월 15일 여정 38일차이다.오늘은 Virtual Dom에 대해 간단하게 알아보려고한다.기본적으로 브라우저의 작동 원리는 이러하다.HTML를 파싱 후, DOM트리를 구축합니다.CSS를 파싱 후, CSSOM트리를 구축합니다.Javascript를 실행합니다.DOM과 CS

2월 16일 여정 39일차이다.리액트에서도 사람과 마찬가지로 라이프 사이클이라는 것이 존재한다.리액트 컴포넌트는 각각 Mount → Update → Unmount의 과정을 거친다. 리액트 생명 주기란, 컴포넌트 중심 라이브러리의 집합체라고 보면 된다.모든 컴포넌트는 각

2월17일 여정 40일차이다. Redux의 기본 구조는 일단 상태 내에 무엇인가를 변경하기 위해 액션을 디스패치 하게된다. 액션이란 어떤 작업을 할지 설명해주는 자바스크립트 순수 객체이다.이 액션은 리듀서로 모이게 된다. 리듀서라는 함수는 액션을 인자로 하여 어플리케이

2월 18일 여정 41일차이다.오늘은 Redux의 리듀서에 대해 코드를 보면서 더 자세히 알아보려한다.기본적으로 react-redux랑 redux-toolkit은 서로 차이점을 가지고 있다. 순수 리덕스와 리덕스 툴킷의 가장 대표적인 차이점은 리듀서라는 곳에서 시작된다

2월 19일 여정 42일차이다.리액트에서 정말 많이쓰고, 흔히 보는 useState에 대해 자세하게 알아보겠다.useState는 가장 기본적인 Hook이다. 또한 함수 컴포넌트에서 가변적인 상태를 가지게 해준다. 기본적인 형태는 위와 같이 생겼다. useState라는

이번주(2월 13일 ~ 2월 19일) 리액트 숙련과정부터 리액트 심화과정까지 생각보다 어렵고 생각치도 못한 것들이 많이 일어났던 한주였다.1\. 리덕스 액션은 어떤 행동을 뜻한다. 액션은 하나의 객체이다. 액션에 type은 필수이다. 액션 생성 함수는 액션을 만드는 함

2월 20일 여정 43일차이다. 오늘의 Today I Learned 리덕스

2월 21일 여정 44일차이다.Redux Tunk 2부이다. 내가 사용한 코드 예시를 보면서 설명하겠다.먼저 Json-server를 설치하여 가동시켰다.그 다음은 리듀서의 뼈대 작업을 해주었다.스토어 파일에는 앞으로 들어갈 여러 reudcer의 configureStor

2월 22일 여정 45일차이다. 사용방법이 기존 thunk 대비 너무 쉽고, 직관적이다.오늘은 이전에 복잡하게 사용했던 Redux Tunk가 아닌 보다 간단하고 직관적인 React Query를 보고자한다.리덕스 thunk는 미들웨어로써 사용을 해왔다. 그러나 Redux

2월 23일 여정 46일차이다.오늘은 간단하기 axios와 fetch에 대해 알아보고자 한다.axios란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다.즉 http를 이용하여 서버와 통신하기 위해 사용하는 패키지이다.위는 axios에서 조회

2월 24일 여정 27일차이다.오늘은 Axios instance와 interceptor에 대해 알아보고자 한다.우리가 흔히들 쓰는 방법은 바로 위와 같은 방법이다.순수 axios를 써왔지만 이번에는 다른 방법을 사용해보고자 한다.바로 위와 같은 방법이 axios ins

2월 25일 여정 48일차이다.오늘은 토이 프로잭트하면서 어려웠던 부분에 대해서 기록을 남길려고 한다.기능을 하나 구현해야 되는데 난이도가 높았다. 주된 기능은 버튼을 누르면 select와 Input이 추가되야 했다. 구글의 도움을 받아 만들어진 코드를 리뷰해보고자 한

2월 26일 여정 49일차이다.오늘은 Custom hook이라는 것에 대해 간단하게 기록하려고 한다.Custom hook이라는 것은 무엇일까?먼저 간단한 아래의 예제 코드를 보자.위의 코드를 보면은 input의 개수가 증가하면 useState와 이벤트핸들러도 같이 증가

이번주(2월 20일 ~ 2월 26일)은 리액트 심화부터 백엔드와 프론트가 만나 처음 서로의 언어로 토이 프로잭트를 만드는 날이었다.1\. 리덕스 청크는 리덕스에서 많이 사용하고 있는 미들웨어중에 하나이다. thunk를 사용하면 dispatch를 할때 객체가 아닌 함수

2월 27일 여정50일차이다.어떤 아이템을 삭제하고 문제가 발생하였다. 이유는 리엑트 쿼리에서 아이템을 삭제하기 전에 showDetail로 한번 불러오고, 삭제한 이후에 refetch 되면서 한번더 불러와지는 문제였다.당연히 삭제된 아이템이니까 불러와도 아무 데이터가

2월 28일 여정 51일차이다.이전에 해결했던 아이템 삭제 후에 뜨는 위의 오류가 다시 발생했다.서버로부터 axios.get해오는 리액트 쿼리를 같은 페이지에 추가하자마자 다시 오류가 나타나게 되었다.일단 이전에 해결했던 방식인 staleTime을 넣어주어 보았다. 그

3월 1일 여정 52일차이다.짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법이 바로 쓰로틀링과 디바운싱이다. 이러한 개념은 이벤트 발생과 그에 따른 이벤트헨들러 콜백함수를 다루는데 있어 중요한 개념이다.특히 클릭처럼 단순한

3월 2일 여정 53일차이다. 웹 프로그래밍 세계에도 서로 대화가 필요하다. 이를 웹 통신이라고 한다. 이 대화방법은 보통 ‘데이터’로 이루어진다. 대상은 서버(웹 서버)와 클라이언트(웹 브라우저) 이다.약속을 우리는 프로토콜(protocol)이라고 한다.특히, 웹에서

3월 3일 여정 54일차이다.프론트와 백엔드가 처음으로 만나 협업을 진행해보았다. 서로가 열심히 언어를 공부하고, 처음으로 만나 7일동안 진행하는 프로젝트인만큼 걱정을 많이 했다.팀장을 맏게 되었는데 솔직히 처음에는 너무 걱정이 많았다. 스코프가 너무 넓고 기간은 짧은

3월 4일 여정 55일차이다. react-router-dom이라는 것은 무엇일까?블로그 사이트 같은 곳을 가면 이 페이지에서 저 페이지로 이동 할 수 있다. 이렇게 여러페이지로 오가는 것을 도와주는 것이 바로 react-router-dom이다. 이 패키지를 사용하면 여

3월 5일 여정 56일차이다.Fetch라는 것은 ES6부터 도입된 Javascript 내장 라이브러리이다. Promise 기반 비동기 통신 라이브러리이다. axios처럼 데이터를 다루기 쉽고, 내장 라이브러리이기 때문에 별도의 설치 및 import를 필요로 하지 않는다

이번주(2월 27일 ~ 3월 5일) 백엔드와 프론트엔드가 프로젝트를 만들고 서로 협업을 경험하는 시간이었다.1\. 리엑트 쿼리를 사용하면서 staleTime이라는 것을 알게 되었다. staleTime은 리엑트 쿼리가 캐싱한 데이터가 stale하다고 판단해 서버에서 데이

3월 8일 여정 57일차이다.오늘은 깃 컨벤션에 대해 간단하게 정리하고자 한다.Feat 새로운 기능을 추가한 경우Fix 에러를 수정한 경우Design CSS 등 UI 디자인을 변경한 경우BREAKING CHANGE 중대한 API를 변경한 경우HOTFIX 급하게 치명적인

3월 7일 여정 58일차이다.오늘의 클론코딩때 적용했던 무한 스크롤에 대해 간단하게 코드 리뷰 하려고 한다.스크롤의 마지막에 ref로 지정해주어야 한다.백엔드에서 API 주소를 설정하여 페이지를 원하는 만큼 fetch를 하게끔 해준다.useEffect를 사용하여 페이지

3월 8일 여정 59일차이다.웹사이트 클론코딩 주차가 끝이 났다. 프론트엔드 인원 3명이서(물론 백엔드도 있다.) 한 웹페이지를 최대한 똑같이 클론 코딩을 하는 것이 목표였다.일단 너무 좋은 경험이었다. 이전의 미니 프로젝트와는 다르게 스코프를 좁게 잡는 대신에 코드

3월 9일 여정 60일차이다.json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 이다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개

3월 10일 여정 61일차이다.기나긴 준비를 끝으로 실전 프로젝트에 들어갔다. 이제는 실전이다. 마지막 그동안 연습한 것들을 토대로 작품을 만드는 시간이다. 기간은 6주이다. 기간이 긴 만큼 스코프도 크고 또한 들어가는 기능들도 많아질 것이다. 다만 나의 걱정이 현실로

3월 11일 여정 62일차이다.디자이너와의 협업은 난생 처음이었다. 평소에는 접하지 못했던 광경과 언어들 때문에 모든게 낮설었다. 디자이너가 하는 것들이 곧 프론트엔드와 직결된다는 것에서 두렵기도 했다. 왜냐하면 프론트엔드 인원은 2명밖에 없었기 때문이다.너무 많은 양

3월 12일 여정 63일차이다.어제 하지 못한 디자인 작업을 계속 이어나갔다. 주말인데도 불구하고 쉬는 날 없이 디자이너가 와서 작업을 해나갔다. 나 역시 오전에 socket.io와 WebRTC를 공부하였다. 사실 socket.io는 너무 자료가 많았다. 덕분에 쉽게

이번주(3월 6일~ 3월 12일) 클론 코딩부터 실전 프로젝트의 시작까지 너무 바쁘다.1\. 깃 컨벤션, 팀으로 작업할때 서로간의 약속이다. 스크롤의 마지막을 ref로 지정해준다. 백엔드에서 API 주소를 설정, 원하는 만큼 fetch를 하게 해준다. useEffect

3월 13일 여정 64일차이다.오늘은 전반적인 프론트엔드 밑작업을 하였다. 필요한 폴더와 파일을 만들고 기본적인 라이브러리와 style을 세팅해놓았다. 아직 api가 나오지 않았기 때문에 여기 이상의 작업은 사실상 불가능하다 판다했다.이후에 sockJS에 대해 공부를

3월 16일 여정 65일차이다. 오늘은 API 통신 부분에 전반적으로 모듈화 작업을 하였다. Axios와 redux thunk를 사용하는 만큼 겹치는 부분이 있었다. 그 부분을 class로 만들어 따로 api 폴더에 빼놓았다. 또한 axios로 통신할때, 항상 toke

오늘은 본격적으로 css작업에 들어갔다. 디자인 작업에 들어갔다. 디자이너가 와이어 프레임 작업을 마쳤기 때문이다. 와이어 프레임을 짜면서 모두가 기능과 디자인을 고려하면서 이야기를 나누었다. 사실 디자이너와 가장 많이 소통하게 될 개발자는 프론트엔드이지만 기능 부분이

3월 16일 여정 67일차이다.오늘은 로그인 페이지 css 작업을 위주로 하루를 시작하였다. css작업 후에 라디오 만들기 페이지 만들고 이후 컴포넌트 분리 작업을 하였다. 분리 작업은 매우 어려웠다. 라디오 만들기 페이지에 기능이 생각보다 많이 들어가는데 그것을 따로

3월 17일 여정 68일차이다.오늘은 redux thunk 모듈 생성과 로컬 스토리지에서 생기는 오류들에 대해서 해결하였다. 날이 갈수록 무엇인가 진전은 있지만 사실 주요 기능인 web socket과 web RTC를 이론만 공부만했지 구현된 것이 없기에 너무 걱정이 된

3월 18일 여정 69일차이다.오늘은 라디오 어플리케이션에서 컴포넌트 중에 하나인 Profile 컴포넌트를 수정하고 리덕스 모듈을 분리하는 작업을 하였다. 벡엔드에서 만들어놓은 API를 통하여 프로필의 정보를 받아오고 리덕스 thunk와 리덕스 state managem

2월 19일 여정 70일차이다.오늘은 실전프로젝트에서 구현하게 될 Web RTC의 이론에 대해 간단하게 알아보고자 한다.WebRTC(Web Real-Time Communication)란 웹 브라우저 환경 및 Android, IOS 애플리케이션에서도 사용 가능한 비디오,

이번주 (3월 13일 ~ 3월 19일) 실전 프로젝트 진행 중에 피곤함과 스트레스의 연속이었다.항해 99에 들어와서 실전프로젝트를 진행할 수록 나의 스트레스는 쌓여만 간다.협업에서 안풀리는 과정은 아직까지는 없다. 그렇지만 진행이 될 수록 미래가 막막해져 가는 이유가무

2월 20일 여정 71일차이다.오늘은 실전프로젝트에서 구현하게 될 Web RTC의 서버 종류에 대해 간단하게 알아보고자 한다.peer 간의 offer, answer라는 session 정보 signal만을 중계한다. 따라서 처음 WebRTC가 peer간의 정보를 중계할

2월 21일 여정 72일차이다.오늘은 전반적인 코드 리팩토링을 하는 날이었다. 모든 페이지와 컴포넌트를 둘러보면서 반복되는 코드나 함수를 깔끔하게 정리하였다. 그 대상 중에 하나였던 search 페이지에 반복되는 함수를 최대한 줄이려고 많은 생각을 하게 되었다. 대표적

2월 22일 여정 73일차이다.무한 스크롤 기능을 구현을 하였다. Tag 페이지에 각 카테고리 별로 페이지가 나올 때 무한 스크롤을 적용시켰다. 그러나 문제가 발생했다. 홈에서 다른 카테고리로 첫 이동을 할 때는 문제가 없지만, 다른 카테고리에서 다른 카테고리로 이동

2월 23일 여정 74일차이다.전반적인 Profile 수정과 Navbar css 수정 작업이 주를 이루었다. 이후에 디자인 세부 수정과 login 리덕스 모듈 및 Email 로그인 부분 파일 수정을 하게 되었다.css 부분은 아무리 고쳐도 해야될 일이 계속 생긴다. 기

2월 24일 여정 75일차이다. 백엔드의 API 수정이 이루어졌다. 이유는 디자인에 있는 기능을 추가하기 위해서였다. 이를 위해서는 지금 구현해놨던 무한 스크롤 관련 API가 전반적으로 수정이 이루져야 했다.현재는 카테고리 페이지에만 무한 스크롤이 들어가있지만, 메인페

3월 25일 여정 76일차이다.오늘은 각각의 디자인 수정 작업을 끝마쳤다. 이후에 프로필의 get부분에서 데이터 바인딩의 골칫덩어리를 해결하였다.트러블 슈팅은 이러하다.프로필을 수정 후에 수정된 프로필의 정보로 불러와 지지 않는 문제였다.useEffect의 의존성 배열

3월 26일 여정 77일차이다. 오늘은 웹소켓에 대해 간단하게 알아볼까 한다.웹 소켓은 기본적으로 클라이언트와 서버 사이의 관계가 stateless하게 이루어져 있다.즉 클라이언트에서 Request를 날리면 서버에서 Response하는 과정으로 이루어져있다는 것이다.그

이번주(3월 20일 ~ 3월 26일) 실전 프로젝트 고난의 연속이었다.이번 실전 프로젝트의 하이라이트는 소셜 로그인과 프로파일의 Get API였다.먼저 네이버와 카카오톡 소셜 로그인을 구현을 마치었다. 사실 소셜 로그인 부분은 프론트에서 할 일이 그렇게 많지 않았다.