전체 글

[TIL] 23.01.11 타입스크립트 핸드북 - More on Functions(1)

https://www.typescriptlang.org/ko/docs/handbook/2/functions.html Documentation - More on Functions TypeScript에서 함수가 어떻게 동작하는지 알아봅시다. www.typescriptlang.org 함수 타입 표현식 함수를 설명하는 가장 간단한 방법은 함수 타입 표현식이다. function greeter(fn: (a: string) => void) { fn("Hello, World"); } function printToConsole(s: string) { console.log(s); } greeter(printToConsole); (a: string) => void는 문자열 타입 a를 하나의 매개변수로 가지고 반환값이 없는 ..

[TIL] 23.01.10 프리온보딩 챌린지를 시작하며

원티드에서 진행하는 프리온보딩 프론트엔드 챌린지를 듣게 되었다. 사실 이전에 프리온보딩 코스를 수료했었기 때문에 굳이 또 챌린지를 할 생각은 없었다. 하지만 챌린지는 전에 들었던 교육과는 이름만 비슷하지 방식은 완전 다르기도 하고, 계속 혼자 공부하는 것보다 다른 사람과 함께 하는 것이 좋을 거라고 생각해서 신청했다. (강의 기간이 2주로 짧기 때문에 부담도 적었다.) 사전과제로는 간단한 회원가입/로그인, 투두리스트를 만들었다. 신청을 늦게하기도 했고, 그 사이에 기술 과제들이 많아서 거의 사전과제를 못했다. 아직 초반이니 빨리 만들고 추가 과제도 해야겠다. 과제는 이 레포지토리에서 진행할 예정! 오늘은 간단하게 커리큘럼 및 목표 등을 설명하고 사전 과제 코드리뷰를 진행했다. 아래는 그 내용 정리. 강의..

react-datepicker 적용하기(+ 커스텀)

달력 구현에 어떤 라이브러리를 쓸까 고민하다가 가장 무난하고 많이 쓰이는 react-datepicker를 적용해보았다. React Datepicker 설치, 적용하기 라이브러리 설치 yarn add react-datepicker date-fns yarn add -D @types/react-datepicker // or npm install react-datepicker date-fns npm install --save-dev @types/react-datepicker react-datepicker를 설치해준다. 헤더 부분을 커스텀할 때 date-fns를 사용하기 때문에 같이 설치해주었다. typescript를 사용하는 경우 devDependencies에 @types/react-datepicker를 같이 ..

2022년 회고 및 2023년 목표

2022년이 되고 설레는 마음으로 목표를 세웠던 게 엊그제같은데 벌써 2023년이 밝았다. 공부도 하고 놀기도 하고 다채로운 경험을 한 해였던 것 같다. 생각해보면 이룬 것이 많이 없긴 하지만 그래도 그동안 느낀 점들을 정리해보려 한다. 2022년을 돌아보면.. 1. 국비지원 교육 수료 내가 했던 프로젝트 중 제대로 된 프로젝트라고는 졸업 작품으로 했던 개인 프로젝트밖에 없었다. 그러다보니 팀 프로젝트는 어떻게 진행해야 하는지는 잘 몰랐다. 그래서 졸업을 하고 바로 취업을 하기보다 국비지원 교육을 들으면서 팀 프로젝트 경험을 쌓아야겠다고 생각했다. 교육을 듣고 총 3번의 프로젝트를 하면서 팀 협업은 어떻게 해야하고, git은 어떻게 쓰는지 알 수 있었다. 프로젝트를 하면서 개발 얘기를 같이 할 동료들도 ..

[TIL] 22.12.30 타입스크립트 핸드북 - Everyday Types

타입스크립트를 프로젝트에서는 많이 사용해봤지만 개념을 제대로 공부해본 적은 없기 때문에 핸드북 내용을 정리해보려 한다. 자료는 공식 타입스크립트 핸드북과 캡틴판교님의 타입스크립트 핸드북을 참고할 예정. 타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 변환해주는 컴파일 과정을 거쳐야 한다. 타입스크립트를 써야 하는 이유 에러의 사전 방지 타입스크립트를 사용하면 에러를 사전에 방지할 수 있다. // math.js function sum(a, b) { return a + b; } 위의 코드는 두 숫자의 합을 구하는 함수 코드이다. sum(10, 20); // 30 sum('10', '20'); //1020 숫자 10과 20을..

[TIL] 22.12.28 JWT 토큰

https://youtu.be/XXseiON9CV0 유튜브 코딩애플님의 영상을 보았다. JWT 토큰을 간단하게 사용해본 적은 있지만 코딩인생을 끝내고 싶지 않았기 때문에 영상 내용을 간단히 정리해보려 한다. 보통 회원 기능을 구현하는 방식에는 2가지가 있다. 세션 방식 토큰 방식 유저가 로그인을 하면 서버에서 입장권을 발급해주고, 서버에 요청할 때마다 입장권을 제출하면 서버에서 입장권을 확인 후 응답을 해주는 것이 일반적인 과정이다. 세션 방식 세션 방식을 사용하면 입장권에 써있는 정보가 많이 없다. 발급 번호 정도만 존재하고, 서버에서는 해당 번호가 서버에 존재하는지 확인 후 통과시킨다. JWT 방식 입장권에 써있는 정보가 많다. 이메일, 이름, 발급일, 유효기간 등. 입장권을 검사할 때 입장권 자체만..

[JS] 자바스크립트의 This

This 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 함수 호출 방식과 this 바인딩 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다. 함수의 상위 스코프를 결정하는 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정하지만 this 바인딩은 함수 호출 시점에 결정된다. 동일한 함수도 다..

[React] 재귀 컴포넌트로 트리 메뉴 만들기(2)

이전 글 [React] 재귀 컴포넌트로 트리 메뉴 만들기(1) 이번에는 접었다 폈다 하는 효과까지해서 트리 메뉴를 완성해보려고 한다. routes/Directory/Child.tsx import { useState } from 'react' import { DownArrow } from 'assets/svgs' import * as Styled from './index.styles' const Child = ({ child }: Props) => { const [isOpened, setIsOpened] = useState(true) const handleClick = () => { setIsOpened((prev) => !prev) } // ... return ( {child.name} {child.ty..