분류 전체보기
-
[ 회고 ] Numble 사이드 프로젝트Review 2023. 5. 21. 22:26
참여 계기 프리온보딩 과정을 참여하면서 배운 것들을 바로 프로젝트에 적용하고 싶은 마음이 굴뚝같은 상태였다. 마침 광고를 통해 Numble이라는 곳을 알게 되었고 React + Typescript 스택으로 간단한 미니프로젝트를 완성시키는 프로그램에 참가자를 모집 중이었다. 구현에 필요한 API도 제공해 주고, 프로젝트도 간단해서 프리온보딩에서 배운 것들을 잘 녹여낼 수 있을 것 같아 참가 신청했다. 적용하고 싶은 목록 1. Typescript 사용 2. Axios Interceptors 활용 - Header에 Token 보내기 - Access Token 만료 시 Refresh Token API 보내기 3. 컴포넌트 설계에 대한 고민 - 하나의 컴포넌트는 하나의 책임만을 담당하도록 - 로직과 UI가 잘 분..
-
[ 회고 ] 원티드 프론트엔드 프리온보딩 인턴십 지원Review 2023. 5. 9. 11:47
글 작성 계기 지금까지 많지는 않지만 프로젝트나 활동 같은 것들을 기록 없이 흘려보낸 것 같다는 생각이 들었다. 이력서를 작성하면서 기록의 중요성을 뒤늦게 깨달아서 지금부터라도 공부한 것들과 활동하며 깨달았던 것들을 작성할 계획이다. 이러한 계기로 4월 초에 지원했던 원티드에서 주관하는 프리온보딩 인턴십 지원 후기를 작성하고자 한다. 지원 과정 아는 프론트엔드 개발자분 중에서 원티드 프리온보딩 인턴십 과정 이후에 취업하신 것을 보고 예전부터 이 과정에 관심을 갖고 있었다. 교육 과정 또한 한 달로 부담 없고, 내용 또한 굉장히 필요한 것들로만 알차게 구성되어 있어서 지원을 결심했다. 지원하기 위해 제출해야 하는 두 가지가 있다. 원티드 측에서 제시한 상세한 요구사항에 따른 과제를 구현하는 과제 제출이 있..
-
[ Error ] Styled-Components install errorError 2023. 5. 8. 22:04
Error Message : npm ERR! Cannot read properties of null (reading 'edgesOut') Solution - For projects using JS/JSX(JavaScript) npm i -D styled-components@5.3.10 - For projects using TS/TSX(TypeScript) npm i -D styled-components@5.3.10 @types/styled-components 평소처럼 Styled-Components install하는 과정에서 에러가 발생했다. 구글 검색을 해보니 따끈따끈한 관련 Issue 게시글이 있어서 잘 해결할 수 있었다. 참고 링크 : https://github.com/styled-component..
-
[ Error ] Typescript image import errorError 2023. 5. 1. 19:14
타입스크립트 이미지 import error png 파일을 import 시도하는데 에러가 발생했다. 해결법 src 폴더에 custom.d.ts 파일을 생성한다. declare module "*.jpg"; declare module "*.png"; declare module "*.jpeg"; declare module "*.gif"; 필요한 확장자를 위와 같은 형식으로 입력해 준다. 추가로 ) d.ts 파일은 무엇인가 ? custom.d.ts 파일을 생성하는데 d.ts는 어떤 파일인가 ?- type을 정의하기 위한 파일이다.
-
[ Styled-Component ] CSS 초기화Front-end 2023. 5. 1. 13:22
CSS 초기화가 필요한 이유 웹 브라우저마다 기본적으로 스타일이 적용되어 있다. 개발 중인 프로젝트가 각 브라우저마다 동일하게 보여지기 위해선 CSS 초기화가 필요하다. Styled Component & styled-reset styled-component와 styled-reset을 사용하여 CSS 초기화를 할 수 있다. 먼저 styled-component와 styled-reset 패키지를 install한다. npm install styled-component styled-reset CreateGlobalStyle styled-component에서 개별 컴포넌트가 아닌 모든 컴포넌트에 동일한 스타일을 적용하고 싶을 경우 createGlobalStyle를 통해 적용이 가능하다. import { create..
-
[Javascript] 백준 1987 알파벳Algorithm/Problem Solving 2023. 3. 9. 14:12
https://www.acmicpc.net/problem/1987 1987번: 알파벳 세로 R칸, 가로 C칸으로 된 표 모양의 보드가 있다. 보드의 각 칸에는 대문자 알파벳이 하나씩 적혀 있고, 좌측 상단 칸 (1행 1열) 에는 말이 놓여 있다. 말은 상하좌우로 인접한 네 칸 중의 한 칸으 www.acmicpc.net 전형적인 DFS 문제이다. 조금 응용된 부분은 DFS 함수 인자에 지금까지의 알파벳을 set에 담아서 넘겨준다는 점이 있다. let input = require('fs').readFileSync(__dirname+'/example.txt').toString().trim().split('\n'); let count = 0; const [N, M] = input[count++].split(' ..
-
[Javascript] 프로그래머스 LV2 귤 고르기Algorithm/Problem Solving 2022. 11. 24. 19:34
https://school.programmers.co.kr/learn/courses/30/lessons/138476 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 파악 한 상자에 k개의 귤을 담는다. 귤을 크기별로 분류했을 때 한 상자에 서로 다른 종류의 수를 최소화하고 싶다. 문제 해결 흐름 객체를 사용하여 입력 값으로 주어진 귤들을 크기 별로 분류한다. let dir = {};// 사용할 객체 // 입력으로 주어진 배열 : tangerine을 map으로 순회한다. tangerine.map(e => { if(!dir[e]){ dir[e] = 1 }..
-
[Javascript][Python] 프로그래머스 LV2 큰 수 만들기Algorithm/Problem Solving 2022. 11. 15. 12:28
https://school.programmers.co.kr/learn/courses/30/lessons/42883 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr - 문제 파악 1. 입력으로 주어진 숫자에서 k개의 수를 제거했을 때 얻을 수 있는 가장 큰 수를 구한다. - 문제 해결 흐름 1. 입력으로 주어진 숫자의 범위가 매우 크므로 모든 경우의 수를 조합하는 풀이는 아닐 것이다. 2. 스택 자료구조를 사용하여 주어진 숫자를 순회하며 스택의 마지막 요소와 순회 중인 숫자를 비교한다. 3. 스택의 마지막 요소가 더 클 경우 순회 중인 숫자를 스택에 삽입 4..