Connecting the dots

오늘은 엘리스 SW 엔지니어 트랙을 시작한 지 3일 째 되는 날이다! 1, 2일차에는 따로 글을 작성하지 않았다가 수업 내용 정리 겸 기록을 하면 좋을 것 같아서 TIL을 시작해보기로 했다. 실시간 수업은 월, 수만 진행되서 코치님들에게 수업을 들은건 오늘까지 이틀인데 간단하게 정리를 해보고자 한다. 누군가에게 보여주거나, 정보를 제공하려고 쓰는 글은 아니기 때문에 꾸며쓰지 않고 간결하게 쓰고자 한다. 지금까지 수업을 들은 후기는 일단 참여하길 잘한 것 같다!! 코치님들이 정말 학생들이 많이 배워가고자 했으면 하고 가르치고자 하는 열정이 보인다. (최소한 내가 다녔던 대학교 교수님들보다는 열정적이시다.) 또, 같이 수업을 듣는 분들도 취업이라는 공통의 목표를 가지고 선별되서 들어오신 분들이기에 설렁설렁 ..

얼마 전에 엘리스 SW 엔지니어 트랙 2기에 지원해서 최종 합격까지 했다. 아마도 별 다른 일이 없으면 4개월 동안 엘리스와 함께 하게 될 것 같다. 먼저 엘리스 SW 엔지니어 트랙에 대해 간단하게 설명하자면, 개발자 취업 준비생을 위한 교육과정이고 국비지원교육의 일종으로 1,000만원 상당의 교육비가 전액 무료로 제공되고 매월 30만원의 훈련장려금도 받을 수 있다고 한다. 교육과정은 4개월 동안 진행되면서 프론트엔드 개발의 기본이 되는 HTML, CSS, JS를 비롯하여 React, Redux, Styled-components 등 실무에서 많이 쓰이는 기술 스택 위주로 학습하게 된다. 또한 Node.js, Express, MongoDB와 같은 약간의 백엔드 지식을 배우게 되는 기간도 있는 것 같고 8주..

React를 사용하면서 다양한 hooks api들을 사용하게 되는데 그 중에 최적화를 위해 사용하는 useMemo, useCallback에 대해서 정리해보려고 한다. Memoization이란? 먼저, useMemo 함수에 대해서 알아보기 전에 메모이제이션(memoization) 개념에 대해서 알고 가야한다. memoization이란 기존에 수행한 연산이 결과값을 어딘가에 저장해두고 동일한 입력들이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다. useMemo와 useCallback은 각각 메모이제이션된 값, 함수를 반환한다. + React가 리렌더링 하는 조건 3가..

오늘은 React가 무엇인지, React를 왜 사용하는지에 대해 정리해보려고 한다. 현재 React로 개발을 하고 있음에도 글로 정리한 적이 없기 때문에 이를 통해 다시 한 번 공부가 될 것 같다. 이전에 Next.js에 관한 글을 썼는데 생각해보니까 React를 먼저 정리했어야 하는게 아니였나 싶다. 1. 과거의 정적인 웹, 그리고 프레임워크 결론부터 말하자면, 요즘의 웹이 정적이고 단순한 페이지를 넘어서 규모도 커지고 복잡하며 동적으로 바뀌었기 때문이다. React나 Vue를 사용하지 않더라도 모두 바닐라 JS로 구현 가능하다. 정적인 웹페이지를 만드는 것만이 목적이라면 굳이 프레임워크의 도움을 받지 않아도 된다. 성능적인 측면에서도 바닐라 JS가 더 나을 수도 있다. 하지만, 최근에 웹은 단순한 페..

React, DOM 그리고 Virtual DOM? React의 장점 중에는 Virtual DOM이 있다. 근데 대체 Virtual DOM이 무엇일까? Virtual은 말 그대로 가상이라는 뜻이고 DOM은 Document Object Model의 약자로 그대로 해석하면 문서 객체 모델을 의미한다. 문서 객체한 HTML, head, body와 같은 태그들을 Javascript가 이용할 수 있는 객체를 의미한다. 개발을 하면서 자주보게 되는 , , 등이 DOM에 해당한다. DOM이 존재하기 때문에 Javascript는 HTML 태그들을 수정할 수 있는 것이다. 그렇다면 가상 돔(Virtual DOM)이 나오게 된 이유는 무엇일까? React에서 사용하는 가상 DOM도 실제 DOM 내용에 기반하여 만들어진다. ..

저번에 SSR(서버 사이드 렌더링)에 관한 글을 썼었는데 이번에는 SSR을 쉽게 구현하도록 도와주는 프레임워크인 Next.JS에 대해서 알아보려고 한다. https://nomadcoders.co/nextjs-fundamentals/lobby https://github.com/ctdlog/nextjs-intro GitHub - ctdlog/nextjs-intro: Next.JS Introduction Next.JS Introduction. Contribute to ctdlog/nextjs-intro development by creating an account on GitHub. github.com 노마드코더님의 Next.JS 강의를 들으면서 간단한 무비 앱을 구현해봤고 소스코드는 깃허브에 올려두었다. 그..

https://youtu.be/7mkQi0TlJQo [React] 서버 사이드 렌더링(SSR) / 클라이언트 사이드 렌더링(CSR)이란? 노마드코더님의 해당 영상을 보다가 '서버 사이드 렌더링(SSR)'이란 말이 계속해서 나와서 한 번 제대로 정리해보고자 글을 작성해보려고 한다. 영상에는 서버 사이드 렌더링(SSR, Server Side Rendering)과 클라이언트 사이드 렌더링(CSR, Client Side Rendering)이라는 2가지 렌더링 방식을 언급한다. 대충 단어만 보면 서버에서 렌더링 하는지, 클라이언트에서 렌더링 하는지의 차이 같은데 정확하게 무슨 차이가 있을까? 일단 공통적으로 들어가는 렌더링이라는 단어부터 정리해보자면 렌더링이란 대체 무엇일까? 한 줄로 말하면, 서버로부터 요청해서..

행렬의 곱셈 - Lv.2 문제 설명 2차원 행렬 arr1과 arr2를 입력받아, arr1에 arr2를 곱한 결과를 반환하는 함수, solution을 완성해주세요. 제한 조건 행렬 arr1, arr2의 행과 열의 길이는 2 이상 100 이하입니다. 행렬 arr1, arr2의 원소는 -10 이상 20 이하인 자연수입니다. 곱할 수 있는 배열만 주어집니다. 입출력 예 arr1 arr2 return [[1, 4], [3, 2], [4, 1]] [[3, 3], [3, 3]] [[15, 15], [15, 15], [15, 15]] [[2, 3, 2], [4, 2, 4], [3, 1, 4]] [[5, 4, 3], [2, 4, 1], [3, 1, 1]] [[22, 22, 11], [36, 28, 18], [29, 20..

다이나믹 프로그래밍이란? (Dynamic Programming) 다이나믹 프로그래밍이란 기본적으로 복잡하게 반복해야 하는 문제를 여러개의 문제로 나눈 후, 그 문제들을 매 번 반복하지 않고, 그 값을 저장해 두었다가 재 사용하는 기법이다. 위에 달아놓은 블로그에 가서도 볼 수 있지만, 네 살짜리 아이에게 다이나믹 프로그램을 어떻게 설명해야하나요? 라는 질문에 달린 명쾌한 답변이 있었다. 종이에 "1+1+1+1+1+1+1+1 =" 을 쓰고, 아이에게 답이 무엇이냐고 묻는다. 아이 : (숫자를 하나씩 센 후) 8! 문제의 왼쪽에 "1+"을 덧붙인 후, 아이에게 다시 답을 묻는다. 아이: (빠르게) 9! 어떻게 9인지 빨리 알았니?라고 물으면 아이는 "그냥 1을 더했어요!" 라고 말한다. 왜냐하면 8을 기억해..

더 맵게(힙(Heap)) - Lv.2 문제 설명 매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같이 특별한 방법으로 섞어 새로운 음식을 만듭니다. 섞은 음식의 스코빌 지수 = 가장 맵지 않은 음식의 스코빌 지수 + (두 번째로 맵지 않은 음식의 스코빌 지수 * 2) Leo는 모든 음식의 스코빌 지수가 K 이상이 될 때까지 반복하여 섞습니다. Leo가 가진 음식의 스코빌 지수를 담은 배열 scoville과 원하는 스코빌 지수 K가 주어질 때, 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 섞어야 하는 최소 횟수를 return 하도록 solution 함수를..