TIL

오늘 코드스테이츠 SE 부트캠프 22주 과정이 시작되었다. 이 과정을 선택하기까지 고민이 많았다. 일단 한두 푼 드는 것이 아니다 보니 큰 결심이 필요했다. 거기다 원격 학습으로 진행되다 보니 오프라인으로 진행되는 부트캠프보다 몰입감이 떨어지지 않을까 걱정이 되었

프로그래밍이란 컴퓨터에게 우리가 원하는 방식으로 데이터를 처리하도록 명령하는 것변수란 일종의 데이터 저장소로 변수명 식별자(identifier) 를 통해 데이터를 사용할 수 있다.변수를 사용하기 위해서 먼저 변수가 선언(declaration)되어야 한다. 선언은 단 한

조건문의 조건에는 Boolean 즉 true 또는 false으로 결과가 나오는 표현식이 들어가며, 그 결과가 true일때 코드 블록이 실행된다.조건문은 MECE(Mutually Exclusive + Collectively Exhaustive)하게 만들는 것이 좋다.비교

오늘 코드스테이츠에서 네이버 스마트 에디터 리드 우상훈님께서 진행하신 개발자가 알려주는 테크니컬 라이팅 특강을 들었다. 개발자로서 테크니컬 라이팅을 하는 것은 평소 쓰던 글과는 접근법이 다를 거라고 생각해서 어떤지 알고 싶었던 차라 흥미로운 강의였다.테크니컬 라이팅이란

There is nothing to fear, because you cannot fail - only learn, grow and become better than you've ever been before.\-Hal Elrod오늘 오후에는 동기부여 세션이 있었다. 긍

Today I Learned CSS란? HTML로 작성된 웹 페이지의 구조를 꾸미는 역할을 담당한다. CSS의 사용 목적 적절한 콘텐츠 레이아웃 디자인과 타이포그래피를 통해 더 나은 UX 제공 CSS 기본 문법과 구조 CSS를 HTML에 적용하는 방법 왜

오늘은 어제에 이어서 페어와 함께 그동안 배운 HTML, CSS, JS 지식을 이용하여 계산기를 만드는 과제를 했다. 어제 기본 계산기는 구현하였고 오늘은 테스트 케이스 중 통과되지 않는 케이스들을 해결할 방법을 찾았다. 간단한 테스트 케이스들은 괜찮았지만 연산을 반복

항상 GUI를 사용할 수 있는 것은 아니다. PC에서는 주로 GUI가 사용되지만 서버 컴퓨터는 대부분 CLI로 조작되기 때문에 CLI를 익혀두어야한다.prompt : CLI에서 키보드 입력을 확인하고 편집할 수 있는 한 줄의 공간입력한 명령어를 실행하려면 Enter키

master → main혼자 코딩을 하는 동안에는 branch를 변경할 일이 잘 없어서 master 브랜츠의 디폴트 이름이 main으로 변경된 것을 뒤늦게 접했다. 작년 10월 guthub에서는 Black Lives Matter 운동의 일환으로 디폴트 브랜치 이름을

오늘은 배열 기초를 배우고 관련된 코플릿 문제를 풀었다. 그중에 배열에서 특정 인덱스의 요소를 제거하는 문제가 있었는데 slice로 주어진 인덱스 앞 뒤로 배열을 잘라 concat으로 이어붙여야 하나 했는데 페어 분께서 splice가 있다는 걸 상기시켜주셨다. 항상 쓰

오늘 코플릿 객체 문제 풀 때 유용하게 쓰인 Frequency Counter.문자열이나 배열에서 각각의 글자/요소의 빈도수를 셀 때 사용된다.JS의 배열은 엄밀한 의미의 배열은 아니다. JS의 배열은 숫자(인덱스)를 key로 갖는 특수한 객체다. 그때문에 배열 arr에

CSS 선택자와 Flexbox에 대해 학습하고 이를 응용하여 Twittler라는 Twitter 클론 웹 애플리케이션 목업을 만드는 과제를 진행하였다. 와이어프레임 만들기레이아웃 정하기각각의 컨텐츠에 적합한 HTML 태그 정하기CSS 스타일을 위한 적절한 ID, Clas

변수의 유효범위자바스크립트는 렉시컬 스코프(lexical scope)를 따르기 때문에 해당 변수가 어디에서 선언되었는지에 따라 스코프가 결정된다.내부 스코프에서 외부 스코프의 변수에 접근할 수는 있지만, 외부 스코프에서 내부 스코프의 변수에는 접근할 수 없다.가장 외부

오늘은 Mocha & Chai 테스트 케이스를 작성하면서 지금까지 3주동안 배운 자바스크립트 기본 개념들을 복습하는 시간을 가졌다. 대부분 이미 아는 내용들이었지만 새롭게 알게 된 것들도 있어서 정리해 보았다. 지금까지 객체를 얕은 복사할 때 항상 스프레드 연산자만

오늘은 DOM에 요소를 조회/추가/제거/업데이트하는 법을 배우고 JS에서 특정 요소에 이벤트 핸들러를 추가해 입력된 input의 값에 따라 경고 메시지를 띄우는 Form 유효성 검사를 페어와 함께 구현하였다.Form ValidationHTML 문서를 화면에 표시하기 위

Browser Event Playground이벤트란 어떤 시스템에서 일어난 사건(action)/발생(occurrence)를 말한다.웹의 경우 이벤트는 브라우저 윈도우 안에서 일어난다.브라우저 이벤트는 다양하다. 마우스를 클릭하거나 키보드를 누르는 것, 브라우저 창의 크

자바스크립트에서 함수는 객체로 취급되기 때문에 다음과 같은 특성을 지닌다.리터럴로 생성 가능변수에 할당 가능함수의 인자로 전달 가능함수의 리턴값으로 리턴 가능동적으로 프로퍼티를 생성/할당 가능일급 객체로서의 함수란?함수의 인자로 전달, 변수에 대입 등이 가능한 객체선언

오늘부터 React 스프린트를 시작했다. 트위터 클론을 리액트로 만드는 것이 이번 스프린트의 목표다. 스프린트 결과물이 실제 웹 사이트와 비슷한 모습이 될 수록 만드는 재미가 있다. 리액트로 이미 웹 애플리케이션을 만들어 호스팅 한 경험이 있어서 개념 설명을 따라가는

오늘은 어제에 이어 React로 트위터 클론을 만들었다. react-router-dom을 설치하여 좌측 사이드바 아이콘을 누를때 마다 url주소가 바뀌고 해당하는 컴포넌트가 feature div 안에 보여지도록 하였다. 최소 기능 요구사항을 모두 만족시키고 Advanc

해당 컴포넌트의 속성(property)부모 컴포넌트로부터 전달받은 변경할 수 없는 값 컴포넌트는 props를 전달인자처럼 받아 사용할 수 있다. props는 객체의 형태를 가진다.React의 단방향 하향식 데이터 흐름 원칙에 따라 읽을 수만 있고 변경할 수 없다 (re

create-react-app으로 새로운 React 프로젝트 생성프로젝트 초기화 (App.js, App.css 비우기)레이아웃 구상재사용되는 부분을 개별 컴포넌트로 분리 (TodoItem.js)JSX로 문서 구조 만들기input과 button에 적절한 이벤트 핸들러 함

input에 입력한 값을 제출 버튼을 눌렸을 때 뿐만 아니라 Enter를 눌렸을 때도 todo list에 추가하기 위해 현재 input에 onKeyDown 이벤트 핸들러, button에 onClick 이벤트 핸들러가 각각 달려 있다. input과 button을 form

Click-To-Edit UI 편집하고자 하는 요소를 클릭하여 바로 편집할 수 있는 UI React에서 Click-To-Edit UI 구현하기 삼항 조건 연산자를 사용하여 처음 로드 되었을 때는 `로, 해당 요소를 더블 클릭했을 때는 으로 컨텐츠를 보여준다. 에

계획 구현할 기능 1. task를 추가/삭제/업데이트 할 수 있다. 2. 각각의 task는 click-to-edit이 가능하다. (더블클릭하여 수정) 3. 각각의 task에 중요도를 부여할 수 있다. (task 앞에 !로 표시되며 누를 때마다 toggle됨) 4.

실제 세계를 객체로 추상화하여 표현. 프로그램을 여러 객체(object)들의 모임으로 보며, 각각의 객체들은 상호작용하고 데이터를 처리할 수 있다. 관련 데이터(property)와 기능(method)이 별개로 취급되지 않고 객체로 묶여 함께 처리된다. 1\. 캡슐화 (

재귀란 함수가 스스로를 호출하는 것을 말한다.재귀 함수는 base case와 recursive case 두 부분으로 나누어져 있다.함수 호출시 해당 함수가 stack에 쌓이는데 재귀를 잘못 사용하면 stack overflow가 일어날 수도 있다.반복문 중첩이 너무 많이

JS에서 재귀 함수가 호출될 때마다 stack에 쌓이기 때문에 처리 시간이 오래 걸릴 수 있고 한번에 너무 많은 호출이 반환되지 않고 쌓이면 stack overflow가 일어날 수도 있다.Memoization을 이용하면 호출 결과값들이 저장되어 불필요한 중복 호출을 줄

Today I Learned Stack & Queue Graph : Adjacency Matrix & Adjacency List

연휴 동안 React Router를 복습하면서 react-router-dom에서 제공하는 Hooks(useHistory, useLocation, useParams)를 사용하여 레트로 스타일 블로그를 만들어 보았다. 데모 : react-blog-retro-style

자료구조를 공부한 지가 오래 되어 다 까먹었을 줄 알았는데 또 문제를 풀다 보니 했던 것들이 기억이 나 도움이 되었다. DFS/BFS 문제는 역시 쉽지 않다. 페어와 그래프 활용 문제를 총 4문제 풀었는데 마지막 DFS 활용 문제는 테스트 케이스를 모두 통과하지는 못했

클로저의 성질을 이용한 고차함수 활용자바스크립트의 성능향상을 위해 사용되는 함수들로 underscore나 lodash 등의 라이브러리에 구현되어 있는 것을 가져다 쓸 수도 있다.함수가 실행되면 결과값을 캐싱하여 같은 작업이 반복될 때 다시 연산할 필요 없이 저장된 값을

JavaScript is a single-threaded, synchronous and blocking language.자바스크립트는 기본적으로 싱글 스레드(single thread) 언어로, 동기적(synchronous)으로 기존 수행하던 작업이 완료 되어야만 다음

알고리즘을 짤 때 흔히 사용하는 분할 정복 기법의 경우 문제를 쪼개서 풀다보면 반복하여 푸는 경우가 생긴다. 이 경우 매번 새로 연산하는 대신 값을 저장해 두었다가 재사용 하는 것이 효율적인데 이를 동적 프로그래밍이라고 한다.동적 프로그래밍은 최적 부분 구조를 가진 중

CORS는 이번에 처음 접해본 개념이라 아직 완전하게 숙지하지 못했다. 주말에 찬찬히 MDN문서를 읽으며 정리해 봐야겠다.리소스를 사용하는 주체인 클라이언트(client)와 리소스를 제공하는 주체인 서버(server) 간에 작업을 분리한 네트워크 아키텍처. 2티어 아키

Representational State Transfer2000년 로이 필딩(Roy Fielding, HTTP의 주요 저자 중 한 사람)은 자신의 박사학위 논문에서 웹(HTTP)의 장점을 최대한 활용할 수 있는 아키텍처로 REST를 소개하였다. REST는 특정 기술이아

useState가 반환한 state 변수 갱신 함수는 호출해도 비동기이기 때문에 바로 state가 변하지 않는다. React에서는 성능을 위해 setState() 호출을 단일 업데이트로 한꺼번에 처리한다.위의 예시에서 버튼을 클릭하면 화면에 출력되는 <p>{cou

Today I Learned Side Effect와 useEffect React에서 side effect란 데이터 가져오기, subscription 설정하기, 수동으로 DOM 수정하기 등을 이른다. 비동기로 진행되는 것들 중에 많은 것들이 side effect이다.

드디어 서버 학습에 들어갔다. 여기서 부터 확실히 성향이 갈리는 것 같다. 이전에 리엑트 프런트단 할때 재밌고 이것저것 해보고 싶었는데 서버는 화면에 시각적으로 무언가 출력되기 보다는 콘솔과 네트워크창을 주로 읽어야 하니 어렵게 느껴진다. 나와는 반대로 오히려 서버가

Node.js는 브라우저 밖에서도 JS를 사용할 수 있도록 해 주는 (Chrome V8 엔진 기반) JS 런타임 환경이다. Node.js를 사용하면 JS로 서버를 포함한 일반 애플리케이션 개발이 가능하다.Node.js의 특징 : 싱들 스레드 & 이벤트 루프 기반 비동기

요청 바디의 데이터를 읽어 오는 데 자꾸 오류가 나서 애를 먹었다. Unexpected token " in JSON at position 0보내온 데이터가 객체나 배열이 아니라 그냥 문자열이라 express.json()이 파싱을 못하는 것 같은데 어디를 손대야 할지 몰

Style Components는 컴포넌트 기반 아키텍처를 보장한다.화면에 표시된 컴포넌트들에 해당하는 스타일링만 자동으로 주입하기때문에 불필요한 스타일링까지 로드할 필요가 없다각 스타일링마다 고유 클래스명을 자동으로 생성해주기 때문에 class 이름 충돌 걱정 없이 사

어제에 이어 Style Components와 그동안 배운 React 지식을 이용해 UI 컴포넌트들을 만드는 연습을 하였다. 과제로 이틀간 Toggle, Modal Button, Tags, Tabs, 자동완성, Click-To-Edit을 만들었다. 오늘 sprint re

상태관리 라이브러리 Redux를 배우기에 앞서 이전에 배웠던 상태 끌어올리기 (Lifting state up)을 복습하였다. 하위 컴포넌트에서 상위 컴포넌트의 상태(state)를 변경하기 위해서는 상위 컴포넌트로부터 상태를 변경하는 함수를 props로 받아와야 한다.

Redux는 자바스크립트 앱을 위한 예측가능한 상태 (state) 컨테이너이다.React에서 상태는 각 컴포넌트 안에서 관리되며, 자식 컴포넌트들끼리 데이터 공유를 하려면 공통 부모 컴포넌트에 상태를 두고 주고받아야 한다. 뎁스가 얕을 때는 괜찮지만 깊어지면 상태 관리

어제 배운 Redux를 복습할 겸 간단한 React Todo List에 Redux를 활용해 보았다. React Reux Todo Codesandbox틀이 주어지고 빈 칸을 채우는 과제와 달리 백지에서 시작하려니 아직 사용법이 익숙하지 않아 어렵게 느껴졌다. 레퍼런스를

Linux는 하나의 컴퓨터를 여러 사용자가 사용할 수 있는 멀티유저 운영체제이기 때문에 사용권한 관리가 중요하다. 생성된 파일을 아무나 삭제/변경해서는 안되기 때문이다.파일 타입\- : 일반 파일d : 디렉토리파일 권한r : read 읽기 권한w : write 쓰기 권

모든 경우를 탐색하지 않고 각 단계에서 최적의 선택을 함지역적 최적값이 전역적 최적값이 아닐 수도 있기 때문에 모든 문제에 적용할 수는 없음동적 프로그래밍과 상호 보완 동적 프로그래밍 : 느리지만 정확탐욕 : 빠르지만 부정확할 수 있음탐욕 알고리즘은 항상 정확한 최적해

Structured Query Language관계형 데이터베이스에서 사용하는 언어관계형 데이터베이스 : 행(데이터)과 열(속성)로 구성된 테이블에 데이터 저장. 정해진 형식에 맞게 데이터를 저장해야 하며 정보 요청시 구조화된 쿼리 언어를 사용해야 함. 데이터베이스의 A

다이어그램 그리는 걸 좋아해서 오늘 학습한 내용은 좀 재밌었다. Figma로 페어분이랑 보드 하나를 같이 쓰면서 DB를 어떤식으로 설계할지 청사진을 그리고 dbdiagram으로 스키마를 작성했다. dbdiagram은 처음 사용해 보았는데 SQL로 작성된 것을 불러올 수

Q1. alex의 bio를 수정합니다.Q2. hashtag가 jojo인 트윗의 모든 컬럼 데이터를 불러옵니다.Q3. alex가 lewis를 팔로우합니다.서브쿼리 사용

정수 배열이 주어졌을 때, 연속한 숫자들로 이루어진 부분 배열 중 합이 최대가 되는 경우를 구하시오.\-> 문제점 : 배열 길이가 커지면 실행 시간이 초과됨\-> 시간 복잡도 개선\-> 문제점 : 실행 시간이 초과되지는 않지만 음수만 있는 배열이 통과가 안됨

Today I Learned Model-View-Controller 사용자 인터페이스와 비지니스 로직을 분리하는 소프트웨어 디자인 패턴 각 계층은 느슨하게 결합되어 한쪽에서 문제가 생겨도 다른 계층에 영향이 가지 않는다 유지보수성, 확장성, 유연성이 증가한다 Mo

오늘 스프린트는 정말 힘들었다. 일단 이전 스프린트들 처럼 파일에 TODO가 표시된 것이 아니라 어디에 무엇을 작성할 지 테스트케이스를 보고 유추해야 했다. ORM의 매핑이 무엇을 매핑하는 건지 정확하게 이해하지 못한 상태에서 무작정 사용하려고 하니 공식문서의 코드를

HTTPS + Secure기밀성 Privacy : 제3자가 중간에 메시지를 열어도 암호화되어있어 읽을 수 없음무결성 Integrity : 메시지가 목적지로 가는 도중 제3자에 의해 조작되지 않고 원본 그대로 도착함대칭키 : 암호화키와 복호화키가 동일하다비대칭키 : 암호

Cross-Site Request Forgery해커가 유저의 권한을 도용하여 특정 웹사이트에 요청을 하는 공격이다. 유저가 특정 웹사이트에 로그인한 상태로 CSRF 공격 코드가 들어있는 페이지를 열면 유저의 의지와 무관하게 유저의 웹 브라우저와 공격 대상인 웹 사이트

OAuth : 인증을 위한 공개 표준 프로토콜사용자의 패스워드가 노출되지 않도록 하면서 API접근 위임 \- 패스워드를 사용한 직접 인증은 제3자에게 패스워드를 넘겨주는 순간 유저의 모든 권한을 넘겨준다는 문제점이 있다.OAuth 2.0 HTTPS 사용이 필수이며 암

전 세계 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준표준에는 ISO/IEC 10646 Universal Character Set, 문자 인코딩 방식, 문자 정보 데이터베이스, 문자 처리 알고리즘 등이 포함됨유니코드 협회 (Unicode C

최초의 컴퓨터에는 운영체제(OS)가 없었다 (OS없이도 컴퓨터 운영 가능). OS는 일반 사용자들이 컴퓨터를 사용하기에 편리하도록 만들어진 소프트웨어로 하드웨어를 운영해주는 시스템이다.OS는 하드웨어 기능을 관리하며 동시에 응용프로그램을 위한 환경을 제공한다. OS는