TIL

오늘 드디어 항해99의 본과정이 시작되었다!!! 다른 분들이 말씀해주신 대로 역시 처음 과제는 미니풀스택 프로젝트였는데, 지난 사전스터디때는 어렵고 이해할 수 없어서 도전하지 못 했던 로그인/회원가입을 도전하기로 했다! 심지어 기술 설명 세션도 들었는데, 똑같은 J

일단 키워드 검색, 그 다음 구글 연산자 검색 깃헙은 예시가 있다! - 남의 레포를 보면서 파악해보자 (별 많은 애들이 좋아) 다른 사람의 코드를 볼 땐 흐름을 파악하고 로직을 이해해야한다! 항해 질문방에도 뭐.. 정제된 질문을 하는 것이 좋다 질문 시: 동작 시

처음으로 항해에서 프로젝트를 끝마쳤다.풀스택 미니 프로젝트였기 때문에 프론트/백을 나누지 않고 특정 기능을 맡아서 진행했다.회원가입이 생각보다 오래 걸렸었고,,,, 아니지 사실은 깃 때문이었지!!!그래도 안되는 문제를 계속 직면하다보니 문제를 직면했을 때 해결하는 방식

항해에서 첫번째 풀스택 미니 프로젝트가 끝났고, 아쉬운거도 많지만 나름 뿌듯한 점도 많다! 잊지 않기 위해 내가 열심히 작성했던 코드..와 함께 해결하고 싶었지만 그러지 못 했던 코드의 완성본을 적어둬야겠다. 다음 프로젝트땐 더 많이 기여할 수 있으면 좋겠다. 1.

사전스터디 기간과 프리온보딩 기간을 제외하면 드디어 항해 1주차가 끝이났다!1주인듯 1주아닌 1주차지만, 그 동안 정말 많은 TIL을 작성했지만, 처음으로 WIL을 작성해보려고 한다!본과정 1주일동안 나는 무엇을 배웠을까?사실 풀스택 미니 프로젝트도 사전 스터디때 토이

현재 알고리즘 주차를 지나면서, 프로그래머스의 알고리즘 문제들을 풀고있다. 아직 lv.1 문제들만 풀다보니 나오는 문제들이 정해진 패턴대로 나오는데, 그 중 배열을 이해해야 풀 수 있는 문제가 굉장히 많았다. 그때그때 필요한 부분을 구글링 해서 사용했지만, 일단 가장

알고리즘 문제를 열심히 풀지만 너무 어렵다...몇몇 문제들은 아 내장함수 없이 절대 못 한다! 라고 판단이 들어서 바로 구글링을 했다.내가 원하는 동작을 해줄 수 있는 내장함수가 있다면!최대한 내가 직접 지저분한 코드라도 짜려고 하지만, 몇몇 경우 어쩔 수가 없었다.유

오늘은 드디어 알고리즘 테스트를 봤다.분명 한 열흘 전에 궁금해서 혼자 프로그래머스를 들어갔을 땐 0레벨 문제만 보고도 뭔가 아무 생각이 들지 않아서 꺼버렸는데, 비록 1레벨이지만 문제를 30개 넘게 풀었다는게 신기하다.아주 조금씩이지만 배워가고 있다는게 대견하다 🙂

ES는 EcmaScript를 뜻하는 약어이며, JavaScript의 공식 명칭이다.이제 현업에선 ES6를 사용하지만, 예전에 만들어둔 레거시 코드를 이해하거나, 모든 회사가 최신 문법을 사용하는 것이 아니기 때문에 구버전의 코드를 잘 이해하는 것은 중요하다.애초에 컴퓨

리액트 컴포넌트에서 다루는 데이터의 한 종류.State: 컴포넌트 내부에서 선언해서 내부에서 해당 state의 값을 조작하기 위한 목적으로 만든다.리액트에서 사용하는 state는 동적인 데이터를 다루기 위해서 사용한다.예시:버튼 클릭 시 < Btn > 태그에 있

컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 갖는다.리액트에서 클래스형 컴포넌트는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다.LifeCycle Method 는 한국어로 "생명

드디어 주특기 심화 과정을 시작하면서 팀 과제를 하게 되었다. 지금까지의 프로젝트 중 정말 역대급으로 어렵고... 3주만에 리액트 과정을 끝낸다는 항해가 정말 믿기지 않을 정도로 CRUD를 내 스스로가 구현한다는 것은 어려운 일이었다. 프로젝트는 나만의 일기장 컨셉인

게시글 Update의 경우 원래 작성하기 page를 수정 페이지와 동일하게 사용하고 싶었다. 하지만 어떻게 해야할지 감이 잘 안잡혀서 일단 기능만 구현하기 위해 수정으로 이동하는 다른 페이지를 만들어서 수정 버튼 눌렀을 때 update 전용 페이지로 이동하게끔 만들었

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다.백엔드와 프론트엔드와 통신을 쉽게하기 위해 AJAX도 더불어 사용하기도 한다.한 마디로 서버와의 통신을 위해 사용하는 라이브러리이자, 서버와 클라이언트를

3주 동안 리액트에 대해서 공부하고 처음으로 백엔드와 협업을 진행했다.짧은 시간동안 리액트에 대해서 숙지할 수 있다고 생각도 안했지만, 이렇게까지 어려울 줄을 상상도 못 했다 😭API 명세서를 같이 작성했음에도 어떻게 이해하고 사용하는지 몰라서 초반에 굉장히 혼란스러

미니 프로젝트가 끝나고 클론코딩 프로젝트를 진행했다. 클론코딩 때 우리 조의 목적은 완벽한 결과물을 제출하는 것 보다 실전때도 활용할 수 있는 새로운 기술에 도전하고 숙지하는 것을 목표로 잡았다. 그렇게 채팅을 구현하기 위해 웹소켓에 도전했고... 역시 세상에 공부

벌써 항해한지 꽤 오랜 시간이 지났다. 리액트 주차를 지나면서 배운 것은 Redux, Redux-Toolkit, Axios였는데, 미니 프로젝트와 클론코딩 프로젝트를 진행하면서 열심히도 써먹었었다. 근데 다만 정말 말 그대로 써먹기만 했지, 뭔가 계속 개념이 헷갈리는

실전 프로젝트 - 콜바이네임 게임 구현하기 클론코딩 주차가 끝나고 이제 실전 프로젝트가 시작됐다. 아직 1주일 밖에 안 지났다는게 믿기진 않지만, 이제 게임을 시작하는 부분을 구현해야 한다. 내가 맡았던 부분들은 웹소켓을 적용하지 않는 부분들이었고, 시간이 상대적으로 많은 기간인만큼, 이전엔 해보지 못 했던 디테일을 신경써서 작업을 진행했다. 1. 페이지...

원래는 일요일마다 작성하려고 했던 WIL인데, 이래저래 치이다보니 하루가 밀려버렸다. 새로 배운 내용을 블로그에 꼼꼼히 적어야 더 기억에 남고 궁금할때 찾아볼 수 있는 내 재산이 될텐데...ㅠㅠ 정신 없다지만 너무 소홀해지는 것 같다. 이제 실전 프로젝트를 진행한지도 2주가 지났고, 이제 3주차인데, 지난 2주동안 개발 진행하면서 Websocket 부분이...

저번 클론코딩 프로젝트때도 사용했었지만, 이번 프로젝트에도 websocket을 이용해서 게임 로직을 구현해봤다. 이전 프로젝트에선 채팅 기능만 사용했지만, 나만 모른닭 프로젝트에선 채팅과 게임을 진행하는데 필요한 모든 로직을 websocket을 사용해서 구현했다. 웹

개발 공부를 하면서 자주 들은 것은 RESTful한 API가 중요하다는 것이었다. API의 개념은 어느정도 알겠지만, 그 중에서도 RESTful한 API는 뭔지, 그리고 그게 왜 중요한지에 대해선 항상 대강 짚고만 넘어갔었다. 자주 들어본 개념인만큼 한번쯤은 꼭 정

이번 주는 밀리지 않고 WIL을 쓰겠노라 다짐했건만... 또 실패해버렸다. 아직 새벽이니까 세이프한거라도 보면 안될까? 😩 하지만 이미 일요일은 끝났고 ㅠ 결국 월요일에 WIL을 작성하게 되었다. 이번 주는 드디어 MVP를 만들어서 발표할 수 있었다. 그 동안 막힌 부분도 많았지만, 게임 로직을 구현하는 쪽을 같이 작업하면서 websocket 흐름이 약...

Redux 공식 문서에선 Redux를 굳이 쓸 필요 없다고 말한다. > Redux는 상태를 관리하기에 좋은 도구이지만 여러분의 상황에 적당한지는 따져 보아야 합니다. 단지 누군가가 사용하라고 했다는 이유만으로 Redux를 사용하지는 마세요 - 시간을 들여서 잠재적인

이제 실전 프로젝트가 어느정도 끝나간다. (그리고 또 일요일에 쓰지 못 한 나의 WIL...😢) 게임도 어느정도 안정적으로 돌아가고, 아직 WebRTC는 이해하기 좀 어렵지만, Websocket은 어느정도 이해가 된 것 같다. 내가 작업하지 않은 부분도 계속해서 코드

이제 실전 프로젝트도 홍보한지 일주일이 지났다. 일주일 동안 많은 피드백을 얻었고, 피드백에 맞춰 추가적으로 오류 수정과 개발을 진행하면서 생각보다 사용자는 똑똑하다는 것을 느꼈다. 인간은 불편한걸 매우 싫어한다. 기술 발전이 일어나는 것이 매우매우 당연할만큼! 덕분

서비스를 만들 때 로그인은 무조건 들어가는 요소 중에 하나다. 지금까지 로그인은 정규표현식에 맞춰서 이메일과 비밀번호 (형식만 맞는 😅) 인증이 들어갔었다. 이메일 인증까지 구현을 해볼 순 없었지만, 어쨌든 귀찮은 회원가입 절차가 필요없는 소셜 로그인 기능을 추가해봤다. 사실 소셜 로그인 3종 세트를 구현하고 싶었지만, (카카오, 네이버, 구글) 카카오...

나만 모른닭 프로젝트에서 음성/영상 채팅을 구현할 때 WebRTC를 사용해서 구현했다. 물론 내가 주도적으로 작업하지 않았기 때문에 WebRTC에 대한 이해도는 0에 수렴하지만... 코드리뷰를 봐도 너무 어렵지만...! 적어도 어느정도 더 알고자 조금 더 찾아보고 정리

실전 프로젝트를 마치고, 최종 발표회도 끝나고, 이력서 작성, 모의 면접, 등 이제 진짜 항해99 부트캠프의 모든 커리큘럼이 끝났다. 앞으로 물론 갈길이 아직 많이 남았지만 일단 항해가 끝났다는게 정말 행복하다 😭 그간 알게 모르게 데드라인에 쫓기며 스트레스를 받았었는데, 개발 공부랑 코딩은 재밌었지만, 뭐랄까... 어쨌든 잘 모르는 분야를 하나하나 공...

이제 항해도 끝났지만... 비루한 개발 실력과 이제 프로젝트로는 채울 수 없는 깃잔디를 위해서 1일 1알고리즘을 실천하기로 했다. 사실은 간편하게 백준허브 chrome extension을 사용하고 싶었지만... 왜인지 나만 안된다... 그래서 직접 VS code로 1

CS 지식 보충을 위해 조금씩 정리를 해보자! #9 1. Redux의 주요 개념 ❓ Redux란? 예전에 정리했던 내용: [Redux] Redux, Redux-Toolkit, Axios 개념 복습 공식 문서에 따르면 Redux는 자바스크립트 앱을 위한 예측 가능

CS 지식 보충을 위해 조금씩 정리를 해보자!흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 같은 걸 브라우저라고 한다. 브라우저의 주요 기능은 사용자가 선택한 자원을 서버로부터 데이터를 받아와서 브라우저

CS 지식 보충을 위해 조금씩 정리를 해보자! #2 1. JavaScript의 실행 방식 ❓ Hoisting과 TDZ MDN Web Docs에 따르면, 호이스팅(hoisting)이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 이다. 대

CS 지식 보충을 위해 조금씩 정리를 해보자! #3 1. 프레임워크와 라이브러리 📥 프레임워크란? 프레임워크는 프로그래밍 시 일정한 형태와 기능을 갖추고 있는 일종의 컨테이너 같은 것을 의미한다. 코드를 작성할 때 필수적으로 들어가야하는 코드의 형태, 알고리즘, D

CS 지식 보충을 위해 조금씩 정리를 해보자! #4 1. CSS - position position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다. position 개념을 이해하기 전에 알아야 할 한 가지 특징은, position 속성은

CS 지식 보충을 위해 조금씩 정리를 해보자! #5 1. 브라우저 저장소 브라우저의 저장소는 cookie와 web storage 2개로 나눠지고, web storage는 다시 한번 local storage와 session storage로 나뉜다. 📦 Cookie와

CS 지식 보충을 위해 조금씩 정리를 해보자!const 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 출처: MDN - const위의 예시를 보면, "cars"라는 상수에 할당한 배열을 재할당할 경우, "상수에 할당

CS 지식 보충을 위해 조금씩 정리를 해보자! #7 1. Cookie의 옵션 쿠키의 구성 요소 Name: 쿠키의 이름 (보통 key값으로 원할때 특정 쿠키의 값을 가져올 수 있다.) Value: 쿠키의 저장된 값 Expires/Max-Age: 쿠키의 삭제 시간

CS 지식 보충을 위해 조금씩 정리를 해보자! #8 1. React의 State와 Props 예전에 정리했던 내용: [React 2] State & Props 간단정리 > props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객

렌더링 방식에 대해서 여러 블로그 글을 읽었고, 나름 개념에 대해서 익숙해졌다고 생각했는데, 막상 다른 누군가에게 설명한다고 했을 때 제대로 설명할 수 없었다. 정말 단어의 뜻 정도로만 알고 있기 때문이라고 생각했고, 중요한 개념인만큼 글로 정리해야겠다. 1. CS

최근에 serverless 라는 개념에 대해서 듣게 되었다. 처음에 단어만 보고 진짜 서버가 없는 서비스라고 생각해서 매우 놀랐었는데, 조금 검색해보니 역시 그건 아니었다. 서비스명이 좀 더 직관적이면 얼마나 좋을까 :\ 어쨌든 서버리스는 정말로 서버가 없는 것이 아

면접 때 "프로젝트를 무슨 서버로 배포하셨어요?" 라는 (혹은 대충 비슷한 뜻의) 질문을 받았었는데, 순간 엥? 싶었었다. 그러게... 내가 무슨 서버로 배포했었을까 그냥 AWS EC2 사용해서 뭘 배포하긴 했었는데... 굉장히 어버버 했었고, 짧은 지식이 여과없이

웹개발에 대해서 공부하면서 네트워크 지식이 부족하다보니 주먹구구식으로 블로그 글들만 슬쩍 읽고 지나치는 개념들이 많아졌다. 지금 다 기억을 못 해도 어쨌든 검색하는 시간이라도 줄일 수 있도록 알아야할 개념을 정리해야겠다. 인터넷을 통해 컴퓨터들이 서로 정보를 공유하는

저번에 OSI 7 계층 모델에 대해서 정리해봤는데, 현재 인터넷은 OSI 모델이 아니라 TCP/IP 모델을 사용한다고 한다. 사실 OSI 7계층의 4번째 계층이었던 Transport Layer 계층에서 사용하는 프로토콜이 TCP (Transmission Control

메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 출처: 위키백과

지금 일하게 된 회사에서 상태관리를 할 때 Zustand를 쓴다는 것을 알게되었다. 사실 동료분이 "저희 회사는 Zustand 써서 상태관리 하고 있는데 혹시 뭔지 아시나요?" 라고 물어보셨을 때 진심 난생 처음 들어본다는 말 밖에 못했었다 😅 아직 본격적인 개발

간간히 "객체지향", "절차지향", "함수형" 이라는 프로그래밍 언어에 대한 패러다임 종류가 들려왔었다. 언어에 특성에 따라서 크게 저 3가지로 분류되는 듯 했고, 물론 패러다임이라고 했을 때 저 3 종류가 끝은 아니지만 자주 들리는 만큼, 한번 정리해두는 것이 좋을