DEV (23) 썸네일형 리스트형 [HTML] SEO와 시멘틱 마크업 일을 하면서 SEO 그리고 시멘틱 마크업이라는 이야기를 많이 듣게 된다. 그렇다면 SEO와 시멘틱 마크업은 대체 무엇일까? 1. SEO란? 한국어로는 검색엔진 최적화, 영어로는 Serch Engine Oprimization을 줄여서 SEO라고 한다. 그렇다면 검색엔진 최적화를 위해서 우리는 어떻게 해야될까? 시멘틱 마크업을 통한 홈페이지 구조를 개선해야한다. 세계적으로 유명한 검색엔진인 google은 웹페이지 크롤링에 있어서 HTML마크업을 중요하게 고려한다고 한다. 그중에서도 title과 h태그로 쓰여지는 제목이 페이지의 주제를 알려주는 태그가 될수 있다고 한다. 크롤링 : 웹상을 돌아다니면서 정보를 수집하는 행위 근데 사실 SEO라는것이 일부 검색엔진에서는 크게 작용하지 못하는경우가 있다. 우리나라에.. [DEV] KISS, DRY, YAGNI - 소프트웨어 개발 3대 원칙 1. DRY DRY는 Don’t Repeat Yourself의 줄임말로 같은 기능이 반복되는 코드를 작성하지 말라는 뜻입니다. 2. YAGNI YAGNI는 YouAin't Gonna Need It 의 줄임말로 불필요하게 확장을 고려한 개발을 하지 말라는 이야기이다. 어떻게 보면 solid법칙에서의 개발 폐쇄 원칙과 반대가 되는 의견으로 생각 될수 있는 여지가 있지만, 무조건적으로 확장을 하지 말라는 이야기가 아닌, "미래의 이 기능이 커질거야", 또는 "이런 기능이 생길수도 있겠지?", "이 기능이 지금은 없어졌지만 다시 사용될수 있겠지?" 등의 이유로 불필요하게 확장에 치중한 코드가 생기거나 지금당장 필요하지 않은 로직을 만들지 말자는 원칙입니다. 3. KISS KISS는 앞서 이름에서부터 보이듯이 심.. [JavaScript] == 과 ===의 차이점 ==, ===은 비교를 위해 사용되는 연산자이다. 하지만 두가지가 어떻게 보면 비슷한 역할을 하는데 정확히 어떤 부분에서 차이가 있는지 알아보면 좋을것같다. 💡 각각의 이름 == : Equal Operator === : Strict Equal Operator 1. == : Equal Operator 비교연산을 할때 사용되는 연산자로 a와 b가 있을때 값을 비교하며 같으면 true, 다르면 false를 반환한다. 결국 이녀석에게 있어서 가장 중요한것은 값인것이다. 예를 들어 a=2 , b=”2” 일때 Equal Operator은 true를 반환한다. 아래의 예시를 보자, a와 b는 2라는 값을 동일하게 가지고 있기 때문에 true가 된것이다. 이 밖에도 아래 사진과 같이 값만 같으면 모두다 true를 반환.. [React] JSX는 무엇일까? 일전에 어떤분에게 그런 질문을 받았다, "css-in-js의 단점은 무엇일까요?" 나는 멍청하게도 jsx요? 라고 대답하였고 내 얕은 지식이 드러나게 되었다. 그래서 jsx와 css-in-js를 공부해보았고 일단 jsx부터 정리를 해보려 한다. jsx문법이란? React공식 문서에 따르면 jsx는 자바스크립트의 확장이라고 한다. jsx는 React "엘리먼트"를 생성한다. React는 본질적으로 렌더링 로직이 UI로직과 연결횐다는 사실을 받아들이고 별도의 파일에 마크업과 로직을 넣에 인위적으로 분리하는 대신에 둘다 포함하는 '컴포넌트'라고 부르는 유닛으로 사용한다. 물론 React에서 필수적으로 사용해야되는것은 아니지만 시각적으로 더욱 도움이 될거라고 한다. 그래서인가 React공식문서에서는 HTML보다.. [React] 라이프 사이클(클래스형) "React를 사용하여 개발을 하는 프론트엔드 개발자" 요즘 정말 많이 보인다. 물론 최근에 개발에 입문하게된 나또한 React환경에서 프론트 개발을 하고있다. 그런데 일을하다 문득 든 생각이 있었다. 이놈의 라이프 사이클은 어떻게 될까? 그래서 오늘은 블로그에 적어보려 한다. 라이프 사이클이란? 흔히들 말하는 생명주기, 리액트로 말하자면 컴포넌트의 수명이라고 말할수 있을것같다. 리액트의 라이프 사이클은 페이지가 랜더링 되기 전 준비단계 부터 페이지에서 사라질때까지를 한 사이클로 보면 될것같다. 리액트의 라이프 사이클은? 리액트에서의 라이프 사이클은 크게 세가지 단계로 볼수있다. 마운트 -> 업데이트 -> 언마운트 이렇게 세단계로 볼수있는데 각각의 단계에서는 메서드를 이용하게 된다. 1. 마운트 단계 1.. [디자인 패턴] atomic과 container,presenter 요즘 개인적으로 사이드 프로젝트를 진행하는데 있어서 디자인패턴에 대한 고민이 생겼다. 기존 내가 사용하던 패턴은 코드캠프에서 배웠던 container-presenter 패턴이었지만, 최근 추세와는 조금은 떨어진 부분이 보여 atomic패턴을 도입해볼까 고민을 하게되었다. 그래서 오늘은 atomic과 container-presenter에 대해서 적어보려고 한다 가장 먼저 지금 내가 사용중이었던 디자인 패턴은 container-presenter 패턴인데 container와 presenter는 어떤 역할을 하는 녀석이냐면 container : 로직부분을 담당하는 부분(state관리 변수 및 함수의 생성) presenter : styled와 전체적인 구조, UI를 담당하는 부분 그러면 이녀석의 장점은 무엇일까?.. [React, Node] Crypto를 통한 sha256해시 생성 이전에 프로젝트에 결제모듈을 연동하면서 해시 생성이 필요했는데 그 부분을 프론트엔드 파트에서 처리하게 되어 잊기 전에 적어보려 합니다! 사실 이건 Next.js나 react에서 별도의 로직을 통해 생성하는 것이 아닌 node.js의 내장함수인 crypto를 이용하는 방법입니다. 사용하기에 앞서 우리는 crypto라는 친구를 import 해야 합니다! import를 하고 마우스오버 해보면 아래와 같이 나오게 되는데, crypto의 간단한 사용방법을 알려줍니다. 저는 SHA256해시를 생성하길 원했고, 아래와 같은 간단한 로직으로 해시를 생성하였습니다. 간략하게 설명하자면.. base_str : 해시를 생성할 문장 또는 단어를 입력하는 부분 crypto.createHash("sha256") : 크립토를 이용.. 이전 1 2 3 다음
