TIL

Codestates pre course 4일차 >오늘은 코드스테이츠 프리 코스 4일차 오랜만에 사용한 배열 메서드 사용법이 가물가물하다.. (특히 slice, splice 둘이 왜이리 헷갈리냐..) 페어 프로그래밍하면서 누군가와 협업을 할 때 조심해야 하는 부분과 내가

오늘은 코드스테이츠 프리 코스 5일차2차 페어 종료.. 처음 자바스크립트를 공부하는 사람도 이해하기 쉽게 설명하는 법을 배웠다..힘들었지만 열심히 해주신 페어 분 때문에 같이 문제 풀면서 괜히 내가 다 뭉클했다.배열 메서드 slice, map, filter, reduc

뷰 포트의 크기 가져오기clientWidth, heigt (스크롤 크기는 포함하지 않는다.)window.innerheight width (스크롤 크기 포함.)스크롤 한 거리 구하기scrollLeft, scrollTop (x,y 축으로 스크롤 한 거리)특정 위치로 스크롤

Codestates pre course 9일차 >오늘은 코드스테이츠 프리 코스 9일차 자바스크립트 기초 알고리즘 문제 페어 프로그래밍 완료와 3차 페어 종료 오늘은 레슨을 통해서 Command Line 기초 사용법과 Git 기초에 대해서 공부했다. > > > funct

오늘은 코드스테이츠 프리 코스 10일차변수의 유효 범위, let ,const / var 의 차이 기본적인 개념이지만 코드를 봤을 때 한 눈에 들어오지 않아서다시 한번 기초가 중요하다는걸 깨달았다. 기초 개념도 시간 날 때 마다 리뷰하자....🐸그래서 변수의 유효 범

오늘은 코드스테이츠 프리 코스 14일차TDD 정리 완료Mocha, chai 이용해서 테스트 만들기 성공.원시 타입과 참조 타입의 차이에 대해서 완벽히 설명이 가능하다.(사실 이 부분은 스터디나 튜터링에서 너무 많이 설명해봐서 눈 감고도 설명이 가능...)그래도 중요한

오늘은 코드스테이츠 프리 코스 15일차오늘부터 html, css 파트 시작.css flexbox, grid 복습이 필요하다. (안 쓰니깐 다 까먹는다...)flex-shrink, flex-grow, flex-basis 다시 정리해보기.flex-direction에 따른

Codestates pre course 17일차 >오늘은 코드스테이츠 프리 코스 17일차 signUp 페이지 유효성 검사 작업 required 사용했을 때 말풍선 css 적용 가능한지 찾아보기. > twittler 목업 코딩하면서 시멘틱 태그에 대해서 정리하는 시간을

Pre off toy주말을 통해서 Pre off toy 문제를 풀어봤다. 별 3개 난이도 까지는 그닥 어려운게 없었고그냥 배열 메소드나 기초적인 개념이 필요한 부분이였다.하지만...별 4개 난이도 부터는 조금씩 생각해야하는 부분이 있었다.🧐어떠한 임의의 4자리 수를

자료구조와 알고리즘Programming language : A programming language is a formal language comprising a set of instructions that produce various kinds of output. Pr

Pre Hiring Assessments오늘은 프리 코스 마지막 일정이자 이머시브 코스 들어가기 전 마지막 자기 진단을 할 수 있는 Pass me assessments가 있었다. 토이 문제 난이도 4개는 거뜬하게 풀어야 한다는 말을 듣고 사실 살짝 긴장을 한 상태였는데

React오랜만에 리액트 공부를 다시 시작하는데 정말 다 까먹었다....😎'편견 없이 공부를 할 수 있다..!' 라고 긍정적으로 생각하자 껄껄기억이 가물가물한데 책을 보다보니 벌써 100페이지 넘게 봤네 오늘은 사실 휴식이 목적이라 그렇게 많은 시간을 투자하지는 않았

이머시브 코스 첫 번째 날일단 설렘 반 긴장 반으로 시작이 된 이머시브 코스.😖😖프리 코스를 시작했을 때와 마찬가지로 OT로 시작을 했고 동기부여와 마음가짐을 다 잡았다.오늘 공부한 첫 번째 내용은 node.js란 무엇인가? 그리고 node의 버전관리, 모듈 관리는

코드의 질을 판단할 때 크게 3가지 요인으로 확인할 수 있다.우리의 의도에 맞게 코드가 동작을 하는가?작성한 코드에 문제, 결함이 없는가?작성한 코드가 읽기 쉽고 유지보수에 용이한가?코드의 질을 향상시키기 위해서는 Linting과 Testing을 이용할 수 있다.Tes

이번 스프린트에서는 앞으로의 코스 과정에 필요한 정말 기초적인 부분에 대해서 배웠다.크게 첫 번째로 node.js가 무엇인지 nvm으로 node version을 관리, 설치하는 방법 그리고 npm이 무엇인지 대해서 공부했고두 번째로는 git workflow가 어떻게 흘

이번 스프린트에서는 자료 구조에 대한 내용이다.그 중에서도 오늘은 자료 구조가 무엇인지? 그 중에서 stack과 queue에 대해서 다루어 봤다.자료 구조에 대해서 공부해보는건 처음이였다. call stack 때문에 stack이 어떤건지 대충 감은 왔지만 queue에

오늘은 자료구조 중 Linked list (연결 리스트), Hash table를 주제로 공부를 했다.정말 난생 처음 들어보는 말이었다. 솔직히 말해서 아예 처음 들어본 개념은 이번이 처음이라 당황했다.뭐 그래봤자 넌 그저 구조일 뿐이야 생각하며 당당히 도전장을 내밀었지

이머시브 1주차가 끝나고 드는 내 생각은 말 그대로 ' 벌써 끝이니...? ' 난 아직 정리가 안 됐다고..!!그런데 시간은 왜이리 빨리 가는거야..?힘들 줄은 알았지만 이렇게 정신이 없을 줄은 몰랐다.코스 첫 스프린트 Immersive Prep 까지는 쉬운 내용이였다

주말을 통해서 저번주에 등장했던 stack, queue, linked list, hash table은 완벽하지는 않지만 어느 정도 정리가 끝난 상태.근데 이게 뭐람 또 새로운게 등장했네...? Graph, Tree 너무 반갑다야...😑 😐단순히 정점(vertext,

벌써 이머시브 두 번째 스프린트가 종료되었다.이번 스프린트에서 다룬 내용은 Data structure 이다.한번도 공부해보지 않은 내용이라 많이 당황하기도 했지만 이제는 어느정도 이해가 가고 남들에게 간단하게 설명 정도는 할 수 있다는 느낌이 온다.스프린트에서 다룬 자

세 번째 스프린트는 상속 패턴에 대한 내용이다.따라서 객체 지향 프로그래밍이 무엇인지, 자바스크립트에서는 객체 즉 인스턴스를 어떻게 생성하는지 또 상속 패턴에 대해 공부했다.자바스크립트가 정확한 객체 지향 프로그래밍 언어는 아니지만 그래도 어느 정도 잘 흉내를 내고 있

오늘은 토이 문제를 푸는 첫 번째 날이다. 문제를 잘못 이해하는 바람에 정해진 시간에는 완료를 하지 못했다.지금 일정이 끝나고 다시 문제를 보는 중인데 문제를 이해하고 나니깐 그렇게 어려운 문제는 아닌거 같다. 근데 살짝 문제 이해력이 조금 부족한거 아닌가 싶은 마음이

오늘은 네 번째 스프린트 알고리즘 파트이다. 사실 내가 가장 자신이 없던 부분이라 걱정이 굉장히 많았다.선배 개발자 세션에서도 언급이 됐던 과제인 N-queens라는 알고리즘 문제를 직접 만나니깐 정말 멘탈이 많이 나갈 정도로난이도가 갑자기 상승을 해버렸다......지

코드 스테이츠 코스 역사상 가장 정신 없던 날이다.평소와 같이 일어나서 토이 문제를 풀었다. 어제 N-Queens 문제를 풀어서 그런가 쉽게 풀리는 토이 문제한테 고맙다는 생각이 들었다.탐색방법을 선택 -> 가망성 없는 탐색 발견 -> 가지치기 굉장히 단순하지만 잘 떠

오늘은 자가 진단 테스트가 있는 날이다. 사실 이머시브 코스에 와서 4번의 스프린트가 있었는데스스로 내 상태에 대해서 엄청 만족스러워 하지 않았기 때문에 걱정 반 설렘 반의 느낌이었다.테스트 중에 조금 막혔던 부분은 트리 부분이었다. root 노드가 자꾸 map 메소드

자가 진단 HA가 끝나고 주말까지 쭉 솔로 데이가 주어졌다.진단 내용으로 이전 스프린트에서 스스로 어떤 부분이 부족한지 캐치를 하고 보완을 하는 시간이다.내가 이번 Solo day에서 잡고 싶은 부분은 recursion 파트와 디버거, 깃 사용법이다. 디버거 사용을 잘

Codestates immersive course 이머시브 다섯 번째 스프린트 Asynchronous & Promise 오늘은 다섯 번째 스프린트가 시작되는 날이다. 무슨 주제가 시작을 하던 사실 조금은 지겨웠던 CS 파트가 끝나서 조금은 기쁘다... 이번 스프

오늘은 Asynchronous & Promise 스프린트 마지막 날이다.어제 공부한 내용으로 과제를 진행하는데 있어서 어려움은 없었다.어떻게 보면 가장 얻어가는게 많은 스프린트였다. callback -> promise -> async await 으로 변경이 자유롭게 가

오늘부터는 서버와 통신하는 방법에 대한 스프린트가 시작됐다.이번 스프린트에서 다루는 내용을 정리를 하자면 아래와 같다.서버와 어떻게 통신하고 있는지 , 웹이라는 공간에서 데이터가 어떤 형태로 전달 되는지에 대한 메커니즘을 학습KeywordServer, client, H

이번 스프린트에서는 node.js를 사용해 백엔드 구축을 한다.오늘 진행했던 과제는 저번 과제였던 chatterBox에서 server를 만들어 보기 전mini node server를 연습으로 만들어봤다.node 내장 모듈인 http를 사용해서 서버를 만들고 요청이 들어

Chatterbox Server 마지막 작업이 끝이 났다.기존의 node 내장 모듈인 http를 이용해 서버를 만들었던 걸 express 프레임워크를 이용해 리팩토링을 진행했다. 그냥 http를 사용하는거 보다 확실히 미들웨어를 쉽게 사용해 좀 더 편하고깔끔한 코드 작

드디어 리액트 스프린트가 본격적으로 시작되었다.어제는 엄청 기본적인 내용에 대해서만 다루었고 혼자서 컴포넌트를 여러개 만들고 합성해보고 아주 간단한 실습을 해봤다.오늘은 페어 분과 같이 youtube API를 이용해서 영상 정보를 가져와 우리의 리액트 앱에 그려주는 과

리액트 스프린트가 벌써 종료가 되었다. 일단 이번 스프린트에서 다룬 내용을 살펴 보자면 리액트가 무엇인지? 또 리액트 컴포넌트란 무엇인가, 클래스 컴포넌트는 뭐고, state 와 lifeCycle은 뭔가?이런 큰 주제들로 youtube API 검색을 통해 youtube

Redux 스프린트 시작...!리덕스에서 가장 중요한 3가지하나의 애플리케이션에는 하나의 스토어상태는 읽기 전용 -> 불변성을 지켜주어야한다.변화를 일으키는 reducer 함수는 순수 함수이다. 즉, 동일한 입력 값은 동일한 출력 값을app에서 스토어로 보내는 데이터

오늘은 어제 미리 과제를 완성해 놓은 상태라 혼자서 복습을 하는 시간을 가졌다.특히 클래스 컴포넌트에서 connect를 사용하여 컴포넌트에서 store에 접근하게 해주는 방법보다함수 컴포넌트에서 react-redux에서 지원하는 useSelector, useDispat

어제 HA가 끝나고 오늘은 다른 일정이 없이 개인 공부를 하는 solo day 이다.오늘의 가장 큰 목표는 가장 최근에 진행한 스프린트 react와 redux에 대해 복습을 하고주말에 다시 서버 클라이언트 스프린트를 복습하려고 한다.일단 오늘 가장 먼저 만들어 본 예제

이번 스프린트에서는 지금까지 배웠던 내용을 가지고 개인 포트폴리오 사이트 미니 프로젝트를 진행했다.사실 이번 스프린트를 진행하면서 포트폴리오를 만든다는 느낌보다는 리액트 앱에서 라우팅 또는 서버 사이드에서 라우팅하는 방법에 대해 접해보고 사용해보는 시간 같았다.일단 나

오늘은 원래 일정인 personal portfolio를 하기 보다는 CSR, SSR 에 대해서 공부하는데 집중을 했다.스프린트 내용에 있는 라우팅과도 어느정도 관련이 있으니 딴짓을 한건 아니지..ㅎ오늘 공부하면서 가장 좋았던 점은 완벽히 이해했다기 보다는 "아.. 이래

오늘부터 SQL 스프린트가 시작이 되었다.일단 나는 No SQL DB인 몽고DB는 다뤄봤는데 SQL은 완전 처음 접해본다.SQL 문법을 익히는데 거의 하루를 다 사용한 것 같다. 이제 좀 익숙해지고 Mysql workbench도 이제 슬슬 사용하는 방법을 알겠더라...

오늘은 일단 컨디션이 너무 좋지 않았다. 어제 일정이 좀 틀어지고 SQL을 보느라 새벽 늦게까지 잠을 못 자서하루종일 머리가 띵하고 몸이 무거웠다. 앞으로는 아무리 할게 많아도 늦게 자는건 최대한 하지 않아야겠다. 다음날 일정에도 영향이 많이 가더라.... (사실 TI

오늘은 Data base 스프린트 마지막 날이다. 이번 과제는 사실 어제 정규 일정 마지막 쯤 시작을 했어야 했는데 환경 오류 때문에 시간을 많이 소비해서 진행을 못 했었다.이번 과제에서는 이전에 진행했던 Chatter Box에 MVC 패턴을 적용해 직접 Control

이번 스프린트에서는 MVC 와 ORM에 대해서 다뤄보는 시간이다.저번 스프린트는 mySql을 이용해서 DB를 만들고 관리했다면 오늘은 sequelize 라는 ORM 도구를 사용했다.시퀄라이즈를 사용하면 SQL를 사용하지 않고 자바스크립트로 데이터베이스 조작이 가능하다.

Codestates immersive course Authentication 오늘은 인증에 대해서 스프린트를 진행하였다. 암호화를 통해서 인증 키를 만들고 만들어진 키를 세션에 저장을 하고 클라이언트에 쿠키로 내려줬다. 그리고 다음 요청에서 그 쿠키와 세션의 키

오늘은 어제 완성했던 과제를 조금 더 수정을 하였는데 다시 해보길 너무 잘했다 라는 생각이 든다.일단 페어 분이랑 엄청 고민을 해봤지만 답이 결국 나오지 않아서 도움을 요청했지만의미있는 시간이었다고 생각된다.express-session이 어떻게 동작하는지 또 시퀄라이즈

오늘은 주말에 하려고 계획했던 리액트 + mysql + node.js + express 로그인 보일러 플레잇 클라이언트 작업을 진행했다.UI는 antd 라이브러리를 사용해서 제작했다.antd를 많이 사용해 보지는 않아서 그런지 커스텀하는데 꽤 애를 먹었다.그래도 제일

오늘의 스프린트 내용은 AWS에 이전 과제였던 shortly-express를 배포하는 내용이다.AWS가 뭔지 정리를 했는데 흠.. 이게 디테일한 설정으로 넘어가면 굉장히 머리가 아플거 같은 생각이 든다.일단 S3로 빌드된 클라이언트 파일을 업로드 시켜줬다. 또한 서버도

오늘은 마지막 HA 테스트가 있는 날이었다. 테스트 내용은 뭐 우리가 이머시브에서 배운 전반적인 내용이었다.코스 내용만 충실해도 충분히 풀 수 있을 수준이었다.근데 막힌 부분은 한가지가 있긴 했다.왜 포스트맨에서는 세션 아이디 쿠키가 잘 생성이 되는데 왜 크롬 브라우저

AWS 관련 서적 대여, 내가 사용했던 서비스에 대해서 정리이전에도 웹팩으로 번들링을 해봤지만 요즘 CRA에 익숙해져서 선배 개발자 깜짝 세션에서 나온 웹팩 설명을 재미있게 들었다.프로젝트에서 직접 웹팩 세팅을 해보고 싶다.오늘은 조금 느긋하게 공부를 한거 같은데 내일

오늘은 드디어 1차 프로젝트가 시작되는 날이다.오전에는 프로젝트를 진행하면서 기획을 어떻게 하고 Git - flow를 어떻게 할 것인가에 대한 인트로가 있었다.인트로에서 계속 기획 단계에 중요성에 대해서 강요를 했다.나도 정말 중요할거라 생각하는 이유가 혼자서 토이 프

오늘은 1차 프로젝트 두 번째 날이다.오전에 스탠딩 미팅을 진행하고 어제 저녁에 따로 작업한 내용에 대해서 공유를 하는 시간을 가졌다.이제 매일 아침마다 미팅을 진행하는데 책임감을 가지고 해야겠다는 생각을 한번 더 갖게 됐다.일단 오늘은 개별적으로 작업한 내용은 디자인

오늘 오전에는 기획 마무리를 하고 프론트, 백 포지션 별로 나눠져서 작업 분배 및 환경 세팅을 했다.일단 prettier 와 ESlint config를 통일해서 문제가 생기지 않게 세팅을 해주었다.근데 일단 자동으로 줄 바꿈 처리를 안해주는 문제가 발생해서 추후에 수정

일단 오늘은 전체적으로 어제 짠 디비를 수정을 했다.sequelize-cli를 이용해서 모델 생성, 마이그레이션을 하지 않고 그냥 직접 모델 생성을 하는 방식으로 변경했다.table이 갱신이 아닌 없으면 생성되는 사실도 알았다.( 이거 때문에 시간 낭비를 매우 많이 했

정말 오랜만에 TIL 작성이다. 내가 이렇게 까지 TIL 작성이 오랜만인 이유는 당연히 프로젝트 덕분...사실 프로젝트 시작하기 전에 가장 쉽게 봤던게 인증 과정이었는데 막상 적용을 하려니 제일 어렵고 까다로운 부분이었다.특히나 크롬 80 버전 이후로 생기는 sames

이번 TIL은 거의 한달 만에 작성을 하는거 같다.변명을 하자면 1차 프로젝트에서는 처음 하는 팀 프로젝트 자체에 어려움이 있었고2차에서는 생각보다 bare minimum을 높게 잡은 듯하여 작업 시간이 매우 많아졌다.주마다 팀원끼리 피드백을 하면서 리뷰를 하는데 사실

오늘은 서버 bare minimum 을 완료하여 인원이 부족한 프론트에 합류하기 위해 타입스크립트와 리엑트, 리덕스, 리덕스 사가에 대해서 어느 정도 살펴보는 시간을 가졌다.일단 타입스크립트도 이번 프로젝트에서 처음 다루는거라 굉장히 낯설고 불편한데 이걸 그냥 리엑트도

역시 프로젝트는 끝 없는 문제가 있다.기획을 아무리 열심히 짠다고 해도 계속되는 수정 사항과 문제 발생으로 인해서 일정이 틀어지고팀원들과 나는 점점 지쳐가는 느낌이다.우리가 이번 프로젝트에서 메인 기능으로 사용하는 날씨 정보를 가져오는데 일단 문제가 생겼다.시간별로 예

오늘부터 클라이언트 작업에 합류를 하였다. 일단 오늘을 대비해서 주말에 빡세게(?) 복습을 했는데나름 성과가 있던 공부인거 같다.예를들어 리덕스로 전역 상태관리 하는 방법에 대해서 어렴풋이 기억이 나고 saga는 완전 까먹어버린 상태인데거기다가 타입스크립트까지 적용하라

일단 오늘은 반성부터 하고 시작하자 아침에 페어 코딩 인터뷰가 있는데잠깐 10분만 누워있어야지가 40분이 되버리고 지각을 해버렸다.상대방 분에게 굉장히 죄송한 마음 뿐....😞오늘 작업은 대부분 클라이언트 일정 기능 작업을 한거 같다.근데 이렇게 프론트 작업을 하다보

오늘도 역시나 삽질의 연속이다.리덕스로 상태를 관리하는데 전역 상태를 효과적으로 활용하지 못하는 거 같아서코드를 뒤 엎고 있다.예를 들면 일정을 삭제하면 다시 요청을 해서 가져오는게 아닌 상태 값만 변경해주려는(?) 그런 삽질을 하고 있다.무튼 방금까지 열심히 달려서

오랜만의 TIL이다. 코드스테이츠라는 코딩 부트캠프를 수료하고 그 동안 밀린 일과 휴식을 하며 시간을 보냈고 이제는 다시 운동화 끈을 꽉 조이고 달릴 준비를 해야겠다. 오늘은 면접 예상 질문에 대한 답변을 준비하면서 글을 쓰는데 번역투가 나도 모르게 쓰이고 있는거 같아

웹 표준에 대한 지식이 생각보다 부족했다.<button>태그를 이용해서 링크를 이동해야하는데 자바스크립트 말고 방법이 딱히 생각나지 않았다.....또한 버튼 태그들은 type의 속성이 기본으로 submit이 들어가 있다. 따라서 form 태그로 들어간다면 onSu

사용자가 떠나가지 않게 하기 위함 => 수익 증대프론트엔드 개발자로서의 경쟁력로딩 성능 (리소스 불러오기)렌더링 성능 (리소스를 화면에 렌더)아날로그는 우리가 듣고 보고 느끼는 자연의 모든 신호를 말한다.컴퓨터는 아날로그 신호를 디지털 신호로 바꾼다.다시 필요한 곳

성능 최적화 종류 로딩 성능 이미지 사이즈 최적화 Code split 텍스트 압축 렌더링 성능 Bottle neck code 최적화 크롬 dev tool - lighthouse 사용

웹팩으로 번들링한 파일 분석을 위해 사용한다.CRA로 생성한 프로젝트는 cra bundle analyzer 를 사용.불필요한 모듈이 번들링 파일로 같이 로딩된다? -> 성능저하따라서 code spliting을 통해서 불필요한 리소스 줄이기 -> 로딩속도 향상코드 분할

CS는 문제 해결에 대한 학문이다. 문제 해결은 I/O의 과정이다.컴퓨터 과학이란?컴퓨팅은 입력 -> 출력의 중간 과정이다.알고리즘은 입력의 자료를 출력 형태로 만드는 처리 과정이다.입력값을 출력값의 형태로 바꾸기 위한 명령의 규칙들의 순서적 나열이다.정확도와 효율성이

웹 페이지를 로드할 때 그에 필요한 리소스들도 받는다. (HTML, CSS, JS 등..)이러한 문서들의 용량을 줄이기 위해서 텍스트 압축을 실행한다.서버에서 보내는 리소스를 압축해서 사용.텍스트 압축의 예압축 알고리즘GZIPDeflate (LZ77)클라이언트가 아닌

printf 함수를 사용하기 위해서는 stdio.h 라이브러리가 필요하다.c언어로 작성되어 있으며 파일명이 .h로 끝나는 파일이다.여기에는 printf 함수의 프로토타입이 있어 clang 컴파일러가 컴파일할 때 무엇인지 알려주는 역할을 한다.make나 clang을 사용

C에는 여러 자료형이 있고 각각의 자료형은 서로 다른 크기의 메모리를 차지한다. char 타입의 변수를 생성하면 메모리의 한 사각형 안에 그 변수의 값이 저장된다.RAM세 개의 점수를 저장하고 평균을 출력하는 프로그램이다.하지만 이 코드가 최선의 디자인이 아니다. 그

학점 출력 프로그램 만들기 미션근로계약서 작성 완료, 서류 제출 끝..! 거의 1년 넘게 준비했던거 같은데 드디어 월요일부터 출근이다.진짜 개발자다....ㅎ더 열심히 해서 좋은 팀원이 되자.월요일까지 꼭 한번씩 살펴보자!Netlify QATypeScriptEmotion

공식문서 참고interface 생성 후 class에 implements 키워드 사용해서 적용 constructor에서 this.name = name 이렇게 하지 않아도 된다.readonly 키워드 이용해 상수 선언을 할 수 있다.static 키워드는 정적 메소드를 정의

TS 클로저 JS => TS Defualt parameter Indexable type Class method Method chain Generic 배열을 다루는 함수를 작성할 때는 타입이 고정된 함수를 만들기보다는 제너릭 타입을 사용하는 편리하다. 제너릭