MOLLY

오랜만의 블로그 포스팅이다. 이번 주까지 너무 많은 일이 있어서 블로그 쓸 여력이 안 됐다. 이제부터 다시 꾸준하게 작성해야겠다. 오늘은 직전 심화 프로젝트 관련 내용과 배우긴 하였으나 정확히 무슨 의미인지 뇌에 남지 않은 내용 위주로 담으려고 한다. 1.로그인, 회원가입 페이지 | 비밀번호 입력할 때마다 UI 크기 변경됨 2. 이메일, 비밀번호 | 입력 필드 초기화, 텍스트 토글 기능 3. Git Pull 안 됨 | git pull --rebase로 해결 4. BaaS (Backend as a Service) 5. CI/CD 6. MVP (Minimum Viable Product) 7. 금일 소감 1.로그인, 회원가입 페이지 | 비밀번호 입력할 때마다 UI 크기 변경됨 기능 구현을 완료..

며칠 전에 이런 글을 봤다. 어떤 게 재밌어지는 순간은 '내가 그것을 잘하게 되기 시작했을 때'라는 글이다. 얼마 전까지만 해도 나는 코딩이 어려운 걸 넘어서 '내가 정말 재밌게 이걸 하는 게 맞나' 싶은 생각이 계속 들었다. 그러던 와중에 본 글이 바로 저 글이다. 생각해 보니 내가 그간에 해온 것들과 내 경쟁력이 된, 잘하는 것들이 처음부터 재밌지는 않았다. 보통은 어려웠고 또 재미가 없었다. 특히 내가 재작년에 시작했던 운동은 심각했다. 너무 어렵고, 재미도 없고, 열심히 하고는 있는데 잘하고 있는 건지 정말 전혀 모르겠었다. 하루에 3시간 ~ 3시간 30분씩 운동하고 끝나서 집에 가면 곧장 잠들기 일쑤였다. 운동 이후엔 아무것도 못할 정도여서 정말 잠만 잤다. 첫 3개월까지는 헬스장 직원분들께 들..

1.인스턴스(instance) 2. Pull Request (PR) 3. REST API 4. 금일 소감 1.인스턴스(instance) : 객체 지향 프로그래밍(OOP)에서 클래스(class)에 소속된 개별적인 객체 자바스크립트에서 클래스는 특정한 타입의 객체를 생성하기 위한 일종의 템플릿이라고 할 수 있다. 예를 들어, 만약 '자동차'라는 클래스가 있다면, 이 클래스는 자동차가 가져야 할 기본적인 속성(색상, 모델, 브랜드 등)과 기능(운전하기, 정지하기 등)을 정의한다. 이제 여러분이 특정 자동차를 만들고 싶다고 할 때, 예를 들어 "빨간색 테슬라 모델 S"를 생성하고 싶다면 '자동차' 클래스를 사용해 이 특정 자동차의 인스턴스를 만들 수 있다. 이 인스턴스는 '자동차' 클래스의 속성..

1. Next.js | npm run dev 실행이 안 될 때 2. Code Splitting (코드 스플리팅) 3. 도메인 4. API (Application Programming Interface) 5. REST API 6. HTML | 자주 사용하는 태그 7. 금일 소감 1. Next.js | npm run dev 실행이 안 될 때 프로그래밍 + 인터넷 창을 많이 띄워두다 보니 노트북이 너무 느려져서 이번에 맥북으로 노트북을 새로 샀다. 도착하기 전에 Next.js npm run dev로 개발자 모드를 실행했을 때, 안 열리는 적이 많았어서 컴퓨터 CPU 이슈로 구동이 안 될 때는 어떻게 해야 하는지에 대한 해결책을 튜터님이 알려주셔서 기록해두려 한다. 그럴 땐 위 사진과 같이 .Ne..

1. Authentication 구현하는 법 - Authentication - Authorization 2. 금일 소감 1. Authentication 구현하는 법 Authentication 웹 애플리케이션에 기본 이메일-비밀번호 인증을 추가하는 프로세스다. 이 방법은 기본적인 수준의 보안을 제공하지만 일반적인 보안 위협에 대한 보호를 강화하려면 OAuth 또는 비밀번호 없는 로그인과 같은 고급 옵션을 고려하는 것이 좋다. 사용자가 로그인 양식을 통해 자격 증명을 제출한다. 이 양식은 서버 작업을 호출한다. 인증에 성공하면 프로세스가 완료되어 사용자가 인증에 성공했음을 나타낸다. 인증에 실패하면 오류 메시지가 표시된다. 사용자가 자격 증명을 입력할 수 있는 로그인 양식 코드 import { ..

1. Data Fetching 2. Caching Data 3. Revalidating Data 4. 금일 소감 1. Data Fetching 1) async와 await를 fetch와 함께 사용하여 데이터를 가져올 수 있다. async function getData() { const res = await fetch('https://api.example.com/...') // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error('Failed to f..

Next.js 로고부터 해서 공식 사이트, 그리고 서버 실행했을 때 그려지는 UI까지 '멋'이 없는 게 없다.. 에러도 잘 뜨고 끄떡하면 서버 종료 후 다시 켜야 하는 불편함이 있긴 하지만 그마저도 왠지 모를 간지로 인해 모두 상쇄가 된다.... 폴링 인 럽 해버린 Next.js,, 핵심 요약 및 정리, 오늘부터 시작해 보자 1. Next.js란? 2. Next.js 자동 설치 명령 3. 프로젝트 구조 4. Routing 기본 5. 금일 작성한 코드 6. 금일 소감 1. Next.js란? : Full-stack 웹 애플리케이션을 구축하기 위한 React 프레임워크 React 구성 요소를 사용하여 사용자 인터페이스를 구축하고, Next.js를 사용하여 추가 기능과 최적화를 수행한다. 내부적으로..

1. 프레임워크와 라이브러리 | 공통점과 차이점 2. TTI (Time to Interactive) 3. TTV (Time to View) 4. Hydration (하이드레이션) 5. Routing (라우팅) 6. 금일 소감 1. 프레임워크와 라이브러리 | 공통점과 차이점 : 둘 다 소프트웨어 개발에서 코드의 재사용성을 높이고 개발 시간을 단축하기 위해 사용됨 이 두 개념을 흔히 집 짓는 과정으로 비유하곤 한다. 예시를 통해 차이점을 쉽게 이해해 보자 위 두 개념의 차이를 '집을 짓기 위한 과정'으로 비유하면, 프레임워크는 모델하우스를 짓는 것으로 볼 수 있고 라이브러리는 구매한 재료로 가구를 조립하는 것으로 볼 수 있다. 따라서, 프레임워크는 통제권을 프레임워크가 가지고 있고, 라이브러리는..

1. join 2. while 3. for...in 4. trim 5. Event.preventDefault 6. 오늘 작성한 코드 7. 금일 소감 공부할 게 많은 관계로 오늘은 코드카타를 건너뛸 예정이다 ㅠㅠ 오늘은 모르는 개념 위주로 정리하려고 한다. 1. join() : 배열의 모든 요소를 쉼표나 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환 배열에 항목이 하나만 있는 경우, 해당 항목은 구분 기호를 사용하지 않고 반환된다. 문법 join() join(separator) [매개변수] separator Optional : 배열의 인접한 요소의 각 쌍을 구분하는 문자열 생략되면 배열 요소는 쉼표(",")로 구분된다. 반환 값 : 배열의 모든 요소들을 연결한 하나의 문자열을 ..

1. [09:00~10:00] 코드카타 문제 풀이 - 문자열 다루기 기본 2. parseInt() 3. toUpperCase() 4. 오늘 작성한 코드 5. 금일 소감 1. [09:00~10:00] 코드카타 문제 풀이 - 문자열 다루기 기본 문제 설명 : 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성해보자. 예를 들어, s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 된다. 제한 사항 : s는 길이 1 이상, 길이 8 이하인 문자열이다. s는 영문 알파벳 대소문자 또는 0부터 9까지 숫자로 이루어져 있다. 내가 작성한 코드 // s의 길이가 4 or 6인지 체크 // 문자가 들어가면 False, 아니면 Tru..