맨 땅에 프론트엔드 개발자 되기

회사에서 앱을 만들다가 회사 소개서 PDF 파일을 웹에서 다운로드 할 수 있도록 버튼을 만들어야 했다. 나의 선생님 구글에 검색해보니 대다수가 백엔드 개발자들이 구현한 예제들 뿐이었다. 이 간단한 기능을 만들기 위해 서버를 만들 필요는 없다고 생각했기에 더 구글링을 했다. 간단하게 HTML 만으로 다운로드 기능을 만들 수 있었다. 회사 소개서 다운로드 다운로드를 제공할 파일을 프로젝트 폴더 안에 담아두고 a태그의 경로로 지정해주면 간단하게 구현이 가능했다. 새로 배운 거 기록하기!

6개월 간의 노력 끝에 프론트엔드 개발자로 취업하게 되었다. 비전공자로 시작하여 과연 취업할 수 있을까 망망대해에 놓인 기분이었다. 국비지원 학원을 통해 공부하면서 과연 이 커리큘럼으로 취업할 수 있을까에 대한 고민, 그리고 스스로 공부하는 방법을 찾아가는 과정에 대한 고민 등 많은 생각의 과정들이 있었다. 결과적으로 프론트엔드 개발자로 취업에 성공하긴 했지만, 아직도 내 실력에 대한 의문들이 가득하고 이 빈틈을 메우기 위해 계속해서 공부하고 있다. 그렇다고 하지만 취업을 준비할 때 만큼의 열정은 좀 식은 것 같다. 취업하게 된 회사는 스타트업으로 30명 남짓되는 구성원이 있는 회사다. 다들 으쌰으쌰 하는 좋은 분위기이지만, 사실 코드 리뷰 문화도 없고 사수가 전담마크해서 가르쳐주는 분위기가 아니라서 각..

create-react-app을 통해 프로젝트를 생성하면 상대 경로로 import를 하게 되는데, depth가 깊어질 수록 상대 경로 import가 불편해지기 때문에 절대 경로를 사용하는 것이 편하다. 사용방법 - tsconfig.json / jsconfig.json package.json 과 같은 레벨에 위의 이름으로 파일을 생성해준다.(TypeScript/JavaScript) 그리고 json 파일 내부에 아래와 같이 작성한다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 서버를 다시 실행해준다. import '../components/Component'; 에서 import 'components/component'; 로 변경해서 작성..

자바스크립트로 날짜를 나타낼 때, Date 함수를 사용하면 된다는 건 알았지만, 그 날짜를 한국식으로 표현할 때 일일이 getFullYear() 나 getMonth() 등을 이용해서 커스터마이징을 해서 사용했었는데, toLocaleDateString() 을 이용하면 아주 간단하게 표현 방법을 변경할 수 있다는 것을 알게 되었다. 그래서 오늘은 이에 관련해서 정리를 해보고자 한다. JavaScript 로 날짜와 시간 표현하기 우선, 날짜를 가져오려면 아래 코드와 같이 Date 생성자 함수를 호출해주면 된다. const today = new Date(); console.log(today); 콘솔에 찍힌 모습을 보면 아래와 같이 출력된다. 이 표현을 커스터마이징 하려면 아래와 같이 작성한다. const tod..

styled-components를 사용하는 이유 CSS in JS 는 웹 개발 방식의 한 방법으로 JS 파일 안에 CSS 작성해서 경우에 따라 JS 로 CSS 변경을 용이하게 만들어 스타일링 변경이 가능한 컴포넌트를 사용할 수 있게 해주는 하나의 방법이다. Tagged Template Literal을 이용하여 함수의 파라미터로 템플릿 리터럴을 받는 기술인데 복잡하므로 원리를 이해할 필요는 없다. npm i styled-components 기본 문법 import styled from 'styled-components'; // Create a Title component that'll render an tag with some styles const Title = styled.h1` font-size: 1...

리액트에서 탭 기능 구현은 state를 이용해서 간단하게 구현할 수 있다. 완성예제 소스코드 import { useState } from "react"; import styles from './scss/tab.module.css'; export default function Tab() { const data = [ { id: 0, title: "HTML", description: "HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used t..