profile
Frontend-developer
post-thumbnail

[TIL] React Netlify 배포 시 Proxy 오류, Router 404 오류 해결

netlify로 배포했더니 프록시 오류남고치고 보니 라우터 404 오류도 있었음라우터 고치니 다시 프록시 오류남….😅프론트엔드에서 api를 사용하다보면 cors 오류를 해결하기 위해 proxy를 설정해야할 때가 있다. 개발 중에는 CRA(create-react-app

2023년 4월 13일
·
0개의 댓글
·
post-thumbnail

[JS] 원시타입과 참조타입, 그리고 얕은 복사(spread operator?)

💡 원시타입과 참조타입 🔆 원시 타입 원시값(primitive): 변경 불가능한 불변의 값 String, Number, undefined, Boolean, Symbol, BigInt 6종류 💦 원시 타입의 불변성(immutable) 변수의 변경 ≠ 원시값의

2023년 3월 27일
·
0개의 댓글
·
post-thumbnail

[TS] Type Alias

재사용하는 타입에 더 쉬운 이름을 할당하는 방법 type aliastype 새로운 이름 = 타입타입 별칭은 PascalCase로 지정타입 시스템의 ‘복붙’처럼 작동훨씬 읽기 쉽다.타입이 복잡해질 때 사용할 수 있는 편리한 기능!타입스크립트의 타입 시스템에만 존재.js

2023년 3월 23일
·
0개의 댓글
·
post-thumbnail

[TS] 유니언과 리터럴(내로잉,타입가드)

코드 정보에 입각한 추론 - Only TypeScript유니언 union : 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것내로잉 narrowing : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것math는 잠재적인 타입으로 und

2023년 3월 23일
·
0개의 댓글
·
post-thumbnail

[JS] 객체의 모든 것

키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합자바스크립트는 객체(object) 기반의 스크립트 언어자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입(prototype)” 상속 객체 = 데이터 프로퍼티(property) +

2023년 3월 14일
·
0개의 댓글
·
post-thumbnail

[TS] 타입 시스템

타입 은 자바스크립트에서 다루는 값의 형태형태란 값에 존재하는 속성과 메서드, 내장되어 있는 typeof 연산자가 설명하는 것을 의미typescript는 javascript의 기본 원시 타입 7가지를 다음과 같이 간주한다.타입스크립트는 계산된 초깃값을 갖는 변수의 타입

2023년 3월 1일
·
0개의 댓글
·
post-thumbnail

[OS] 메모리구조 - code, data, stack, heap

프로그램이 운영체제로부터 할당받는 대표적인 메모리 공간프로그램이 실행되기 위해서는 먼저 프로그램이 메모리에 로드(load)되어야 한다.또한 프로그램이 실행되는 동안 CPU가 코드를 처리하기 위해서는, 메모리가 명령어와 데이터들을 저장해야 한다.프로그램이 실행하게 되면

2023년 3월 1일
·
0개의 댓글
·
post-thumbnail

[JS] 함수 (일급 객체, 매개변수와 인수, 콜백함수)

함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록유지보수성, 재사용성, 높은 가독성함수는 데이터가 아닌 하나의 특별한 값이고 그것을 할당할 수 있다.함수의 정의 방식 3가지함수 선언문함수 표현식Function 생성자 함수함수명

2023년 3월 1일
·
0개의 댓글
·
post-thumbnail

[CS] 3. 프로그래밍 패러다임

프로그래머에게 프로그래밍의 관점을 갖게 해주는 역할을 하는 개발 방법론Untitled‘무엇을’ 풀어내는가에 집중하는 패러다임이며, “프로그램은 함수로 이루어진 것이다.”라는 명제가 담겨 있는 패러다임함수형 프로그래밍(functional programming)은 선언형

2023년 1월 27일
·
0개의 댓글
·
post-thumbnail

[CS] 기술면접 - 1

원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대.애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

[CS] 2. 디자인 패턴

6. 이터레이터 패턴 Iterator pattern > 이터레이터(iterator)를 사용하여 컬렉션의 요소에 접근하는 디자인 패턴 순회 가능한 여러 가지 자료형의 구조와 상관없이 이터레이터라는 하나의 인터페이스로 순회할 수 있음 다른 자료 구조인 set, m

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

[CS] 1. 디자인 패턴

프로그램 설계 시 발생했던 문제점들을객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 ‘규약’ 형태로 만들어 놓은 것하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴보통 데이터베이스 연결 모듈에 많이 사용장점 : 인스턴스 생성 시 드는 비용 감소 → 메모리

2022년 12월 19일
·
0개의 댓글
·
post-thumbnail

[SW3] 1103 오피스아워 (중앙정렬, 정규식, 경로)

오피스아워 (프론트엔드 코치님과 질의응답 및 프젝 코드리뷰) 시간에진행한 질문과 답변을 기록합니다.Q. 장바구니 안에 아이콘과 설명이 세로 가로 정중앙에 오게하고 싶은데 어떤 방법이 좋을까요? 지금은 display : block; margin :auto 적용 상태입니다

2022년 11월 14일
·
0개의 댓글
·
post-thumbnail

[SW3] 1101 오피스아워 (시맨틱 웹)

오피스아워 (프론트엔드 코치님과 질의응답 및 프젝 코드리뷰) 시간에진행한 질문과 답변을 기록합니다.Q. 시맨틱 웹으로 마크업하는 게 좋을까요?시맨틱 웹을 권장한다. -> SEO(검색 엔진 최적화)div로만 작성되어있으면 다른 사람들이 코드를 봤을 때 한눈에 파악하기 힘

2022년 11월 14일
·
0개의 댓글
·
post-thumbnail

[SW3] 1109 오피스아워 (onclick 이벤트, fetch)

오피스아워 (프론트엔드 코치님과 질의응답 및 프젝 코드리뷰) 시간에진행한 질문과 답변을 기록합니다.

2022년 11월 14일
·
0개의 댓글
·
post-thumbnail

[SW3] 1107 오피스아워 (유틸성 함수)

오피스아워 (프론트엔드 코치님과 질의응답 및 프젝 코드리뷰) 시간에진행한 질문과 답변을 기록합니다.Q. HTML 파일에 script 의 삽입 위치는 바디 태그 아래에 두는게 좋을까요?일반적으로 자바스크립트에서는 돔을 선택하고 활용해서 개발한다. 따라서 모든 html

2022년 11월 7일
·
0개의 댓글
·
post-thumbnail

[JWT] GameGo 사이드프로젝트(React)에서의 JWT 로그인 구현

JWT를 이용하는 방식으로 결정했다.참고자료그 중 토큰을 브라우저에 저장하는 방식을 선택했고, 그 중에서 localstorage, cookie 중 localstorage로 하기로 결정했다. 토큰은 API 요청 시마다 헤더에 담아서 보내기로 결정되었다.모든 API에는 A

2022년 9월 21일
·
1개의 댓글
·
post-thumbnail

[JWT] 2. JSON Web Token

이전에는 세션 방식(서버 인증 방식) 을 이용해서 로그인 기능을 구현했지만, 최근엔 JWT라는 토큰 기반의 인증 방식이 나오면서 웹과 모바일에서 대부분의 인증이 JWT로 구현되고 있다. JWT(Json Web Token)는 클레임 토큰 기반 인증 방식으로 인증에 필요한

2022년 9월 21일
·
0개의 댓글
·
post-thumbnail

[JWT] 1. 토큰(Token) 기반 인증

토큰 기반 인증은 모던 웹서비스에서 많이 사용되고 있다.API를 사용하는 웹서비스 개발한다면, 토큰을 사용하여 유저들의 인증 작업을 처리하는 것이 가장 좋다.Stateful 서버 클라이언트에게서 요청을 받을 때 마다 클라이언트의 상태를 계속해서 유지하고, 이 정보를 서

2022년 9월 19일
·
0개의 댓글
·