프론트엔드 7

Node환경과 브라우저의 차이점 (몇몇 노드 모듈이 브라우저에서 실행할 수 없는 이유)

개발을 하던중 실행환경에 따라 기본적으로 사용할 수 있는 모듈이 있고 제약이 있는 모듈이 있다는것을 인지하게 되었다.. 사실 생각해보면 당연한건데 이제서야 인지한 나를 반성하며 (?) 정리해보자!! 내 상황 - webpack config 파일을 수정하던중 target을 electron-renderer로 잡으면 fs,os 모듈 실행이 가능한데 , target을 ['web',' electron-renderer'] 로 함께 잡으면 module not found 라는 오류가 떳다! - 그 이유는 'fs'나 'os' 같은 Node.js에서만 사용 가능한 모듈은 브라우저(web)에서 직접 사용할 수 없기 때문이다. 따라서 해결방안은 2가지였다. 1. webpack.web.config / webpack.electro..

FE 2023.12.11

[Clean Code] React에서의 클린코드

클린 코드의 의의 - 실무에서 공공연한 지뢰코드가 존재한다. - 지뢰코드 === 흐름파악이 어렵고, 도메인 맥락 표현X , 동료에게 물어봐야하는 코드 - 즉 실무에서 클린코드란 유지보수 시간의 단축과 같다. ( 클린코드 != 짧은코드 ) == 원하는 로직을 빠르게 찾을 수 있는 코드 원하는 로직을 빠르게 찾으려면? 1. 하나의 목적을 가진 코드가 흩뿌려져 있다면 => 1.응집도를 높여라 2. 함수가 여러 가지 일을 하고 있다면? => 2.단일책임의 원칙을 따라라 3. 함수의 세부구현 단계가 제각각이라면? => 3.추상화 단계를 조정해 핵심 개념을 필요한 만큼 노출해라 1. 응집도 응집도가 낮은 코드 예제 리팩토링 시도 - custom Hook 사용 - custom hook을 이용하여 한번에 뭉쳤을때의 위..

FE 2023.10.10

리액트를 사용해보고 느낀점과 Next.js vs Gatsby 알아보기

프론트엔드 개발자라는 꿈을 정하고 난 후, 최근에 제대로 된 첫번째 팀프로젝트를 완성하였다. 리액트와 Redux-toolkit, thunk를 사용하여 프로젝트를 만들었는데, 이 프로젝트를 통해 얻을 수 있는 점이 많았다. 1. React는 CSR 방식이기 때문에 초기 구동속도가 느리다. 2. 더해서 SEO에 좋지않다.. 이 문제점을 해결하고자, 프로젝트에서는 react-helmet-async라이브러리를 사용하여 페이지별로 meta태그를 설정해 주었고, 초기 구동속도를 개선하기 위하여 React.lazy()를 이용한 코드분할을 시도했었다. (하지만, 개인적으로 만든 Private,Public라우터와 꼬여서 (?) 실패하긴 했다. 이 부분은 틈틈히 생각해보는걸로....) 하지만 , 이러한 문제점을 해결하기위..

FE 2022.08.04

[css] 중앙정렬 시 사용되는 코드 모음

방법 1. margin : 0 , auto 를 주면 중앙정렬이 가능하다. 상하 / 좌우 block요소인 div가 한줄을 다 차지하고 있다 - 이 부분이 auto로 설정할 수 있는 영역 See the Pen Untitled by mandelina (@mandelina) on CodePen. 방법2. text-align : center 이용하기 이는 1) 자식인 inline요소 2) 자식인 block요소 3) 자식인 inline-block요소 4) text 에서 적용가능하다. See the Pen Untitled by mandelina (@mandelina) on CodePen. 방법3. relative , transform: translateX(-50%)와 left(50%) 이용 자기자신의 margin에 ..

FE/HTML,CSS 2022.04.07

[HTML] Text-level semantics

🚀 Text-level semantics 🪢 : 줄바꿈 🪢 : 텍스트박스가 한 줄로 모두 표시가 안될 경우 줄바꿈 🪢 : 링크를 만들때 사용 *button과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않음 🪢 : 현재 문맥에서 정의하고 있는 용어를 나타냄 ex) WWW WWW는 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. - 위키백과 HTML 삽입 미리보기할 수 없는 소스 🪢 : 준말,약자를 나타낼때 사용 -보통은 홀로 쓰이고 dfn 태그로 감싸주기도 한다. WWW HTML 삽입 미리보기할 수 없는 소스 🪢 : 윗첨자,아랫첨자 H20 x2=4 HTML 삽입 미리보기할 수 없는 소스 🪢 : 묶는 용도 (의미 x) *div와 마찬가지고 최후수단으..

FE/HTML,CSS 2022.03.30

[멋쟁이사자처럼- 프론트엔드스쿨2기] 합격 후기

인턴생활이 끝난 후 프론트엔드 관련 국비지원 프로그램을 알아보던중 멋쟁이사자처럼 프론트엔드스쿨을 알게 되었다. 국비지원에 대해 부정적인 시각이 많은 글들을 보아 걱정이 많았는데 프론트엔드스쿨은 후기가 좋아 주저없이 지원하게 되었다. 1차전형 1차전형은 자기소개서 제출이였다. 질문내용은 어렵지 않은 내용들이였으며 2개월간 인턴생활을 통해 부족했던 부분, 공부해야할 부분을 어느정도 정리해 두었기에 그런 내용을 잘 녹일려고 노력해서 썼던것같다. 다행히 1차는 무난히 합격하였다. 2차전형 2차전형은 간단한 html+css 과제 및 자기소개 영상이였다. 과제는 그닥 어렵지 않은 난이도였기에 프론트엔드에 관심이 있다면 충분히 구현할 수 있는 과제인것 같았다. 자기소개영상은 1차전형때 썼던 자기소개서를 참고하여 앞으..

[JS] 자바스크립트란?

자바스크립트 탄생 -1995년, 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정, 그래서 탄생한것이 브렌던 아이크가 개발한 자바스크립트다. 자바스크립트의 표준화 -1996년 8월 ms는 js의 파생버전인 jscript를 인터넷 익스플로러 3.0에 탑재했다.그러나 js와 jscript가 표준화 되지 못하고 적당히 호환되었다.이로인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하였다. (크로스 브라우징 : 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다.) -> 이에 모든브라우저에서 정상적으로 동작하는 표준화된 자바스크립트 요청 1997년 7월 , ECMA-262 라 불리는 표준화된 JS 초판 사양 ..

FE/JavaScript 2022.01.31