What I studied

이번에 프로젝트를 진행하며 프론트단에서만 데이터 처리를 해야하는 경우가 있었기 때문에 이를 위헤 웹스토리지를 사용했다. 평소에는 로그인 부분에 있어 토큰을 저장하는 용도로만 사용했었는데 이번에는 json 형식의 데이터를 웹스토리지에 저장하면서 CRUD를 구현했다. 그래서 각각의 웹스토리지의 차이에 대해서 다시한번 공부해보려고 한다. 1. Web Storage란? 웹스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 기술인데 HTML5에서 등장한 새로운 기능이다. DB에 저장하지 않아도 되는 데이터나 클라이언트단에서만 사용해야하는 정보 등을 저장하여 사용할 수 있고, 웹스토리지에는 로컬 스토리지와 세션 스토리지 두가지가 있다. 웹 스토리지는 개발자 도구의 Application에서 확인..

프로젝트를 수행하다보면 이벤트가 전파되어 예상치 못한 이슈를 발생시키는 경우가 있는데 처음 이 문제가 발생했을 때는 이벤트 전파에 대해 알고 있지 못해 원인을 찾기가 어려웠다. 하지만 이벤트 전파에 대해 알고 난 이후에는 어떠한 문제가 발생했을 때, 요소들이 어떻게 동작하고 있는지를 파악해 이 때문에 발생한 문제구나라는 것을 금방 알아챌 수 있었다. 1. 이벤트 전파 어떠한 요소에서 발생한 이벤트는 부모 또는 자식에게 전파되게 되는데 이때, 전파되는 방향에 따라 이벤트 버블링과 캡처링으로 구분한다. 1) 이벤트 버블링 이벤트 버블링(Bubbling)은 이벤트가 발생한 요소로부터 상위요소로 순차적으로 이벤트가 전파되는 방식이다. 2) 이벤트 캡처링 이벤트 캡처링(Capturing)은 이벤트가 발생한 요소로..

평소 공부를 하거나 회사에서 프로젝트를 진행할 때 항상 느꼈던 부분이 자바스크립트를 잘해야한다는 것이었는데 내가 제대로 알고 있는지 모르는지에 대해서 헷갈리는 부분들이 계속해서 나타난다. 그래서 끊임없이 공부를 하며 기본적인 것들이라도 다시 봐야한다는 것을 매번 느끼고 있는데 오늘 다시 봤던 부분이 변수와 변수 선언 방식인 var, let, const의 차이였다. 세가지 모두 변수를 선언할 때 사용하는데, var의 단점을 보완하기 위해 ES6부터 추가된 변수 선언 방식이 let과 const이다. 1. 변수란? 변수라는 것은 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 의미한다. 즉, 쉽게 말해 "하나의 값을 저장할 수 있는 저장공간"이라고 생각하면..

프로젝트의 규모가 작다면 별로 불편함을 느끼지 않겠지만, 프로젝트의 규모가 커지면서 파일의 상대경로 셋팅에 불편함을 느끼게 된다. 폴더 속에 폴더.. 폴더 속의 폴더 속의 파일 등등 이런식으로 끝도 없이 들어가는 경우가 발생하기에 아래와 같은 상황을 겪게 된다. ../../../pages/main/LandingTop ../../../pages/main/LandingMiddle ../../../pages/main/LandingBottom 이렇게 계속해서 ../을 쳐야하는 상황이 발생한다. ../../../../../ ....... 우리가 프로젝트를 진행하다보면 pages라는 폴더만 있는 것이 아니기 때문에, assets, components, utils 등등 다양한 폴더와 파일의 경로가 생기게 되는데 이를..

프로젝트를 개발을 진행하며, 프론트쪽 배포는 주로 내가 담당했는데 배포 전 build 상황에서 문제가 생겼다. 메모리가 부족하다..? 프로젝트 파일 안에 svg 파일이 많아서 그런 것 같았다. 일단 이 문제를 해결하기 위해 에러를 검색해보니 Heap 메모리가 부족해서 발생한 것이라고 한다. 그래서 Heap 메모리를 늘려주면 된다고 하는데 방법은 생각보다 간단했다. 에러 로그 Creating an optimized production build... [1559:0x59136f0] 162161 ms: Mark-sweep 2002.1 (2090.7) -> 1994.4 (2084.8) MB, 2587.5 / 0.1 ms (average mu = 0.160, current mu = 0.050) allocation..

이번에 개발용 노트북으로 맥북을 구매했는데 계속 윈도우만 쓰다가 맥북을 쓰려니 적응이 필요했다. 깃 초기 설정 등의 설정은 모두 마쳤지만 맥 터미널을 계속 사용하면서 글씨 색상이 흰색인게 보기 불편했다. 모든 글씨가 흰색이다보니까 가독성이 떨어졌고 그래서 이를 바꿀 수 있는 방법을 찾아보았는데 생각보다 어렵지 않았다. 환경설정에서 스타일 바꾸기 그냥 기본적인 스타일을 변경하고 싶다면 터미널 환경설정에서 간편하게 바꿀 수 있는데 여러가지 스타일이 존재한다. 원하는 스타일을 선택해 아래의 기본을 클릭해주어야 기본 템플릿으로 설정되니 원하는 스타일을 선택했다면 아래의 기본을 꼭 클릭해주자. 스타일 선택 오른쪽을 보면 텍스트, 볼드 텍스트 설정, 컬러설정 등이 있는데 원하는대로 바꿔주면 된다. 수동으로 색상 변..

3주차에는 리덕스 thunk 미들웨어 사용법과 함께 리덕스 툴킷에 대해 학습하는 주차였다. 6기 과정에는 리덕스 툴킷이 없었기 때문에 나도 이번 기회를 통해 리덕스 툴킷을 학습할 수 있었다. 수강생분들도 열심히 하시는 만큼 나도 질문에 답을 해드릴 수 있도록 준비가 되어있어야했기 때문에 리덕스 툴킷을 새롭게 학습했다. 기존 리덕스 코드는 작성하면 작성할 수록 코드가 길어질 수밖에 없었는데 툴킷을 사용하니 훨씬 더 간결해졌던 것 같다. 리덕스 툴킷에 더해 미들웨어도 학습하고, json-server를 활용하는 방법까지 배우셨는데 강의자료만 보고 빠르게 치고나가시는 분들이 있는 반면에 천천히 한걸음씩 나아가시는 분들도 계셨다. 빠르게 치고 나가시는 분들을 보며 내가 잘 하고 있는게 맞는지 등에 대해 고민하시는..

백엔드쪽에서 마크다운 언어로 내려주는 데이터를 화면에 예쁘게 보여주기 위해서 방법을 검색해봤는데 생각보다 어렵지 않았다. 리액트에서 마크다운을 예쁘게 로드시켜주는 npm 라이브러리가 존재했기 때문! 리액트 마크다운 npm 설치 npm install react-markdown 설치 후, 사용하기 언제나 그렇듯 npm 설치를 마쳤다면 사용을 위해 import를 해주어야한다. import ReactMarkdown from 'react-markdown' import를 해줬다면 바로 사용하면 된다. import React from "react"; import ReactMarkdown from 'react-markdown' const ServerLawModal = (props) => { const { data } ..

기술매니저로써 9기분들을 만난지 벌써 2주차가 되어간다. 2주차는 리덕스에 초점이 맞춰져있었는데 나도 리덕스를 처음 접할 때 많이 어려워했던 기억이 난다. 리액트의 가장 기본이 되는 state, props에 대해서 제대로 이해를 하지 못한채 리덕스를 맞이하게 되면 당연히 어려울 수밖에 없다. 그래서 아직 state와 props의 개념이 확실하지 않은 분들께는 이 부분을 먼저 복습할 것을 안내해드렸다. 가장 처음에는 state와 props 만으로 CRUD를 구현해보셨고, 2주차에는 기존에 만들었던 것을 redux로 변환하는 작업을 해보실 수 있도록 준비되어있었다. 다음주인 3주차에는 기존 리덕스 코드를 툴킷을 사용한 코드로 변경해보는 작업이 있을텐데 차근차근 하나씩 배워보시면서 흥미를 느끼시는 분들이 눈에..

2022년 3월부터 총 99일동안 이루어진 항해 6기를 무사히 수료하고 원하던 프론트엔드 개발자가 되었다. 평소에 프로그래밍에 대한 관심은 많았지만 비전공자였고, 내가 원하는 내 꿈을 이루기 위해 항해에 도전했다. 올해 2월까지만 해도 웹에 대해서 아무것도 몰랐던 내가 지금 회사에서 프론트엔드 개발 일을 하고 있다는 것도 신기한 일인데 이제는 항해 9기 기술매니저로써 수강생분들께 도움을 드리고 있다. 남는 시간을 활용해 나 스스로 공부도 할 겸, 수강생분들의 리액트 학습을 도와드리고 있는데 항해를 하면서 어려운 점 등의 고민도 들어드리고 리액트를 공부하며 어려움이 발생할 때 도움을 드리기도 한다. 지금 현재 항해 과정을 경험하고 계신 분들께서 내가 6기 과정 당시 느꼈던 어려움을 똑같이 느끼고 계시기에 ..