전체 글

- 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 효과 접근을 너무 어렵게 시작했다. 처음으로 했던 생각 눈 아이콘과 배경 색상을 구분 ..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Recipe page FOCUS ON This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects. 반응형 페이지를 만드는 데에 도움이 된다고 하네요. 프론트엔드를 추천해준 분에게 1차 완성본에 대한 피드백을 받아봤는데, 생각보다 내 코드에 수정할 부분이 많았다. 많은 걸 깨달았던 좋은 피드백 시간 👍 피드백에서 알 수 있었던 내용 height 값을 임의로 지정하는 것은 나쁜 습관! ( 유연성을 해침 ) 상속을 고..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Product Preview Card Component FOCUS ON This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects. 반응형 페이지를 만드는 데에 도움이 된다고 하네요. WHAT TO DO? - 상품 이미지에 hover 시, 자연스럽게 확대되는 것을 추가해서 구현해봤다. transition 을 처음 이용해봤는데, 제대로 이해하고 쓴 것 같지는 않지만 그래도 정상적으로 동작하게 만들었다는게 스스로 신..

문제 설명 정수 n과 문자열 control이 주어집니다. control은 'w', 'a', 's', 'd'의 4개의 문자로 이루어져 있으며, control의 앞에서부터 순서대로 문자에 따라 n의 값을 바꿉니다. "w" : n이 1 커집니다. "s" : n이 1 작아집니다. "d" : n이 10 커집니다. "a" : n이 10 작아집니다. 위 규칙에 따라 n을 바꿨을 때 가장 마지막에 나오는 n의 값을 return하는 solution 함수를 완성해 주세요. 제한 사항 -100,000 ≤ n ≤ 100,000 1 ≤ control의 길이 ≤ 100,000 control은 알파벳 소문자 "w", "a", "s", "d"로 이루어진 문자열입니다. 입출력 예 n control result 0 "wsdawsdass..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Recipe page FOCUS ON This challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content. 각 요소에 가장 적합한 시맨틱 태그가 무엇일지 고민하면서 제작해보라고 한다. WHAT TO DO? - li 태그와 텍스트 사이의 간격을 늘리고 싶어서, 약간 얌체같은 방법을 선택해서 간격을 늘려보았다. 목표 설정 - ..