Front-end
-
[TIL] 웹팩에 대하여IT 지식 2020. 12. 29. 15:10
저는 프로젝트 초기 셋팅을 주로 create-react-app 이나, create-next-app을 활용하여 진행합니다. 이 npx 명령어들은 웹팩과 바벨에 대한 셋팅까지 자동으로 해주기 때문에 이전까지는 제가 웹팩이나 바벨에 대해 신경을 쓰지 않아도 됐습니다. 하지만 프론트엔드 개발자로서 웹팩과 바벨에 대한 기본적인 이해가 필요하다고 생각하게 되었습니다(내가 활용하고 있는 기술 스택이 뭔지는 알고 써야하니까요). 그래서 이번 포스팅에서는 웹팩이란 무엇이고 이것을 어떻게 활용하는 지에 대해 알아보도록 하겠습니다. 1. 웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 소스코드 등(HTML, CSS,..
-
[TIL] 동적 라우팅IT 지식 2020. 12. 6. 18:02
저는 지금까지 프로젝트를 진행하면서 동적라우팅을 직접 사용해 본 적이 없습니다. 좀 더 구체적으로 말하자면 다른 팀원분들이 해당 부분을 코딩해주셔서 저는 따라가기만 했던 것인데요, 앞으로의 프로젝트에서는 분명 동적 라우팅을 해야하는 경우가 생길 것이기에 오늘 포스팅을 정리하면서 동적 라우팅을 좀 더 익혀보는 시간을 가져보도록 하겠습니다. 1. 동적 라우팅이 뭔가요? 동적 라우팅이란 라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것을 말합니다. 보통 react에서는 해당 기능이 없기 때문에 react-router라는 라이브러리를 통해 이 기능을 구현하곤 합니다. react router에서는 두 가지 방법을 통해 유동 라우팅 기능을 구현할 수 있는데, Query parameters UR..
-
[TIL] 로컬 스토리지, 세션 스토리지 그리고 쿠키IT 지식 2020. 12. 6. 16:47
지금 진행 중인 프로젝트에서는 쿠키를 사용하여 데이터를 활용한 적이 있습니다. 이 전의 프로젝트에서는 로컬 스토리지에 데이터를 담았던 적이 있구요. 하지만 이렇게 활용하다보니, 도대체 로컬 스토리지와 쿠키의 차이점이 뭘까?라는 의문이 들었습니다. 오늘의 포스팅은 바로 이 의문점을 해결하는 것으로 이루어져 있습니다. 1. 브라우저의 데이터를 컴퓨터에 기록하는 방식 로컬 스토리지, 세션 스토리지 그리고 쿠키는 모두 인터넷을 하면서 발생하는 데이터를 컴퓨터에 기록하는 방식입니다. 이 중에서 로컬 스토리지와 세션 스토리지는 HTML5 에서 추가된 저장소라고 합니다. 그렇다면, HTML5 이전에는 어디에 데이터를 저장했을까요? 눈치 빠른 분들은 아셨겠지만, 바로 쿠키에 저장했다고 합니다. 1) 쿠키 쿠키는 만료 ..
-
[TIL] Timer 만들기IT 지식 2020. 12. 6. 15:49
이번 프로젝트를 진행하면서 제가 직접 타이머를 만들어야 했습니다. 라이브러리를 쓰지 않고 직접 만들어보려고 하니, 너무 오래 걸리고 쉽지 않았습니다. 지금 현재도 완벽하게는 작동하지 않지만, 그래도 그럭저럭 움직이는 타이머를 만들어보고 나니 저처럼 직접 타이머를 만들어야 하는 분들이 있을 것 같아, 제가 타이머를 만들던 과정을 남겨놓고 코드를 남겨 놓으면 다른 분들에게 도움이 될 것 같아 이번 포스팅을 작성하게 되었습니다. 해당 타이머는 React를 활용해서 만들었습니다. 1. 초기 타이머 맨 처음 만든 타이머는 setTimeOut 함수를 통해 만들었습니다. Date 객체를 활용하여 현재 시각이 매 초 찍히게 만들었고, 시작시간을 state로 기록하여 현재 시각에서 시작 시간을 빼주는 방식으로 로직을 생..
-
[TIL] Day 33. 비동기 처리와 콜백함수IT 지식 2020. 11. 20. 19:54
이번에 새롭게 노드를 공부하게 되었습니다. 그런데 노드를 공부하기에 앞서 promise에 대한 개념이 필요하다고 하더군요. 그래서 promise에 대해 공부하려고 보니, 이번엔 사전 지식으로 비동기 처리와 콜백함수에 대한 개념이 필요하다는 것을 알게 되었습니다(개발의 세계는 끝이 없어라...). 그래서 오늘은 제가 공부한 비동기 처리와 콜백함수에 대한 개념을 정리해보는 시간을 가져보도록 하겠습니다. 1. 비동기 처리가 뭔가요? 비동기 처리란 특정 코드의 실행이 끝날 때까지 다른 코드들이 대기하며 기다리는 것이 아니라, 계속해서 코드를 읽어 나가며 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. console.log('1') console.log('2') consol..
-
wecode 2차 프로젝트 후기에세이 2020. 11. 15. 23:58
1. 프로젝트 시작 이번 2차 프로젝트에서는 function of beauty 라는 외국 사이트를 클론하게 되었다. 처음 사이트 소개할 때 사이트가 예뻐보여서 선택했었는데 막상 내가 그 사이트를 구현하려고 하니 부담감이 앞섰다. 처음 팀이 꾸려지고 회의를 하면서 그래도 1차 프로젝트 때 state를 많이 다루어 보았으니까, 이번에도 state를 다루는 일은 크게 어렵지 않을 것이라고 생각했다. 그러다보니 내가 detail 페이지와 state를 많이 활용해야 하는 quiz 페이지를 맡게 되었다. 첫 회의 때 무리 없이 역할분담이 진행되었기에 이번 프로젝트는 조금 힘들지언정 위기는 크게 없겠다라는 생각이 들었었다. 2. 프로젝트 진행 중 프로젝트의 첫 주차에는 빠르게 끝낼 수 있는 detail 페이지 먼저 ..
-
[what is?] git이 뭔가요?IT 지식 2020. 11. 15. 10:39
코딩을 하다보면 내가 한 코딩에 대한 기록을 남겨야 할 필요성이 느껴지게 됩니다. 내가 어떤 작업을 했는지부터 시작하여, 내가 쓴 코딩을 다른 어딘가에 백업하고 싶다는 등의 느낌 말이죠. 이런 필요성은 혼자 할 때보다 협업을 하게 되면 더 크게 다가오게 되는데요, 오늘은 전세계 개발자들이 애용하는 코드 백업 툴이자 협업 툴인 git에 대해 알아보는 시간을 가져보도록 하겠습니다. 1. git? 처음 들어봐요. 깃(Git /ɡɪt)은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 소프트웨어 개발에서 소스 코드 관리에 주로 사용되지만 어떠한 집합의 파일의 변경사항을 지속적으로 추적하기 위해 사용될 수 있다.(from 위키백과) git..
-
[What is?] 타입스크립트가 뭔가요?IT 지식 2020. 11. 1. 19:38
오늘 포스팅에서는 자바스크립트의 상위 호환으로 알려져 있는 타입스크립트에 대해 다뤄보도록 하겠습니다. 1. 타입스크립트? 더보기 타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로 소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다. 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다. (From 위키백과) 타입스크립트는 마이크로 소프트에서 개발한 오픈소스 프로그래밍 언어 입니다. 타입스크립트는 자바스크립트의 슈퍼셋이기 때문에 자바스크립트에서 사용할 수 있는 모든 기능을 사용할 수 있습니다. 이로 인해 ES6 문법을 사용하기 위해 Bab..