전체 글

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Suite Landing Page FOCUS ON This small-ish HTML and CSS only landing page includes some interesting layout decisions. Perfect if you want to put your layout and responsive skills to the test! 반응형과 시안 안의 몇 가지 요소를 CSS로 구현하는게 재미있을 거라고 하네요! WHAT TO DO? - 기본적인 레이아웃 구조 작업을 했다! text-transform : 태그 안에 ..

- Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요. Pre-rendering 이란?: Next.js에서는 Client-side로 페이지를 로드하기 전, 각 페이지에서 Pre-rendering을 한다. 이를 통해 얻을 수 있는 이점초기 로딩이 빨라짐 (성능 향상)검색 엔진에 최적화가 됨 React의 렌더링 방식텅 빈 HTML을 받아와서 추후에 javascript로 페이지 컴포넌트를 생성  Next.js의 렌더링 방식사전에 각 페이지를 만들어놓음 -> 이때 각 HTML은 해당 페이지에 최소한으로 필요한 자바스크립트 코드와 결합되어 있음정적 페이지에서 hydration이라는 프로세스를 거치며 인터렉티브한 페이지가 됨 프리렌더링의 방식- 정적 생성 (Static Generat..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Workit Landing Page FOCUS ON This HTML and CSS-only landing page will be an excellent test of your UI and responsive skills. There’s also some fun to be had creating the curved section borders! UI와 반응형을 제작하는 데 도움이 된다고 합니다. 곡선 섹션 경계를 만드는 것도 재미가 있다고..!? WHAT TO DO? - 페이지에 있는 곡선 부분을 CSS로 구현해보았다. -..

위클리 미션의 요구사항을 수행하던 중, 내가 작성한 코드가 내가 의도한 것과 다르게 동작한다는 것을 알고 그것을 해결하는 과정을 기록해보고자 했다. 요구사항링크 검색바에 검색어를 입력하면 현재 폴더에 있는 링크들 중 “url”, “title”, “description” 중 하나에 검색어가 포함된 링크들만 필터된 상태로 볼 수 있나요? 위의 요구사항을 보고 생각했던 코드 흐름은- SearchingBar 컴포넌트의 input에서 검색어를 받는다.- 검색어를 입력하고 엔터를 누르면 A이벤트가 실행되어 검색어를 state 값으로 저장한다.- 데이터를 Map으로 돌려서 컴포넌트에 전달하기 전에, filter을 통해 검색어를 거른 후 전달한다. 그리고, 이 흐름대로 코드를 작성해보았다.// 검색어를 전달 받은 컴포..

- TypeScript의 동작 원리에 대해 설명해 주세요.- 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요. TypeScript의 동작 원리타입 스크립트의 동작 원리를 설명하기 위해서는 다른 언어의 동작 원리와 다르다는 이야기를 해야하기 때문에 다른 프로그래밍 언어는 어떻게 동작하는지 먼저 알아보자.다른 프로그래밍 언어의 동작 원리프로그래밍 언어는 컴퓨터가 사용하는 기계어를 사람이 작성할 수 있게 만들어주는 것이다.이때, 대다수의 프로그래밍 언어는 컴퓨터가 이해할 수 있도록 기계어로 변환해주는 과정을 거치는데 이를 컴파일(Compile)이라고 한다. 컴파일은 컴파일러(Compiler)이 수행하게 되는데, 자바스크립트나 자바 같은 프로그래밍 언어는 바이트 코드라는 (통칭)..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Workit Landing Page FOCUS ON This HTML and CSS-only landing page will be an excellent test of your UI and responsive skills. There’s also some fun to be had creating the curved section borders! UI와 반응형을 제작하는 데 도움이 된다고 합니다. 곡선 섹션 경계를 만드는 것도 재미가 있다고..!? (나는 안만들고 이미지로 떼웠기 때문에 아주 놀랐....구현해야겠다ㅜㅠ) WH..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Workit Landing Page FOCUS ON This HTML and CSS-only landing page will be an excellent test of your UI and responsive skills. There’s also some fun to be had creating the curved section borders! UI와 반응형을 제작하는 데 도움이 된다고 합니다. 곡선 섹션 경계를 만드는 것도 재미가 있다고..!? WHAT TO DO? - 오늘은 PC 화면만 구현해봤다. - 겹쳐있는 듯한 레..

**이미 지난 주차의 위클리 페이퍼이지만 블로그 이사로 인해서 새롭게 올리게 되었습니다.**내용은 유사하지만, 조금 더 보완해서 게시했습니다! - Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요.- Git Flow 브랜치 전략에 대해 설명해 주세요. Branch Merge란?: merge, 병합하다 합병하다라는 뜻으로, git에서 branch를 나누어 작업을 한 후 나누었던 브랜치들을 다시 합치는 것을 의미합니다. 1. Merge commit: 합치는 것과 합쳐지는 것의 데이터를 모두 남기면서 새로운 커밋을 형성하는 방법 # 장점히스토리를 보존할 수 있음 -> 프로젝트 진행상황 파악이 용이하다.커밋 아이디가 바뀌지 않아서 squash나 rebase를 사용하기 쉽다.# 단점커밋이..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Single price grid component FOCUS ON In this challenge, you will build out the pricing component to the designs provided. This is perfect for beginners and people who want to complete a smaller challenge. 프로젝트 디자인에 대한 설명이네요 (제공된 디자인에 맞춰 가격 정보를 구성해라) WHAT TO DO? - 그리드를 이용해서 레이아웃을 짰는데, grid-area ..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : NFT Preview Card Component FOCUS ON This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with. HTML과 CSS를 갓시작한 사람에게 좋을 거라고 하는 군요. WHAT TO DO? - 작업 전반적으로는 쉽다고 느꼈으나, 메인 커버 이미지 hover 효과 접근을 너무 어렵게 시작했다. 처음으로 했던 생각 눈 아이콘과 배경 색상을 구분 ..