끝과 끝을 맛본 2023 😀첫 입사한 회사에서의 퇴사와, 현 회사와의 만남작년 11월 프론트엔드 개발자로서 처음 입사한 회사에서 3개월간 업무를 하고 퇴사를 하게 되었다. 이후에 개발팀이 완전 무너졌는데 그래도 좋은 사람들을 만나고 짧지만 압축해서 많은 것들을 배울 수 있었다. 그리고 현재의 회사에 입사를 하여 기존 코드 유지보수와 리팩토링 및 신규 서비스 개발들을 하며 어느덧 1년 차 개발자로서 성장하였다! '문제'에 대해 놀라지 않고 차분히 대응하는 태도개발자는 문제를 해결하는 사람이다. 새로운 것을 만들어 내기도 하지만, 기존 서비스 이슈에도 계속 대응을 하며 서비스를 이끌어야 한다. 나는 회사 대표 서비스인 2개의 플랫폼 '메인' 페이지를 주 담당으로 맡게 되었다. 메인 페이지는 단순히 서비스의..
변수는 총 선언, 초기화, 할당의 3가지 과정을 거친다. var 키워드로 선언한 변수는 let, const와 다르게 선언과 초기화를 동시에 한다. 초기화 단계에서 변수의 값은 암묵적으로 undefined가 된다. 왜 여기에서 '암묵적'이라는 단어가 들어가는 것일까? 모던 딥다이브 자바스크립트책을 다시 한번 읽다가 이 키워드가 눈에 들어오기 시작했다. 암묵적 사실 변수는 undefined로 초기화되지 않는다. 메모리 공간에 이전에 다른 애플리케이션에서 사용하던 쓰레기 값이 남아있을 수 있다. 값을 할당하지 않은 상태에서 참조하게 되면 쓰레기 값이 나오는 것이다. 이러한 오류를 방지하기 위해 자바스크립트는 undefined로 한번 더 할당한다. 즉, 최초로 값을 할당하는 초기화 단계에서 var 키워드로 선언..
자바스크립트로 동적인 페이지를 만들 때 페이지 이동에 대한 여러 작성 방법이 있다. 각 코드의 사용법과 기능을 알아보겠다. location.href = '링크' location 객체에 있는 href 프로퍼티가 있다. 이를 활용하는 방법이다. 현재 페이지 상태에서 새로운 링크로 이동한다. 새 창이 띄어지지 않고 단순히 url이 변경된다. 히스토리에 남기 때문에 뒤로 가기를 해도 이전 페이지로 이동이 가능하다. - location.href 현재 페이지 경로를 반환 - location.href = '링크' 다른 페이지(링크)로 이동 hello console.log(location.href); // https://realzzu.tistory.com/ location.replace('링크') replace는 위와..
SPA(Single Page Application)인 리액트는 webpack과 같은 번들러를 통해 모든 코드가 하나의 javascript 파일로 번들링 되어 로딩된다. 이에 따라 사용자가 첫 페이지 진입 시 불필요한 코드로 인해 로딩이 느리게 될 수 있다. 브라우저에서는 javascript 파일을 모두 불러올 때까지 렌더링을 멈추기 때문이다. 렌더링 속도를 높이기 위한 방법으로는 코드 스플리팅(코드 분할)이 있다. 필요한 시점에 필요한 코드를 불러옴으로써 첫 렌더링을 빠르게 할 수 있다. 코드 분할의 방법으로 dynamic import, 즉 동적 import에 대해 알아보겠다. 기본 Import 기본적으로 import 한다면, 불러온 라이브러리는 빌드 시 함께 번들링이 된다. import { minus ..
svelte 프로젝트에서 tailwind css를 적용하는 과정에서 애를 먹었다. 결과적으로 간단했던 것인데 처음 세팅해 보는 거라 어려웠다 🥲 필수 패키지 설치 npm i -D tailwindcss postcss autoprefixer npx tailwindcss init -p 로 tailwind 초기화해주고나서 추가로, webpack을 위해 npm i -D style-loader css-loader postcss-loader 까지 설치해 준다. tailwind.config.js content에 하위 내용을 입력해 준다. /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js,svelte,t..
한 줄 요약: Node를 설치할 때 LTS 버전을 권장하는 이유를 알았다 ^^^! prettier 설치 이후에 svelte 파일만 적용이 안되는 현상이 일어났다. 찾아보니 공식 문서나 git, 구글링 등에서 세팅하는 방법이 다 달랐다. 그리고 svlete 자체가 정보가 많이 없었고, webstorm이나 패키지 자체에서 해결되지 않은 이슈들도 꽤 있어 보였다. 모든 방법 다 해봐도 안돼서 포기하려던 찰나에 무언가를 발견했다. prettier-plugin-svelte의 설치 버전은 2.10.0인데, 해당 패키지 Git Repository에서의 태그는 2.7까지밖에 안나왔었다. 또한 prettier 버전은 3이었는데, last week에 출시된 버전이길래 안전하게 2 버전대로 다운그레이드하였다. 이전 버전들로..
모든 컴포넌트는 라이프사이클(= 생명주기) method를 가지고 있다. 이를 활용해 특정 시점에 코드가 실행되도록 작성할 수 있다. 라이프사이클은 크게 마운트(mount), 업데이트(update), 언마운트(unmount) 3가지로 나뉘며 각각 하위에 method들을 지닌다. 마운트 컴포넌트의 인스턴스가 생성되어 DOM에 삽입되는 시점을 Mount(마운트)라고 한다. 아래의 메서드들이 순서대로 호출된다. componentWillMount()는 리액트 공식문서에서 더 이상 권장하지 않는다. (2018년 기준) - constructor(props) React 컴포넌트의 생성자로, 마운트되기 전에 호출된다. 가장 먼저 실행되는 메서드이다. super(props)를 우선적으로 호출해야 한다. 그렇지 않으면 th..
안녕와 같이 HTML 텍스트를 그대로 렌더링 하기 위해선 dangerouslySetInnerHTML를 사용할 수 있다. dangerouslySetInnerHTML란? HTML 텍스트를 동적으로 렌더링할 수 있는 리액트의 속성이다. 리액트 컴포넌트에 직접적으로 HTML 코드를 삽입할 수 있다. __html이라는 key를 가지고 있으며, 이를 통해 렌더링 할 HTML 코드를 문자열 형식으로 전달한다. 사용법 import React from 'react'; function Component(){ const markup = { __html: "contains HTML!!" }; return ; } 주의점 이름에서도 dangerous라고 나타나듯이, 위험하게 설정된 HTML을 뜻한다. XSS(Cross-site ..
javascript:void(0)에서 javascript: 와 void(0)로 나눌 수 있다. 각각의 부분에 대해 알아보자. 링크 javascript: 태그의 href 값으로 javascript:를 받을 때, 이는 경로로 취급하지 않고 쌍점(:) 뒤에 오는 것을 자바스크립트 코드로 해석한다. 주로 href에는 경로를 넣기 때문에, 클릭 시 페이지 이동이 일어난다. 하지만 이 경우에는 이동이 일어나지 않는다. 링크 '링크'를 누르면 콘솔 창에 '클릭'이 출력된다. void(0) void는 아무것도 반환하지 않는 것을 말한다. 함수에서도 void는 아무런 결괏값도 반환하지 않는 것으로. 호출 시 undefined를 반환한다. const sum = void(5+5); console.log(sum); // un..
