부트캠프

어제 발표가 나서 바로 블로그에 쓸려고 했는데 이것저것 알아본다고 이제야 쓴다..솔직히 합격할 생각은 안 하고 있었는데 막상 합격하니까 기분은 너무 좋은 거 같다 ㅋㅋ시간표를 보니 오프라인이 포함되어 있네...? 문의 넣어보니 일단 100% 온라인이라고는 하는데 정부

오늘은 첫날이라 가볍게(?) 오리엔테이션 진행했다. 개강 전에 받은 안내메일 통해서 미리 학습을 좀 했었다.교육 매니저님이 방향성을 좀 잡아주기 위해서 코딩공부 전략 같은 것과 개발자 도구 사용법 등을 익히라고 하셨는데 전략 부분은 나중에 다시 한번 더 읽어봐야 할 것

타입에는 여러 종류가 있다.string, number,boolean 등등... 그리고 undefined와 function도 하나의 타입이다.여러 타입이 섞인 경우도 있는데위처럼 여러 타입들이 중괄호로 묶인 경우를 객체라 한다.이 경우에는 배열 타입이라 한다.(실제로 자

문자열 내에 있는 요소가 위치한 첫 번째 인덱스를 리턴, 존재하지 않을 경우 -1을 리턴지정한 구분자를 이용하여 문자열을 구분한 다음 배열로 리턴문자열의 시작과 끝(끝-1)에 대한 복사본을 새로운 배열 객체로 리턴, 원본 배열은 바뀌지 않음.subString(start

forfor문은 조건식을 토대로 정해진 횟수만큼 for문 내부에서 반복실행한다. 빠져나올 때는 보통 break 키워드를 사용한다.whilewhile문은 for문과 달리 조건식만 존재하고 반복횟수를 제어하고자 하는 경우에는 while문 내부에서 사용해야 한다. 즉 내부에

보통 html 작업을 할 때는 div 태그를 사용하는데 혼자 작업하는 경우에는 크게는 문제가 없겠지만, 협업을 하거나 실제로 서비스 배포를 할 경우에는 문제가 될 수 있다.우선 사실상 div 태그는 아무런 의미를 담고 있지도 않고 실제로 SEO(Search Engine

block!codesandboxinteresting-rubin-jpgxfd?fontsize=14&hidenavigation=1&theme=darkblock 속성일 경우 차례대로 줄바꿈이 일어나며 width는 기본적으로 100%가 된다.inline-block!codesa

드디어 뭔가를 만들어 보는 시간이 찾아왔다.계산기 구현하기 전에 목업을 만들어 봤는데 HTML이야 그렇다 치고 CSS 짜는 게 제일 어렵다...물론 styled-component 짤 때도 그렇게 쉬운 거는 아니었지만 진짜 라이브러리나 프레임워크 하나도 안 쓰고 하는거다

앞서 만들어놨던 계산기를 바탕으로 계산기 구현을 하는...줄 알았지만 코드스테이츠 측에서 만들어둔 틀을 바탕으로 진행했다.계산기가 쉽사리 만들어진 게 아니구나라는 걸 깨달았다. 평소에 계산기를 쓰면서 정말정말 기본적이라고 생각했던 걸 코드로 구현할라 그러니까 되게 막막

오늘은 리눅스에 대해서 수업을 진행했는데 나는 미리 노마드코더에서 셋업 강의를 들으면서 wsl을 문제없이 설치했기 때문에 진행하는데 딱히 차질은 없었다.그리고 Git에 대해서 약간 맛보기로 했는데 솔직히 git commit이 뭐다 push가 뭐다....라는 걸 아는것도

배열에 대한 메소드를 공부하면서 가장 헷갈렸던 부분은 아마 immutable과 mutable의 구분이었다.지금 바로 이 둘을 파악해보자.원본 배열은 바뀌지 않았으므로 immutable하다.slice도 마찬가지로 immutable하다. 참고로 slice 안에 아무것도 들

오늘 연습문제로 풀어봤던 걸 예시로 들면처음에 obj.property로 접근을 했는데 통과가 되지 않았다.그래서 자료를 찾아보니 dot notation으로 접근할 경우에는 예를 들어, 이런식으로 확정적으로 객체 안에 들어가있을때만 dot notation으로 접근이 가능

원시 자료형에는 string,number,boolean,undefined,null,BigInt,Symbol이렇게 총 7가지가 있으며, 주로 쓰이는 자료형은 BigInt,Symbol을 제외하고 거의 다 쓴다고 볼 수 있다.원시 자료형 같은 경우에는 변수에 하나의 값만 할

클로저는 언제 봐도 어렵다..마지막 result 부분에서는 인자가 들어가있는데 왜 함수 바디 부분에서는 안 들어가있지? 했는데 다시 생각해보니 함수 실행 시에는 20이라는 값이 무시되고 전역에 선언된 30이라는 값이 들어간 후 리턴이 되는 것이다.가장 헷갈렸던 두 코드

이때까지 부트캠프 하면서 아 이건 자신있어! 하는 부분이었는데 오늘 보니까 아니었다...뭔가 다시 복습할 수 있는 차원에서 하는거라 좋았다.02_Types-part1자바스크립트..하.. 왜 123-'1'이 122가 나오는 건지 모르겠다.진짜다...04_Scope이 문제

헷갈렸던 부분먼저 차례대로 살펴보면 objFunction을 call 메소드를 이용해서 foo 값에 13을 집어넣은 후 bar 메소드르 호출한 상태다.하지만 bar 메소드를 리턴해주는 시점에서는 foo값이 25이기 때문에 본래 예상대로라면 25가 나오는 게 맞을것이다.하

getElementsByTagName : Element의 태그 이름을 반환setAttribute: setAttribute(name, value)name: 속성의 이름value: 속성에 할당할 값remove와 removeChildremove는 말 그대로 제거라는 행위 자

날짜 표현 방법 - toLocaleString(): 현지 시간으로 바꿔주는 메소드getItem(key),setItem(key,value) - 로컬 스토리지 관련 메소드로컬 스토리지 메소드는 몰랐던 건 아니지만 다시 한번 짚고 넘어갔다.솔직히 말해서 6개월 정도 리액트

일급 객체의 특징은 다음과 같다.변수에 할당(assignment) 할 수 있다.다른 함수의 전달인자(argument)로 전달될 수 있다.다른 함수의 결과로서 리턴될 수 있다.모던 자바스크립트 딥다이브에서 읽었던 내용이라 조금은 기억이 난다.마지막 특징을 보니 클로저와도

클래스와 인스턴스클래스란 무엇인가?객체(인스턴스)를 만들기 위한 설계도다. 이게 없으면 아무것도 못 만든다.인스턴스는 무엇인가?클래스인 설계도를 바탕으로 만들어진 객체라고 보면 된다. 자동차를 예로 들면 컬러나 바퀴에 대한 생김새 등이 다를 수 있을 것이다.new 키워

오늘 줌 라이브 세션을 들으면서 그냥 넘어갔던 부분을 다시 짚고 넘어가고자 한다.constructor 에 아무것도 넣지 않을 경우 constructor 내부에서 직접 속성 및 값을 설정해 줄 수 있다.이번에는 constructor 에 인자들을 넣었을 경우인데, def

pluck 함수는 설명부터 제대로 이해가 안 가서 다시 천천히 봐야겠다.오늘은 underscore.js에 있는 Docs를 토대로 비슷하게 구현을 시간을 가졌는데 Bare Minimum은 그나마 괜찮았는데 Advanced부터 막히기 시작했다... 클로저랑 비동기 함수가

동기 - 말 그대로 앞에서 한 일이 모두 끝나야 다른 일이 실행되는 방식비동기 - 예를 들어 커피를 주문하는 경우,만약 동기적으로 일어난다면?커피 주문 접수 완료 👉 커피 만든 후 손님 호출 👉 손님에게 전달 이지만비동기적으로 일어나는 경우에는 커피1 주문 👉 커

li 태그로 자바스크립트 객체를 감쌀 때는 li에 key가 반드시 필요한데 보통의 경우에는 .id로 접근이 가능하지만 정말 최후의 보루로써는 index를 사용할 수 있다.하지만, 이것도 사용은 지양해야 한다.Math.random()에 대한 사용도 공식문서에 나와있는데

SPA와 MPA SPA가 등장하기 이전에는 웹사이트 내에서 페이지 이동을 할 때마다 페이지 전체를 불러와야 했고 만일 서버에 이상이 있는 경우 데이터가 불러와질 때까지 계속 기다려야 했다. 이로 인해 UX가 현저히 떨어지는 현상이 나타났다.SPA가 등장한 이후로는 페이

오늘 공부한 내용 props 컴포넌트의 속성을 의미하며, 주로 상위 컴포넌트에서 하위 컴포넌트에 값을 전달할 때 사용한다. props.children props를 전달하는 또 다른 방법으로 children을 이용하여 해당 value에 접근이 가능하다. stat

오늘 공부한 내용 클라이언트-서버 아키텍처 리소스에 접근하려는 앱은 손님과 같다. 손님이 어떤 물품을 받는다고 했을 때 리소스를 갖고 있는 점원에게 요청해야 한다. 이 요청에 따라 리소스를 담아 응답한다. 서버는 일반적으로 리소스를 전달만 해주고 이 리소스를 저장

REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식REST API를 창시한 로이필딩은 위 모델의 모든 단계를 충족해야 REST API라고 부를 수 있다고 주장했다. 하지만

상위 컴포넌트에서 하위 컴포넌트로 props(위 코드에서는 함수)를 전달하면하위 컴포넌트에서는 이것을 실행해서 상위 컴포넌트에 있는 로직이 실행되도록 한다.useEffect,useState 원리를 좀 알아볼려고 블로그 찾아보는데 클로저가 또 나온다....특히 useEf

Same Origin Policy의 약자로, '같은 출처의 리소스만 공유 가능하다' 는 것인데출처란 다음과 같다.https://www.codestates.com:443/course 👉 출처출처는 프로토콜,호스트,포트의 조합으로 이루어져 있으며, 이 중 하나라

공부한 내용 req.params vs req.body req.body /book으로 POST 요청을 보낸다고 가정했을 때, 위처럼 body에 데이터를 담아서 보내면 req.body.uuid, req.body.departure... 이런식으로 확인이

재귀함수는 자기 자신을 호출하는 함수로써 반복적인 작업을 해야할 때 효율적으로 코드로 풀어낼 수 있다.arrSum 함수로 배열의 합을 구하는 과정을 생각해보면배열을 쪼갤수록 문제는 점점 작아질 것이다.이런식으로 과정을 쭉 거치다보면 빈 배열이 나오는 순간이 있을것이다.

JSON.stringify와 DOM을 재귀를 이용해서 복습해 보는 시간을 가졌다.JSON.stringify 과제에서 객체가 input으로 들어올 때 함수와 undefined도 객체인 점을 고려해서 작성을 했어야 하는데 그 부분에 대해서 생각하는데 애를 좀 썼다.그래도

오늘 공부한 내용 UI란? 사람과 컴퓨터끼리 상호작용 하는 시스템을 말한다. 보통 UI라고 하면 컴퓨터 상에 나오는 화면만 떠올리기 쉽지만 키보드,마우스 등의 물리적인 요소도 UI에 포함이 된다. UX란? 웹 개발 분야에서 주로 나오는 CSR과 SSR을 예로 들

공부한 내용 Sass CSS를 마치 자바스크립트처럼 쓸 수 있으며 color,width 같은 반복되는 값을 변수로 지정하여 쓸 수 있으며, 또는 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 한다. 그렇기 때문에 Sass는 SCSS 코드를 읽어

MVC 패턴에서 controller 는 model 에 정의된 데이터를 조회하거나 변경하는 역할을 하고 변경된 model의 데이터를 View 에 반영한다.또한 User는 View를 통해 데이터를 입력하고 Model에 반영되며 View와 Model은 데이터를 양방향으로 주

유지 보수 쉬움 - HTML,CSS,JavaScript로 사용 방법을 정리하기 이전에는 복잡하게 뒤섞여 코드가 엉망이었지만 이제는 각 영역이 분리되면서 유지 보수가 쉬워졌다.웹 호환성 확보 - 웹 표준을 준수하게 되면 브라우저에 더 이상 종속적이지 않으며 사용 기기나

공부한 내용 IP 흔히 IP라고 하는 인터넷 프로토콜 주소를 컴퓨터에 부여해서 이를 이용해서 통신하ㅕ며 지정한 주소에 패킷이라는 통신 단위로 데이터 전달을 한다. 서버에서 데이터를 잘 전달받았다면 서버도 이에 대한 응답을 돌려줘야 한다. 마찬가지로, 서버도 IP

공부한 내용 Cookie 쿠키는 서버에서 클라이언트에 데이터를 지속적으로 저장할 수 있는 방법이다. 우선 처음으로 웹사이트 방문 시 클라이언트가 서버에게 요청을 하면 그 응답에는 쿠키가 있을 수 있다. 다음 방문시 클라이언트가 브라우저에서 받아놨던 쿠키도 요청으로

드디어 섹션3 막바지다..(기술면접 실습이랑 회고가 남았지만)오늘은 애플리케이션을 만들..지는 않고 기획과 디자인만 진행하는 거였고본격적인 코딩은 Section4에도 구현해도 됐었다.며칠전부터 뭘 만들지 계속 고민했던 거 같은데 처음에는 URL shortner를 만들어

스택,큐한테 얻어맞고 온 날이다..그냥 개념적으로만 알고 있던 터라 실습할 생각은 못해봤는데 이렇게 코드스테이츠에서 경험을 하게 되네..^^스택이랑 큐에 대해서 간단히 말해보자면스택은 그냥 종이를 위로 쌓아올리는 걸 생각하면 쉽다.가장 나중에 쌓은게 먼저 치워지고 가장

오늘은 트리랑 그래프 파트 진행했는데 그래프는 하나도 공부를 안해놨던 터라 페어랑 엄청 머리 싸맸던 거 같다.. 그렇다고 트리를 잘한것도 아니지만..주말에 코플릿 문제 더 살펴보려고 한다. Section4에서 갑자기 알고리즘 들어가버리니까 진이 빠지는 거 같다.개념은

개발이 완료되고 나면 이를 배포하는 과정이 필요한데 만일 코드의 양이 늘어나게 되면 파일의 크기가 무거워지게 되는데, 웹 페이지의 로딩속도와 성능에 상당한 문제가 생기고 이는 유저 이탈로 바로 직결된다.그래서 이러한 파일들을 번들링해주는 웹팩이 필요하다.css-min

먼저 DOM 구조를 한번 살펴보면 출처 : https://dev.to/swarnaliroy94/introduction-to-react-real-dom-virtual-dom-363이 같은 구조에서 변경이나 삭제를 하는 과정을 거치게 된다면 브라우저가 리플로우와

작업을 하다보면 컴포넌트의 크기가 점점 커지게 되면 유지보수나 디버깅이 상당히 힘들어진다.이럴 때 Custom Hook을 이용하여 여러 파일로 쪼개면 오류가 날 시 발견하기 쉬워진다.출처 : https://usehooks.com/사이트 이름에서도 알 수 있듯이

Dynamic import

CPU 중앙 제어 장치라고도 하며, 내부적으로 간단하게 보면 산술/논리 연산 장치, 제어 장치, 레지스터로 구성되어있다. 산술: 말 그대로 산술 연산을 수행하는 것 제어 장치: 프로그램 명령, 제어 신호를 생성해서 장치의 동작을 제어 레지스터: CPU에서 사용하는

페이스북이나 인스타 같은 곳에서도 팔로잉 팔로워 관계는 그래프 자료구조로 활용된다고 한다.이렇게 query를 날리면 트리 구조의 JSON 형태로 응답을 받을 수 있다.GraphQL이 등장하기 전까지는 거의 REST로 개발할 수 밖에 없었다.만약 /api/korea/st

출처: https://docs.firstdecode.com/tdd/ TDD란, 작은 단위로 테스트 케이스를 작성하고 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미한다. TDD를 사용하는 이유 시간이 오래 걸릴수도 있지만, 예상치 못했던 버그를 줄여서

최적화는 주어진 조건에서 최대로 효율을 낼 수 있도록 하는 과정이다.쇼핑몰 사이트 등에서 로딩창만 계속 본 경험이 있었는데 정말 짜증났고 다시는 들어간 적이 없었던 것 같다.이처럼 최적화가 안되어있으면 데이터를 불러오는 시간이 더 많이 들기 때문에 유저의 이탈률이 어마

Github Actions 실습 .github/workflow 에서 yml 파일을 만들고 github actions 실습을 진행했다. 생각보다 작성하는 게 좀 빡셌다. 구글링만 1시간 정도 한 결과 답이 나왔다.. name: Install dependenci