profile
누구나 할 수 있지만 아무나 못하는 일을 하자

[React] 당신의 React 코드를 2분만에 리팩토링 하는 매우 쉬운 방법

원문 링크 - https://medium.com/@chrlschn/is-this-the-easiest-2-min-refactoring-to-improve-your-react-code-5a5d9e0547f0 이 글은 위의 원문을 번역한 글입니다. 혹시 리액트 코드를 작

2022년 6월 8일
·
0개의 댓글
post-thumbnail

[Photorage] 3. React + Spring 을 AWS EC2 Nginx로 배포하기

지난 포스팅에서 프로젝트를 Vite로 만들고 스토리북까지 추가해봤다. 이번에는 리액트로 만들 웹을 AWS의 EC2 제품을 이용하여 배포하는 인프라를 구축 해보겠다. 글 제목이 React + Spring이라 헷갈릴 수도 있을 것 같다. 정확히 우리 프로젝트는 MSA로

2022년 5월 30일
·
0개의 댓글
post-thumbnail

[Photorage] 2. React + TypeScript를 Vite로 시작하기(스토리북 추가)

이번엔 Vite를 이용하여 프로젝트를 생성 하고 사용하고자 하는 추가 개발 도구들(스토리북 등)을 설치 해보자. 그 전에 앞서 npm 이나 yarn 이 설치가 되어있지 않은 분들은 그것을 먼저 설치 하도록 하자. 참고 링크 - https://heropy.bl

2022년 5월 26일
·
0개의 댓글
post-thumbnail

[Photorage] 1-3. CRA 대안 선택(Vite React)

1.에서 CRA가 아닌 Vite를 사용하기로 했다. 이번엔 바이트를 이용하여 프로젝트를 생성 하고 사용하고자 하는 추가 개발 도구들(스토리북 등)을 설치 해보자. yarn create vite [프로젝트 명] --template react-ts 사용 시 ![](ht

2022년 5월 26일
·
0개의 댓글

[Photorage] 1-2. CRA 없이 React + TypeScript 개발환경 구축하기

지난 글 1-1. React CRA가 최선이고 최고일까?에 이어지는 글입니다. 나는 CRA를 안쓰고 싶었으며, 빠른 빌드 도구인 esbuild 존재를 알았기 때문에 CRA 없이 React + TypeScript의 개발환경을 세팅하는 방법을 우선 알아보았다. 패키지

2022년 5월 26일
·
0개의 댓글

[Photorage] 1-1. React CRA가 최선이고 최고일까?

공부 배경 내가 ICT 인턴을 진행하는 기업의 서비스는 90%가 Vanila TypeScript로 이루어져있고, 요새 새로 추가하는 신규 기능 같은 경우는 React를 통해 개발을 진행하고 있다. 나는 입사 당시만해도 React를 전혀 몰랐기 때문에 아무런 감흥도 없었

2022년 5월 17일
·
0개의 댓글

[배경 지식] 번들러(Bundler) 에 대해서

포스팅 배경 아래는 ICT 인턴십을 준비하며 기업 면접에서 받았던 질문과 답변 내용이다. > Q. FrontEnd 개발자 로서 현재 프로젝트가 느리다고 생각될 때, 어떠한 조치를 취할 수 있겠습니까? A. 시간이 걸리는 동안 로딩되는 표시를 띄워 사용자로 하여금 현재

2022년 5월 17일
·
0개의 댓글

[Photorage] 0. 토이 팀 프로젝트 시작

프로젝트 요약 사진 기반의 SNS가 넘쳐나는데, 다른 SNS 서비스들과 다르게 "앨범" 이라는 개념을 조금 더 강하게 도입하고자 함. 기존 SNS의 복잡한 기능들 대신 일상/여행의 앨범이라는 개념만으로 구현. 친구들끼리의 추억, 가족들끼리의 추억을 담은 앨범으로 시작

2022년 5월 17일
·
0개의 댓글
post-thumbnail

[배경 지식] 컴파일, 빌드, 배포 개념 및 CI/CD 개념 정리

컴퓨터가 이해할 수 있는 언어로 바꿔주는 과정보통 Java, C자바스크립트에서의 컴파일러는 Babel과 Typescript 등이 있다. Babel을 통해 최신 자바스크립트 스펙을 모든 브라우저에서 사용 가능한 스크립트로 컴파일Typescript를 통해 TS -> JS

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[남도학숙 식단 어플] 2. Node.js를 로그인이 필요한 페이지 크롤링 하기

🙏 크롤링이란? 나는 현재 남도 학숙(지역 학사)에 살고 있다. 그렇게 아침과 저녁을 보통 학숙에서 나오는 밥을 먹는데, 매번 식사 메뉴를 확인하기 위해서는 아래와 같은 과정을 거쳐야 했다. 핸드폰 크롬에 남도학숙 검색. 남도학숙 사이트에서 남도학숙 학사관리 시스템

2022년 5월 15일
·
0개의 댓글

[vscode] 디렉토리 폴더 구조 겹침 없애기

1. 상황 설명 vscode를 사용하다보면 한번씩 좌측에 있는 탐색기에 하위 폴더가 / 로 보이는 경험을 겪은 적 있을겁니다. 하위 폴더면 하위 폴더 답게 계층구조를 지켜서 화면에 보였으면 한 것이 한 두번이 아닙니다. 해당 문제를 해결하는 것은 매우 간단합니다.

2022년 5월 10일
·
0개의 댓글
post-thumbnail

2. CRA(JS) -> CRA(TS) 변환 실습

테스트 CRA JS : npx create-react-app test TS: npx create-react-app testts —template typescript [프로젝트 구조] [package.json] [tsconfi

2022년 4월 29일
·
0개의 댓글
post-thumbnail

1. 배경 및 변환 전략

내 지난 포스팅 React-Storybook 0. 프로젝트 생성 및 스토리북 등록 에서 나는 앞으로 내가 만들게 될 리액트 컴포넌트 들을 최대한 재사용성을 높여서 등록하고, 그것들을 모아두겠다고 말했었다. 그렇게 CRA를 이용하여 프로젝트를 만들어 봤었다. 그런데 여기

2022년 4월 28일
·
0개의 댓글
post-thumbnail

[배경 지식] Storybook 시작하기(feat. React + TypeScript)

ICT 인턴을 '미리디' 라는 기업에서 미리캔버스 라는 웹사이트의 프론트엔드 개발자로 진행하고 있다. 여러가지 공부를 하고 있는데, 여기서 알게 된 것이 스토리북 이라는 것이다.이 가이드는 전문 개발자들이 디자인 시스템을 배울 수 있는 방법을 다루고 있습니다. 자바스크

2022년 4월 28일
·
0개의 댓글

[JavaScript] 참조형 및 원시형 타입

JavaScript는 두 가지 원시 타입(Primitive Type)과 참조타입(Reference Type)이 있다.원시 타입은 쉽게 말해, 정수, 실수, 문자, 논리 리터럴등의 실제 데이터 값을 저장하는 타입이고,참조 타입은 객체(Object)의 번지를 참조(주소를

2022년 3월 27일
·
0개의 댓글

[남도학숙 식단 어플] 1. 등장 배경 및 기능 정의

나는 현재 남도 학숙(지역 학사)에 살고 있다. 그렇게 아침과 저녁을 보통 학숙에서 나오는 밥을 먹는데, 매번 식사 메뉴를 확인하기 위해서는 아래와 같은 과정을 거쳐야 했다.핸드폰 크롬에 남도학숙 검색.남도학숙 사이트에서 남도학숙 학사관리 시스템 입장.로그인학생 생활

2022년 3월 24일
·
0개의 댓글

[무작정 포트폴리오] 4. 깃헙 페이지에서 동작하는 SPA(Vanilla JS) - 잠정 중단

[미리보기] 참고자료 : SPA without server(깃헙 페이지 동작 가능) 하게 해준 github repo 문제점 지난번 [무작정 포트폴리오] 3. SPA 구현(Vanilla JS)에서 SPA 구현에 성공한 듯

2022년 3월 15일
·
0개의 댓글
post-thumbnail

[ICT 인턴십] 3. 탈락 후 추가 합격!!

지난 \[ICT 인턴십] 2. 코딩테스트 및 면접에서 최종 탈락을 하면 글을 마무리 하겠다고 했다. 그러나 제목에서 이미 알 수 있듯이 추가합격으로 ICT 인턴십에 합류하게 되었다. 2.19 ~ 2.21 까지가 합격한 학생이 인턴 기업을 확정하는 기간이었다. 나는 안타

2022년 2월 22일
·
0개의 댓글
post-thumbnail

[무작정 포트폴리오] 3. SPA 구현(Vanilla JS)

이번에는 지난번 만들었던 반응형 헤더에 이어서 네비게이션 바에서 각각의 항목들을 클릭하였을 때, 페이지의 리로딩 없이(깜빡거림 없이) 화면을 바꿔주는 SPA를 구현해보려고 한다. 아래는 구현하는데 참고한 링크들이다. > - 바닐라 자바스크립트로 SPA 구현해보기 Va

2022년 2월 22일
·
0개의 댓글

[ICT 인턴십] 2. 코딩테스트 및 면접

지원한 3개의 기업 모두 코딩테스트를 실시하는 기업이지만 코딩테스트는 한번만 치루면 됐다. 해커랭크라는 사이트에서 진행되었고 문제가 모두 영어로 나오는 플랫폼이라 살짝 당황하였다. 다른 분들의 후기를 보니 입출력만 보고도 거의 이해가 된다고 하시던데, 나는 입출력 예제

2022년 2월 17일
·
0개의 댓글