hippo/devloghippo/devlogReact ·
웹으로 UI 를 개발하고 기능을 개발해서 괜찮은 블로그를 만들었다고 생각하였지만, 점점 완성되갈수록 이제는 내가 원하는 앱을 개발해보고 싶은 생각이 들었다. 프론트 개발자의 영역을 Javascript 개발자로 한정짓는 시대는 지나버렸고, 이제는 프론트 영역의 대부분의 프로세스, 생태계를 알고 이 부분에서 본인의 강점을 조금 더…
Next.js ·
현재 개발하고 있는 NextJS 에서 전역 상태관리할 부분이 생겨서 Recoil 을 사용하려던 찰나, 아래와 같은 에러가 발생하였다. 원인은 NextJs 에서 HMR 시 상태 Key 가 재생성 되는 부분이 문제인것이다.
React ·
이전 포스팅에서 Atomic Design 을 적용하기 위한 기초 개념정도 조사를 끝마쳤다. 이후 내가 개발하고 있는 블로그 프로젝트 에 적용해서 1차적인 컴포넌트 구조 변경이 어느정도 완료 되었다. 이에 따른 변화점과 개인적인 생각을 글로 남긴다.
React ·
React 로 블로그 프로젝트를 진행을 하면서 Atomic Design 을 대략적으로만 설계를 해서 진행하였다. 그러다보니, 1차적으로 완성된 블로그 페이지는 잘 돌아가지만, 파일구조를 한눈에 알아보기 힘들고 각각의 구조가 불명확하여 통일성이 없게 되었다.
Next.js ·
Emotion 에서 Styled Component 로 변경 후 잘 사용하던 중 문제가 발생하였다. 현재 Typhograpy 라는 공용성 컴포넌트를 만들어서 사용하고 있는데, 관련된 Props 를 전달하는데 이런 이슈가 발생하는 부분이었다.
Next.js ·
요즘 회사일과 개인적인 일이 바빠서 따로 작업은 하였지만, 포스팅을 오랜만에 하게 되서 조금 반성하게 되는 하루이다. 현재 회사에서 하는 일 외로 짧더라도 집에서 NextJS 로 블로그를 변경하는 작업을 진행 중 이다.
Next.js ·
최근에 시간이 많이 없어 현재 프로젝트의 기술 셋에 대하여 간략하게 정하였고, 이에 대한 포스팅을 진행한다. 이번에 NextJS 가 13버전으로 올라가면서 많은것이 변경되었다고 한다. 이전 버전은 사용해보지는 않아서, 자세한부분은 좀 더 확인해봐야겠지만 전반적으로 NextJS 의 버전업 속도가 생각보다 빠른것 같다.
Next.js ·
블로그 프로젝트를 어느정도 완성하고 이제는 UI 에 집중하는 것이 아닌 개발에 집중하는 프로젝트를 진행해보고 싶었다. 물론, 이전 프로젝트에서도 개발을 안한건 아니지만 시작 자체가 UI 적으로 어느정도의 CSS 실력을 높이기 위해 시작했던 부분도 있었다.
Vue ·
최근 Vue3 를 학습하면서 실무 프로젝트 고도화를 위해 설계 및 초기 프로젝트 구성을 진행하고 있다. 기존 Vue2 를 사용하면서 Options API 구현 방식을 주로 사용해왔다. 기존에도 외부 라이브러리 형태로 Composition API를 Vue2에서도 사용할 수 있었지만, 보통은 그냥 Options API를 사용하였다.
Vue ·
회사에서는 현재 Javascript 를 사용하고 있다. 가장 최근에 진행한 프로젝트에서 Javascript 를 사용해서 구축했고 현재까지 운영을 해오다가 이제 차세대 프로젝트를 진행하면서 Typescript 로 신규 개발은 진행하기로 하였다.
Vue ·
이번 프로젝트에서 프론트엔드 파트에서 선투입된 인원끼리 프레임워크 설계 및 공통 파트를 맡게되었다. 현재 시점 대부분의 업무가 완료된 후 돌아보며, 내가 배운 것들을 다시한번 돌아보고 확인하는 글이 되었으면 좋겠다.
React ·
기존 Ruby 기반의 정적 사이트 생성기 Jekyll을 통해 블로그를 관리하고 있었다. 먼저 장점은 기존 Template 을 통해서 디자인에 큰 부담없이 오로지 포스팅만을 위한 사이트로 사용하기 적합했기 때문이다. 하지만, 기존에 짜여진 CSS 를 수정하면서 하는게 마냥 쉽지는 않았고, 마침 React 나 Styled…
React ·
현재 내가 만들고 있는 블로그의 스택은 크게는 React 와 Gatsby Framework 로 구성하였다. 블로그를 만들고 있기 때문에 기존 jekyll 을 활용하여 만들었던 정적페이지 렌더링 기능들을 Gatsby 에서 제공을 해주기 때문에 선택하였다.
React ·
이번 블로그는 Emotion 을 사용하여 Styled Component 형태로 스타일링을 진행하였다. 설치 및 개념에 대해서는 다른 블로그 혹은 공식홈페이지 를 꼼꼼히 읽으며 진행하였으며 현재까지의 개인적인 느낌에 대해 적어본다.
React ·
최근에 많이 바쁜 프로젝트를 진행중이라 블로그 포스팅을 하지 못한부분이 아쉽다. 외적으로 블로그를 이전하고 싶은 마음에 처음부터 블로그를 만들기 시작하였다.
React ·
현재 본인은 Jekyll 을 활용하여 포스팅을 진행하고 있다. 나의 블로그의 목적은 내가 학습한 내용을 조금이라도 더 이해하고 기록을 남겨 다시 보았을때 나만의 기억법으로 기업을 하고 싶었기 떄문이다.
Vue ·
Vue3 를 개발하면서 기존 Vue2 에서의 Life Cycle 과 달라진점 및 Composition API 에 적용 시 개념을 정리한다.
Vue ·
Vue 에서 제공하는 filter 의 기능은 Vue2 에서는 유용하게 쓰이고 있다. 실제 실무에서도 사용하는 편이나, Vue3 로 버전업이 되면서 Composition API 를 사용하기 위해서 computed 로 대체해서 사용하길 공식문서에서 권장하고 있다.
Vue ·
Error 를 처리하는데 필요한 내용을 간단히 포스팅해본다. 보통 Async / Await 비동기 구조로 개발을 진행하게 되면 중요하게 에러처리이다.
Vue ·
Vue2 의 GlobalProperty 를 대신하여 부모 자식 컴포넌트간 데이터 전달을 위한 Provide / Inject 를 간단하게 정리한다.
Vue ·
Slot 을 사용하는데 있어서 데이터 접근 범위와 이를 활용하는 Scoped Slot 에 대해 이전 포스팅에 이어서 작성해본다.
React ·
개인적으로 구현하고 있는 React 프로젝트에서 ant-design 을 적용해보려고 하였으나, 계속해서 노출이 되지 않는 문제가 있었다.
Vue ·
기존에도 존재했던 Vue의 Slot 기능을 간단하게 다시 정리하고 추가적으로 동적 변경 기능을 작성해본다. Slot은 부모 컴포넌트에서 작성한 내용을 자식 컴포넌트로 이첩 시킬 경우 사용한다.
Vue ·
현재 다니고 있는 회사의 Application 에 대한 차세대 프로젝트 가 진행되고 있다. 올해 초부터 이야기가 나오고 Back End 부터 Front End 까지 모두 변경을 진행하고 있다.
Vue ·
프로젝트 진행 간 적용 기술에 대한 정리 위와 같이 우리는 axios를 실제 Component가 아닌 분리하여 하나의 API js 파일로 분리를 할 수 있다.
Vue ·
프로젝트 진행 간 적용 기술에 대한 정리 일반적으로 vue router사용 시 SPA 방식을 선택하였기에, 초기에 모든 Page 정보를 전부 들고 오게 된다.
Vue ·
간단한 TodoList 를 Vue로 개발하면서 slot의 기능에 대해서 다시한번 정리해본다. 우선 구성은 App.js는 Container Component의 역할을 한다.
Vue ·
개발 프로젝트 진행 중 기존 props 가 아닌 Vuex를 활용해서 데이터를 child component로 전달하는 방법을 간단하게 기술한다.
React ·
React는 최근에 가장 많이 사용하는 라이브러리이기도 하고 현재 회사에서는 실무에서 Vue 프레임워크를 사용하고 있지만, 빠르게 변하고 있는 프론트엔드 기술 생태계를 따라가려면 공부할 수 밖에 없을것 같았다.
React ·
기본적으로 setState를 사용할때 아래와 같이 작성을 한다. 만약 클릭 시 값이 1씩 증가하는 컴포넌트 기능을 가진 개발이 필요하다고 하자.
