Headwing

회사에서 프로젝트를 진행하면서 다양한 권한 별로 페이지 접근을 설정할 일이 많아졌다. 단순히 접근을 하고 안하고를 떠나서 권한에 따라 보여줘야할 컴포넌트가 달라질 때가 많았다. 그뿐 아니라 로그인 여부에 따라 개별 페이지에서 접근 여부가 달라지기도 했다. 그러한 부분들은 나는 Pinia라는 전역 상태관리 라이브러리를 활용하여 해결하였고 코드와 함께 간단히 공유하고자 한다. 저 귀여운 파인애플이 로고이다. 먼저 나의 경우에는 로그인 여부에 따라 달라지는 접근 권한과 로그인 이후의 사용자별 권한이 크게 나뉘었다. 로그인 이후에는 권한이 크게 일반 사용자 권한과 관리자 권한이 있었고, 관리자 내부에서도 3가지 권한이 존재했다. 이러한 것들을 알기 위해서는 가장 먼저 쿠키에 저장된 유저 정보가 있는지 체크해야했..

기존에 React로는 게시물 목록별 체크박스를 구현해보았던 경험이 있었다. 그런데 이번에 처음으로 Vue를 사용하여 게시물 목록별 체크박스를 구현해보게 되었고, 가장 깔끔한 방식을 나름대로 찾은 것 같아 공유하고자 한다. 먼저 이번에 구현한 체크박스는 다음과 같다. 게시물 별로 체크박스가 테이블에 구현되어있고, 개별 체크박스를 선택하여 게시물을 삭제하거나 다른 기능과 연동될 수 있는 부분이다. 먼저 이 각각의 체크박스는 목록 개별로 state 관리가 필요하므로 컴포넌트를 분리하여야한다. 그런데 체크박스를 여러개(중복) 선택 후 삭제를 해야한다면 어떻게 해야할까? React에서는 자식 컴포넌트의 상태를 부모 컴포넌트에게 전달하지 못하므로 전역 state 관리 툴인 Recoil이나 Redux를 사용했어야 할..

프로젝트를 진행하던 중 input을 통해 받은 pdf 혹은 이미지 파일로 pdf 미리보기를 구현해보았다. 단순 pdf 미리보기를 구현하는 정보는 많았으나 유저를 통해 받거나 서버를 통해 받은 파일로 pdf 미리보기를 구현한 경우는 잘 보지 못하여 시도하여 성공한 것을 공유하고자 한다. 데이터 분석 연구 결과 제출 삭제 연구 결과 연구 결과 파일을 제출 후 확인하실 수 있습니다. 연구 공개 범위를 전체 공개로 선택하시면 '코호트 활용 연구 > 승인 과제 현황' 에서 모든 사용자에게 공개됩니다. 핵심을 말하자면, resultFile이라는 변수를 통해 유저를 통해 이미지 파일을 받고 나서 pdf 미리보기에 필요한 iframe 태그에 들어간 url을 만들어준다. url을 만드는 방법은 window.URL.cre..

지금 있는 회사에서 어쩌다보니 프론트엔드 리드를 하게 된 후, aws 스터디에 이어 리액트로 seo를 해야 하는 상황에 봉착했다. 그래서 최대한 많은 구글링 이후 지금까지 시도해본 것들을 기록해보고자 한다. 1. Sitemap 만들기 SEO를 개선하기 위해 react-router-sitemap 라이브러리를 사용하여 public 폴더 안에 sitemap.xml 파일을 생성하였다. 리액트 프로젝트 사이트맵 생성 리액트 프로젝트 사이트맵 생성 구글 검색을 최적화하려면 사이트맵을 제출해야 한다. yarn과 npm을 혼용했는데 웬만하면 하나로 통일해서 사용하는게 좋은 듯하다. react-router-sitemap 패키지를 사 caniro.tistory.com 2. robots.txt 설정 구글봇(구글 웹 크롤러 ..

취업 후 나의 첫 업무는 회사 서비스 홈페이지를 개발 후 AWS로 배포하는 것이었다. 예상과는 달리 회사에서 웹개발자는 사실상 거의 혼자였고, 그래서인지 AWS 배포조차 정해진 프로세스가 없었다. 가비아의 부가서비스인 포워딩 서비스에 의존하는 실상이었다. 사실상 모든 과정과 절차를 내가 만들어야만 했다. 그래서 평소에 부족했던 AWS를 며칠간 스터디하며 결국 https로 배포하는데 성공했다. (테스트하느라 내 돈도 2천원 썼다ㅋㅋ) AWS를 사용하며 느낀 점은 포트폴리오 프로젝트를 진행할 때 사용했던 Vercel이 매우 매우 편리하다는 것이다. 금액적으로 얼마나 차이날지 모르지만(Vercel은 개인 개정으로 무료였다.) Vercel로 1분 안에 끝날 일을 AWS로는 무려 4가지의 프로그램 절차를 통해 진..

리액트 렌더링에 대해 다시 공부해보며 성능최적화 Hook의 개념을 공부해보았다. 먼저 리액트에서 렌더링되는 경우를 다시 짚어보면 아래와 같이 세가지의 경우가 있다. 1. 부모 컴포넌트가 렌더링된 경우 2. 컴포넌트의 state가 변경된 경우 3. 부모로부터 전달받은 props값이 변경된 경우 memo라는 함수는 컴포넌트에 변경된 사항이 없을 경우 불필요한 리렌더링을 막는 함수이다. 그런데 이러한 memo를 사용하더라도 아래와 같이 props를 넘겨주는 컴포넌트가 있다면 그 props가 리렌더링됨에 따라 재생성되므로 어쩔 수 없이 리렌더링되는 문제가 있다. 그래서 props로 함수를 넘겨주는 경우에는 useCallback을, 객체나 배열을 넘겨주는 경우에는 useMemo를 사용하여 의존성 배열안의 값이 바..

position을 어떻게 사용하는지 알려주세요. CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다. posi..

프레임워크와 라이브러리 차이점 Framework(프레임워크) 프레임워크는 뼈대나 기반구조를 뜻합니다. 프로그래밍을 진행할 때 필수적인 코드, 알고리즘 등과 같이 어느 정도의 구조를 제공해주기 때문에 프레임워크를 사용하는 프로그래머는 이 프레임워크의 뼈대 위에서 코드를 작성하여 프로그램을 개발하면됩니다. ​ 라이브러리(Library) 라이브러리는 단순 활용가능한 도구들의 집합 프로그래머가 어떠한 기능을 수행하기 위해서 도움을 주는 또는 필요한 것을 제공해주는 역할 즉, 개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식을 말합니다. 즉 간단하게 프레임워크는 완성된 제품이 아닌 완성된 제품을 만들기 위해서 개발자를 도와주는 또는 기반이 되는 역할을 합니다. 이를 ..