네이버 부스트캠프 7기 최종수료

6개월간 몸을 담았던 네이버 부스트캠프가 끝났다. 12000여명이 지원한 코테에서 살아남은 300여명중에서 약 200여명정도만 멤버십에 갈 수 있었는데 부족한 나에게 큰 기회가 찾아온거 같아 아직도 꿈만같다. 코딩테스트 1차, 2차, 챌린지 기간을 넘어 멤버십 기간까지 무사히 달렸다는게 참 신기하기만 하다. 되게 많을 걸 알아간 시간이었다. 먼저 내가 아는 지식은 정말 작았다는점! 부스트캠프를 수료한 지금도 많이 부족하다고 생각한다. 그래도 이번 과정을 거치고 내가 어떤 공부를 더 해야할지, 어떤 방식으로 공부를 해야할지 배울 수 있는 과정이었다. 또 하나 얻은건 사람들인것 같다. 여러 타입의 사람들을 많이 만나고 또 협업해보면서 여러 문제들을 다같이 해결하고, 의견이 안맞거나 해도 해결하는 과정 자체가..

→2023.01.08

프로젝트/소규모프로젝트들

mdx Editor만들기 (마크다운 에디터)

벨로그에서 글을 써보거나, gitHub Readme.md등의 글을 써본 경험이 있는 분들이라면 마크다운 에디터를 사용한 경험이 있을 것이다. 마크다운 에디터또한 분명 좋지만, 마크다운 문법에 없는 강조기능이나 하이라이팅 기능을 사용하고싶은 경우가 있다. 이런경우 md파일이 아닌 mdx 파일을 활용하면 말한 기능을 사용할 수 있다. 위와같은 텍스트 에디터를 만들 것이다. 마크다운 에디터를 기반으로 내가 커스텀한 기능들을 넣을 수 있다. 글을 읽기전에, https://github.com/Ionaru/easy-markdown-editor GitHub - Ionaru/easy-markdown-editor: EasyMDE: A simple, beautiful, and embeddable JavaScript Mar..

→2022.11.27

FrontEnd/React

[React] emotion styled 컴포넌트처럼 관리하기

리액트에서 emotion/styled 를 활용하여 작업하는법을 알아보자. 리액트에서 emotion을 통해 위와같은 박스를 만들어볼 것이다. 우선 emotion/styled를 적용하려면 해당 라이브러리를 설치해야 한다. npm i @emotion/styled 그리고 아래처럼 컴포넌트를 하나 만들어주자. 해당 컴포넌트 아랫단에, const GitHubLoginArea = styled` display: flex; align-content: center; position: absolute; right: 0; top: 5rem; padding: 1rem; background: #ffffff; box-shadow: 0px 1px 9px rgba(10, 31, 68, 0.1), 0px 0px 1px rgba(10, ..

→2022.11.17

FrontEnd/React

[React,TS] 리액트에서 절대경로 사용하기

보통 리액트에서 경로를 지정하다보면 '../components/Header' 와 같은 상대경로를 많이 사용하게 될 것이다. 이를 'components/Header' 와 같은 조금 더 깔끔히 절대경로로 할 수 있는 방법을 알아보자. 방법은 생각보다 간단하다 "baseUrl": "src", "paths": { "components/*": ["components/*"], } tsconfing.json 파일에 위 부분을 추가하면 된다. baseUrl을 설정한 주소를 기반으로 path를 설정할 수 있다. 혹시 적용이 안된다면 "baseUrl": "src", "paths": { "components/*": ["/components/*"], } 위처럼 적진 않았는지 확인해보자. 또한, 바로 적용이안된다면 VSCODE..

→2022.11.17

BackEnd/NodeJs

[NestJS] 03 - 컨트롤러

Nest의 컨트롤러는 MVC 패턴에서의 컨트롤러이다. 즉, 들어오는 요청(request)를 받고 그 처리결과를 응답(response)로 돌려주는 인터페이스 역할을 한다. 컨트롤러는 라우팅 메커니즘을 통해 컨트롤러가 받는 요청을 분류한다. 이전 글에서 서버를 구동시키고 동작하는법은 익혔다. 그렇다면 소스코드를 한번 살펴보자 // app.controller.ts import { Controller, Get } from '@nestjs/common'; import { AppService } from './app.service'; @Controller() export class AppController { constructor(private readonly appService: AppService) {} @Ge..

→2022.11.15

BackEnd/NodeJs

[NestJs] 2- 데코레이터

NestJs 는 데코레이터를 적극 활용한다. 데코레이터를 잘 활용하면 횡단관심사를 분리하여 관점 지향 프로그래밍을 적용한 코드를 작성 할 수 있다. 예시를 한번 보자. 상당히 스프링처럼 생겼다.. (필자는 스프링을 다룰 줄 모른다) class CreateUserDto { @IsEmail() @MaxLength(60) readonly email: string; @IsString() @Matches(/^[A-Za-z\d!@#$%^&*()]{8,30}$/) readonly password: string; } 당황스럽지만 차근차근 봐보자. 위 코드는 사용자가 요청을 제대로 보냈는지 검사하는 코드이다. email은 IsEmail()을 통해 이메일 형식을 정의하고 있고, 최대 길이를 60자로 정의하고 있다. (Ma..