프로그래밍 패러다임이란? 프로그래머에게 프로그래밍의 관점을 갖게 해주는 역할을 하는 개발 방법론입니다. 프로그래밍 패러다임의 분류 이미지 출저 - https://velog.io/@younoah/programming-paradigm 프로그래밍 패러다임은 위 이미지처럼 크게 선언형, 명령형으로 나뉩니다. 선언형 프로그래밍의 대표적인 예시 - 함수형 프로그래밍 명령형 프로그래밍의 대표적인 예시 - 객체지향 프로그래밍, 절차형 프로그래밍 함수형 프로그래밍 - 선언형 프로그래밍의 일종으로 '순수 함수'들을 블록처럼 쌓아 로직을 구현하고 '고차 함수... Read More

디자인 패턴이란? 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 '규약' 형태로 만들어 놓은것을 의미합니다. 디자인 패턴의 종류 - 크게 생성(Creational), 구조(Structural), 행위(Behavioral) 3가지로 분류됩니다. - GoF(Gang of Four) 디자인 패턴이라고 불리며, 에리히 감마(Erich Gamma), 리차드 헬름(Richard Helm), 랄프 존슨(Ralph Johnson), 존 블리시디스(John Vissides) 4명의 유명한 개발자들에 의해 고안되었는데 이 4명을 the Gang of Fou... Read More

자바스크립트에서는 변수 선언문보다 미리 변수를 참조하는 코드가 있다면 변수가 선언되지 않았다는 ReferenceError 가 아닌 undefined 라는 값을 보여주게 됩니다. 자바스크립트는 코드를 작성한 순서대로 차례차례 읽게 되는 인터프리터 언어라고 알고 있는데 왜 이런 현상이 발생하게 되는걸까요? 자바스크립트가 런타임 이전에 코드 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 하는데 이때 모든 선언문을 자바스크립트 엔진이 미리 코드가 실행되기 전에 찾아내서 실행을 하기 때문인데요. 오늘은 자바스크립트의 변수 호이스팅에 대해서 작성해보고자 합니다. 호이스팅(hoisting) 선언문이 코드의 선... Read More

모던 자바스크립트를 참조하여 작성하였습니다. 자바스크립트란 1995년, 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하게 되고 이렇게 탄생한 것이 바로 브렌던 아이크가 개발한 자바스크립트입니다. 1996년 3월, 넷스케이프 커뮤니케이션즈의 웹 브라우저인 넷스케이프 내비게이터2 에 탑재되었고 'Mocha'(모카)로 명명되었고 그해 9월 LiveScript(라이브스크립트)로 이름이 변경되었다가 12월에 'JavaScript'라는 이름으로 최종 명명되었습니다. 표준화 마이크로소프트에서 개발된 JavaScript의 파생 버전인 JScri... Read More

리엑트는 하위 컴포넌트로 데이터를 전달할 때 state 값을 props로 전달하게 됩니다. 하지만 컴포넌트의 깊이가 깊어지고 프로젝트가 점점 더 커질 경우에는 데이터의 흐름을 파악하고 관리하는게 어렵게 됩니다. 위 이미지를 보면 D컴포넌트는 props를 통해 B, C 컴포넌트를 거쳐 데이터를 전달 받는 걸 알 수 있습니다. 하지만 만약 프로젝트의 규모가 커져서 컴포넌트의 개수가 100개라고 가정을 한다면... 예를 들어 50번 컴포넌트에 데이터를 전달하기 위해서 하위 컴포넌트로 props를 계속해서 전달 해야 하는데요. 이러한 현상을 Props Drilling 이라고 하는데요. 데이터가 중간에 예기치 않게... Read More

React에서 스타일링을 하는 방법은 정말 다양합니다. 하지만 이번 글에서는 styled-components로 스타일을 적용하는 방법을 말씀드리고자 합니다. styled-components란? - Javascript 파일 안에서 CSS를 처리 할 수 있게 해주는 대표적인 라이브러리입니다. - React에서 기본적으로 제공하지 않기 때문에 따로 라이브러리를 설치 해주어야 합니다. - 또한, SCSS 라이브러리 설치 없이 SCSS 문법을 사용할 수 있습니다. 참고 - styled-components(Basics-Motivation) 설치방법 - npm을 통한 설치 : npm instal... Read More

JSX란? - JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 확장형 문법입니다. - 자바스크립트에서 HTML 문법을 사용할 수 있습니다. - 코드의 가독성과 유지보수 측면에서 이점이 많습니다. 참고 - React 공식 홈페이지(JSX 소개) 작성방법 1. 반드시 부모 요소는 한개의 태그로 감싸져 있어야 합니다. Virtual DOM 에서 컴포넌트 변화를 효율적으로 감지하여 비교할수 있도록 컴포넌트 내부는 하나의DOM트리로 구성되어 있어야 합니다. 2. 자바스크립트 표현식 작성을 위해서 { } 로 감싸야 합니다. 3. 삼항연산자를 활용해 조... Read More

타입스크립트에서는 DOM을 직접적으로 다룰 때 타입을 지정해주지 않으면 오류가 빈번하게 발생합니다. 이때 타입 단언을 통해서 as로 정확하게 타입을 단언해 준다면 비로소 DOM API를 조작할수 있게 됩니다. 타입단언이란? - 개발자가 해당 타입에 대해 확신이 있을 때 사용하는 타입 지정 방식입니다. - value as Type 문법을 사용해 원하는 임의의 타입을 값에 할당할 수 있습니다. 타입스크립트는 일반적으로 타입 추론을 통해 작성한 코드의 타입을 추론하게 되는데 이때 좀 더 엄격하게 타입 검사를 하는 경우에는 타입을 명확하게 지정해주어야 합니다. 오류 예시 분명 자바스크립트에서... Read More

타입스크립트란? 마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어입니다. 때문에 마이크로소프트에서 개발한 소스 코드 편집기(Visual Studio Code)에서도 기본적으로 TypeScript를 지원합니다. 왜 타입스크립트를 사용해야 할까? npm trends 라는 사이트에서 최근 사용되는 언어 패키지들의 사용량과 인기를 확인할 수 있는데 타입스크립트의 인기가 매우 높은걸 확인 할 수 있습니다. 그렇다면 이러한 타입스크립트를 사용했을 때 이점은 무엇이 있을까요? 1. 컴파일 시 사전에 에러를 잡을 수가 있습니다. 2. 타입을 미리 결정하기 때문에 기계... Read More

웹브라우저를 공부하면서 흔히 DOM이란 단어를 많이 접하게 됩니다. 그렇다면 이 DOM이란건 도대체 무엇일까요? DOM이란? DOM이란 'Document Object Model' 의 약자입니다. 이를 직역하면 '문서 객체 모델'인데요. 브라우저는 우리가 HTML(HyperText Markup Language)로 작성한 문서의 내용들을 읽고 이를 해석하는 과정에서 HTML 요소들을 Tree형태로 구조화하게 됩니다. 그리고 이렇게 구조화된 정보를 통해 브라우저 화면에 우리가 작성했던 HTML 정보들이 보여지게 되는데 이렇게 Tree로 구조화된 정보들을 바로 DOM이라고 부릅니다. DOM의... Read More

등차수열의 항 찾기 문제 입력된 값을 통해서 등차 수열의 몇 번째 항인지를 출력. (단, 찾는 항이 없을 경우 -1을 반환) 풀이과정 먼저 초항에서 등차값만큼 계속 더해주기 위해서 반복문 for 문을 사용하였고, 등차값만큼 더해준 값이 찾고자 하는 등차수열의 항인지를 계속 판별하기 위해서 for 문의 조건은 따로 작성하지 않았습니다. 등차값과 더한 값이 찾고자 하는 항의 수라면 현재 i값이 찾고자 하는 항의 위치가 될 것이고, 만약 찾고자 하는 항의 수가 없다면 -1을 반환합니다. 결과 다른 풀이 ... Read More

최빈수 구하기 (JavaScript) 입력받은 정수에서 가장 많이 등장하는 수를 출력. 문제를 처음 접할 때는 매우 간단하게 풀 수 있을거라는 근거없는 자신감이 충만했지만... 생각보다 문제를 푸는데 시간이 많이 걸렸습니다.😭 이문제의 가장 핵심은 `Object를 통해 key와 value값을 잘 활용할 수 있는가` 였습니다. 풀이과정 가장 먼저 정수로 입력받은 값을 어떻게 나눌까를 생각하다 타입을 문자형으로 변환 후 **`split()`** 내장 함수를 활용하여 각 숫자들을 배열형태로 분리시켰습니다.        &nb... Read More

user라는 식별자를 가진 메모리가 생성되고 그 메모리는 오브젝트 메모리 주소값을 참조하게 됩니다. 이때 admin의 age값을 변경하게 되면 admin.age뿐만 아니라 user.age의 값 또한 변경되는것을 볼 수 있는데 이는 admin과 user가 서로 같은 오브젝트 메모리의 주소값을 참조하고 있기 때문입니다. 따라서 원래 의도했던 admin.age값만 27로 변경하고 싶을 경우에는 와 같이 얕은복사를 하게 되면 기존에 의도했던 admin.age의 값만 27로 변경되는걸 확인할 수 있습니다. 👀 주의할점 하지만 만약 위와 같이 object 안에 object가 있는 경우에는 user.si... Read More

location.hash 란? 위와 같이 URL값이 있다고 가정할 때 #을 포함한 값들이 리턴합니다. 활용 예시 해쉬 값이 변경되면 router 함수가 실행이 되는데 page1, page2 처럼 페이징 구현에도 활용할 수 있습니다. hashchange 브라우저에서 hash값이 바뀔때 발생하는 이벤트입니다. 브라우저 url 부분이 바뀌는 것이므로 이벤트 리스너는 window에 등록할 수 있습니다. Read More

드디어 대망의 파이널 프로젝트가 시작이 되었다! UXUI팀과 FE팀이 함께 UIUX 디자인의 요소와 프로세스 등 개발 과정에서 알 수 없었던 정보들을 알 수 있었던 뜻깊은 시간이었다. 본격적으로 코드작업이 진행되기 전에 한 주 동안 기획 단계를 진행하게 되었는데 기획 부분에서 많은 어려움을 겪었다.. 😔 우선 기업으로부터 전달 받은 요구사항이 너무 구체적이지 않아서 UXUI 팀분들과 FE 개발팀분들이 서로 많은 혼란이 있었다.. 기업 담당자분과 계속 이야기가 추가적으로 오가겠지만 잘 마무리 되었으면 하는 바램이다.. Read More

대략 3주간의 미니 프로젝트를 진행하면서 한동안 블로그 글 작성을 못한것 같다.. 😭 중간에 명절이 포함되어 있는건 애바참치꽁치삼치 이번 포스팅은 미니 프로젝트 기간동안 작업을 진행했던것에 대해 작성하려고 한다. (귀여워서 그냥 한번 올려 봤다...) 프로젝트 소개 Hacker News에서 제공하는 API를 이용해서 UXUI 팀과 협업하는 React 프로젝트. Hacker News란? Paul Graham의 투자 펀드이자 스타트 업 인큐베이터 인 Y Combinator가 운영하고 있는 컴퓨터 과학과 기업가 정신에 초점을 맞춘 소셜 뉴스 웹 사이트이다. 사용한 기술 스택 ... Read More

Hooks Additional API React는 기본적인 Hook 이외에도 useReducer, useCallback, useMemo, useRef 등 여러가지 Hook 들이 있다. useReducer useState의 대체 함수입니다. (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환합니다. 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 많이 사용 되어진다. const [state, dispatch] = useReducer(r... Read More

React Hook lifeCycle React Hook은 함수형 component에서 클래스형 component의 기능을 사용할 수 있게끔 React 16.8에 새로 추가된 기능입니다. Effect Hook React 컴포넌트 안에서 데이터를 가져오거나 DOM을 직접 조작하는 작업을 ‘side effects’ 또는 ‘effects’ 라고 합니다. useEffect 클래스형 component의 componentDidMount, componentDidUpdate, componentWillUnmount 의 기능을 하나로 API로 통합한 Hook 입니다. clean up 함수란? useEffe... Read More

React에서는 component끼리 데이터를 서로 주고 받을 때 props 와 state 를 활용할 수 있다. Props 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것이다 (읽기 전용) App.js import "./styles.css"; import { Example1 } from "./Example1"; export default function App() { return ( <div className="App"> <h1>Props 예제</h1> <Example1 str="테스트" /> </d... Read More

패스트캠퍼스 프론트엔드 과정을 시작한 지 어느덧 한 달이 지났다. 처음 조편성이 이루어 지고서 HTML, CSS, Javascript를 같이 배우고 여러 과제와 작은 프로젝트를 진행하면서 서로 의기투합해나가며 팀 분위기도 좋아지려고 할 때 즈음… 조 편성이 새로 이루어질 거라는 충격적인 소식을 접하게 되었다. 자세한 이야기는 모르겠지만 개인적인 생각으로는 교육 과정을 나름 벅차하는 수강생분들이 중도 하차하시게 되면서 조 인원을 형평성에 맞게 다시 재조정하는 것으로 보인다. 짧으면 짧고 길면 긴 한 달이었지만 내게는 많은 아쉬움이 남는다.. 금일 새롭게 조정된 조원분들과 약간의(?) 어색함을 서로 공유하며 가벼운 인... Read More

GitHub Blog 서비스인 github.io 블로그 시작하기로 했다. 아직은 초라하지만 열심히 해보자 Read More