뫙뭉

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

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

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

컴포넌트를 새로 생성하고 로컬에서 실행해보았는데 위와 같은 오류가 떴다. 이게 뭔말인가 해서 해당 컴포넌트에 가보니 뜬금없이 useRef와 관련된 한 줄에서 오류가 났다고?? 뭐가 문제인가 해서 5분정도 들여다 보다가 발견한 것은 import의 경로 리액트에서 Hooks의 경로는 'react'이다. 아마 자동완성을 쓰다가 자동으로 import 된 것이 이런 문제를 발생 시킨 듯 하다.

최근 프로그래머스의 고양이 사진첩에 대한 과제를 해결하던 도중 오류를 접했다. 참고로 나는 Javascript란 언어에 대해 기본적인 것은 알고 있다는 오만한 생각을 했었으나 해당 과제를 풀어보고 나의 오만함을 깨달을 수 있었다. 프론트엔드를 공부하는 취업준비생들에게 매우 많은 도움이 될 것으로 예상하기에 해당 문제 해설의 링크를 남겨둔다. 문제를 직접 풀어보고 싶으면 해당 링크의 상단에 문제 링크도 포함되어 있으니 참고. https://prgms.tistory.com/53 '2021 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 기출 문제 해설 'Dev-Matching 웹 프론트엔드 개발자'의 과제 테스트는 어떠셨나요? 내가 무엇을 잘못하였고, 무엇을 잘했는지 궁금하시지 않으셨나요? 우리 모..

평소 어떤 사이트에 회원가입을 하려 할 때 우리는 유효성을 확인하는 문구를 자주 만나게 된다. 유효성 검사란 요구하는 조건을 만족하는지 확인하는 절차를 말한다. 사진을 보면 아이디의 글자수, 특수문자의 사용 가능 여부, 비밀번호와 일치하는지의 여부, 이것들 외에도 사이트에서 받아야 하는 데이터의 형식들을 제한하곤 한다. 그리고 통과하지 못한 데이터를 제출하면 오류가 발생함으로서 잘못된 데이터가 전달되지 않도록 막는 역할을 해준다. 최근 간단한 회원가입 페이지를 만들어보면서 이런 유효성 검사에 대해 리마인드 할 기회가 있었는데 이런 것들을 공유해 볼까 한다. 정규표현식 유효성 검사를 하는데에 있어 자주 쓰이는 것이 바로 이 정규표현식이다. 그럼 정규표현식이란 뭘까? 정규 표현식 또는 정규식은 특정한 규칙을..

오류 발생 이유 첫 프로젝트를 마치고 부푼 마음으로 README.md 파일을 업데이트 해야겠다고 마음먹고 깃허브 리퍼지토리에서 직접 수정을 진행하였다. 처음 수정해본 파일이기 때문에 역시나 문제가 발생하였다. 깃허브에서도 수정을 하고 local에서도 파일을 수정하니 나중에 커밋 시 충돌이 발생 한 것. 당황한 나머지 어정쩡하게 알고있던 GUI인 Sourcetree를 통해 이것저것 만지다가 merge를 성공했나 싶었더니 이상한 오류와 함께 커밋이 되지 않는 상태가 발생하였다. 뭣도 몰랐던 나는 branch 그래프만 보면 이게 왜 안되는 건가 도대체... 절망스럽기만 했으나 침착하게 detached head라는 오류 메시지를 구글링해 보았다. Detached HEAD 상태란? 출처: Dog발자 블로그 , h..

출처: 프로그래머스 강의, '코딩테스트 광탈 방지 A to Z Javascript ' 강의 내용 정리 및 공부 목적으로 게시하는 글임을 알립니다. 해시테이블 자료구조 오늘은 해시테이블 자료구조에 대해 알아보려고 한다. 해시테이블이란? 키와 값을 받아 키를 hashing하여 나온 index에 값을 저장하는 선형 자료구조이다. 키와 값 하면 떠오르는 Javascript 문법이 있을 것이다. 바로 객체, Object가 이에 해당한다. 추가로 이번 강의를 통해 알게 된 문법이 있는데 바로 Map 메소드이다. Map은 const sample = new Map()과 같이 선언하며 sample.set(key, value)로 키와 값을 설정할 수 있으며 sample.get(key)로 해당 키의 값을 불러올 수 있다. ..

State, 변수의 상태관리 리액트에서는 변화하는 값에 대해 클래스형 컴포넌트에서 state를 이용하여 값을 관리하였다. 함수형 컴포넌트에서는 원래 state를 관리할 수 없었기에 state를 사용할 경우 클래스형 컴포넌트를 선택적으로 사용하였는데 이러한 부분을 개선하기 위해 만들어진 기술이 Hooks. state뿐만 아니라 Life-Cycle-Method 의 사용에도 갖고 있었던 문제점을 리액트 16.8에서 Hooks라는 개념이 도입되면서 useState, useEffect 등으로 손쉽게 함수형 컴포넌트에서도 사용이 가능하게 되었다. state를 이용하는 경우는 매우 다양하다. 간단한 예로 로딩 스피너를 들 수 있는데, 듣기에는 아주 단순해 보이는 이런 경우에도 state로 관리할 수 있다. API 호..

큐에 대하여 알아보자 출처: 프로그래머스 강의, '코딩테스트 광탈 방지 A to Z Javascript' 큐란 먼저들어온 것이 먼저 나가는 것을 말한다. 쉬운 예를 들자면 영화관에 줄을 서면 먼저 슨 사람이 먼저 입장하고 줄에서 빠져나간다. 이러한 개념을 자바스크립트로 만들어 보자. class Node { constructor(value){ this.value = value; this.next = null; } } class Queue { constructor(){ this.head = null; this.tail = null; this.size = 0; } enqueue(newValue){ const newNode = new Node(newValue); if(this.head === null){ thi..