2022년 3월부터 총 99일동안 이루어진 항해 6기를 무사히 수료하고 원하던 프론트엔드 개발자가 되었다. 평소에 프로그래밍에 대한 관심은 많았지만 비전공자였고, 내가 원하는 내 꿈을 이루기 위해 항해에 도전했다. 올해 2월까지만 해도 웹에 대해서 아무것도 몰랐던 내가 지금 회사에서 프론트엔드 개발 일을 하고 있다는 것도 신기한 일인데 이제는 항해 9기 기술매니저로써 수강생분들께 도움을 드리고 있다. 남는 시간을 활용해 나 스스로 공부도 할 겸, 수강생분들의 리액트 학습을 도와드리고 있는데 항해를 하면서 어려운 점 등의 고민도 들어드리고 리액트를 공부하며 어려움이 발생할 때 도움을 드리기도 한다. 지금 현재 항해 과정을 경험하고 계신 분들께서 내가 6기 과정 당시 느꼈던 어려움을 똑같이 느끼고 계시기에 ..
이제 본격적으로 포트폴리오 웹 사이트를 만들어보기 위해 새로운 개인 프로젝트를 시작하는데 React에 타입스크립트를 더하여 구현해보려고 한다. 디자인부터 화면 기획 등 모두 직접 할 예정이며, 나에 대한 모든 것을 담을 수 있는 포트폴리오 사이트를 완성해보고자 한다. 그래서 오늘은 기본적으로 React CRA에 타입스크립트 초기 셋팅을 해봤다. 타입스크립트 CRA 가장 먼저 기존에 타입스크립트 없이 CRA 했던 방식 그대로 터미널에 입력하면 된다. npx create-react-app my-app --template typescript yarn을 사용한다면 아래와 같이 입력하면 된다. yarn create react-app my-app --template typescript CRA 완료 후 정상적으로 C..
개발을 할 때 vs code를 사용하여 개발하기 때문에 확장프로그램은 거의 필수인 것 같다. 내게 필요한 것을 찾아 설치하여 사용하면 코딩할 때 많은 도움을 받을 수 있다. 그래서 내가 평소에 사용하는 확장프로그램을 정리해보려고 한다. 확장프로그램은 모두 다 설치할 필요가 없으며 원하는 것만 찾아서 설치하면 된다. Prettier 프리티어는 개발할 때 아주 유용하게 쓰이는 포맷 중 하나로 VSCode에서 코드를 예쁘게 정렬해준다. 내가 줄을 이상하게 맞춰도 저장할 때 자동 저장해주어 코드를 깔끔하게 정리해준다. Prettier 설정은 개인에게 맞는 방식대로 설정하면 되는데 자동저장, 따옴표 설정 등 원하는 것들을 찾아서 설정할 수 있다. 기본적인 셋팅 방법은 VSCode 에서 찾아서 설치해준 후 설정에 ..
리뷰를 입력했을 때, 평균 평점을 계산해야했는데 평균을 계산하는 순간 딱 맞아 떨어질 때도 있지만 소수점이 많이 늘어나는 경우도 있었다. 그래서 그걸 방지하기 위해 toFixed 함수를 사용했고 정말 간단한 예제를 만들어봤다. 각각의 input에 값을 입력하면 자동으로 평균이 계산되도록 만들어놓은 것이다. 기존에 백엔드에서 넘겨 받는 데이터라면 데이터 값을 추출하기 위해 map을 돌려 계산해야하는 값을 새로운 배열로 만든 후, reduce 함수를 이용하여 총합을 구한다. 총합을 구한 후, 배열의 길이만큼으로 나눠주면 평균 계산 완료. 지금은 백엔드에서 받고 있는 데이터가 없기 때문에 직접 입력해서 값을 추출하도록 만들었다. import React, { useState } from 'react' const..
리액트를 사용하며 체크박스 전체선택, 선택 해제 등을 구현했다. 약관동의 체크박스와 표에서의 체크박스 전체 선택. 생각보다 오래 걸렸던 기능이기도 한데 실제로 여러가지를 찾아보면 크게 어렵지 않은 것이었던 것 같다. 약관동의 체크박스 가장 처음으로 여러 블로그를 뒤적이면서 약관동의 체크박스 구현에 대해 알아보게 되었다. 약관동의 화면의 경우 약관동의 자세히 보기를 클릭했을 때 팝업으로 보여줄 것인지, 아니면 아래로 열리는 창을 만들어줄 것인지 등에 대해서 고민을 할 수밖에 없었다. 그 후 ui 구현이 끝난 후 약관 동의 체크박스에서 전체선택, 선택동의 등의 기능을 구현했다. 약관동의 박스 필수 조건은 아래와 같다. 1. 각각의 약관 체크박스를 클릭했을 때 체크 선택 2. 모두 동의합니다 체크시 전체 체크..
프로젝트 규모가 작아 전까지는 크게 리덕스와 같은 전역상태관리 툴을 상요할 필요가 없었는데 필요한 데이터가 많아지다보니 상태관리를 효율적으로 할 필요가 있어 리덕스를 도입하게 되었다. 하지만 예전에 사용했던 것과 달리 react-router-dom 버전이 업그레이드 되면서 redux를 사용하며 history를 사용할 수 있게 해주었던 connect-react-router 연결이 어려워졌다. connected-react-router 를 깔아 아무리 적용하려고 해도 계속해서 에러가 나서 다시 npm 문서를 확인해봤다. 원인은 connect-react-router은 react-router v4, v5에서만 지원하기 때문에 그랬던 것. connected-react-router A Redux binding for..
자바스크립트에서 객체란 { }를 사용하며 key와 value로 구성된 프로퍼티가 들어간다. 각각의 프로퍼티는 쉼표로 구분하는데 객체를 만들어 접근하고 추가하고 삭제하는 것 모두 가능하다. 객체 만들기 객체는 아래와 같이 키와 밸류 값으로 작성하는데 중괄호를 이용해 만들면 된다. 아래 teacher이라는 객체를 만들었다. // 객체의 생성 const teacher = { name: 'Emaily', // key : name , value : Emaily age: 35, // key : age , value : 35 } // 함수로 생성하기 function makeObject(name, age) { return { name, age, hobby: 'exercising' }; } const teacher = ..
자바스크립트 코드는 위에서부터 아래로 한줄씩 실행되는데 함수 선언문을 먼저 살펴보고 이에 이어서 함수 표현식과 화살표 함수에 대해서 정리해보고자한다. 함수 선언문 함수 선언문은 아래와 같은 형식으로 작성하는데 함수와 함수명, 매개변수(필요하다면 작성)를 작성한다. 예제 1에서 사용하는 변수 msg는 지역변수이기 때문에 함수 내에서만 사용이 가능하다. // 1 function hello(name) { let msg = `안녕하세요 ${name}님!` console.log(msg) } hello('Lia') // 안녕하세요 Lia님! hello('Mike') // 안녕하세요 Mike님! hello('Emaily') // 안녕하세요 Emaily님! // 2 function error() { alert('에러가..
오늘은 자바스크립트에서 활용하는 반복문에 대해서 다시 돌아봤는데 평소에는 for문만 사용했었고 while과 do while이라는 것이 있는지는 처음 알았다. 자바스크립트에는 for문만 있는줄 알았던 것이다. 그래서 3가지의 차이에 대해서 조금 더 살펴보고자 한다. for 반복문 for문은 세미콜론(;)으로 구분하며 처음 쓰는 것은 초기값, 두번째는 조건, 세번째는 코드 실행 후 작업을 의미한다. 그렇기 때문에 초기값부터 조건의 값이 false가 될 때까지 반복 실행하며 원하는 값을 찍을 수 있는 것이다. 아래의 코드를 보면 i가 0부터 시작해서 5보다 작다면 계속해서 반복문을 실행하게 된다. 그래서 아래와 같이 0부터 4까지의 값을 얻을 수 있다. for(let i = 0; i < 5; i++) { co..
자바스크립트 기본 연산자와 비교 연산자에 이어서 논리 연산자를 알아보려고하는데 자바스크립트에는 3가지의 논리연산자가 있다. 이 역시 코딩을 하다보면 많이 쓰게 되는 것들이니 하나씩 살펴보려고 한다. || (OR) 연산자와 && (AND) 연산자 or 연산자는 여러개 중 하나라도 true 이면 true를 반환하고 모든 값이 false일 때만 false를 반환한다. and 연산자는 모든 값이 true일때만 true를 반환하고 하나라도 false이면 false를 반환한다. const name = 'Jun'; const age = 22; if(name === 'Jun' || age === 20) { console.log('통과') } else { console.log('불통') } // 통과 if(name ==..
