코로 넘어져도 헤딩만 하면 그만

🚩CDD가 뭔데요? 왜 프로그래밍엔 이렇게 축약어가 많을까요? CDD라는 단어를 처음 본다면 생소하게 느껴질 수 있을 겁니다. Component-Driven Development의 약어라고 하면 조금 이해가 빠를지도요. 아이들이 레고를 조립하듯이 부품 단위로 UI 컴포넌트를 만들어 나가는 상향식 개발을 의미하는데, 사람들이 '재사용 가능한 UI 컴포넌트'에 초점을 맞추면서 CDD의 중요성이 떠오르기 시작했습니다. 흠... 그렇다면 왜 재사용이 중요해졌을까요. 그냥 만들면 되는 거 아닌가?... 라고 생각할 수도 있지만... 구조화된 CSS가 필요해진 이유는 오랜 CSS의 변천사와 발전 흐름을 짚어가면서 설명해야 합니다. 🚩태초에 CSS가 있었다...(feat 전처리기, 방법론) 기나긴 인류 역사처럼 기술..

🚩고차함수란? 지난 세션에서 고차함수의 개념은 배웠으나, 사용이 익숙치 않다는 생각이 들어 복습을 해보았습니다. 우선 고차함수(higher order function)은 함수를 전달 인자로 받을 수 있고 함수를 리턴할 수 있는 함수를 말합니다. 자바 스크립트에서 함수는 특별 대우를 받는 '일급 객체'로 여겨지기 때문에, 다음과 같은 특징을 가진답니다. 1) 변수에 할당이 가능하다. 2) 다른 함수의 전달인자로 전달될 수 있다. 3) 다른 함수의 결과로 리턴될 수 있다. 즉, 함수는 변수에 할당이 가능하고, 이 변수를 다른 함수에서 전달인자로 받는 것도 가능합니다. 다시 말해 함수를 전달인자로 받는 거죠. 또 함수 내부에서 변수를 할당한 뒤 이 변수를 리턴하는 것도 가능해요. 아니면 변수를 쓰지 않고 함수..

Path Variable과 Query Parameter(Query String)?? Path Variable? Query Parameter? query strings? path parameter? URL parameter? 서버 만들기 과제를 하느라 라우터를 만드는 과정에서 주소 나누는 게 헷갈려서 검색을 했는데, 정작 이 파라미터에 관한 용어가 너무 많고 혼용 되어서 당황한 김에 다뤄보기로 했습니다. parameter는 매개변수입니다. 즉, 이 경우에는 url 경로에 도입되는 매개변수를 말하는데요. 웹에서 특정 데이터를 전송하고 받기 위해서 어디(End-point)에 요청할 것인가는 중요한 문제라고 할 수 있죠. 우리는 매개변수를 사용해 동적 부분을 변수로 처리하여 동적 라우팅 기능을 구현합니다. 잠깐..

1. OSI 7레이어 2. HTTP 메소드 및 멱등성과 안정성 3. 국내 데이터 API 불러오기 1. OSI 7레이어 계층을 나눈 이유는 통신이 일어나는 과정이 단계별로 파악할 수 있기 때문이다. 흐름을 한눈에 알아보기 쉽고, 사람들이 이해하기 쉽고, 7단계 중 특정한 곳에 이상이 생기면 다른 단계의 장비 및 소프트웨어를 건들이지 않고도 이상이 생긴 단계만 고칠 수 있다. 1) 물리(Physical) → 리피터, 케이블, 허브 등 데이터 전기적인 신호로 변환해서 주고받는 기능을 진행하는 공간. 즉, 데이터를 전송하는 역할만 진행한다. 2) 데이터 링크(Data Link) → 브릿지, 스위치 등 물리 계층으로 송수신되는 정보를 관리하여 안전하게 전달되도록 도와주는 역할. Mac 주소를 통해 통신한다. 프레..

웹 개발에서 UX와 UI를 떼어놓을 수 없는 개념입니다. 디자인과 설계가 깔끔하고 올바르게 되어 있어야, 사용자는 편리함을 느끼고 만족스러운 서비스를 경험할 수 있겠죠. 예전부터 UX/UI부분에 관해 더 공부해보고 싶었는데 좋은 기회를 얻었습니다. 🚩UX/UI? UI, 즉 유저 인터페이스user interface란 '사람이 컴퓨터와 상호작용하는 시스템'을 말합니다. 화면상 나타난 그래픽 요소 외에 키보드, 마우스 등 물리적인 것들도 상호작용을 위한 시스템으로, UI의 일종입니다. 버튼, 키보드 등을 물리적 UI라고 할 수 있겠네요. 다만 현대에 들어서면서 직관적인 그래픽 UI(GUI)의 중요성이 높아졌습니다. 터치 스크린이 어디에나 상용화 되고, 마우스를 통해 컴퓨터 화면으로 상호작용 하는 경험이 우리에..

아직은 생소한, 재귀함수를 작성하는 부분을 몇 문제 재복습하며 익히기로 했다. 04. 피보나치 수열 수(num)를 입력받아 피보나치 수열의 num번째 요소를 리턴해야 합니다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1입니다. 그 다음 2번째 피보나치 수부터는 바로 직전의 두 피보나치 수의 합으로 정의합니다. 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ... 함수 fibonacci는 재귀함수의 형태로 작성합니다. 반복문(for, while) 사용은 금지됩니다. 피보나치 수열은 0번부터 시작합니다. function fibonacci(num) { if(num===0){ return 0; } if(num===1){ return 1; } return fibonacci(num-1..

재귀함수란? → 자기 자신을 호출하는 함수. 가장 작게 쪼개졌을 때, 즉 특정 조건에 도달하면 이 반복에서 '탈출'할 수 있는 지점이 있어야 합니다. 그렇지 않으면 무한으로 자신을 불러오다가 Error을 띄우고 맙니다. 1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 2. 중첩된 반복문이 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우 이런 경우에 재귀 함수를 쓰면 도움이 됩니다. 모든 재귀 함수는 반복문(while 문 또는 for 문)으로 표현할 수 있다고 하네요. 하지만 재귀함수를 쓰면 코드가 훨씬 짧고 가독성이 좋아지는 것을 볼 수 있습니다. 🐥재귀함수를 사용해서 팩토리얼 만들기 예시 function factorial(num) { // n-fac..

Section1까지 누리던 여유가 거짓말같이 매번 허덕이면서 쫓아갔습니다. 오...노..... CSS와 HTML할 때가 좋았는데...... 매주 바뀌는 학습 때문에 주어진 공부를 소화하지 못하면 찜찜한 기분이 남았고, 이것이 자존감 저하로 이어져 학습에도 악영향을 많이 준 것 같아요. 보이는 라디오 시간에 둘러보니 섹션 2부터 이런 분들이 꽤 있으신 것 같기도...ㅠㅠ 난이도가 상당히 있는 개념들을 연속으로 머리에 넣으면서 심신이 많이 지친 모양입니다. ... 또 하나 변명하자면 어디서 옮았는지 독한 감기와 더불어 축농증이 오면서 일주일 내내 고통 받기도 했습니다. 이때 배우던 게 제게는 어려운 개념이었는데 몸이 아프니 집중도 안 되고 머리가 울리니 운동도 못 가고 두 배로 자존감이 떨어지는 악순환이 왔..