1. 정수 내림차순으로 배치하기[프로그래머스 1단계 - 정수 내침차순으로 배치하기] 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1-1. 내 풀이toString() 으로 문자열로 만들고 split() 로 배열을 만든 후, 역순으로 정렬하고 join 을 사용해 배열을 문자열로 합치고 숫자로 만들었다.function solution(n) { return Number(n.toString().split('').sort().reverse().join(''));}1-2. 다른 사람 풀이나와 비슷하다. 다른 점은 문자열을 만들 때, 자바스크립트의 성질을 사용하여 빈..

시작하기 앞서현재 모던 리액트 Deep Dive 라는 책으로 스터디를 진행하고 있는데, 책에서 "any 대신 unknown을 사용하자" 라는 내용이 있었다. 사실 지금까지 타입스크립트를 작성하다가 모르겠는 타입은 any 로 지정했었다. 그런데 이 책을 읽고 unknown 이라는 타입을 알게 되고 any 보다는 unknown 을 사용하는 게 더 좋다 하여 해당 내용에 대해 자세히 알아보기 위해 글을 작성하게 되었다. any[타입스크립트 공식문서(한국어) - any] Documentation - Everyday Types언어의 원시 타입들.www.typescriptlang.org간단하게 any 는 모든 타입을 허용한다. 그래서 모든 타입을 허용하여 타입 에러가 발생하지 않는다. any 단점any 는 편해 보..

코드잇 스프린트 나.테.소 이벤트코드잇 스프린트에서 매주 위클리 페이퍼를 작성한 후 나.테.소 - 나의 테크 블로그를 소개합니다 이벤트에 응모를 하면 코드잇 스프린트 6기뿐만 아니라 다른 기수까지 합쳐서 추첨을 통해 상품을 주는 이벤트를 하고 있다. 그래서 블로그에 위클리 페이퍼 포스팅 하면서 나.테.소 이벤트에 매주 응모를 했었다. 내가 지금까지 작성한 위클리 페이퍼프로젝트 기간을 제외하고 모두 위클리 페이퍼를 작성하였다.모아보니 참 많다... 1주 차 - https://jjang-j.tistory.com/63 [CSS] CSS의 CascadingQ. 질문CSS의 Cascading에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변CSS 를 적용하다보면 겹치는 속성이 발생할 수 ..

Q. 질문JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #12) A. 답변현재 상황요즘 채용 공고를 보면 대부분 타입스크립트를 할 수 있는 사람을 우대하는 것을 쉽게 볼 수 있다.그만큼 타입스크립트가 중요하고 대부분의 기업에서 프론트엔드 개발을 할 때 타입스크립트를 채택해 사용하고 있다는 것을 알 수 있다. 타입스크립트 사용 이유그렇다면 자바스크립트 대신 왜 귀찮게 타입스크립트를 사용하는 것일까? 바로 프로그램의 안정성 을 위한 것이다. 자바스크립트는 알다시피 동적 언어라서 고정된 타입 없이 자유롭게 변수를 선언하고 사용할 수 있다.이게 자바스크립트의 장점이 될 수 있지만 타입 오류가 코드를 실행하기 전까지 알 수 없..

시작하며...코드잇 스프린트 이전 팀원들과 함께 코어 자바스크립트를 읽고 자신이 맡은 부분을 정리해서 발표하는 테크톡 스터디를 하였다. 한 챕터에서 분량을 나눠 각자 내용을 공부하고 정리해서 10분 정도 설명하는 방식으로 진행하였으며, 내가 발표한 부분의 내용을 이해하고 다른 사람의 발표를 들으면서 내용을 이해하는 방식이었다. 총 7개의 챕터를 일주일에 1 챕터씩 진행하여 총 7주가 소요되었다. 스터디 내용 정리[챕터1 - 불변객체][챕터2 - environmentRecord][챕터3 - call & apply 메서드][챕터4 - 제어권 - 인자 & this][챕터5 - 부분 적용 함수][챕터6 - 메서드 오버라이드][챕터7 - ES6의 클래스 및 클래스 상속] 스터디 회고지금까지 한 번도 스터디를 진행..

시작하기 앞서기존 자바스크립트로 만든 프로젝트에서 새로운 프로젝트를 생성하지 않고 그 프로젝트에서 타입스크립트로 마이그레이션 하는 방법에 대해 알아볼 것이다. 마이그레이션 방법1. TypeScript 설치타입스크립트과 타입스크립트에 필요한 기타 모듈들을 설치한다.npm install --save typescript @types/node @types/react @types/react-dom @types/jest2. tsconfig.json 작성기존 자바스크립트에 있던 jsconfig.json 을 제거하고 tsconfig.json 파일을 작성한다.나는 아래 코드에 있는 내용을 작성했다.{ "compilerOptions": { "baseUrl": "src", "target": "es5", "..

시작하기 앞서...이번에 프로젝트를 하면서 framer motion 을 활용하여 버튼, 모달, 스크롤, 화면 전환 애니메이션을 적용하였다.그래서 사용 방법에 대해 자세하게 정리하기 위해 글을 작성하게 되었다. Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com  Framer motion 적용Framer motion 을 사용한 다섯 가지 애니메이션을 적용할 것이다.버튼 애니메이션모달 애니메이션스크롤 애니메이션화면 전환 애니메이션 우선 Framer motion 을 사용하기 위해 해당 라이브러리를 설치한다.npm install framer-moti..

☘️ 시작하기 앞서...나는 지금까지 프로젝트를 진행하면서 Prop Drilling 문제를 해결하기 위해 전역 상태 관리 라이브러리인 Redux, Recoil, Zustand 를 사용해 본 경험이 있었다. (완전 얕게...) 그리고 form 데이터는 React Hook Form 의 formProvider 를 사용해 보았다. 그런데 웃기게도 React 에 기본적으로 내장되어 있는 전역 상태를 할 수 있는 Context API 를 모르고 있었고 사용해 본 경험이 없었다.하지만 코드잇 강의를 들으면서 Context API 에 대해 배우게 되었고 그 이후에 프로젝트에 직접 적용해 보고 그전에 사용해 본 상태관리 라이브러리와 비교해서 어떤 점에 장단점이 있는지 알게 되었다. 그래서 이번 글에서는 Context A..

시작하기 앞서...프로젝트를 진행할 때, 작업한 내용을 pull request 에 올리면서 다른 사람의 코드를 보게 되는데이 코드가 제대로 동작하는지 내 눈으로 보고 싶으면 번거롭게 그 브랜치로 이동해서 직접 확인해야 된다. 이러한 과정이 번거롭기 때문에 pull request 를 올렸을 때, 자동으로 vercel 로 미리 보기 preview 를 배포해야 한다. 그러나 Organization 레포지토리가 아닌 경우 vercel 봇을 사용하여 간단하게 미리보기를 배포할 수 있지만Organization 레포지토리는 권한때문에 github action 을 사용해서 구현해야 된다. 깃허브 액션으로 pr 미리 보기 배포1. vercel 토큰 발급vercel 토큰을 발급받는 곳에서 토큰을 발급받는다. 발급 받은 토..

☘️ 문제점React 에서 컴포넌트의 틀을 직접 코드로 작성하다 보면 번거롭고, 복붙을 하게 되면 실수하는 경우가 발생한다.그래서 이러한 문제점을 해결하기 위해 코드 스닛펫을 사용하여 간편하게 코드의 틀을 만들 수 있어 시간을 절약할 수 있다. ☘️ 코드 스닛펫 Extension코드 스닛펫을 간단하게 익스텐션(Extension)을 이용해 사용할 수 있다.다양한 익스텐션이 있는데 그중에서 내가 사용하는 익스텐션은 Reactjs code snippets 이다. 해당 익스텐션의 스니펫의 종류는 Reactjs code snippets 에서 자세히 볼 수 있다. 코드 스닛펫 익스텐션 - 사용 방법다양한 스니펫 중에서 내가 제일 많이 사용하는 건 rsc 이다.아래처럼 키워드를 입력하고 엔터를 누르면 자동으로 코드가..