소소한 코딩일지

일반적으로 void와 Future 는 같지 않다. void void f()는 아무것도 반환하지 않는 함수이다. 아래 결과를 보면 순차적으로 실행되면서 myVoid() 함수의 완료는 보장하지 않고 비동기 함수를 실행시킨다. 그래서 결과적으로 myVoid2가 main2보다 늦게 등장하게 되었다. Future Future f()는 동일하게 아무것도 반환하지 않지만, 호출자가 async/await을 통해 함수의 완료 시점을 결정할 수 있다. 위와 동일하게 순차적으로 함수를 실행하지만 중간 비동기 함수 myVoid()에 async/await을 통해 함수의 완료를 보장하고, 그 이후에 다음 코드를 실행시켰다. 결과적으로 myVoid 1, myVoid2 출력 후에 main2를 출력하는 것을 볼 수 있다. void로 ..

앱 개발을 하면서 반복적으로 사용되거나 내부 로직이 약간 차이가 있지만 큰 틀에서는 비슷한 형태의 위젯을 만들 때 하위 위젯으로 구분하여 사용한다. 위젯을 선언하는 방법으로는 Widget을 return 하는 Function Widget과 클래스로 선언하는 Class Widget을 사용할 수 있다. 지금까지는 무분별하게 사용하고 있었던 것 같아 그동안 내가 왜 / 어떻게 사용했는지, 그리고 그 쓰임새를 정확하게 하기 위해 정리하는 시간을 가졌다. 지금 나는 어떻게 사용하고 있는가. Flutter로 앱개발으 하면서 양쪽 모두 사용해서 위젯을 개발해봤다. 현재 나는 Row나 Column을 사용할 때 하위 컴포넌트로 인해 전체 컴포넌트가 복잡해지는 경우나, 같은 위젯이 반복되는 경우에 클래스 위젯 내부에서 함수..

Atomic Design 관련해서 기술 블로그를 보다가 원자 단위의 컴포넌트를 합치는 과정에서 태그로 감싸는 것을 보았다. 그 코드를 보고, `음, 빈 태그()로 감싸면 안 되나? 의미상 차이가 큰가?`라는 생각을 하게 되었다. 그리고 '빈 태그가 React.Fragment와 같다고 했던 거 같은데' 하는 생각이 연달아 들었기에 호다닥 , , React.Fragment를 살짝 정리해보고 왜 로 감싸게 되었는지 알아보려고 한다. div 태그는 컨텐츠를 담는 컨테이너로서 쓰인다. 콘텐츠가 보일 영역을 구분하는 태그이다. React.Fragment React.Fragment는 컴포넌트가 새로운 노드를 추가하지 않고 여러 자식을 그룹화할 수 있게 해 준다. 공식 문서의 설명을 참고하면, class Table e..

API 로직을 작성하면서 단순하게 요청, 응답 데이터 처리, 에러 메시지 전달 로직을 작성하는 것에 그쳤다. 이번에 Axios Interceptors로 기존의 API 로직을 수정해보았다. Axios Interceptors Axios Interceptors는 interceptor라는 단어의 의미에 알맞게 API 요청/응답을 주고받을 때, 요청 전/ 요청 후에 각 동작을 가로채서 특정 전처리를 해준다. // 요청 인터셉터 추가 axios.interceptors.request.use( function (config) { // 요청을 보내기 전에 수행할 일 // ... return config; }, function (error) { // 오류 요청을 보내기전 수행할 일 // ... return Promise...

웹 개발을 하면서 가장 많이 사용하는 라이브러리, 프레임워크는 React, Vue.js, Angular이다. 이것들로 우리는 SPA를 만들 수 있다. SPA를 검색해보면 CSR, SSR이라는 용어들도 함께 등장한다. 이 세 가지 용어가 어떤 것을 의미하고, 서로 어떤 관계를 가지고 있고, 영향을 줄 수 있는지 알아보려고 한다. SPA (Single Page Application) SPA는 웹사이트 전체를 하나의 페이지(Single Page)에서 보여주고, 내부 요소를 바꾸면서 화면을 보여주는 페이지이다. 기존 옛날 웹사이트에서는 새로운 페이지로 전환될 때 마다 서버로부터 리소스를 전송받았다. 하지만 점차 페이지의 용량이 커지면서 서버에서 매번 리소스를 받아오는 부담이 커지게 되었고, 이 문제를 해결하기 ..

Vue의 computed와 method의 차이를 스스로 명확하게 설명하지 못하고 있다고 생각해서 공식문서와 블로그를 보면서 차이점을 정리해보았다. 가장 큰 차이는 함수 연산 값을 사용하는지(computed) 또는 항상 함수를 실행하는지(method)이다. computed의 경우, 템플릿의 data(종속된 값)에 따라 메서드의 연산 결과 값을 사용한다. 종속된 값의 변경을 확인하고, 변경되지 않았을 경우에는 캐싱되어있는 값을 그대로 사용한다. method의 경우, 화면이 랜더링되어서 메서드를 호출할 때마다 연산을 수행한다. 실제 VS 코드에서 computed옵션을 타고 computedOptions를 보니 cache 여부를 boolean으로 판단하고 있는 것을 확인할 수 있었다. 추가) 전에 공부하면서 co..

프리온보딩 챌린지 첫번째 강의를 듣고, 지금까지 스스로 했던 부분을 리팩토링 해보려고 한다. 1. 관심사의 분리 2. api 로직의 추상화 3. 사용자 피드백 UI 추가 1. 관심사의 분리 코드가 하나의 문제, 관심사에 대해서만 충실하게 동작해야 한다. 하나의 코드 안에 여러 가지 동작이 함께 들어있으면 코드가 어떤 기능을 하는지 흐름을 파악하기 힘들고, 코드의 길이도 길어 읽기에도 힘들다. 1.1 Route 분리 지금까지는 Route 로직을 따로 분리하지 않고 App.tsx내부에 나열하듯이 코드를 작성하였다. 지금은 프로젝트의 크기가 작아서 Route 분기가 적어 크게 문제가 없어 보이지만 프로젝트 페이지 수가 많아지면 App.tsx 내부 Route 로직이 길어질 수 있기 때문에 Route로직을 따로 ..

문제 상황 react-router-dom 패키지를 사용하면서 Link 태그를 통해 다른 url로 이동하는 버튼을 만들어 주었다. 여기서 Link 태그의 state 속성을 사용해 이동하는 페이지에 특정 데이터를 전달하는 코드를 작성하였다. 이동한 페이지에서 Location과 관련한 값을 useLocation() Hook을 활용하여 받아오도록 했다. 필요한 데이터는 pathname과 state다. 여기서 문제가 발생했는데 기존에 타입을 지정하는 방식대로 pathname과 state를 지정해주었을 때 타입과 관련한 에러가 발생했다. interface { pathname: string; state: { id: string; } } 해결방법 여러가지 구글링을 해본 결과 아래의 사진과 같이 타입을 Generic 하..

Sass를 사용하면 원하는 디자인 값을 변수에 할당하여 사용할 수 있는 장점이 있다. 디자인 변수를 사용하면 나중에 변수의 값만 바꾸어 줌으로써 유지보수 부분에서 엄청난 장점을 가지게 된다. 현재 진행하고 있는 프로젝트의 사이즈가 조금 더 커질 예정이라 Sass 변수를 사용해보려고 한다. 사용할 변수는 가장 많이 사용할 것 같은 프로젝트 메인 컬러와 서브 컬러로 우선 테스트해보았다. Vue 프로젝트에서 변수명을 사용할 경우, 변수 파일을 만들고, 해당 각 파일을 import 해서 사용한다. // Main.vue ... ... 하지만 여러 변수를 사용하다 보면 대부분의 파일에서 변수 파일을 import 할 텐데, 모든 파일에 `@import ~`를 써주는 코드 중복도 해결해 보았다. 기존의 vue.conf..

프로젝트들을 시작하면서 CRA나 Vue cli로 간편하게 프로젝트들을 생성해서 package.json의 dependencies, devdependencies를 제외하고 어떤 내용들이 포함되어있는지 제대로 본 적이 없었던 것 같다. 이번에 내가 최근까지 했던 saai-peer프로젝트의 package.json과 github에서 vue 레포 지토리중 star 수가 가장 많았던 vue.js의 package.json을 열어보고 안에 어떤 내용이 있는지 보려고 한다. 우선 내 프로젝트의 package.json을 먼저 보면 아래와 같은 내용들이 들어있다. package.json에 lint, prettier를 제외하고 전혀 세팅을 안 해봐서 별로 내용이 없긴 하다... name : 프로젝트 이름 version: 프로젝..