개발일지

0. 나만 그런가..? 개발자로서 작업을 하다가 보면, 콘솔창에 찍히는 print와 console 등으로 인해 왜 안되는지, 뭐가 문제인지 찾아볼 수 있게 된다. 그러다 보니 정작 앱을 테스트하다 제대로 동작이 안 되는 경우 무덤덤하게 Xcode를 보게 된다. 그러면서 에러를 해결하고, 다시는 그 화면을 안 보게 되는 듯이 작업을 하게 된다. 하지만 에러가 발생하는것이 당연한 경우가 있다. 사용자가 로그인을 할 때 잘못된 비밀번호를 입력했을 경우, 서버단에서 문제가 발생했을 경우, 우리는 에러를 사용자에게 알려야 한다. 나 같은 경우 뭔가 덤덤해져서 catch 문 내에서 print() 처리만 하고 이후에 그냥 넘기게 되고, 다른 레포들을 보아도 그러한 부분들이 몇 개 보이기도 한다. 이러한 점을 조금 잡..

들어가면서 사실, 제가 이전 글의 제목을 잘못 적었습니다. Next.js로 블로그 만들기라는 제목을 가지고 있지만, 블로그를 만드는 내용보다 다크모드를 적용한 내용을 적었기 때문에, 제 블로그를 방문하는 분들이 충분한 정보를 얻어가지 못했을 거라 생각됩니다. 잘못적은 글 그래서 지금, 미처 남기지 못했던 내용들을 적어보려 합니다. MDX 이 블로그는 Next.js와 MDX를 활용해서 만들어져 있습니다. MDX는 마크다운과 JSX를 섞은 끔찍한 혼종 입니다. 사실 이렇게 블로그를 만들고 있는 도중에도 완벽하게 사용하고 있는 기분이 들지 않고, 글을 작성해나가면서 생기는 오류들을 수정하면서 작성하고 있습니다. 그럼에도 불구하고 제가 괜찮다고 생각하는 이점 중 하나는 커스텀이 가능해집니다. 내가 자주 사용하는..

Intro 아무리 좋은 서비스를 만들었다 하여도, 사람들에게 노출이 되지 않으면 서비스 자체를 만날 수 없습니다. SEO를 잘 설정해놓으면, 사람들이 검색한 단어와 연관된 웹 서비스를 노출시킬 수 있고, 이는 결국 서비스에 유입이 될 수 있습니다. 오늘 글의 주제는 SEO와 이를 제 블로그에 설정한 과정입니다. 블로그를 만든 이유는 개발을하며 배운 내용들을 정리하고, 제가 원하는 템플릿을 만들기 위해서도 있지만, 다른 사람들에게 제 블로그 내용들을 다른 사람들과 공유하는 것이 가장 큰 이유입니다. 이를 위해선 기본적으로 SEO를 적용하여 구글 및 타 사이트에서 검색이 되도록 만들어야 합니다. 이를 하기 위해서는, SEO를 위해 몇 가지 과정을 거쳐야 하는데요, 이러한 과정들을 서술하기 앞서, SEO에 대..

MDX 적용이 궁금하신 분은 이 포스트에 정리했습니다. 다른 서비스들 두고 왜..? 저는 티스토리 블로그를 사용하고 있었습니다. 블로그를 사용하면서, 제 마음에 드는 블로그 스킨이 없었고, 프론트엔드 개발자로 시작한 이상 제 블로그를 직접 만들어서 사용하는 것도 의미가 있겠다란 생각을 했습니다. 그리고 제가 사용하면서 제가 필요한 기능들은 개발하면서 추가해나가면서 블로그를 운영하면 실력도 늘고, 좋은 경험이 될 것이라 생각했습니다. 사용한 스택 사용한 스택은 다음과 같습니다. Typescript, Next.js, Styled-Components, MDX, Zustand 입니다. 구현한 (구현하지 못한) 기능들 제가 처음부터 있었으면 하는 기능들은 다음과 같습니다. 마크다운으로 블로그 포스트 작성 다크모드..

redux-toolkit이나 createSlice, createAsyncThunk 등을 설명하지 않습니다! (쪼금은 있을지도?) 사이드 프로젝트를 진행하면서, 리액트를 다루는 기술에서의 마지막 프로젝트인 블로그 프로젝트를 Typescript, emotion, redux-toolkit을 이용하여 책과는 조금 다르게 프로젝트를 만들어보고 있다. 아무래도 책과는 다른 환경에서 진행하다보니 조금 더디게 진행되고 있는데, 문제가 되는 상황은 createAsyncThunk를 이용하여 api처리를 할 때, 어떻게 구체적인 에러 핸들링을 해야하는지, 핸들링을 하면서 어떻게 타이핑을 해야하는지 해결하는데 조금 시간이 걸리게 되었고, 타이핑에서의 오류가 많이 발생하게 되었다. 에러 핸들링이 필요했던 이유 기본적으로 cre..

Emotion을 사용한 이유? 평소 styled-components를 활용하여 스타일링을 진행했지만, 이번에 TS를 공부하면서 진행하는 프로젝트에서는 emotion을 이용하여 스타일링을 해보고 있다. styled-components와 emotion을 비교하는 글들이 많기는 하지만, 그런 글들과는 상관 없이 직접 사용해보면서 비교도 해보고, 차이점을 느껴보려고 한다. emotion 중에서도 styled-components와 유사한 방식으로 스타일링을 할 수 있지만, 미세한 차이점이 있어 기록하기 위해 이 글을 적는다. Emotion을 사용하면서 마주한 상황 1. props에 따라 스타일을 변경해야 하는 경우 한 컴포넌트를 스타일링 하는 경우, 부모에서 내려오는 props에 따라 스타일링을 다르게 해야하는 ..

생성자 함수? class아니냐? 이번에 프로그래머스 강의 중 하나인 Vanilla JS 스터디에 참여하게 되면서, 리액트나 뷰, 스벨트와 같은 라이브러리를 사용하지 않고 간단한 기능들을 만들어 보고 있다. 그러던 중.. 멘토님께서 해당 부분을 설명해 주시면서, function을 사용하면서도 new를 붙여서 구현하는데 이를 생성자 함수라고 설명하셨고, 생성자 함수에 관련된 내용도 짧게 설명해주셨다. class는 흔히들 붕어빵 찍어내는 틀이라고 생각하라던 강의들과 설명들이 많았다. 생성자 함수 또란 이와 비슷한 개념으로, 조금 찾아보니 class와 생성자 함수는 많은 점이 닮았지만, 조금은 다르게 동작하며 class에서는 사용할 수 있는 기능이 생성자 함수에서는 사용할 수 없다는 등의 차이점이 있었다. //..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근방법 1. 모든 성격 유형에 0점을 매기고 시작하기 2. survey에 들어있는 2개의 성격 유형을 한 개로 나누기 3. 각 유형에 맞게 점수 매기기 4. 지표 번호 순으로 성격 나열하기 구현 function solution(survey, choices) { let answer = []; // 각 성격마다 점수를 추가할 수 있도록 Map 사용 const kbti = new Map(); // 문항 선택에 따른 점수 구분 -> 배열의 첫 요소로 0을 넣은 이유는 문항에는 0번 문항이 없기 때문 const sc..