twingkle

프로젝트 시작 npx create-next-app@latest 1. cmd에서 위와 같은 명령어를 입력하여 설치 2. 프로젝트 이름 입력 3. 필요한 사용 언어 체크 ESLint: 자바스크립트 코드에서 발견되는 문제 패턴들 식별하기 위한 정적 코드 분석 도구. `src/` directory : 소스 디렉토리 사용유무 import alias: 어떤 경로에 별명(Alias)를 붙이고 모듈을 불러올때 이 Alias를 사용하는 것. (@ 와 ~ 중 사용할 별명 선택) 사용예시: `../../app/layout` => `@/app/layout` 파일분류 1. public: 사이트 이미지, 파비콘 등 누구나 접근 가능한 폴더 2. src: 안에 app을 둠. (혹시 다른 종류의 주요 파일이 들어갈 가능성이 존재하기..

React 를 사용하다보면 CSS-in-Js 를 많이 사용하게 되는데, 나는 프로젝트할 때, styled-components만 사용해봐서 다른 라이브러리도 궁금하고 써보고 싶어서 찾아보았다. 우선 요새 트렌드는 emotion의 사용량은 떨어지고 있고, tailwind와 styled-components가 엎치락뒤치락하면 인기를 누리고 있는 추세인 것 같다. 이 기술들의 차이는 어떤게 있을지 궁금해졌다. 참고 우선 차이점을 보자면 LibraryAttaching Props Media Queries Global Styles Nested Selectors Server Side Rendering Theming Support Composition styled-components YES YES YES YES YES Y..

OS(운영체제) Software 중 하나로 Hardware를 제어하고 응용 프로그램을 실행하는 기본 프로그램 Process - Program 이 OS에 의해 MEMORY 영역을 할당받고 실행중인 것 - 싱글스레드와 멀티 스레드 모두 memory 영역은 하나만 생성된다. - multi-thread-process : 같은 Process 안에서는 메모리를 공유하기때문에 다른 스레드의 실행결과값을 바로 알 수 있다. - 여러개의 process를 사용하면, 메모리 점유가 증가한다는 단점이 있지만, 각각의 메모리를 할당받기 때문에 보안적인 측면에서 좋다. Code PC(다음번에 실행될 명령어의 주소를 갖고 있는 레지스터와 코드를 저장) Data global variables, static variables 저장 S..

크롬 브라우저는 기본적으로 Browser Process가 여러 Process들과 연결되어 있다. 중요! Browser Process안에는 Renderer Process와 Plugin Process가 여러 개 있다. 각각의 Process Renderer Process 여러 개가 있다. 탭 하나당 RendererProcess가 하나씩 있다고 보면 된다. 때문에 다른 탭에서 응답없음이 뜨더라도 다른 탭에는 영향이 없다. Plugin Process 웹사이트 내에서 사용하는 모든 플러그인을 제어하는 것으로, 여러 개가 있다. GPU Process 모든 전체 화면을 그리는 걸 담당하는 역할을 한다. 단점 Renderer Process가 무한으로 늘어날 수 있기때문에 고유한 메모리영역도 그만큼 많아진다. 극복 Pro..

Lighthouse 란? Lighthouse는 웹 앱의 성능, 품질 및 정확성을 개선하기 위한 자동화된 오픈 소스 도구입니다. 페이지를 감사할 때 Lighthouse는 페이지에 대해 대규모 테스트를 실행한 다음 페이지가 얼마나 잘 수행되었는지에 대한 보고서를 생성합니다. 여기에서 실패한 테스트를 앱을 개선하기 위해 무엇을 할 수 있는지에 대한 지표로 사용할 수 있습니다. * Lighthouse 사용에 대한 빠른 시작 가이드: https://developers.google.com/web/tools/lighthouse/ Chrome에서 실행하기 크롬에서 검사하고 싶은 페이지의 url을 입력합니다. 개발자 도구를 엽니다. lighthouse 탭을 클릭합니다. ※ Node CLI에서 실행하기 1. Lightho..

Webpack에서의 모듈 Webpack?? 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러. ※모듈 번들러: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 저합해 하나의 묶음으로 번들링하는 도구 **번들링: 여러제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 Webpack은 왜 필요할까? 웹페이지를 구성하는 코드의 양이 많아지면 우리는 흔히 무겁다고 표현한다. 이렇게 웹페이지가 무거워질수록 로딩속도와 성능은 저하가 되므로 유저들은 기다리지않고 이탈해버린다. 웹팩이 없다면 각 자원들을 일일히 서버에 요청해 얻어와야 하지만, 웹팩이 있다면, 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어든다. 그래서 웹팩..

웹표준 W3C에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙' 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹페이지 제작 기법을 담고있다. 웹개발에 사용되는 언어인 HTML(화면의 구조), CSS(표현), JavaScript(동작) 등의 기술을 다룬다. 웹표준의 장점 유지 보수의 용이성/ 웹 호환성 확보/ 검색 효율성 증대/ 웹 접근성 향상 Semantic HTML Semantic: 의미가 있는 HTML: 화면의 구조를 만드는 마크업 언어 왜?! 왜 시맨틱한 HTML이 필요한 걸까? 1. 개발자간 소통 만일 와 으로만 작성된 코드를 보면 각 요소가 어떤 기능을 하는지 전혀 파악할 수가 없기 때문에 주석을 작성하거나 id, clas..

SEO를 위한 meta 요소 name 속성값 설명 description 콘텐츠에 대한 간략한 설명.검색 결과에서 제목 밑에 뜨는 내용 keywords 웹 페이지의 관련 키워드들을 나열할 때 사용 author 콘텐츠의 제작자 오픈 그래프(open graph) property 속성값 설명 og:url 페이지의 표준 URL og:site_name 사이트의 이름 og:title 콘텐츠의 제목 og:description 콘텐츠에 대한 간략할 설명. 검색 결과에서 제목 밑에 뜨는 내용 og:image 미리보기로 표시될 이미지 og:type 콘텐츠 미디어의 유형. 기본 값은 website로, video, music 등 og:locale 리소스의 언어. (기본값: en_US, 한국: ko_KR)

JSON.stringify : 객체를 JSON으로 변환합니다. (직렬화) JSON으로 변환된 객체의 타입은 문자열입니다. JSON.parse : JSON을 객체로 변환합니다. (역직렬화) let transferableMessage = JSON.stringify(message) console.log(transferableMessage) // `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}` console.log(typeof(transferableMessage)) // `string` 자바스크립트 객체JSON 키 키는 따옴표 없이 쓸 수 있음 { key : "property" } ..

1. 목표상기하기 현재 ‘내'가 학습을 통해 이루고자 하는 것은 무엇인가요? 개발지식 능력의 향상 및 협업능력 향상. 완벽한 개발자는 아니더라도 충분히 성장가능성이 있는 개발자가 되고자 한다. 여러분이 현재 바라는 목표를 모두 이루었다면 ‘나'는 어떻게 변해 있을까요? 회사에서 찾는 개발자가 되어있을 것이다. ‘나'에게서 어떤 모습을 보았을 때, 목표를 이루었다고 말할 수 있을까요? 기술질문에서 막힘없이 대답할 수 있을때, 그리고 협업과정에서 질문을 부끄러워하지않고, 꾸준히 공부해나가는 내 모습을 보았을 때 2. Keep,Problem Keep 목표를 달성하기 위해 시도했던 것 중 가장 효과적이었던 노력은 무엇인가요? 1. 코드 리팩토링 내가 과거에 짜놨던 코드도 다시보기! 그땐 그게 최선의 선택이었겠지..