All (56) 썸네일형 리스트형 [React] React Hooks 항해 플러스 과제를 진행하기 전 React Hooks에 대해서 미리 공부하려 한다.이미 알고 있었고 많이 사용해 본 것들이지만, 공부하면서 새롭게 알게 된 사실들도 있어서 포스팅까지 하게 되었다. 특히 아무 생각 없이 사용했던 방식들을 "왜" 이렇게 써야만 하는지 알 수 있었다! 1. React HooksReact 16.8에 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수들을 말한다.Hooks을 사용하면 클래스 컴포넌트를 작성하지 않고도 React의 다양한 기능을 활용할 수 있다. 1) 등장배경React Hooks는 클래스 컴포넌트에서 발생하던 여러 문제를 해결하기 위해 등장했다. 컴포넌트 간 상태 로직 재사용의 어려움복잡한 컴.. [Javascript] 자바스크립트 디자인 패턴 항해 플러스 과제를 실행하는데 디자인 패턴이 나왔다. 들어만 봤지 실제로 해본 적은 없어서 헷갈리기도 했다.그래서 디자인패턴은 무엇인지, 왜 사용하는지 이번 기회에 한 번 정리해보려 한다. 1. Desing Pattern(디자인 패턴)디자인 패턴은 소프트웨어 개발 과정에서 자주 발생하는 문제들을 해결하기 위한 일반적이고 재사용 가능한 해결책을 말한다. 자바스크립트에서 주로 사용하는 디자인 패턴에는 Module Pattern(모듈 패턴), Observer Pattern(옵저버 패턴), Factory Pattern(팩토리 패턴), Singleton Pattern(싱글톤 패턴), Facade Pattern(퍼사드 패턴), Proxy Pattern(프록시 패턴) 등이 있다. 해당 포스팅에서는 모듈 패턴, .. [React] VirtualDOM 1. VirtualDOM이 생겨난 배경웹 개발에서 DOM(Document Object Model)은 HTML 문서를 개체로 표현한 구조를 말한다.전통적인 방식으로는 웹 페이지 내용이 변경될 때마다 실제 DOM에 접근해 직접적으로 업데이트를 진행한다.하지만, 이 과정에서 DOM 조작은 성능상의 부담을 줄 수 있다. 이러한 문제를 해결하기 위해 나온 것이 Virtual DOM(가상돔)이다. 1) 렌더링 과정에서의 성능 저하이는 브라우저 렌더링 과정을 알면 이해하기가 편하다.브라우저 렌더링은 DOM 트리 생성 > CSSOM 생성 > 렌더 트리 생성 > 레이아웃 > 페인트 과정을 거치게 된다.DOM을 조작하게 되면, 위의 렌더링 과정이 다시 시작될 수 있다. 즉, 해당 돔의 속성을 다시 그려야 할 수 있는 .. [항해99] 항해 플러스 프론트엔드 1주차 과제 후기 (feat. 바닐라 자바스크립트로 SPA 만들기 ) 큰 맘 먹고 결제한 항해 플러스 프론트엔드 개강일이 밝았다. 이번에 여러 사람들과 네트워킹도 하고, 좀 더 깊게 자바스크립트를 배우기 위해 항해 플러스를 신청했다. 9월21일이 첫 개강날이었는데, 몸이 아파서 아쉽게 오프라인 참석은 못했다ㅠ그래도 온라인으로 들었던 강의가 인상에 남아 공부할 겸 후기를 남겨본다! 1. 토요일 강의 & OT 우선 순서는 이렇게 진행됐다.처음에 OT랑 어떻게 항해 플러스가 진행되는지 설명해 주고, 그 후 1주차 발제가 이루어졌다.1주차 발제는 "프레임워크 없이 SPA 만들기"였다. 사실 회사에 입사하고 난 후, 바닐라 자바스크립트로 무언가를 만들어 본적이 없다.취준때는 그래도 몇 개 만들었었는데,, 그래서 리액트 없이 SPA 만들기라는 말을 듣자마자 쉽지 않겠다는 생각을 했.. [자바스크립트] 실행 컨텍스트, 스코프와 클로저, 호이스팅, this 항해 플러스 과제를 진행하기 전 알아야하는 필수 지식을 미리 공부하려고 한다.이번 주제는 Exeution Context(실행 컨텍스트)이다.취준 시절 공부했던 내용이지만 3년이 지나면서 다 까먹어버려서 다시 공부한다ㅠ 1. Exeution Context(실행 컨텍스트) 란?실행 컨텍스트는 함수를 호출했을 때 실행될 수 있는 환경과 그 결과를 저장하는 영역을 말한다. 실행컨텍스트는 실행 가능한 코드를 만났을 때 생성되며, 실행 가능한 코드에는 함수코드, 글로벌 코드, eval 코드가 해당된다. 실행컨텍스트에는 위와 같이 구성되어 있는데 여기서 중요한 것은"Lexical Environment(렉시컬 환경)", "Declaration Binding Instantiation(This 바인딩)" 이다. 렉시.. [코딩테스트] minSubArrayLen, 슬라이딩 윈도우 알고리즘 문제. 슬라이딩 알고리즘 - MinSubArrayLen 위 문제는 주어진 배열의 합이 숫자랑 같거나 큰 경우, 해당 배열합의 최소 길이를 반환하는 문제이다. 즉, array와 sum이 주어지면 array 요소의 합이 sum보다 크거나 같은 최소 길이를 반환하면 된다.이때 array 요소는 인접한 요소여야 한다. 슬라이딩 윈도우 알고리즘을 통해 해결해야 하며, 시간복잡도는 O(n) 공간복잡도는 O(1)이여야 한다. 처음에 어떻게 풀어야 할지 감이 안왔다. while문을 이용해서 한 칸씩 늘려가야 겠다는 생각을 하긴 했는데, 어떻게 늘려가야 하지? 라는 고민이 계속 들었다. 결국 시간이 지나도 문제를 맞추지 못해서 답안을 확인했다. *슬라이딩 윈도우 알고리즘 : 배열의 한 부분을 정의하고, 이 부분을.. 윈도우 & 리눅스 HTTPS 인증서 발급 방법 (Let's Encrypt) 회사에서 프로젝트를 진행할 때, HTTPS 인증서를 발급받는 작업을 한적 있다. 예전에 네이버 블로그에 포스팅 했었는데, 노션에 기록했던 거에 비해서 간단하게 적은 것 같다.그래서 이번 기회에 다시 복습할 겸 정리하려 한다. 우선 회사에서 필요한 https 인증서는 상업적인 인증기관에서 발급받을 필요도 없었고, 유효기간이 길 필요도 없었다. 그래서 무료 인증서인 Let's Encrypt를 사용했다. https 사용한 적은 처음이라 폭풍 구글링부터 시작해서 많이 헤맸다.그 과정을 적을거기 때문에 급한 사람들은 "정리 - 성공과정"을 읽으면 된다. 1. 리눅스 우선 회사 서버에 미리 설치해야 했기 때문에 리눅스 환경에서 https 인증서를 발급받았다.Cerbot라는 Let's Encrypt SSL/TL.. [회고록] 농림축산식품부 공공데이터 활용 창업경진대회 후기 농림축산식품부 공공데이터 활용 창업경진대회에 참가하게 되었다.회사와 병행하여 진행했기 때문에 힘들었지만, 그만큼 얻어간 것도 많아서 회고록을 남기려 한다. - 농림축산식품부 공공데이터 활용 창업경진대회 농림축산식품부 공공데이터 활용 창업경진대회는 말 그대로 농림축산식품에 관한 아이디어나 제품 및 서비스 개발에 대한 공모전이다. 아이디어 기획, 제품 및 서비스 개발 두 가지 분야로 나눠져 있다. - 준비 과정 해당 공모전에 참여하게 된 이유는 우연이였다. 팀원 중 한 명이 공모전을 찾아보다가 해당 공모전을 보게 되었고, 참가해 보는 게 어떻겠냐는 제안을 해왔다. 팀원 모두 동의해서 공모전 참여가 결정되었고, 5월 초에 아이디에 회의에 들어갔다.다양한 의견이 나왔었는데, 이 중 선정된 것은 농장 혹은 목.. 이전 1 2 3 4 ··· 7 다음
