◼ FrontEnd

[TypeScript] 에러 해결 모음 (간단한 에러들)

1. 블록 범위 변수를 다시 선언할 수 없습니다타입스크립트 실습 도중 TS 파일을 JS로 변환했더니 블록 범위 변수 'a'을(를) 다시 선언할 수 없습니다라는 문구와 함께 오류가 발생하였습니다. 분명 변수를 다시 선언한 적이 없는데 왜 이런 오류가 나는지 검색해보니 원인은 다음과 같았습니다. 자바스크립트에선 JS 파일 각각이 하나의 모듈로 인식되므로, 서로 다른 JS 파일에 동일한 이름의 변수를 선언할 수 있습니다. 그러나 타입스크입트는 모든 TS 파일을 하나의 모듈로 보기 때문에 비록 다른 파일이라 하더라도 동일한 변수의 이름을 선언할 수 없다고 합니다. 이를 해결하는 방법은 파일 끝에 export {};코드를 추가하여 해당 파일을 독립된 모듈로 인식하도록 하거나, tsconfig.json 파일에"m..

[JavaScript] 자바스크립트는 일급 함수를 지원하는 언어이다

MDN Web Docs에서 자바스크립트 언어에 대한 소개를 보면 첫 문장은 다음과 같다.JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다.우선 인터프리터, just-in-time 컴파일 언어는 나중에 살펴보기로 하고, 이번 포스트에서는 이 '일급 함수'라는 개념에 집중하고자 한다. 자바스크립트는 일급 함수를 지원하는 언어인데, 이게 무슨 말일까? 일급 함수란 무엇을 뜻하는 용어일까? 일급 함수란?먼저, MDN Web Docs에서 일급 함수에 대한 설명을 참고하면 다음과 같다.프로그래밍 언어는 해당 언어의 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 합니다. 예를 들어, 일급 함수를 가진 언어에서 함수는 다른 함수들..

[JavaScript] forEach문에서 return이나 break를 쓰면 안된다

중간고사가 끝나고 여유가 생겨 오랜만에 코딩테스트 연습을 위해 프로그래머스에서 '올바른 괄호'라는 문제를 풀고 있었는데, 작성한 코드의 로직이 틀린 곳이 없음에도 특정 케이스가 계속 통과하지 않는 문제가 발생했습니다. 그래서 테스트케이스를 직접 작성해보고 코드도 디버깅해보며 오랜시간 전전긍긍하다 결국 문제점을 발견하고 해결했습니다. 이 문제점은 그동안 제가 전혀 몰랐던 내용이었기에, 이렇게 기록으로 남겨둡니다. 결론부터 말하면 자바스크립트의 배열을 순회하는 forEach문에서는 return문이나 break문을 작성해도 코드가 반복을 중단하지 않습니다. 그리고 forEach문 안에서 return문을 만나도 forEach문을 감싸고 있는 함수를 벗어나지 않습니다. 예시코드를 살펴보면 다음과 같습니다. fun..

[CSS] CSS-in-JS의 Styled-Components 사용법 및 문법 정리

CSS-in-JS란? 자바스크립트 파일 안에서 CSS를 작성할 수 있는 방법이다. 자바스크립트의 상태 값을 공유하여 동적으로 스타일링을 하기 위해 등장한 패러다임이다. 인라일 스타일 이용 or 클래스 명으로 조건부 스타일링 props.[props 속성 이름]} import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; function App() { return ( ); } export default App; 이 문법을 활용하면 중복..

[React] 카카오맵 API를 통해 지도를 화면에 띄우기 (에러 해결법)

멋쟁이 사자처럼에서 진행하는 중앙 해커톤을 준비하면서 카카오맵 API를 통해 지도를 화면에 그리는 기능을 구현하게 되었습니다. 카카오에서 제공한 공식문서가 워낙 깔끔하게 잘 정리되어있어 빠르게 지도를 화면에 구현할 수 있었지만, 도중 몇몇 문제를 마주하여 고민했던 부분 역시 있었는데, 이 포스트에선 이러한 문제를 어떻게 해결했는지를 정리하여 비슷한 어려움을 겪고 있는 다른 개발자 분들에게 도움을 드리고자 합니다. (참고로 저는 Web API를 사용하여 구현했습니다.) 로컬 환경에서 테스트할 수 있도록 사이트 도매인 등록하기 로컬 환경에서 카카오맵 API가 올바르게 동작하는 지 확인하기 위해선 로컬 주소를 사이트 도매인으로 등록해주면 됩니다. 저는 처음에 공식문서에서 '웹 서버를 실행시키라'는 언급이 있어..

[Web] PWA(프로그래시브 웹 앱)이란 무엇일까?

이번 5월달에 SWYG(스위그)에서 진행하는 스위디(SWYDY) 스터디에 참여하여 PWA에 대해 처음 학습하게 되었습니다. 이번 포스트는 스위디 스터디 1주차 때 배웠던 내용을 바탕으로 작성하였습니다. PWA란 무엇인가? PWA란 Progressive Web Application의 줄임말로, 모바일에서 앱 스토어를 통해 설치하는 네이티브 앱처럼 사용할 수 있는 웹 어플리케이션을 말합니다. 쉽게 말하자면, 웹 어플리케이션을 Mobile App화(化)한 것이라 할 수 있겠습니다. 그렇지만 PWA는 일반 웹 앱처럼 기본적으로 HTML, CSS, JavaScript와 같은 웹 기술을 통해 만들어집니다. 2015년 Google Chrome의 엔지니어 알렉스 러셀(Alex Russel)은 '점진적(progressi..

[Web] CSR과 SSR이란 무엇일까?

SSR과 CSR이란? SSR과 CSR이란 개념은 웹의 UI를 생성하는 렌더링 과정이 어디에서 일어나는 지에 따라 그 차이가 있습니다. 이 두 개념을 잘 이해하기 위해선 웹 브라우저가 어떻게 동작하는지, 웹 사이트가 어떤 과정을 통해 우리 눈 앞에 나타나게 되는지를 미리 알고 있어야 합니다. 이에 대한 내용은 제가 예전에 작성해 둔 포스트를 아래 링크로 달아드리니, 부디 참고해주시기 바랍니다. 주소창에 naver.com을 치면 일어나는 일을 쉽게 이해해보자 (이 포스트는 velog 플랫폼에 포스팅했던 게시글을 그대로 가져온 것입니다. 감사하게도, 당시 이 게시글이 velog 월간 트렌딩 1위에 올랐습니다. 읽어주신 모든 분께 이 자릴 빌어 진심으로 감사의 sylagape1231.tistory.com 웹에서..

[ReactJS] 관심사의 분리와 Custom Hook

관심사의 분리 각각의 관심사에 따라 코드를 분리하는 기법 코드가 하나의 관심사만 신경쓰도록 분리하는 것 관심사의 분리의 특징 특정한 변화에 대응하기 위해 읽고 이해하고 수정해야 하는 코드의 단위를 줄일 수 있어 유지 보수에 용이해진다. 하나의 코드가 하나의 기능을 담담하기에 여러 역할이 혼재된 코드보다 단위별로 재사용하기 쉬워진다. 코드의 기능 테스트 또한 쉬워진다. 관심사의 분리가 잘 된 소프트웨어는 낮은 결합도와 높은 응집도란 특징이 나타난다. 낮은 결합도 (Loose Coupling) : 코드가 얽혀있지 않고 관심사에 따라 독립적으로 잘 분리되어 있다. 높은 응집도 (High Cohesive) : 동일한 목적(관심사)를 가진 코드끼리 잘 모여있다. KISS 원칙 Keep It Simple, Stup..

[ReactJS] Dynamic Routing & Query String

Dynamic Routing (동적 라우팅) 정적 Routing Routing을 설정하는 가장 기본적인 방식은 정적 Routing이다. 정적 라우팅은 Router 컴포넌트에서 미리 프로젝트에 사용할 경로들과 보여줄 컴포넌트들을 모두 정의해두는 방식이다. import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; const Router = () => { return ( ) } export default Router; 하지만 복잡하고 규모가 큰 애플리케이션에서는 경로를 미리 설정하는 Routing 방식만으론 처리하기 힘든 작업이 존재할 수 있다. (Route를 유연하게 정의할 수 없으므로) 동적 라우팅 ..

[ReactJS] Component의 분리와 재사용 (관심사의 분리)

컴포넌트 분리 관심사의 분리 관심사의 분리란 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것을 말한다. 프로그램을 구별된 '개개의 관심사를 해결하는 부분'으로 분리하는 디자인 원칙이다. 컴포넌트 별로 관심사를 분리하면 확장성과 재사용성을 높일 수 있다. 컴포넌트를 분리하는 이유 React에서 컴포넌트는 다양한 역할을 한다. 어떤 컴포넌트는 UI를 표현하고자 하고, 또 어떤 컴포넌트는 동작하는 로직을 담을 수 있다. 위의 두 역할을 모두 담는 컴포넌트 또한 존재하고, 하나도 담지 않는 컴포넌트도 존재할 수 있다. 이처럼 컴포넌트는 재사용할 수 있는 최소 UI 단위임에도 불구하고, 웹의 복잡도와 해당 컴포넌트에서 수행하려고 하는 역할에 따라 얼마든지 복잡해질 수 있다. 따라서 '관심사의 분리'..