이론/Frontend73 웹 표준에 대한 고찰 먼저 이 글을 쓰기 시작하면서, 웹 표준을 Frontend 카테고리에 넣는게 맞는지에 대한 의문이 들었습니다. 웹 표준은 직군에 상관없이 웹 서비스를 개발하고 운영하는 입장에서 응당 공부하고 지켜야 할 부분이지만, 이번에 다룰 내용은 굳이 나누자면 프론트의 입장에서 지켜야 할 원칙들을 위주로 작성할 예정이기에 우선 프론트 카테고리에 두고 시작하였습니다. 웹 표준이란 무엇일까 HTML, CSS, Javascript 등 프론트엔드 기술에 익숙하지 않은 동아리원들을 대상으로 스터디를 진행하며 리뷰를 하고 있었는데, 한 분이 제출하신 코드 중 현재는 사용되지 않는 라는 코드에 대해 "웹 표준" 을 근거로 들며 다른 방식을 권장한다는 코멘트를 남긴적이 있었습니다. 문득 생각이 들었습니다. 웹 표준이란 정확히 무엇.. 2023. 2. 15. Web과 Ajax에 대하여 오늘은 오랜만에 웹에 관련된 포스팅입니다. 혹시 초창기에 서비스 되던 웹의 모습을 알고 계신가요? 지금 우리가 사용하고 있는 대표적인 포털 사이트인 네이버와 다음의 초창기 모습은 현재의 모습과는 사뭇 달랐습니다. 제가 기억하는 모습보다도 훨씬 이전의 화면들이라 낯설게 느껴지는데, 몇 가지 특징들이 눈에 들어옵니다. 요즘은 어딜가도 쉽게 찾아 볼 수 있는 CSS를 이용한 화려한 스타일들은 보이지 않고, 파란색 밑줄이 그어진 a 태그나 블릿이 찍혀있는 li 태그 등 HTML 태그들이 기본으로 갖고있는 스타일들이 그대로 노출되어 있는 모습입니다. 이제는 거의 사용되지 않는 table 태그도 보이네요. 두 페이지 사이의 시간 간격이 1년(네이버 1998년 12월, 다음 2000년 2월)이 조금 넘게 있는만큼 이.. 2022. 12. 30. 리액트에서 기본 컴포넌트를 만들때 이번에 사이드 프로젝트를 하며 맞닥뜨렸던 문제인데, 잊기전에 간단히 정리해두려 합니다. 문제 상황 프로젝트를 처음 시작하면, 디자인을 적용하기 위해 자주 쓰는 기본 HTML 요소들을 커스텀 컴포넌트로 만들게 됩니다. 예를 들면 태그나 태그등이 있습니다. 보통 아래처럼 다양한 props들을 받을 수 있도록 여러가지 인자를 선언해두고 사용합니다. export interface InputProps { isValid?: boolean; hasUnderline?: boolean; } const Input = ({ isValid = true, hasUnderline = false, }: InputProps) => { return ; } 그러나 이미 존재하는 태그를 덮어씌워 반환해주는 이러한 기본 컴포넌트의 경우 그.. 2022. 12. 22. Canvas API 사용해보기 이번에 사이드 프로젝트를 다시 설계하는 작업을 진행하며 처음으로 Canvas API를 직접 사용하게 되었습니다. 이전에는 라이브러리를 통해 Canvas를 간접적으로 다루어 잘 몰랐었는데, 참 특이하면서도 재미있는 API라는 생각이 들었습니다. 이번 포스트에서는 Canvas API의 기본적인 사용법부터 사용하면서 직접 겪었던 문제들까지 함께 공유해보도록 하겠습니다. Canvas API Canvas API는 주로 2D 그래픽 요소를 그리기 위해 사용됩니다. 간단한 도형 뿐 아니라 이미지를 추가하거나 편집하는 용도로도 많이 사용되며, jpg, png, base64 등 다양한 형식으로 출력이 가능합니다. 예시로 이렇게 사용할 수 있습니다. HTML Javascript const canvas = document... 2022. 12. 9. Context API 개념 잡기 리액트의 데이터 전달 방식 리액트는 컴포넌트 사이의 데이터를 전달할때 Props라는 이름의 속성을 사용합니다. 이 Props는 부모 컴포넌트에서 자식 컴포넌트 방향으로만 전달되는 특징이 있는데, 이 덕분에 리액트는 단방향 데이터 바인딩 구조를 형성할 수 있게 됩니다. 이러한 단방향 데이터 바인딩은 데이터의 흐름을 추적하기 쉽고 디버깅이 편하다는 장점이 있지만, 단점이 하나 있습니다. 바로 아래와 같은 경우입니다. 부모 컴포넌트에 있는 데이터가 아래쪽에 있는 컴포넌트에서도 필요한 경우, 해당 데이터를 한 번에 전달해 줄 방법이 없고 그 사이에 있는 모든 자식 컴포넌트들을 거쳐서 전달해야합니다. 이런 데이터들이 많아질수록 컴포넌트의 인자들은 각종 Props들로 자연스럽게 두툼해지기 마련이죠. 이렇게 많아진 .. 2022. 11. 22. Recoil + React-query 삽질기 이 글은 모두 모여라 기술 블로그에도 업로드 되었습니다. 현재 진행하고 있는 프로젝트의 스프린트가 마무리 되고, 본격적인 유지보수와 리팩토링 작업에 들어갔습니다. 시간적인 여유가 생겨 사용되고 있는 기술 스택들을 깊게 공부해보며 발견했는데 현재 사용중인 라이브러리들 중 라이브러리가 추구하는 방향 또는 기능과 일치하지 않는 부분을 발견하였습니다. 무엇인가 이상한 점을 느껴 전체적인 데이터 관리 플로우를 점검해보았는데, 나름 잘 사용하고 있었다는 초기의 생각과는 달리 데이터 관리의 일관성이 무너진 상태였습니다. 저희 팀이 처음보는 라이브러리를 사용하며 어떤 착각을 했었는지, 그 실패의 경험을 글로 옮겨보려합니다. 무엇이 문제였을까? 문제가 되는 라이브러리는 프로젝트의 상태 관리를 담당하는 recoil과 통신.. 2022. 10. 28. 이전 1 2 3 4 5 6 7 ··· 13 다음
