본문 바로가기

개발인생다반사/TIL(Today i learned)

(43)
TIL 211013 - [JS/Node] 비동기 (내용이 많음 주의!) Achievement Goals 어떤 경우에 중첩된 callback이 발생하는지 이해할 수 있다. 중첩된 callback의 단점, Promise의 장점을 이해할 수 있다. Promise 사용 패턴을 이해할 수 있다. resolve, reject의 의미와, then, catch와의 관계를 이해할 수 있다. Promise에서 인자를 넘기는 방법을 이해할 수 있다. Promise의 세 가지 상태를 이해할 수 있다. Promise.all 의 사용법을 이해할 수 있다. async/await keyword에 대해 이해하고, 작동 원리를 이해할 수 있다. Node.js의 fs 모듈의 사용법을 이해할 수 있다. Chapter 1 - 고차함수 리뷰 고차 함수 : 함수를 리턴하는 함수, 다른 함수를 인자로 전달 받는 함수..
TIL 211007 - [자료구조/알고리즘] 자료구조 기초 Achievement Goals 자료구조가 무엇인지 설명할 수 있다. Stack, Queue, Tree, Graph 자료구조에 대해 이해할 수 있다. 알고리즘 문제에서 Stack, Queue 자료구조를 배열로 대체하여 흉내낼 수 있다. 각 자료구조의 개념과 구조를 파악하고 목적을 이해할 수 있다. 알고리즘 문제의 각 상황에 맞는 자료구조를 떠올릴 수 있다. 트리 및 그래프의 탐색 기법에 대해 이해할 수 있다. Binary Search Tree를 이해할 수 있다. BFS와 DFS의 개념을 이해하고 알고리즘 문제에서 사용할 수 있다. 자료구조를 활용하여 알고리즘 문제에 접근할 수 있다. 자료구조 : 여러 데이터들의 묶음을 저장하고, 사용하는 방법을 정의한 것 각 자료구조의 특징 각 자료구조를 사용하기에 적합..
TIL 211005 - 객체 지향 JavaScript Section 2 시작! Achievement Goals 클래스와 인스턴스라는 용어를 이해할 수 있다. new 키워드의 사용법을 이해할 수 있다. class 키워드의 사용법을 이해할 수 있다. 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인할 수 있다. 객체 지향 프로그래밍 특징을 이해할 수 있다. 캡슐화 상속 추상화 다형성 JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다. Prototype이 무엇인지 이해할 수 있다 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다. 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다. 클래스 상속의 원리를 이해할 수 있다. Prototype chain을 이해하고 설명할 수 있다. (__pro..
[Achievement Goals] - JS/Node 핵심개념과 주요문법 원시 자료형과 참조 자료형 Achievement Goals 1. 원시 자료형(primitive type)과 참조 자료형(reference type)의 구분이 왜 필요한지 이해할 수 있다. 원시 자료형은 선언된 변수명에 값이 1개만 존재한다. 그런데 자료의 개수가 여러 개인 경우가 있을 수 있다. 객체나 배열이 바로 그러한 종류에 속한다. 이렇게 여러 개의 자료를 단순하게 원시 자료형 처럼 1개의 변수에 1개의 자료를 매칭해서 저장한다고 가정하면 엄청나게 많은 스택이 필요하게 된다. 이를 해결하고자 하는 것이 바로 참조 자료형이다. 참조 자료형은 스택 형태의 메모리에 변수명이 선언된다. 다만 원시 자료형처럼 스택이 가지고 있는 값이 데이터 그 자체의 값이 아니라 데이터를 보관하고 있는 주소를 값으로 가지고..
[HTML, CSS] 기초 - Achievement Goals 답하기 [HTML, CSS] 기초 Achievement Goals 1. CSS의 사용목적을 이해하고 있다. CSS는 웹페이지를 꾸미는 일을 한다. HTML 문서에 CSS 문서를 적용하면 단조로운 웹페이지를 사용목적에 맞게 고칠 수 있다. 웹페이지의 구조와 로직을 HTML과 JS로 구현을 하고 CSS로 스타일링을 하는 것이다. 그런데 CSS는 단순히 웹페이지를 스타일링 하고자 하는 목적으로만 사용되는 것은 아니다. 콘텐츠의 배치와 위치, 텍스트 타이포그래피에 따라 사용자 경험(UX; User Experience)이 달라질 수 있기 때문이다. CSS의 레이아웃과 타이포그래피를 통해 최상의 사용자 경험을 제공할 수 있다. CSS를 적용하여 색약이나 장애인의 웹접근성을 높일수도 있다. 2. 프론트엔드 개발자의 기본 소..
TIL 210907 - (CSS 과제) tweetler 목업 과제 만들기 그간 방향을 잡지 못하고 헤메이던 CSS를 약간 공부하여 적용해 보았다. 목업 과제의 주요 적용 포인트는 아래와 같다. 1. input, textArea와 각 제목 태그의 위치를 바로 잡을 수 있었다. margin, padding(top, bottom 적용) 2. grid layout을 사용하여 이름, 메세지, 버튼 영역을 구분해 명확히 해주었다. 2. Tweet button의 hover 적용 3. button과 삽입된 이미지의 위치 조절 line-height 개념 공부 4. tweetList 안의 글쓴이, 시간, 멘션 등의 CSS 적용 보람차다. 그러나 추가 보완할 것들이 아직 많이 있다. 1. 반응형 TweetList 구현 미디어쿼리를 사용하여 트윗리스트의 row의 개수가 조절되게 해야 한다. 2. ..
TIL 210825 - 변수 선언의 의미 JS를 공부한지 한달이 되었다. 그 이외에 HTML/CSS, Node.js, Git, React 그 사이에 기본기를 배운 분야가 가짓 수가 좀 된다. 급히 먹으면 체하고 소화도 못시키게 되는기에 나만의 생각으로 조금씩 정리하고자 한다. 1. 변수의 의미 변수는 variable이라고 한다. 한자 뜻 그대로 변할 수 있는 수를 변수라고 한다. 자바스크립트에서 변수는 키워드 뒤에 온다. var num let getNum const isEven 변수는 컴퓨터의 메모리와 밀접한 관련이 있다. 코드에서 변수가 정해지면 그 변수는 컴퓨터 메모리에서 일정 공간을 할당받는다. 그리고 그 메모리에 특정 값(data 혹은 value)을 저장할 수 있게 된다. 2. 변수 선언의 의미 변수의 선언은 위에서 언급한 메모리에 일정..
TIL 210813 - React State & Props React State & Props 갈 길이 멀다 어서 어서 가자! Achievement Goals state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다. React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다. React 컴포넌트(React Component)에 props를 전달할 수 있다. 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다. 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다. 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다. React의 단방향 데이터 흐름(..