최근 react 의 라우팅 방법에 대해서 의문점이 들어서 여러 가지 자료를 보고 조사를해 보았다. 여러 자료를 보면서 헷갈렸던 부분들도 있었다. 이제 부터 내가 이해한 부분을 간단히 설명해보겠다. 처음 매우 헷갈렸던 부분은 기존의 ssr 방식이였다. 지금의 ssr과 예전의 ssr 방식은 좀 뭔가 다른 부분이 있던것 같았다. 그 답은 정답인지 모르겠지만 스택오버 플로우 답변을 통해서 알 수 있었다. 해당 답변에서 이러한 설명이 있다 => "지금은 URL이 해석되는 곳이 2곳 이지만 옛날에는 1곳 뿐 이였다." 이 설명으로 애매모호하던 부분의 의문증이 풀렸다. 옛날은 위의 그림의 위쪽 표 같은 방식일 때를 말하고 지금은 아래쪽표와 같은 방식일 때를 말하는것 같다. 1.server에서 뷰와 데이터를 전부다 처..

컴포넌트 css 작업 중에 중복 사용되는 css를 %를 사용하여 선언을 해주었고 반응형 값이 들어가야했기에 아래와 같이 선언 해주었다. %font { font-size: 14px; font-weight: 600; @include media(">640px") { font-size: 16px; font-weight: 700; } } 그리고 exclude 를 통하여 위의 값을 가져와서 실행을 하니 에러가 발생 하였다. 저런 형식으론 사용 할 수 없다는 에러였다. %font-small { font-size: 14px; font-weight: 600; } %font-medium { font-size: 16px; font-weight: 700; } 그래서 위와 같이 설정을 바꿔주고 폰트의 반응형이 필요한 곳에 me..

요즘 디자이너와 css의 특정 값들을 지정하는 작업을 진행 하고 있다. 오늘은 box shadow의 값을 지정 하였는데 네이밍에 대해서 고민을 하게 되었다. 해당 값은 우선 전역 변수로 지정해주어 className에 추가하면 적용이 되도록 만들 생각이였다. 그래서 우선 혹시 다른 box-shadow 값을 사용하게 되어 네이밍이 겹치는걸 방지하기 위해 global css 에는 제일 앞에 "-- "를 붙여 주기로 정하였다. 디자이너 우선 사용하기로한 shadow는 3가지였다. 1. 1px 1px 8px 2. 1px 1px 3px 3. 0px -3px 6px 여기서 문제는 저 3번째 값이였다. 원래 기존 생각능 shadow-1 shadow-2 이런 방식으로 이름을 지어주여고 하였다. 하지먼 저 3번째 값은 마..

어제 작성을 해두고 올리지 않아서 오늘 올려본다. 오늘 아래 사진과 같이 각 tab 마다 읽지 않은 내용이 있다는 것을 알리는 기능을 추가 가능한지 물어 보아서 생각해 보았다. 내용을 읽지 않았다면 주황색 점이 붙게된다. 처음 내용을 들었을 땐 간단하게 생각했지만 구현을 하기위해 작업을 하다보니 생각보다 고민해야할 부분이 많았다. 일단 원래 기획에 없던 사항이라서 반응형 레이아웃에서 문제가 생긴다 370px 아래로 내려가게 되면 tap 부분의 자리가 부족하여 점이 tab 밖으로 밀려나가게 된다. 기능적인 문제로는 프론트만 구현을 한다고 하면 반쪽 짜리 알림이 되는 것이였다. 왜냐하면 페이지를 새로고침 하거나 다른 페이지로 갔다가 다시 들어올 경우 한번 읽었다고 하더라도 저 점이 계속 붙어 있게 된다. 백..

책에서 "소프트웨어에서 이름은 어디나 쓰인다" 라고 말하는 것처럼 정말 변수명, 함수명 외에도 컴포넌트의 파일 명을 정할때 URL path 명을 정할 때 타입의 이름을 정할 때 코드를 작성하다 보면 수많은 이름을 지정한다. 이 장에서는 이렇게 자주 사용되는 이름을 잘 짓는 간단한 규칙을 몇 가지 소개한다. 1. 의도를 분명히 밝혀라 - 변수의 존재 이유는? - 수행 기능은? - 사용 방법은 ? 위의 질문들에 대해서 내가 이전에 작성한 코드를 보고 질문에 답을 해보았다. 함수의 존재 이유는? article 들을 filter 하여 보여주기 위해서 수행 기능은? articleList를 for문을 돌면서 article 의 category 가 tag와 일치하는지 확인하고 일치하면 filterArr 에 담아서 출력..

text 로 불러오는 문장에서 []로 감싸진 부분을 하이라이트 해주고 n 문자가 오면 엔터를 걸어 주어야 했다. 3가지 방법을 고민을 했는데 1. react에서 제공해주는 dangerousHtml 메서드를 사용하는 방법. - text를 DB에 저장할때 [] 대신 태그로 n 대신 태그를 같이 넣어준다. - DangerousHtml 컴포넌트를 만들어 해당 컴포넌트로 text 값을 넘겨주어 dangerousHtml메서드를 이용하여 변환 시켜준다. - DangerousHtml 컴포넌트 css 파일에 span 태그는 font-weight과 color 가 적용 되도록 만들어 준다. span { font-weight: bold color: green } ex) 안녕하세요 개발자 입니다. => 안녕하세요 개발자 입니다..