뫙뭉

우리가 흔히 사용하는 검색 플랫폼으로는 구글, 네이버 등이 대표적이다. 해당 플랫폼에서 검색을 해보면 단순히 화면만 바뀌는 것이 아니고 URL도 바뀌는 것을 확인할 수 있다. 검색 뿐만 아니라 여러 필터기능도 URL을 변경시키는 것을 확인할 수 있다. 해당 사항은 얼마전 검색 기능을 구현하면서 고민하게 되었던 부분이다. 화면만 바뀌어도 무방할 것 같은데 왜 URL도 바뀌게 한 걸까. 분명히 이에 따른 장점이 있어서 그런것일 텐데.. 그래서 여러 고민과 검색 끝에 알아낸 것이 있다. 검색을 하면서 URL이 바뀌게 해야하는 이유 3가지 1. 사용자 경험 개선 URL에 검색어나 필터를 포함시키면 사용자가 현재 검색상태를 쉽게 이해할 수 있음. 그리고 URL을 통해 검색 결과를 북마크하거나 공유할 수 있게함. ..

나는 사용하고자 하는 기술 스택을 정함에 있어 이유가 명확할수록 좋은 것이라 생각한다. 그 상황에 맞는 기술을 선택하는 것이 효율도 좋으며 효과도 좋기 때문이다. 그러함에 있어 CSS 사용 기술을 선택하는 것도 많은 고민이 있었다. 우선 우리 팀이 추구하는 개발 중 중요한 키워드는 '자유로운'이었다. CSS 하면 아무거나 갖다 쓰면 될 것 같다는 생각이 있었는데 여러 자료들을 찾아보니 선택 반경도 굉장히 넓고 상황에 맞는 선택법 또한 다양했기에 여러 프레임워크나 전처리기에 대해 알아볼 필요가 있었다. 어떤 분이 상황별 선택에 대해 잘 써놓은 글이 있어서 공유하겠다. https://ritza.co/articles/tailwind-css-vs-bootstrap-vs-material-ui-vs-styled-c..

프론트엔드의 길을 걸어보고자 한지 벌써 일 년이 넘어가고 있다. 그런 내가 갖고있는 가장 큰 부족한 점은 바로 팀 프로젝트 경험 하나 없었다는 것. 변변치 않은 개인 프로젝트들만 해오다가 성장 요소의 한계에 부딪히고 뒤늦게 팀 프로젝트를 시작하였다. 이 '팀 프로젝트' 시리즈는 팀 프로젝트의 시작부터 끝까지(팀플은 아직 진행중이다)에 대한 기록과 나처럼 독학으로 준비하시는 여러 분들에게 도움이 되고자 쓰는 글이다. 팀 프로젝트 꼭 해야하나..? 나는 겁이 많은 성격이다. 모르는 사람들을 접하는 것을 좀 꺼려하고 무언가 새로운 것을 시도하는 것을 싫어하진 않으나 도전해 보기까지 굉장히 보수적인 스탠스를 취하는 편. 그래서 팀 프로젝트를 여태 안 해봤나 싶다. 이런 생각을 해보았다. 규모가 꽤 있는, 소위 ..

단 몇 줄의 코드로 색다른 효과를 낼 수 있다! 오늘도 코드가 원하는대로 짜지지 않아 김빠짐을 경험하여 유튜브와 코드팬속에서 헤엄치던 중... 역시나 사이트에 재미를 선사하는 요소로 hover effect를 빼놓을 수 없지 않을까 라는 생각을 했다. 그리고 조금은 색다른 효과를 내보는 것도 재밌겠다 싶어 오늘은 단순히 색만 바뀌는 것이 아닌 빛번짐 효과로 좀 더 화하고 쨍한 느낌의 효과를 내는 법에 대해서 소개해보려한다. 굉장히 간단하니 겁내지 마시라!! 내가 직접 구현해 본 Hover effect https://codepen.io/swpark907/pen/qBVNqYg Light bleed hover effect(Pure CSS) Light bleed hover effect(Pure CSS)... co..

본격적인 리액트 사용 이제 필요한 데이터를 받아오는 법은 알았겠다. 본격적으로 리액트라는 것에 대해서 적어보려 한다. 리액트, React JS는 최근 많은 기업들이 사용하고 있는 자바스크립트의 대표적인 라이브러리이다. 리액트는 페이스북에서 만든 Javascript 라이브러리이며 특징으로는 크게 2가지를 들 수 있다. 리액트의 특징 1. SPA를 구현하는 데에 용이하다. 2. 모듈형 개발을 기본으로 한다. 3. 활성화 된 커뮤니티 여기서 SPA(Single Page Application)란 페이지를 이동할 때마다 서버에서 데이터를 새로 받아오는 것이 아니라 우선 Vitrual DOM을 생성 한 뒤 DOM과 비교해 변경되는 곳만 부분적으로 리랜더링을 하기 때문에 웹페이지의 사용성에 도움을 준다. 쉽게 말해 ..

이전 포스트에서 열심히 '한글자씩 나타나는 애니메이션'에 대해 만들었다. 그런데 문제가 하나 있다. 해당 요소는 저~~~기 밑에 있는데 사이트가 렌더링이 되자마자 애니메이션이 발동된다면 여태 힘들게 애니메이션을 만든 의미가 없지 않은가!! 요소가 화면 안에 들어왔을 때 애니메이션이 발동되어야 된다 이말이다. 그래야 내가 열심히 만든 애니메이션을 자랑할 수가 있다. 그렇기 때문에 오늘은!! 요소가 화면에 보일 때 애니메이션이 작동하도록 하는 방법에 대해 블로깅하려 한다. 화면의 위치와 요소의 위치 우선 화면의 상단의 위치를 알아야겠지. 이것은 간단하다. window.pageYoffset; window.scrollY; 방법은 위의 두가지가 있는데 둘의 차이가 무엇이냐. window.scrollY 는 구형 브..

웹사이트에 심심함을 덜어줄 무언가가 필요하다!! 얼마전에 포트폴리오를 재정비할 계획이 있었다. 사실 신입 포트폴리오, 심지어 비전공자라 하면 쓸 말이 많지가 않더라. 나만 그런것인가... 그렇다면 뭔가 심심하지 않은 애니메이션으로 시각적 즐거움을 채우면 좋지 않을까 라는 생각이 자연스럽게 들게된다. 뭔가 샤랄라~ 하는 느낌으로 한글자씩 나타나는 애니메이션을 넣으면 좋겠다라는 생각에 일단 코드를 생각나는대로 끄적여 보았다. 생각의 흐름 CSS만으로 해결 할 수 있겠는데..? 일단 html에 적어야겠지. 가장 처음 적었던 코드는 다음과 같다. TEST 우선 기본적으로 드는 생각은 글자를 쪼개야 한다는 것. 한글자씩 나타나야 하기 때문에 도저히 하나의 태그 안에 글자가 있으면 해결방법이 떠오르지 않는다. 코딩..

해당 자료는 다른 블로그, 유튜브에 더 자세히, 전문성 있게 설명한 글이 많습니다. 이 글은 제가 해당 개념에 대해 이해했던 흐름을 정리해 놓은 자료이니 참고해주세요. 서버와의 통신 앞의 글에서 오픈 API에 대해 간단히 소개해 보았다. 현재 개발되어있는 여러 기능들을 사용할 수 있게 공개해 놓은 오픈 API. 프론트엔드 개발을 하다 보면 API를 이용하게 되는 경우가 굉장히 많을 것이다. 그렇다면 실질적으로 이용하는 방법은 어떻게 될까? 그것에 대해 알아보기 전에 우선 통신의 종류에 관한 이야기부터 시작해보자. 동기와 비동기 통신 통신의 종류에는 두가지가 있다. 동기(Syncronous) 통신과 비동기(Asyncronous) 통신이 그것이다. 이름에서부터 알 수 있듯이 두 통신방식의 가장 큰 차이점은 ..

예전부터 즐겨보던 유튜브 채널인 Online Tutorial 에 흥미로운 영상이 올라왔다. 원본영상: https://www.youtube.com/watch?v=ShPPkZEeLPo&t=662s Circular Navigation, 활성화 되면 원형으로 메뉴가 펼쳐지는 메뉴 네비게이션! 다른 프로젝트를 진행하며 막힘의 연속에 지쳐가고 있을 때 머리도 식힐겸 가볍게 만들어 볼 것이 생겨 신이 났던 것 같다. 사실 영상을 보며 따라서 코드만 배껴 쓰면 만들어지는 기능이지만 그렇게 하면 당연히 의미가 없으니 영상은 아이디어를 얻는 소스일 뿐! 시연 영상만 보고 처음부터 혼자 만들어 보려고 노력하였다. 사용 기술은 HTML, CSS, VanilaJS이다. 디자인 요소가 강조된 튜토리얼이다보니 JS는 active ..

axios를 통한 오픈 API 사용방법에 관한 정보는 다음 글을 참고해주세요 https://mwangmoong.tistory.com/8 React로 요리를 찾아주는 기능 구현 (a.k.a 냉장고 털기) - 5 ( axios 통신) 해당 자료는 다른 블로그, 유튜브에 더 자세히, 전문성 있게 설명한 글이 많습니다. 이 글은 제가 해당 개념에 대해 이해했던 흐름을 정리해 놓은 자료이니 참고해주세요. 서버와의 통신 앞의 글 mwangmoong.tistory.com 오픈 API를 사용해보자 오늘은 API 사용기에 대해 적어보려 한다. 현재 내가 만들고 있는 프로젝트는 유튜브, 네이버 검색 API를 이용한 레시피 찾아주기 기능이다. 그전에 우선 API가 무엇인지 간단히 집고 넘어가 보자 내가 이해한 API API..