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

React와 setInterval의 관계 리액트는 상태값이 변하면 재렌더링을 한다. 그래서 리액트에서 상태라는 개념에 대해 알고 있어야 앞으로의 내용이 이해가 가능하다. 아래 예제는 1초에 한번씩 count의 숫자를 1씩 증가시켜서 렌더링을 하도록 만드는 것이다. 문법적으로는 잘 동작하는 코드처럼 보이지만, 리액트에서는 상태값이 변화될 때 마다 재렌더링이 되기 때문에 setInterval 함수가 여러번 다시 실행되어 에러가 난다. 나의 경우에는 숫자가 변하는 속도가 갈수록 빨라졌다. (setInterval이 여러 번 실행되어 중첩된 것으로 추정) import { useState } from "react"; export default function Example() { let [count, setCoun..

회사에서 앱을 만들다가 회사 소개서 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...