간단한 Todo List를 배포할 일이 생겼는데백엔드 필요 없이 정보 제공 + 24시간용 Todo List만 할거라서next js로 배포하고, 이후에 여력이 된다면 ssl까지 설정한 후에 도메인 바꾸는 것까지 해보려 한다. 프로젝트가 가벼운 대신, 해보지 않았던 것들을 많이 시도해보고자..create-next-app 없이 개발 환경을 구축하는 것부터 시작했다. 1. package.json 생성비어있는 폴더에 package.json을 먼저 생성한다.package.json 파일을 직접 작성할 수도 있고 yarn init으로 CLI를 실행할 수도 있지만yarn init -y 디폴트를 가져가려고 이렇게 했다. package.json{ "name": "my-next-app", "version": "1.0.0..
Array.prototype.forEach()배열의 요소를 하나씩 순회하며 콜백함수를 반복 호출해 실행하는 함수다.항상 undefined를 리턴하며 원본 배열을 변형시키지 않는다. forEach는 순회하는 도중에 break할 수 없다. 만약 for loop 도중 멈춰야하는 일이 있을 땐 forEach를 쓸 수 없다.return을 쓰면 현재 요소를 뛰어넘을 수는 있지만 forEach문을 멈추는 것은 할 수 없다.const items = ["item1", "item2", "item3"];const copyItems = [];// for loopfor (let i = 0; i { copyItems.push(item);}); Array.prototype.map()호출한 배열의 모든 요소를 순회하며 콜백 함수를..
for ... offor (변수선언문 of 이터러블) { ... } - 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.- 내부적으로 Iterator의 next 메서드를 호출해 이터러블을 순회하며 next 메서드가 반환한 리절트 객체의 value 프로퍼티 값을 for ... of문의 변수에 할당한다. for ... infor (변수선언문 in 객체) { ... } - 객체의 모든 프로퍼티를 순회하며 열거한다.- 순회 대상 객체의 프로퍼티뿐만 아니라 상속받은 프로토타입의 프로퍼티까지 열거한다.- Symbol을 키로한 프로퍼티는 열거하지 않는다.- 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며..
1. 서류 지원서류는 만들어둔 포트폴리오를 조금 더 손 보고 제출했다.작성 요령처럼 나와있는 부분이 있어서 추가할 부분만 추가했음. 따로 자소서는 없었다. 2. 서류 결과 서탈이 백만개라 서류 합격하면 적부인가 먼저 의심이 드는 지경에 이르렀다..히히 그래도 저렇게 축하해주시는거면 적부 아니겠지 ㅠㅠㅠ? 3. 코딩 테스트 응시Codility라는 플랫폼에서 시험 응시했는데, 사전 테스트에서 모두 영어라 오잉 하긴 했지만 본 시험때는 국문으로 전환 가능했다. 프론트엔드 부문이랑 서버 부문이랑 테스트 시간이 달랐는데, 나는 14:00 ~ 16:20 까지 총 140분이 주어졌다. 총 세 문항으로 문제를 자세히 적을 순 없지만1. 알고리즘2. JS + React3. 알고리즘 이렇게 나왔고, 알고리즘 문항은 매우매..
상반기에 코딩 테스트를 여러 번 보긴 했는데, 때마다 회고를 남기지 않아서 가물가물해져 가는 기억을 붙잡기 위해이제라도 하나씩 후기? 회고?를 남기고자 한다. 1. 서류지원서류는 항상 정해져있는 듯한 1번과 2번 문항이 있었다. 1. 현대오토에버의 해당 직무에 지원한 이유와 앞으로 현대오토에버에서 키워 나갈 커리어 계획을 작성해주시기 바랍니다. (최소 500자, 최대 1,000자 입력가능) 지원 직무 관련해서 경험한 것을 엮어서 지원 이유를 쓰고 그 경험을 더 구체화하고 깊게 쌓기 위한 계획 위주로 작성했다. 2. 지원 직무와 관련하여 어떠한 역량을(지식/기술 등) 강점으로 가지고 있는지, 그 역량을 갖추기 위해 무슨 노력과 경험을 했는지 구체적으로 작성해주시기 바랍니다. (학내외 활동/프로젝트/교육..
비트 연산자비트 연산자설명&두 비트 값이 모두 1인 경우에만 1을 반환 (AND)|두 비트값 중 하나라도 1이면 1을 반환 (OR)^두 비트값이 서로 다를 때 1을 반환 (XOR)~비트가 1이면 0으로, 0이면 1로 반전 (NOT)지정 수만큼 비트를 전부 왼쪽으로 이동 (LEFT SHIFT)>>지정 수만큼 비트를 전부 오른쪽으로 이동 (RIGHT SHIFT) & (AND 연산자)A00101100B10110110&00100100👉🏻 A, B 모두 1일때만 1을 반환한다. | (OR 연산자)A00101100B10110110|10111110👉🏻 A, B 둘 중 하나라도 1이면 1을 반환한다. ^ (XOR 연산자)A00101100B10110110^10011010👉🏻 A, B 값이 다를 때만 1을 반환..
PROBLEM뷰포트 크기를 줄여 스크롤이 생기면 일부분 배경 색상이 잘려 나오지 않는 현상이 있었다.이미지와 로그인 버튼을 감싸는 div에 h-full로 해두었다. (h-full -> height: 100%) 여기서 h-screen(height: 100vh)으로 바꾸어도 결과는 그대로였는데, 아마도 뷰포트 크기를 바꾸었을 때 바로바로 적용이 되지 않는 것이 문제였다. 문제의 이전 화면은 아래와 같았다.BEFORE import GoogleSignInButton from '@/components/pc/GoogleSignInButton';import IllustSignIn from '@/img/Illust_signIn.png';import Image from 'next/image';export default..
13으로 개발을 한 지 1년도 채 되지 않았는데, 프로젝트가 끝나자 마자 14가 발표됐다. 출시된 지 몇달 되긴 했지만 이번에 14버전을 사용해서 프로젝트를 진행할 예정이라 달라진 점을 하나씩 살펴봤다. Next.js 13, App Router우선 13으로 넘어오면서 App Router가 등장하게 되면서 라우팅 방식이 완전히 달라졌다.이전에는 라우팅을 위한 파일을 pages 폴더 내부에 생성했다. 내부에 생성한 파일명에 따라 사이트 주소가 설정되던 규칙도 바뀌었다. Page Router에서 App Router로 바뀌면서 _document, _app이 사라지고 디렉토리 단위로 적용되는 layout 개념이 생겼다.예를 들어 /pages/page.tsx를 만들면 url은 /page로 되었다. 하지만 변경 후..
