'TIL' 카테고리의 글 목록 (12 Page)

2023. 1. 11. 23:18 TIL/트러블슈팅

Typescript 제네릭 실제 사용하기 커스텀 훅으로 만든 기존에 있던 useForm이다. 훅을 사용하는 두 가지 폼이 있는데 login과 todo를 생성, 수정할때 사용했다. 따라서 들어오는 타입도 TodoType, LoginType을 따로 만들어 union type으로 생성했는데 이렇게 사용하게 되니 계속 as로 Type Assertion(타입 단언) 시켜줘야하는 문제가 발생했다. 뿐만 아니라 자동완성기능도 사용하지 못했고 나중에 새로운 데이터 타입으로 사용할 때는 새로운 타입으로 useForm 자체에 추가해줘야하는 번거로움까지 발생했다. 이런 부분이 명백히 문제라고 생각했고 이번에 프리온보딩을 들으면서 적절히 추상화되지 않았다가 정답인거 같아 타입스크립트에 대해 조금 더 찾아보았다. import ..

컨텐츠 업데이트, 원티드 프리 온보딩 참여 - 회고

2023. 1. 10. 23:40 TIL/ETC

컨텐츠 업데이트 오늘은 이력서 업데이트 한다고 글을 계속 쓰려고 노력했다. 그런데 쓰기 애매한 부분을 계속 어떻게 쓰면 좋을지 고민하면서 다른 이력서들 여러가지를 참고하다가 어느새 보니 아티클만 읽고 있었다.. 잠시 이력서 쓰던 부분을 내려놓고 개인 프로젝트를 진행했던 부분에서 프로젝트 초기에 변경해놓지 않은 기본 값들을 여러 수정하는 걸로 끝냈다. 원티드 프리 온보딩 참여 관심있던 주제로 만들어져 신청하게 되었는데 오늘 처음으로 시작하게 되었다. 사전과제가 있었는데 구현 위주로 생각했고 완성시킨 뒤 오늘 다른 분들의 코드를 보며 다시 생각해봤을 땐 미처 고려하지 못한 부분들이 많다는 것을 느꼈다. 뭔가 한번쯤 이렇게 하면 편할꺼같은데라고 생각하고 구현이 복잡해 넘어갔다가 실제로 구현되어 있는 부분을 보..

크롬 익스텐션 보일러 플레이트 및 웹팩 설정과 css 에러 수정

2023. 1. 9. 22:36 TIL/트러블슈팅

크롬 익스텐션 개발 및 웹팩 설정 현재 진행하는 개인프로젝트에서 크롬 익스텐션을 개발해보고자 여러 아티클을 참고하였습니다. 북마크 비스무리하게 만드는 거라 최대한 유사하게 검색해서 진행해봤고 참고할만한 자료들을 많이 읽어봤는데 주로 js로 진행되었고 하나하나 다 배워가면서 진행하면 좋았겠지만 간단한 기능을 개발하기때문에 막히는 부분이 있으면 그때그때 찾아보자라는 생각으로 진행하였습니다. 크롬 익스텐션에서 데이터를 어떻게 다룰 것인가? (피트스탑과제 – 크롬 익스텐션 개발기) | 우 {{item.name}} 안녕하세요, 우아한형제들에서 웹프론트엔드 개발을 담당하고 있는 배민셀프서비스팀의 남현우입니다. 피트스탑 기간에 정환님, 미라님, 민희님과 함께 팀 생산성을 높이기 위해 만 techblog.woowaha..

vanilla js로 간단하게 spa 구현

2023. 1. 8. 20:43 TIL/개념정리

Vanilla JS로 SPA 구현 유튜브를 참고해서 바닐라 js로 간단하게 spa 구조를 잡는 것을 실습해보았다. 기존의 history 방식으로 구현된다는 것은 대충 알고 있었는데 실제로 구현해보니 잘 이해할 수 있었다. 조금 헷갈렸던 부분이 이벤트 리스너를 달아주는 부분이었는데 찾아보니 다양한 이벤트를 감지할 수 있었다는 것을 알았다. import Home from "./Home.js"; import Posts from "./Posts.js"; import Settings from "./Setting.js"; import NotFound from "./NotFound.js"; function navigateTo(url) { history.pushState(null, null, url); router()..

WebPack을 사용하는 이유와 정리

2023. 1. 7. 23:03 TIL/개념정리

Webpack이란 우선 웹팩을 간단히 설명하자면 여러 파일을 합쳐 정적인 하나의 파일로 만들어주는 tool을 웹팩이라고 한다. 아래 이미지를 보면 여러 경로로 엮인 파일들이 단순화 된다. 왜 Webpack을 사용해야할까? 이건 웹 개발의 역사를 알아보면 쉽다. 2000년대 초반 웹페이지는 각 페이지마다 새로운 html을 요청하면서 화면을 매번 다시 그리는 방식이었습니다. 이때 js도 마찬가지로 간단하게 DOM을 조작하는 역할 뿐이고 기능적으로 많은 역할이 필요하지 않지만 인터넷의 규모가 커지고 프론트/백의 구조로 구분되고, 이러한 아키텍쳐에서 SPA의 개념이 발전하며 수백가지의 js 파일이 포함되어 더 이상 이전의 방식으로 유지될 수 없었습니다. 따라서 웹팩이 등장하기 시작했고 총 3가지 이유로 정리할 ..

컴파일러 작동방식을 통한 JS 호이스팅이 발생하는 이유

2022. 11. 22. 21:43 TIL/트러블슈팅

개요 사실 호이스팅의 개념은 정리한지 꽤 지났다. 하지만 이전에 한번 정리해본 내용을 토대로 남에게 설명해보니 질문을 받고 혼자 정리하면서 왜 이렇게 동작하는가 생각되는 것들이 많아서 조금 더 상세하게 적어서 작성해서 조금 더 좋은 자료로 발표하기 위해 딥하게 들어가보았다 개념을 크게 몰라도 상관없지만 그래도 조금 더 확장해서 다루기 위함이니 한 번쯤은 다시 보고 오면 이해가 쉬울거라 생각된다. 호이스팅이란? 개요 요즘 호이스팅에 관한 문제는 크게 없다. 왜냐하면 EsLint같은 곳들의 옵션 속에서 자동적으로 에러를 뿜어내서 변수를 항상 최상단에 선언할 수 있도록 만드는 하나의 장치가 마련되어있기 choiblog.tistory.com 그럼 어떤 부분이 많이 헷갈렸을까? 당연히 변수를 끌어 올리는건 아니다..

[Nest] 53431 ERROR [ExceptionsHandler] () is not a function

2022. 11. 16. 19:23 TIL/트러블슈팅

말 그대로 기본 함수가 정의되지 않아서 생긴 문제였다. 함수를 찾아 올라가보니 export default로 반환된게 아니라 export로만 반환되어 문제가 발생했다 import ogs from 'open-graph-scraper'; import * as ogs from 'open-graph-scraper'; TypeError: (0 , dayjs_1.default) is not a function This is my logger.ts file that error happens there: import logger from "pino"; import dayjs from "dayjs"; const log = logger({ prettyPrint: true, base: { pid: false, ... stac..

SQL Injection이란?

2022. 11. 13. 19:07 TIL/개념정리

SQL Injection이란? SQL 인젝션(SQL 삽입 공격)은 악의적인 사용자가 데이터베이스와 연동된 웹 애플리케이션에서 조작된 질의(쿼리)문을 주입하여 웹 서비스에 대한 DB정보를 열람또는 조작할 수 있는 하나의 취약점입니다. 인젝션 공격은 OWASP Top10 중 첫 번째에 속해 있었으며, 공격이 비교적 쉬운 편이고 공격에 성공할 경우 큰 피해를 입힐 수 있는 공격입니다. OWASP : 웹에 관한 정보노출, 악성 파일 및 스크립트, 보안 취약점 등을 연구하는 회사로 보안에 큰 영향을 줄 수 있는 보안 취약점목록을 발표합니다. OWASP에서 발표한 10가지의 웹 보안위협 OWASP Top Ten | OWASP Foundation The OWASP Top 10 is the reference stand..

this란

2022. 11. 2. 11:44 TIL/개념정리

js에서 this란? 일반적으로 js에서의 this는 다른 언어들과는 조금 다르다(C++, Java 등..) 브라우저 개발자 도구에서 콘솔로그로 this를 찍어보면 기본적으로 window 객체가 나온다. 함수에서 this를 호출해도 window지만 nodejs환경에서 this는 global 객체로 나온다. 하지만 최근에는 global this로 합쳐졌다고 한다 + strict모드 상에서는 this를 찍어보면 undefined가 된다. 이러한 부분은 단순히 console.log만 찍어봐도 알 수 있다(참고). 이렇게 나오는 이유 일반적으로 this는 호출될 때 결정된다. 현재 브라우저상에서 콘솔 로그를 찍어보면 전역 범위에서 호출되는데 이때 this는 브라우저 최상단에 window라는 전역객체를 가리키고 ..

호이스팅이란?

2022. 10. 31. 22:53 TIL/개념정리

개요 요즘 호이스팅에 관한 문제는 크게 없다. 왜냐하면 EsLint같은 곳들의 옵션 속에서 자동적으로 에러를 뿜어내서 변수를 항상 최상단에 선언할 수 있도록 만드는 하나의 장치가 마련되어있기도 하고 코드를 읽기 쉽게 만드는 여러 방식들 중에서 변수 위치는 상당히 중요한 부분이기 때문에 이론적인 지식들만 확인해보고 넘어가려고 한다. 호이스팅 호이스팅 - 용어 사전 | MDN JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 var로 선언한 경우 호이스팅 시 undefined로 변수를 초기화하는 반면 let 과 const 로 선언한 변수의 경우 호이스팅 시 변수를 초기화 하지 않습니다 js의 모든 선언에는 호이스팅이 발생하게 ..

티스토리툴바