MOLLY

0. 문제 설명 및 제한사항1. 작성한 코드2. 풀이 및 의사코드3. 소감  0. 문제 설명 및 제한사항 그렇게 어려운 문제는 아니었다. 점수 배열을 내림차순(큰 점수순)으로 정렬하여 k번째 점수까지 끊고,배열 숫자 하나 돌 때마다 현재까지 나온 수 중에 가장 작은 수를 계산해서배열에 넣은 것을 return 하면 됨 대충 어떻게 하는지는 알겠었지만 정확하게 의사코드를 작성하지 않고 코드를 작성하면 코드 짜다가 헷갈리거나 헤매는 경우가 많아서 의사코드를 최우선으로 작성하려고 하는 중이다. 그리고 메서드 사용법을 계속 익혀야겠다.어떤 메서드를 써야겠다는 것은 알겠는데 사용법이 헷갈린 경우가 있어서 말이다. 틈틈이 MDN 문서를 보든가 자주 출제되는 건 정리해서 공부하는 게 맞는데 잊는 게 문제다,,, 이번엔..

[들어가며] 저장 방법에 따른 데이터베이스 종류0. TL;DR1. 계층형 데이터베이스2. 네트워크형 데이터베이스3. 키 - 값 데이터베이스4. 관계형 데이터베이스    [들어가며] 저장 방법에 따른 데이터베이스 종류데이터베이스 종류에는 크게 4가지가 있다. 하나씩 자세히 살펴볼 것이다.계층형 데이터베이스네트워크형 데이터베이스키 - 값 데이터베이스관계형 데이터베이스  0. TL;DR계층형 데이터베이스: 데이터가 트리 구조로 구성돼 있고, 반복적인 부모 - 자식 관계 정보를 표현함네트워크형 데이터베이스: 데이터를 노드와 집합구조로 표현키 - 값 데이터베이스: NoSQL의 한 종류로, key - value를 1:1 대응해 데이터를 저장함관계형 데이터베이스: 데이터를 테이블 형태로 저장하며 열과 행으로 구성우리..

0. TL;DR1. 데이터와 정보 차이2. 데이터베이스란?3. 데이터베이스 관리 시스템 | DBMS  0. TL;DR데이터: 단순히 현실 세계를 관찰하거나 측정해서 수집한 사실 or 값정보: 데이터를 목적에 맞게 처리해, 의미를 가지는 단위로 만든 것데이터베이스(DB): 논리적으로 연관된 데이터를 모아 일정한 형태를 저장해 놓은 것으로, 중복 데이터를 최소화해 조직의 목적에 맞게 관리함데이터베이스 관리 시스템(DBMS): 데이터 입력 / 수정 / 삭제 / 검색 기능 제공  1. 데이터와 정보 차이데이터: 단순히 현실 세계를 관찰하거나 측정해서 수집한 사실 or 값정보: 데이터를 어떤 방식으로 처리해, 의미를 가지는 단위로 만든 것. 즉, 의사결정에 유용하게 활용할 수 있는 결과물정보처리: 데이터에서 정보..

0. 파일 입출력 (I/O)1. 예외 처리2. 예외 발생시키기  파이썬에서 파일 입출력과 예외 처리는 데이터를 저장하고 읽어오는 작업 및 프로그램의 오류를 다루는 중요한 기능이다. 파일 입출력과 예외 처리의 핵심 개념과 방법을 알아보자.  0. 파일 입출력 (I/O)파일 열기파일을 열 때는 open() 함수를 사용한다. 이 함수는 파일 객체를 반환하며, 다양한 모드로 파일을 열 수 있다.모드(Mode):'r': 읽기 모드 (기본값)'w': 쓰기 모드 (파일이 없으면 새로 생성, 있으면 덮어씀)'a': 추가 모드 (파일이 없으면 새로 생성, 있으면 끝에 추가)'b': 바이너리 모드 (예: 'rb', 'wb')'x': 배타적 생성 모드 (파일이 없을 때만 생성)# example.txt 파일을 읽기 모드로 엶..

[들어가며] 알아둬야 할 개념0. TL;DR1. 복잡한 반복문을 함수형 도구 체인으로 바꾸는 방법2. 반복문을 함수형 도구로 리팩토링3. 체이닝 디버깅을 위한 Tip    [들어가며] 알아둬야 할 개념시퀀스: 컴퓨터 과학 & 프로그래밍에서 ‘특정한 순서대로 내열된 데이터’를 표현하는 자료구조 or 데이터 유형데이터의 순서가 중요각 요소가 그 순서에 따라 접근할 수 있는 특성을 갖고 있음e.g. 자바스크립트에선 배열, 문자열이 해당항등 함수: 인자로 받은 값을 그대로 return 하는 함수아무 일도 하지 않지만, 아무것도 하지 않아야 할 때 유용하게 사용 가능  0. TL;DR체인: 여러 단계를 조합하는 것원하는 결과에 가까워지도록 데이터를 한 단계씩 변환기존에 있던 반복문을 함수형 도구 체인으로 리팩토링..

0. 리스트1. 튜플2. 집합 자료형 | set3. 딕셔너리(Dictionary)  내가 사용할 자료들의 형태(Type)를 고민 → 자료형 결정 후, 담기 데이터 타입에는 리스트, 튜플, 집합, 딕셔너리가 있다.# 리스트 (대괄호)data_list = ["A", "a", 1, "@"]data_list # 출력 결과: ['A', 'a', 1, '@']# 튜플 (소괄호)data_tuple = ("A", "a", 1, "@")data_tuple # 출력 결과: ('A', 'a', 1, '@')# 집합 (중괄호)data_set = {"A", "a", 1, "1", "@"}data_set # 출력 결과: {'1', 1, '@', 'A', 'a'} # 딕셔너리 (중괄호)data_dictionary = {"A": "..

0. 터틀 라이브러리1. 문자열(string)과 문자열 조작 명령어  0. 터틀 라이브러리이 챕터에서는 라이브러리를 불러오고, 사용하는 방법을 아는 것이 핵심이다.도서관의 책을 하나의 module(모듈)이라고 한다면, 내가 원하는 책 여러 권을 언제 어디서든 쓸 수 있게끔 하고 싶다고 가정해 보자. 그러려면 책들이 있는 도서관(library)을 불러와야 하는데, 이러한 라이브러리를 불러오는 명령어를 import라고 한다. # 기본 골격import turtleturtle.명령어(값)    1. 문자열(string)과 문자열 조작 명령어 배열에서 양수로 n번째 값을 출력할 때,0, 1, 2, 3, 4와 같은 식으로 수를 세는 건 알고 있었지만  음수로 수를 셀 때는-1, -2, -3, -4처럼 0이 아니고 ..

0. while: 조건 반복1. for 반복 (iteration, 자료 순회)2. for문과 while문의 차이3. for ~ range ()4. continue, break  0. while: 조건 반복# 기본 골격while 반복조건(참): 수행할 명령# 예시i = 1while i number: print("Up") elif answer > number: print("Down") elif answer == number: print("Right") # 출력 결과: 예상 숫자를 입력해 보세요:  1. for 반복 (iteration, 자료 순회): 주어진 자료를 순회하는 for 반복  # 기본 골격for 변수명 in 리스트명: 수행할 명령# 예시a = ["호", "랑", "이"]for b in a:..

0. 전반적인 소감1. 프로그래밍 언어의 종류2. 컴퓨팅 사고력의 과정3. 파이썬 기초4. 알고리즘 & 의사코드    0. 전반적인 소감CS와 AI에 대한 강의를 듣고 있다. 전공생과의 차이를 줄이기 위해서도, 개발에 대한 베이스를 다지기 위해서도 꼭 필요한 내용이라 강의를 결제하여 열심히 듣는 중이다. 정말 대학 수업처럼 개강되는 시기가 파트마다 다른데, 지금까지 개강된 파트만 해도 벌써 60시간이 넘는다. 수학까지 다루다 보니 확실히 시간이 길 수밖에 없는 것 같긴 하다. 아직 초반이지만 내용 굉장히 재밌다 ㅎㅎ ; (세미콜론): 한 줄 안에 2줄에 해당되는 영역으로 쓰고 싶을 때 사용True: 1, False: 0 예전에 부트캠프 완전 초반에 코드에서의 세미콜론이 어떤 걸 의미하는지 튜터님, 그리고..

[들어가며] 알아둬야 할 개념0. TL;DR1. 카피-온-라이트 리팩토링2. 함수를 return 하는 함수   [들어가며] 알아둬야 할 개념일급 함수: 함수가 다른 데이터 타입(숫자, 문자열 등)과 동일하게 취급되는 것⇒ 함수를 변수에 할당하거나, 함수의 인자로 전달, 함수에서 반환할 수 있는 함수를 의미. 자바스크립트에서 함수는 일급 객체다.고차 함수: 함수를 인자로 받거나 함수를 반환하는 함수[차이점] 일급은 인자로 ‘전달’할 수 있음. 고차는 함수가 다른 함수를 인자로 ‘받을’ 수 있음  0. TL;DR고차 함수 사용 시, 장점패턴 or 원칙을 코드로 만들 수 있음 ⇒ 중복된 많은 코드를 없애줌 (사용하지 않으면 일일이 수작업 해야 함)함수를 리턴하는 함수를 만들 수 있음단점: 가독성이 안 좋을 수..

[들어가며] 알아둬야 할 개념0. TL;DR1. 추상화 벽2. 작은 인터페이스3. 편리한 계층4. 호출 그래프   [들어가며] 알아둬야 할 개념소프트웨어 설계(software design): 코드를 만들고, 테스트하고, 유지 및 보수하기 쉬운 프로그래밍 방법을 선택하기 위해 미적 감각을 사용하는 것계층형 설계(stratified design): 바로 아래 계층에 있는 함수로 현재 계층의 함수를 구현해, 소프트웨어 코드를 계층으로 구성하는 기술  0. TL;DR추상화 벽: 신경 쓰지 않아도 되는 부분을 나누고, 계층 간의 역할과 책임을 명확히 하는 것[효과] 팀 간 커뮤니케이션 비용을 줄이고, 복잡한 코드를 명확히 함작은 인터페이스: 추상화 벽에 있는 코드를 최소화하고, 새로운 기능은 추상화 벽 위 계층에..

0. [프로그래머스] Lv.2 피보나치 수1. 해결한 코드2. 피보나치 수열에 대한 설명  0. [프로그래머스] Lv.2 피보나치 수 요즘은 레벨 1, 2 위주로 프로그래머스 문제를 보고 있는데, 오늘은 프로그래머스 설명만으론 이해하기 어려운 '피보나치 수' 문제를 풀게 되었다. 문제 이해가 안 되니 코드 짜는 것도 도통 감이 안 와서 일단 정답을 봤다. 여러 풀이가 있었지만 가장 간단하면서 보기 좋은 코드를 선택해 코드 분석을 하였다. 그 내용은 아래와 같다.  1. 해결한 코드function solution(n) { let fib = [0, 1]; // 피보나치 수는 0과 1로 시작하므로 첫 두 항을 초기화 for (let i = 2; i  처음 보는 개념이 늘 바로 이해되면 좋겠지만, ..

1. replace() 메서드2. JWT | Access Token과 Refresh Token의 존재 이유3. JWT | Access Token과 Refresh Token의 개념과 관리 전략4. 쿠키, 세션, 토큰의 개념5. 유닛 테스트의 필요성6. 프론트엔드 에러 모니터링 및 로그 데이터 수집의 필요성  1. replace() 메서드: 문자열에서 특정 부분을 다른 문자열로 교체하는 데 사용원본 문자열을 변경하지 않고, 변경된 새로운 문자열을 반환함. replace()를 활용하면 문자열의 특정 부분을 효율적으로 대체할 수 있음  기본 사용법const str = "Hello, world!";const newStr = str.replace("world", "JavaScript");console.log(new..

0. TL;DR1. 방어적 복사는 원본이 바뀌는 걸 막아준다2. 방어적 복사 구현하는 법3. 방어적 복사를 사용하는 실제 사례4. 카피-온-라이트 & 방어적 복사 비교   Ch7 | 신뢰할 수 없는 코드를 쓰면서 불변성 지키기[들어가며] 이 챕터에서 배울 핵심 내용*레거시 코드나 신뢰할 수 없는 코드로부터 내 코드를 보호하기 위해 방어적 복사 만들기얕은 복사, 깊은 복사의 차이카피-온-라이트 & 방어적 복사를 언제 사용하면 좋을지 🍯 레거시 코드 (legacy code): 오래 전에 만든 것으로, 지금 당장 고칠 수 없어서 그대로 사용해야 하는 코드  0. TL;DR방어적 복사: 신뢰할 수 없는 코드 or 데이터가 안전한 코드로 들어오고 나갈 때마다 복사본을 만듦 → 들여보내거나 내보냄불변성을 구현하는..

0. TL;DR1. [원칙] 암묵적 입력과 출력은 적을수록 좋다.2. [원칙] 설계: 엉켜있는 코드를 푸는 것3. [적용] 함수를 분리해 더 좋은 설계 만들기   0. TL;DR암묵적 입력과 출력은 ‘인자’와 ‘리턴값’으로 바꿔 없애는 게 좋음암묵적 입력: 인자가 아닌 모든 입력암묵적 출력: 리턴값이 아닌 모든 출력‘설계’란 엉켜있는 코드를 푸는(분리하는) 것. 풀려있는 건 언제든 다시 합칠 수 있음코드를 분리해 각 함수가 하나의 일만 하면, 개념을 중심으로 쉽게 구성 가능  들어가기 전, 가벼운 Q&A를 살펴보자.Q1. 코드 라인 수가 적어야 좋은 코드인가?A. 코드 라인 수만으로 유지보수하기 좋은 코드인지 판별하기는 어렵다.측정할 수 있는 여러 가지 지표 중 하나는 ‘함수의 크기’다. 작은 함수는 이..

0. TL;DR1. ~ (Bitwise NOT 연산자)2. ~~ (Double Bitwise NOT 연산자)3. >>> (부호 없는 오른쪽 시프트 연산자)   코딩 테스트 문제를 풀고 다른 사람의 풀이는 어떨지 궁금해서 봤다. 위와 같이 처음 보는 연산자를 사용해서 문제를 풀었길래 신기해서 ~~ 연산자에 대해서 공부해봤다.   0. TL;DR~: 비트 단위 NOT 연산을 수행하여 비트를 반전시킴~~: 숫자의 소수 부분을 제거하고, 정수 부분만 반환함~와 ~~ 연산자는 비트 연산과 관련된 특정 작업이나 최적화된 정수 변환 등에 유용하게 사용될 수 있음 >>>: 피연산자의 이진 표현을 오른쪽으로 시프트하며, 부호에 상관없이 빈 자리를 0으로 채움부호 없는 정수로 처리하여 음수도 양수처럼 시프트함주로 부호를 ..

0. TL;DR1. 액션, 계산, 데이터를 나눠서 생각하기2. 쿠폰 보내기 예제3. 액션의 다양한 형태    0. TL;DR함수형 프로그래머는 액션, 계산, 데이터를 구분액션: 외부 세계에 영향을 주거나 받는 것 [함수]계산: 입력값을 출력값으로 만듦. 어떤 걸 결정, 계획함 [함수]데이터: 이벤트(일어난 일)에 대해 기록한 사실 [기본 데이터 타입]액션 순서로 선호하기  1. 액션, 계산, 데이터를 나눠서 생각하기액션: 외부 세계에 영향을 주거나 받는 것 [함수]실행 시점이나 횟수 혹은 둘 다에 의존함수형 프로그래밍에서 가장 중요!순서(언제 실행되는지), 반복(얼마나 실행되는지)액션을 부르는 함수가 있다면 그 함수도 액션이 됨 ⇒ 액션이 코드 전체로 퍼져나감순수하지 않은 함수, 부수 효과 함수라고도 ..

0. TL;DR1. 컴퓨터2. 전송 매체3. 네트워크 장비4. 정리  오늘은 네트워크의 기초 관련한 좋은 글을 읽게 되어 그 내용을 요약하려고 한다.정말 일목요연하게 핵심 위주로 설명을 잘해두셔서 많은 부분을 그대로 작성하여 재구성하였다. 원본 링크: https://better-together.tistory.com/39   네트워크: 컴퓨터와 컴퓨터를 연결하여 데이터를 보내고(송신) 받을(수신) 수 있게 하는 시스템 (= 데이터 통신, 컴퓨터 통신)  네트워크의 구성 요소 3가지 2대 이상의 컴퓨터 (컴퓨터 아이콘)데이터가 이동하는 통로인 전송 매체 (화살표 아이콘)데이터의 이동을 돕는 네트워크 장비 (클라우드 아이콘): 데이터가 정확한 수신지에 도착할 수 있도록 도와주는 네트워크 장비들로 구성되어 있음..

0. TL;DR 1. Custom Hook: 컴포넌트 간 로직을 공유할 때 사용 2. 컴포넌트로부터 Custom Hook 추출하기 3. 작명 규칙 4. Custom Hook은 state 자체를 공유하는 게 아니라 state 저장 로직을 공유함 5. Custom Hook 작명법 6. Custom Hook으로 Effect를 감싸는 것이 종종 유용한 이유 헐 이게 대체 뭐야?! 아아.. 모르는가? 이건 바로 'Custom Hook’이라고 하는 것이다. Custom Hook 최고!!!!! 0. TL;DRCustom Hook을 사용하면 컴포넌트 간 로직을 공유할 수 있음Custom Hook의 이름은 use 뒤에 대문자로 시작되어야 함Custom Hook은 state 자체가 아닌 state 저장 로직만 공유함Cus..

0. TL;DR1. 불필요한 Effect를 제거하는 방법2. 비용이 많이 드는 계산 ⇒ 캐싱 처리3. prop 변경 시 모든 state 초기화4. prop이 변경될 때 일부 state 조정5. 이벤트 핸들러 간 로직 공유6. 데이터 Fetching할 때 고려할 점   Effect가 필요하지 않을 수도 있다 (You Might Not Need an Effect)외부 시스템이 관여하지 않는 경우 (예를 들어 일부 props 또는 state가 변경될 때 컴포넌트의 state를 업데이트하려는 경우), Effect가 필요하지 않다.  0. TL;DR비용이 많이 드는 계산을 캐시하려면 useEffect 대신 useMemo를 추가하자전체 컴포넌트 트리의 state를 초기화하려면 다른 key를 전달하자컴포넌트가 표시되..

0. TL;DR1. ref로 노드 가져오기2. 직접 만든 컴포넌트의 DOM 노드에 접근하기3. React가 ref를 부여할 때  Effect로 동기화하기 (Synchronizing with Effects)Effect를 사용하면 렌더링 후, 특정 코드를 실행하여 React 외부의 시스템과 컴포넌트를 동기화할 수 있다.  0. TL;DREffect는 특정 상호작용이 아닌 렌더링 자체에 의해 발생코드가 다시 실행되길 원하지 않는 경우, Effect 내부 코드를 수정하여 의존성 배열에 해당 종속성이 필요하지 않도록 만들자Effect를 사용하면 컴포넌트를 외부 시스템(타사 API, 네트워크 등)과 동기화 가능Effect는 모든 렌더링(초기 렌더링 포함) 후에 실행됨Effect가 다시 마운트로 인해 중단된 경우 클..

0. TL;DR1. ref로 노드 가져오기2. 직접 만든 컴포넌트의 DOM 노드에 접근하기3. React가 ref를 부여할 때 Ref로 DOM 조작하기 (Manipulating the DOM with Refs)React는 렌더링 결과물에 맞춰 DOM 변경을 자동으로 처리하기 때문에 컴포넌트에서 자주 DOM을 조작해야 할 필요는 없다.   그럼 뭐 어쩔 때 사용하냐특정 노드에 포커스를 옮기거나스크롤 위치를 옮기거나위치와 크기를 측정하기 위해서 React가 관리하는 DOM 요소에 접근해야 할 때⇒ React는 이런 작업을 수행하는 내장 방법을 제공하지 않기 때문에, DOM 노드에 접근하기 위한 *ref*가 필요  0. TL;DR한 컴포넌트에서 하나 이상의 ref를 가질 수 있다.ref는 보통 포커싱, 스크롤..

0. TL;DR1. ref 사용하는 법2. ref와 state의 차이3. refs를 언제 사용해야 할까?   Ref로 값 참조하기 (Referencing Values with Refs)0. TL;DR컴포넌트가 일부 정보를 “기억”하게 하고 싶지만, 해당 정보가 렌더링을 유발하지 않도록 하고 싶을 때 Ref를 사용하자!ref는 읽거나 변경할 수 있는 current라는 프로퍼티를 호출할 수 있는 자바스크립트 순수객체ref를 변경하더라도, 리렌더링 되지 않는다.렌더링 중에 ref.current를 읽거나 변경하지 말자. 건들면 컴포넌트를 예측하기 어렵게 된다.  1. ref 사용하는 법// (1) useRef를 import 해서 ref 추가import { useRef } from 'react';export de..

0. 수정된 코드 및 과정 요약1. 코드에서 Column name을 수정2. user_id와 study_place_id에 대한 고유성(uniqueness)이 설정되지 않아, .single() 대신 .limit(1)을 사용하여 결과를 하나로 제한해 해결3. 세션이 없을 경우 스크랩 여부를 확인하는 요청을 보내지 않고, 스크랩 상태를 false로 설정4. 결론  에..?.. 제가 수척해진 농담곰으로 보이시나요?..  해결은 했지만 6시간 삽질해서 햄듭니다..   한 장소의 스크랩 여부가 다른 장소와도 동일하게 적용되는 문제 해결0. 수정된 코드 및 과정 요약    [원인] 전에 Supabase 컬럼을 설정할 때 id가 user_id와 study_place_id로, 총 2가지가 들어가는데 어떤 id에 기준(u..

1. 노베이스에서 토스 합격까지 (출처: Eddy)2. Managing State  |  Reacting to Input with State3. Managing State  |  Choosing the State Structure4. Managing State  |  Sharing State Between Components5. 금일 소감  1. 노베이스에서 토스 합격까지 (출처: Eddy) https://velog.io/@eddy_song/retrospective 위 글이 꽤 와닿아서 갖고 와봤다. 위 사진은 내가 전에 부트캠프에서 프로그래밍을 배우다가 그만둬야 하나 싶은 생각이 들던, 한창 힘들 때 봤던 내용의 그림이다. 유명한 글이긴 하나, 링크 속 블로그에서도 그 내용이 나와있어서 좀 놀랐다. 글..

1. 수정한 댓글이 새로고침 해야만 반영되는 이슈  ⮕ 서버에서 댓글 수정을 완료하고 받아온 최신 댓글 데이터를 이용해 화면에 표시되는 댓글 목록을 업데이트2. [프로필 정보] - [유형]이 안 보임  ⮕ NextUI Select의 defaultselectedkeys 속성이 적용되지 않아서 placeholder로 대체해 해결3. 금일 소감  1. 수정한 댓글이 새로고침 해야만 반영되는 이슈  ⮕ 서버에서 댓글 수정을 완료하고 받아온 최신 댓글 데이터를 이용해 화면에 표시되는 댓글 목록을 업데이트몰랐는데 수정하고 나서 수정되었다는 토스트 알림도 안 뜨고, 수정한 댓글이 새로고침 해야만 반영이 되고 있었다. 토스트 알림은 코드를 작성하지 않아서 안 떴던 것수정한 댓글이 새로고침 해야만 반영되는 건 댓글을 수..

1. Immer2. React에서 State 변형을 권장하지 않는 이유 5가지3. State의 배열 업데이트하는 법4. 금일 소감  오늘은 Study 때 내가 맡지 않았던 React 공식 문서 파트를 읽었다. 약간 밀렸어서 직전 스터디까지의 분량을 후루룩 읽었다. 새롭게 알게 된 부분과 궁금했던 부분에 대한 호기심이 풀려서 그 내용을 위주로 작성해 보려 한다!  1. Immer : React에서 불변성(immutable state)을 관리하기 위한 라이브러리Immer는 상태 업데이트 로직을 간단하고 읽기 쉬운 방식으로 작성할 수 있도록 해, 복잡한 객체의 불변 업데이트를 간단한 방법으로 처리할 수 있다. 기본적인 useState 훅과 유사하게 작동하며, 상태를 불변성을 유지하면서 업데이트할 수 있도록 도..

1. Adding Interactivity | Responding to Events2. Adding Interactivity | State: A Component's Memory3. Adding Interactivity | Render and Commit4. Adding Interactivity | State as a Snapshot5. 금일 소감 1. Adding Interactivity | Responding to Events0. TL;DR이벤트 핸들러의 이름은 handle 뒤에 이벤트 이름을 붙이는 것이 일반적규칙에 따라 이벤트 핸들러 prop은 on으로 시작해야 하며 카멜케이스로 작성e.stopPropagation(): 위의 태그에 연결된 이벤트 핸들러의 실행을 중지e.preventDefault(..

1. React Thunk2. Promise3. React Query4. 금일 소감    1. React Thunk : Redux의 *미들웨어로, 비동기 작업(예: API 호출)을 쉽게 처리할 수 있도록 도와줌 Thunk는 액션 크리에이터가 단순히 액션 객체를 반환하는 대신 함수를 반환할 수 있게 해준다.  * 미들웨어?정의: 요청과 응답 사이에서 '중간 역할'을 하는 코드이유: 요청/응답 처리, 코드 재사용, 유지보수성 향상예시: 요청 로깅, 인증, 데이터 검증 등  TL;DR정의: Redux 미들웨어로, 액션 크리에이터에서 함수를 반환할 수 있게 해줌이유: 비동기 작업 처리, 복잡한 액션 로직 분리, 상태와 디스패치 접근 가능사용법: Thunk 설치 및 미들웨어 적용, 비동기 액션 크리에이터 작성, ..

1. 엘리먼트(Element)와 노드(Node)의 차이점2. DOM(Document Object Model) 요소와 React의 작동 원리2-1) DOM(Document Object Model)2-2) React의 작동 원리3. 가비지 컬렉터(Garbage Collector)4. 금일 소감 1. 엘리먼트(Element)와 노드(Node)의 차이점엘리먼트와 노드는 웹 개발에서 중요한 개념이며, 둘은 HTML 문서의 구조와 콘텐츠를 정의하고 설명하는 데 중요한 역할을 한다. 그러나 이 둘은 서로 다른 의미를 가지고 있다.  TL;DR노드(Node): HTML 문서의 기본 단위로, 엘리먼트 노드, 텍스트 노드, *어트리뷰트 노드 등 다양한 종류가 포함됨엘리먼트(Element): HTML 태그로 정의된 문서의 ..

1. Markup(마크업)2. Describing the UI  |  Passing Props to a Component3. Describing the UI  |  Conditional Rendering4. 금일 소감    프로그래밍은 법학처럼 나오는 단어, 단어마다의 의미를 정확히 모르면 이해가 잘 안 가는 듯하다. 같은 내용을 보더라도 저번에 읽었을 땐 분명히 이해했다고 생각했는데, 나중에 다시 보면 정말 기초적인 개념의 의미조차 모르는 경우가 많다.    오늘도 위 사진처럼 공식 문서를 읽다가 나온 개념인 markup이 정확히 어떤 의미인지 모르겠어서 해당 개념을 알아보았다.  1. Markup(마크업) 뜻 : 텍스트를 정의하고 표현하기 위해 고안된 것 하이퍼텍스트 마크업 언어(HyperText M..

1. Describing the UI  |  Your first component2. Describing the UI  |  Importing and exporting components3. 금일 소감  1. Describing the UI  |  Your first component0. TL;DR컴포넌트: UI를 구성하는 코드 단위, 노드: DOM의 기본 구성 요소[React Component vs. DOM Node] Component: ‘재사용 가능’한 UI 조각(’함수’ or 클래스 형태), Node: ‘HTML’ 요소(HTML 덩어리 정도로 이해해도 좋을 듯)즉, 컴포넌트와 노드의 차이는 태그명 맨 앞 글자의 대소문자 차이! 컴포넌트는 대문자, 노드는 소문자로 시작한다. 1. React Compo..

1. Debugging | TypeError: Cannot set properties of undefined (setting 'toggle')2. This3. Binding(바인딩)4. 고차함수(Higher-Order Function)5. Map과 Set  개념과 차이6. API와 메서드의 차이7. Data Type | 기본형, 참조형8. 얕은 복사(Shallow Copy)9. 유사배열객체(Array-like Object)  1. Debugging | TypeError: Cannot set properties of undefined (setting 'toggle')  위와 같은 에러가 뜨길래 '엥? 토글 세팅이 뭐가 문제지?' 싶어서 토글 관련 코드를 모두 알아봤다.    위처럼 정말 샅샅이 찾아봤는데..

1. [회고] 4개월 부트캠프, 어떤 일이 있었나?2. [계획] 앞으로는 어떻게 할 것인가3. User Test 전, SPL4. 댓글 작성 시, 실시간 반영 안 됨5. 헷갈리거나 몰랐던 내용 정리(1) 스키마(schema)(2) 클래스와 인스턴스(3) JWT (JSON Web Token)  1. [회고] 4개월 부트캠프, 어떤 일이 있었나?  오늘은 내 얘기를 좀 해볼까 한다. 만으로 4개월 동안 진행된 부트캠프가 종료되며 드디어 끝마쳤다는 시원함과 함께 내가 원하는, 진정 목표로 하는 회사에 입사하기 위해 어떻게 해야 하는가? 에 대한 약간의 불안감이 급습했다. 이미 부트캠프 1개월차부터 지금의 상황을 예상하였고 이를 위해 최종 때 혼자서 개인 프로젝트를 선택한 이유도 있다(최종 프로젝트로 개인 프로젝..

1. 우수 TIL로 선정되었다! 2. 네이버 Map API 사용하다가 카카오 Map API로 전향하여 공부 장소에 따른 Marker 구현 3. POST https://njltrjqccgmfpfdlyldi.supabase.co/rest/v1/user_profiles?on_conflict=email 409 (Conflict) ➡️ if문으로 프로필이 존재하지 않을 경우도 추가해 해결 4. 카테고리 클릭 시, URL에 장소 데이터 저장 (동적 Routing 없이 구현) 5. 카테고리를 클릭했을 때, 바로 장소 정보가 나타나지 않음 ➡️ Loading State를 만들어, 동기적으로 작동하게 해서 해결 6. 카테고리 클릭 시, 깜빡이며 정보 불러옴 & 모든 데이터 불러올 때도 있음 ➡️ 코드를 동기..

1. Warning: Each child in a list should have a unique "key" prop. ➡️ 부모 컴포넌트의 map 돌리는 곳 최상위 태그에서 key prop 전달해 해결 2. [다크모드 Error] Warning: Extra attributes from the server: class,style ➡️ 현재 마운트 상태를 확인하는 State 추가해 해결 3. Encountered two children with the same key, `faded`. ➡️ `faded` key 속성을 제거해 해결 4. commentsData 객체를 Comment[] 타입으로 강제 변환하려 발생한 Error ➡️ runtime에 데이터를 검증하는 코드 추가해 해결 5. GET h..

1. pathname과 split을 이용해 URL의 UUID 추출해 상세정보 가져옴 2. 작성된 댓글 데이터가 안 가져와짐 ➡️ 장소 정보를 가져오는 useEffect 안에 댓글 정보 받아오는 코드 넣음 3. 프로필 이미지와 닉네임만 수정이 안 됨 ➡️ Supabase 테이블 외래 key 참조 해제해 해결 4. Error: Hydration failed because the initial UI does not match what was rendered on the server. 5. 금일 소감 1. pathname과 split을 이용해 URL의 UUID 추출해 상세정보 가져옴 와 대체 이것 때문에 몇 시간을 삽질한 건지... 메인 페이지에서 공부 장소를 눌렀을 때, 동적 Routing을 통해..

1."The data that you are trying to import is incompatible with your table structure" 2. PR 템플릿 생성 및 첫 PR 등록 3. Next-UI Select: onChange가 안 돼서 Next-UI 공식 문서 참고해 해결 4. string Type에 배열 할당하면 Error 뜸 5. 로컬 브랜치명 변경 6. 데이터 필터 처리가 안 됨 ➡️ Supabase에서 Filter 처리해서 해결! 7. '매핑(mapping)'이란? 8. 금일 소감 1."The data that you are trying to import is incompatible with your table structure" "The data that you..

오랜만의 블로그 포스팅이다. 이번 주까지 너무 많은 일이 있어서 블로그 쓸 여력이 안 됐다. 이제부터 다시 꾸준하게 작성해야겠다. 오늘은 직전 심화 프로젝트 관련 내용과 배우긴 하였으나 정확히 무슨 의미인지 뇌에 남지 않은 내용 위주로 담으려고 한다. 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..

1. [09:00~10:00] 코드카타 문제 풀이 (1) 수박수박수박수박수박수? (2) 내적 (3) 약수의 개수와 덧셈 2. Number.isInteger() 3. Math.sqrt 4. 오늘 작성한 코드 5. 금일 소감 1. [09:00~10:00] 코드카타 문제 풀이 (1) 수박수박수박수박수박수? 문제 설명 : 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하라. 예를 들어, n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 된다. 제한사항 : n은 길이 10,000이하인 자연수다. 문제를 보고 답안 작성하며 '뭐야.. 왜 이렇게 easy하지?.. 뭔가 이상해' 하면서 풀었다. 심지어 테스트 돌렸는데 통과됐길..

1. [09:00~10:00] 코드카타 문제 풀이 - 가운데 글자 가져오기 2. substr() 3. Set 4. switch 5. 오늘 작성한 코드 6. 금일 소감 1. [09:00~10:00] 코드카타 문제 풀이 - 가운데 글자 가져오기 문제 설명 : 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보자. 단어의 길이가 짝수라면 가운데 두 글자를 반환하면 된다. 제한사항 : s는 길이가 1 이상, 100이하인 String 삼항연산자를 사용하는 것과 짝수임을 확인하기 위해 2로 나누었을 때 나머지가 0인 것을 구하는 것까진 알았다. 그런데 가운데 두 글자를 가져오려면 어떻게 해야 하지? 하는 생각이 들었다. 다른 답안을 찾다가 효율적으로 작성한 것으로 판단되고 또 subs..

오늘, 주특기 플러스 주차 챕터에 들어섰다. 팀원이 전부 바뀌었다. 챌린지에 속해 있는 다른 분들과도 함께 협업할 수 있는 기회에, 스탠다드 반 분들과도 교류할 수 있어서 기쁘다. 하지만 가장 기쁜 건,, 이번엔 처음으로 팀 인원이 5명이라는 것이다. 감격 그 자체다 ㅠㅠ ,,, 이번은 아무도 안 나가시겠지..? ㅠㅠ 쭉 부족한 인원 + 잠수 타거나 하는 팀원이 있어 개인 공부 시간이 턱없이 부족했는데 이번은 마음이 좀 놓인다. 그래서 오늘도 내 부족한 공부를 확실하게 채우기 위해서 열심히 공부하였다. 1. [09:00~10:00] 코드카타 문제 풀이 (1) 하샤드 수 (2) 콜라츠 추측 2. TypeScript 사용 이유 3. 금일 소감 1. [09:00~10:00] 코드카타 문제 풀이 (..

그동안 하려고 했었던 JavaScript 문법 종합반 강의를 다시 완강하였다. 보면서 작성한 코드만 해도 양이 엄청 많다. 이번 연휴엔 너무 졸리고 피곤해서 자고, 쉰 시간이 많긴 하지만 그래도 JS 문법을 전반적으로 다시 공부함으로써 코드에 대한 이해력이 많이 오른 듯하다. 1. 재귀적 수행 (재귀 호출) 2. Scope Chain (스코프 체인) 3. 실행 컨텍스트 4. JS 문법 종합반 들으며 작성한 코드 5. 금일 소감 1. 재귀적 수행 (재귀 호출) : 함수가 직접적으로 또는 간접적으로 자기 자신을 호출하는 과정 재귀 함수는 특정 조건(기저 조건)이 충족될 때까지 자기 자신을 계속해서 호출한다. 기저 조건은 재귀가 무한히 반복되는 것을 방지하기 위해 설정된다. 재귀적 수행은 복잡한 ..

내일 있을 발표를 위해 오늘 시연 영상 촬영하고 PPT 제작 완료했다. 휴... 일찍 끝낼 줄 알았는데 예상 외로 배포에서 Error가 계속 생겨서 그거 트러블 슈팅 하느라고 정말 하루 중, 대다수의 시간을 보냈다. 하... 그래서 Git 공부 할 때 배포 공부도 같이 해야겠다. 서버랑 이래저래 연결된 게 많고 고려할 게 많아서 배포 공부도 필수일 것 같다. 1. PPT 제작 완료 2. 금일 소감 1. PPT 제작 완료 어제 밤에 배포를 완료해서 오늘은 거의 해야 할 게 없을 줄 알고 공부 계획 다 짰는데, 어제 배포할 때 사용한 Glitch 서버가 안 깨고 계속 잠들어 있어서 배포 링크의 UI가 하나도 안 떴다. 어떻게 해야 할지 반나절을 고민하고 이래저래 시도하다가 튜터님이 JSON se..

1. Vercel 배포 완료! | 도메인에 URL 등록 2. 헷갈리는 개념 요약 1) async - await 2) fetch - then 3) Optional Chaining (옵셔널 체이닝) 4) Hook의 정의, 사용법 3. 금일 소감 1. Vercel 배포 완료! | 도메인에 URL 등록 배포 절차에 따라 진행한 뒤, 최종적으로는 KAKAO Map API를 발급받은 계정 사이트 도메인에 Redirect URL을 등록해 주어야 정상적으로 배포 링크를 들어갔을 때, 카카오 맵이 UI에 나온다. 배포는 지금껏 다른 팀원이 했었어서 배포 방법을 자세히 알지 못했는데 이번 팀 프로젝트 때엔 팀원들과 화면 공유하며 내 손으로 직접 배포를 해서 뿌듯하기도 하고, 하나 더 배워서 너무 좋았다. 배포..

1. KAKAO Map이 화면에 나오지 않음 | API Key 절대 확인하기 2. gitignore에 env 추가해두자 3. 즉시 반환 조건문에 꼭 안 넣어도 되는 조건은 제외하기 4. 정확한 위치 정보로 등록되게 하기 5. 금일 소감 1. KAKAO Map이 화면에 나오지 않음 | API Key 절대 확인하기 이유는 index.html에 API Key를 넣어주지 않았기 때문이다. 초기세팅 때 같이 넣은 줄 알았는데, 아니었던 것이다. 작성한 코드가 문제인가 했더니 원인은 그게 아니었다. 다소 댕청한 실수이지만... 아무튼 해결되었다. 우리가 사용한 API는 ReactKakaoMapSDK에서 제공하고 있는 Map API다. SDK는 소프트웨어 개발 키트(Software Development ..

오늘까지 해서 팀 프로젝트 3일차다. 금요일에 시작해서 금, 토, 일. 이제 각자 페이지 구현한 것 마무리하는 단계다. 사실상 금요일에는 프로젝트가 어떻게 진행되는지 발제 듣고 S.A. 작성하고 팀원들과 초기 세팅 맞추느라 하루를 다 썼다. 본격적으로 각자 구현에 돌입한 것은 토요일부터였다. 나는 토요일에 거의 뻗어서 잠 좀 보충하고 거의 밤부터 집중해서 개발에 들어갔다. 1. 개발 배우기가 정말 어려운 이유 2. env에 따라 알맞은 경로 작성 3. 금일 소감 1. 개발 배우기가 정말 어려운 이유 https://brunch.co.kr/@jypthemiracle/14 개발 중간중간 잠시 쉬는 틈을 활용해 이런 글을 읽게 되었다. 저번과 이번 챕터에서 어려움이 많았어서 공감이 되려나 싶어서 들..

코드를 작성하는 데 있어서 어려움을 느끼는 이유를 좀 더 곰곰이 생각하다가 자료구조에 대해서 더 명확하게 알고, 또 정리해 두는 게 필요하겠다 싶어서 오늘은 포함해 이번 주말까지는 자바스크립트 자료구조에 대해서 공부할 생각이다. 1. JavaScript 주요 자료구조 2. 각 자료구조의 예문 & 용도 3. 금일 소감 1. JavaScript 주요 자료구조 1) 배열(Array) : 연속적인 메모리 공간에 동일한 타입의 데이터를 순서대로 저장 인덱스를 사용해 데이터에 접근 가능 다양한 메서드(push, pop, shift, unshift, slice, splice 등)를 통해 배열 조작 가능 2) 객체(Object) : 키(key)와 값(value)의 쌍으로 데이터를 저장 유연한 데이터 구조를..

오늘은 다소 짧은 포스팅이 될 것 같다. 과제 하고 하루 종일 코드 짜느라 개념이나 다른 걸 공부할 여유가 없었다. 1. [plugin:vite:import-analysis] Missing "./modules/letters" specifier in "redux" package 2. Uncaught TypeError: Cannot read properties of undefined (reading 'filter') 3. 금일 소감 1. [plugin:vite:import-analysis] Missing "./modules/letters" specifier in "redux" package 이번 과제에선 타인의 코드를 읽는 능력도 함께 길러보자 하는 생각으로, 어려운 길이 되겠지만... 내 코드..

1. [Redux 미들웨어] Thunk 2. Custom Hook (커스텀 훅) 3. 금일 소감 1. [Redux 미들웨어] Thunk : Dispatch를 할 때, 객체가 아닌 함수를 Dispatch 할 수 있게 됨 Dispatch(객체)가 아니라 Dispatch(함수)를 할 수 있게 되는 것! => 중간에 하고자 하는 작업을 함수를 통해 넣을 수도 있고 그것이 중간에 실행되는 것 [중요] '함수'를 Dispatch 할 수 있게 해줌! 액션이 리듀서로 전달되기 전, 중간에 어떤 작업 더 할 수 있음 Dispatch 하면 Action이 reducer로 전달되고, reducer는 새로운 state를 반환하는 과정에서 미들웨어를 사용하면, 하고 싶은 작업들을 넣어서 할 수 있음 [사용 이유] :..

1. [JSONPlaceholder] setState & spread 연산자 쓰임 이유 2. Uncaught TypeError: Cannot read properties of null (reading 'map') 3. Failed to load resource: net::ERR_CONNECTION_REFUSED 4. Uncaught (in promise) ReferenceError: process is not defined 5. 컴파일 에러(Compile Error) & 런타임 에러(Runtime Error) 6. 금일 소감 1. [JSONPlaceholder] setState & spread 연산자 쓰임 이유 JSONPlaceholder를 복습하다가 위 사진에 하이라이트 처리한 부분이 이해..

오늘 팀 배정이 다시 됐다. 다행이다. 팀이 바뀔 때마다 기여 가능한 인원이 한 명씩 줄어서 이번 팀에서는 '혼자 다 해야 하는 거 아냐??' 했는데 걱정하지 않았어도 좋았을 팀원분들로 배정이 되었다. 1. Vite UI가 로드되지 않음 2. 데이터, 함수 그리고 Custom Hooks ① Redux, Action, Dispatch ② 함수를 작성할 때 고려해야 할 점 3가지 3. 금일 소감 1. Vite UI가 로드되지 않음 와 진짜 Vite 갑자기 로드가 안 되길래 정말 너무 조마조마했다. 이러면 공부 하나도 못 하는데 어쩌나 싶었다. 그리고 강의에서 나온 코드 그대로 작성했는데 안 되길래 대체 뭐가 문젠가 싶은 마음이었다. 에러 메시지라도 보고 싶은데 개발자도구를 사용하지 못 하니 정말..

햐 드디어 News Feed 프로젝트가 끝났다. 14시부터 발표 시작인데 발표 순서 룰렛 돌린 결과, 내가 첫 번째 발표라 기뻤다. 나중에 할수록 순번 기다리면서 지치고 또 다른 팀 발표 내용과 피드백이 머리에 잘 안 들어오기 때문이다. 이번에도 운이 좋았던 나 1. 우리 팀 발표 Feedback 내용 2. 프로젝트 관리 및 협업 시스템 개념 정리 ① 업무분류 체계(Work breakdown structure, WBS) ② 업무 분류 체계의 2가지 유형 ③ 칸반 보드 ④ 프로젝트 매니저 3. 금일 소감 및 KPT 회고 1. 우리 팀 발표 Feedback 내용 [칭찬] 큰 글자로 설정한 것 좋고, 취소 버튼 클릭 시 내용이 초기화되는 불상사가 발생할 수 있는데 그것을 미연에 방지함으로써 UX적..

1. CSS 수정해서 진짜 완성된 모습 2. 금일 소감 1. CSS 수정해서 진짜 완성된 모습 최최최종이다. 기능에만 일단 집중을 하느라고 어제 올린 게시글처럼 CSS가 여러모로 뭉개져있어서 새벽에 잠 안 자고 총 여섯 페이지 모두 CSS를 수정했다. 그러니 그냥저냥 볼 만한 정도로는 됐다. 오늘은 정오까지 최종 완성된 코드와 시연 영상을 제출해야 해서 잠이고 뭐고 일단 내는 게 중요해서 끝까지 보완하고 수정할 부분 하고 제출했다. 그러고 한 3시간 정도 자고 PPT 준비하고. 시연 영상이 마음에 들지 않아서 다시 촬영했다. 귀여운 아바타 넣어서 하려고 했는데, 귀여운 아바타로 화면 녹화하면 자꾸 저장이 안 돼서 그냥 정장 입은 아바타로 바꿔서 촬영했다. 아쉽다..... PPT 표지는 위와 ..

1. 내가 구현한 페이지 및 기능2. [Error]  missing in props validation     - props의 타입 검증 방법3. 깨달은 핵심 포인트   (1) Merge   (2) 기획 및 설계, 와이어프레임의 중요성   (3) 완성된 코드를 다른 데에도 저장해두자4. 금일 소감   1. 내가 구현한 페이지 및 기능  총 세 페이지를 맡았다. My Page, Detail Page, Write Page다.CRUD랑, 이미지 업로드, 로그인 된 정보를 가지고 글을 다르게 보여주는 기능 등을 구현하였다. 메인 페이지랑 마이 페이지가 연결되는 부분이 있다 보니 기능의 일부는 안 되는 것도 있었다. 원래 더 일찍 주말에 Merge 해서 기능 완벽히 완성시키고 필수 기능 마무리 작업까지 끝냈어야..

굉장쓰하게 바쁜 연휴였다.연휴 내내 코드를 본 기억 뿐이다. 하지만 재밌었다. 이번에 내가 맡은 기능들이 좀 중요하면서도 어려울 수 있겠다고 생각해서 선택했는데 내 예상이 맞았다.  1. 개발자 커뮤니티 구현2. 문제 : 해결책   ①  작성일시 추가했더니 글 새로 추가하면 화면에 아무것도 안 뜸   ②  [Edit 버튼 클릭]  클릭한 게시물의 id를 갖고 Write Page로 넘어가서 해당 게시물의 내용이 보여야 하는데 안 뜸   ③  import 절대 잊지 말기   ④  내가 맡은 페이지, 기능 구현 완료   ⑤  "상태 관리는 어떻게 하죠?"   ⑥  [Write Page] 새 게시글 작성을 누르면 아무것도 안 보임3. 금일 소감   1. 개발자 커뮤니티 구현  우리 팀은 'Devtiny'라는 개..

오늘은 입문 주차 과제인 To-do List를 구현헀다. React 들어온 지 3주 정도 됐는데, 그동안 공부법과 공부 방향에 대해 엄청 헤매서 시간을 효율적으로 못보낸 것 같다. 이제 제대로 알았으니 늦은 만큼 더 달려서 효율 끝판 찍어야겠다. 1. To-do List 구현 2. 오늘 공부한 내용 ① map과 filter의 차이점 ② find, push, pop, reduce, forEach ③ [함수표현식, 함수선언식 차이] 확실히 알기 ④ 함수에서 return 사용 여부 핵심 정리 && 어떨 때 return 하고, 생략하는지 3. 금일 소감 1. To-do List 구현 시간 재면서 했는데 거의 25분만에 과제 코드 다 작성했다. 이틀만에 React 입문 과제 25분 컷 달성 가능한데 ..

어제 저녁부터 오늘 새벽까지 React 입문 강의 전체 다시 듣고, 중요한 코드는 따라 작성하며 공부했다. 중간중간 나오는 과제는 영상을 멈춘 다음에 내가 직접 코드를 처음부터 끝까지 작성했다. 맞혔을 때는 기분이 매우 좋았고 확실히 공부도 더 잘 되는 게 체감되었다. 1. React 입문 복습 및 코드 2. Counter 코드 및 다짐 3. 금일 소감 1. React 입문 복습 및 코드 입문 강의를 다시 들으며 위와 같이 만들었다. 주차별로 어떤 걸 배웠고 기억해야 할 것은 무엇인지 다시 정리하며 코드를 작성하니 이해도도 높아지고 코드를 직접 작성할 수 있다는 자신감도 형성됐다. 그리고 확실히 지금까지 공부를 잘못된 방향으로 했다는 걸 확실하게 깨달았다. 이렇게 공부하니까 시간도 크게 안 ..

개인과제는 어제 다 끝내서 제출했다. 딱 시작한 날로부터 5일 정도 걸린 것 같다. 하지만 많은 부분을 다른 동기들과 튜터님들께 여쭤보았기 때문에 다시 해보는 필요성이 있겠다 싶었다. 그래서 다시 공부하고 만들어볼 생각이다. 1. 수정 기능 및 props drilling 작업 완료 2. 앞으로의 공부 방향성 - 개발 기획 과정 및 코딩 방법 3. 금일 소감 우선 과제를 하면서 있었던 에러와 해결 과정을 먼저 살펴보자 1. 수정 기능 및 props drilling 작업 완료 자리를 고민하다가 return 안으로 넣고 letters.map을 감싸는 { }를 풀어줬더니 정상으로 작동함! 자리 안착 완료,, 헤맬 때는 '우짜지 우짜지' 싶지만 해결되면 세상 행복한 게 프로그래밍 아닐까요 하핫 그럼 ..

휴.. Router 초반에 등장시켜서 거의 하루라는 시간을 날렸기에 오늘까지 줄곧 밤새워가며 코드를 작성했다. 그래도 이렇게까지 한 보람이 좀 있는 게, 일단 거의 다 완성이 돼간다. Props Drilling이 거의 끝나가서 고지가 보인다. 하지만 오늘 자정까지는 해야 끝날 것 같다. 휴 멈추지 말고 계속 가 1. 삭제 기능 구현 2. Navigate로 Main 페이지 이동 3. 금일 소감 1. 삭제 기능 구현 뭘 하고 싶은지만 알아볼 수 있는 코드를 짰다. 자바스크립트의 confirm과는 형태가 좀 다르게 사용해야 하길래 '어떻게 하지' 하며 삽질 좀 하다가 튜터님께 찾아갔다. 이번에도 아주 자세하게 알려주셨다. 오늘도 잠을 거의 못자서 바로바로 뇌에 입력되진 않았지만 로직은 이해가 갔다..

영차영차 과제를 해나가는 중이다. 최대한 깨있는 상태를 유지하려고 하는데, 계속 밤새우고 조금 자니 오늘은 집중도 안 되고 뇌에도 정보가 잘 입력이 안 되는 느낌이 들어 밤에 조금 자고 지금 글 적는 중이다. 가능한 이번 주말에는 좀 자야겠다,, 1. Error 직면과 문제해결 2. 튜터님께서 알려주신 useState와 useEffect 3. 금일 소감 1. Error 직면과 문제해결 어제까지 해서 Fake API 더미 데이터를 연결하고 map 함수로 돌려서 반환하는 것까지 완료했다. 그리고 각 멤버별로 어떤 카드가 있는지 Filter를 통해 걸러서 보여주는 기능도 완료하였다. 그런데 input에 내용을 넣으면 그게 출력되어야 하는데 이 부분에서 막혀버렸다. 이제 과제 중반 부분인데 하나하나..

꺾이면 안 돼... 오늘 정말 여러 번 꺾일 뻔한 날이다. 해야 할 요구사항이 많아서 요구사항 하나를 정확히 이해하지 못한 상태로 일단 코드를 작성해버려서 더 이상한 곳으로 가버렸다. 코드 짜고 할 게 많아서 오늘 포스팅은 짧을 것 같다. 1. 개인과제 문제 및 해결 2. 방향 재설정 3. 금일 소감 1. 개인과제 문제 및 해결 오늘 정말 한 게 뭔가 싶은 느낌.. ㅠ 부끄럽다. 그래도 써야지. 아무튼 상세 페이지로 연결 작업하려고 에스파 멤버 4명 각각의 상세 페이지를 JSX 파일 만들고 Router로 연결하고 있었다. 그러다가 위 사진처럼 아무것도 안 나오고 에러만 뜨길래 어떻게 해결해야 할지 모르겠어서 튜터님께 갔다. 에러뿐 아니라 하고 있던 코딩이 어렵게 느껴지고 맞게 하고 있는 게 ..

개인과제를 시작했다. 자꾸 과제만 하려 치면 부담감부터 느껴지는 나.. 아 ㅋㅋ 시작이 젤 어려운 거라고 ㅋㅋ... ㅋ... 그래서 바로 시작. 오늘은 Router 개념이 제대로 안 잡힌 나를 위해 Router 개념 특식을 준비했다. 아 ㅋㅋ 진수성찬 아니겠냐고 농담 그만하고 목차 적자면 다음과 같다. 아 그리고 Router 내용에 평소에 궁금했던 404 error 내용이 나오길래 이에 대해서 좀 더 알아보고 작성해보았다. 1. 개인과제 막혔던 부분들 (1) React 절대경로 안 됨 (2) 배경사진 안 들어감 2. Router (라우터) (1) 그건 알겠는데, React-Router는 '왜 사용'하는 걸까? (2) Router 종류 (3) 404(페이지를 찾을 수 없음) 오류 (4) Rea..

아 분명 배웠는데 다시 보는 듯한 이 새로운 짜릿함... 이제 그만 느껴도 좋을 텐데.. 오늘은 헷갈린다기보단 내가 설명할 수 없겠는 개념과 기능 위주로 작성해보았다. 리마인드 + 개념을 정확히 아는 데에 도움이 되리라 생각한다. 1. React와 선언형 라이브러리? 2. 모르는 Hook 정리 (1) useHistory (2) useNavigate (3) useParams 3. 모르는 개념 정리 (1) 프레임워크와 라이브러리의 차이 (2) Batch | [자료구조] Stack, Queue 차이 4. 금일 소감 1. React와 선언형 라이브러리? 선언형 프로그래밍 = 추상적인 코드 [React rendering 특징] 실제 화면을 업데이트하는 게 아닌, 업데이트를 위한 과정이다. React는..

1. 선언형 프로그래밍: "보여주고 싶은 '결과'에만 집중하라" 2. [선언형 UI 라이브러리, React!] 선언형 코드 작성법과 장단점 3. 모르는 개념과 메서드 용도 정리 4. 금일 소감 1. 선언형 프로그래밍: "보여주고 싶은 '결과'에만 집중하라" 요즘 실력 있는 개발자의 역량 중 하나는 '코드를 얼마나 이해하기 쉽게 만드는가' 1) 선언형 프로그래밍 : 원하는 '결과'를 묘사하는 방식으로 코드를 작성하는 프로그래밍 패러다임 '데이터를 어떻게 조작해야 하는지'가 아니라 '원하는 데이터가 무엇인지'에 집중 ⇒ 전체적인 가독성과 추상화 수준을 높여 개발자가 문제의 본질에 집중할 수 있도록 도와줌! 재사용성이 높고 병렬 처리에서 유리함 2) 명령형 프로그래밍 : 코드가 '어떻게' 동작해야..

코드 리뷰 받은 내용과 이번 주에 공부하며 언급된 내용 중에 모르는 개념을 정리해보자. 일단 모르는 개념이 정말 많아서 얼마나 걸릴지 모르지만... 시작해보자 1. 코드 리뷰 (보완사항) 2. 모르는 개념 정리 1) Cookie, Cache, Session, Token, CDN 2) 일급객체 (first-class object) 3) architecture (아키텍처) 4) hoisting 5) polyfill 6) [메모리 구조] Heap, Stack의 차이 3. 금일 소감 1. 코드 리뷰 (보완사항) 1) 컴포넌트명: 직관적 & 용도에 따라 명확하게 작명 const Button = ({ clickAddButtonHandler }) => { return : Button 컴포넌트는 이름부터가..

챌린지 반 세션이 끝나고 할 일 하다가 이제서야 쓰는 TIL이다.. 일단 조금 피곤한 관계로 눈이 반쯤 풀려있는 상태다. 상태?.. 하루 종일 코딩 공부를 하다 보니 '상태'처럼 배운 내용 관련 단어나 표현만 보이면 바로 코딩 용어가 떠올라버린다. 방금도 '상태'라고 하면서 '헉.. state..?' 이러고 있는 나를 발견할 수 있었다. 아무튼,,, 오늘은 뭘 배웠는지 써보자. 공부하며 내가 생각하기에 기억해야 할 내용과 중요한 부분만 작성하며 정리해보려고 한다. 노답 삼형제는 특히, 좀 더 쉽게 접근하고 이해하기 위해 나만의 언어로 표현하며 작성해 보았다. 1. [React 숙련] 핵심 정리 1) React.memo 2) Virtual DOM 2. 이해하기 난해한 노답 삼형제 1) Exec..

오늘부로 React 숙련 주차가 시작되었다. 배속 없이 들으면 약 6시간 소요되는 강의지만 이해하며 듣고자 하면 2배속으로 들어도 12~15시간 정도 꼬박 걸리는 듯하다. 오늘은 절반 정도 들었다. 일단 지금까지 들은 내용 정리 및 가볍게 복습해두고 오늘 남은 시간에 다음 강의를 들을 생각이다. 1. 튜터님께 드린 질문 및 답변 1) 의존성 배열과 useEffect 2) 비동기 처리와 setState 2. React 숙련 핵심 요약 1) styled-component 2) useState 3) useEffect & 의존성 배열 4) useRef 5) useContext 3. 금일 소감 1. 튜터님께 드린 질문 및 답변 1) 의존성 배열과 useEffect 오늘은 강의 총 내용 중 절반 정도 ..

오늘은 챌린지 반 아티클을 읽고 소감과 내용을 요약하는 시간을 가졌다. 그리고 자바스크립트 공부 및 개인 과제 특강을 하였다. 이 중에서 오늘은 아티클 과제 내용만 담아보려 한다. 1. 소감 2.《 컴퓨팅 사고와 개발 실력 늘리는 공부법》핵심 요약 ① 컴퓨터적으로 사고하는 개발자 되기 1) 문제를 데이터의 관점에서 인식하고 처리하는 것이 바로 컴퓨터적인 사고의 시작! 2) 추상화라고 하는 개념을 이해하고 잘 활용 3) [프로그래밍의 핵심 요소] 변수, 타입, 조건, 반복, 함수 4) 컴퓨팅적 사고력을 검증하는 것: 코딩 테스트! 5) 의식적으로 훈련하기! ② 개발, 학습 말고 훈련하기 1) 만들고 싶은 목표부터 정하자! 2) 추상화라고 하는 개념을 이해하고 잘 활용 3) 어떻게든 내 환경에서..

재밌지만 어려웠던 리액트 과제가 끝났다! 강의 내용에 대부분 답이 있어서 2/3 정도는 어렵지 않게 했지만 완료 버튼을 눌러서 Done이 있는 곳으로 컴포넌트를 보내줘야 하는 기능을 구현하는 게 정말 어려웠다. 식은 적었는데 어떻게 구현해야 할지 막막해하다가 어제 다른 동기 분이 특강 아닌 특강을 해주셔서 이해가 잘 되었고, 또 과제를 얼른 마칠 수 있었다. 1. [React 개인과제] 완성 1-1) 기능 구현 계획 1-2) 구현 문제 및 해결책 1-3) 블록 요소와 인라인 요소 1-4) npm start가 안 됨 && 해결책 2. 금일 소감 1. [React 개인과제] 완성 위 사진처럼 완료 버튼을 눌렀을 때 Done이 있는 위치로 컴포넌트를 보내줘야 한다. 이 부분이 너무 어려워서 정말 ..

휴... 바로 드가자 1. [React 기초] 완강 및 개념 명확히 1-1) 핵심 요약 1-2) 질문 및 답변 2. [article] React로 사고하기 3. 금일 소감 1. [React 기초] 완강 및 개념 명확히 1-1) 핵심 요약 default props : 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기값 ↓ 유사 Default Argument : 매개 변수가 지정되지 않았을 때, 자동으로 지정해줄 값 정해줌 hook : 기능 state : React에서 이벤트에 의해 변경되는 동적인 값 UI 바꾸려고 씀. 즉, 렌더링 다시 하려고 예문 작성 중에 에러 원인 알려주는 확장 프로그램이 구조분해할당을 구조파괴선언이라고 알려준다 ㅋㅋㅋㅋㅋㅋㅋ 아니 구조 파괴 선언이라니 이 친구..

휴 요즘 특강과 수준별 분반 수업이 함께 진행돼서 주된 강의를 챙기기가 좀 어려워졌다. ← 요건 내가 부족한 탓이긴 하다. 계속해서, 무수하게 쏟아지는 정보를 좀 정리하고자 앞으로 블로그 포스팅에는 내가 모르는 개념, 알아둬야 하는 핵심 등을 위주로 기술할 예정이다. 다소 짧게 적는 날이 있더라도 지엽적인 내용 빼고 액기스만 담으려 한다. 그럼 바로 드가자 1. Node.js 설치 및 npm과 yarn 오류 2. [특강] VS code 꿀팁: 확장 프로그램, 단축키 3. [React 입문] 기억해야 내용 4. 금일 소감 1. Node.js 설치 및 npm과 yarn 오류 에러 코드는 위와 같이 떴다. 어제부터 Node.js 설치 버전이 16으로 설치되지 않았다. 일단 엄청 급한 건 아니니 강..

오옹 드디어 React(주특기) 입문 주간이 시작되었다. 자바스크립트 문법 이해는 기초 수준인 것 같다고 느껴서 'React 어려우면 어쩌지' 했는데 다행히 초반에 자바스크립트 문법을 좀 짚어주시고 강의 시작돼서 너무 다행이라고 느꼈다. 오늘은 기초 공부를 한 것이고, 몰랐거나 헷갈렸던 개념만 가볍게 작성해 볼 생각이다. 1. React 입문 강의 시작! 2. [수준별 분반] 챌린지 반 입성! 3. 금일 소감 1. React 입문 강의 시작! 좀 두근거립니다. 설렘 설렘... 계속 새로운 걸 배우다니 정말 별로 못자서 몸은 피로한데 정신은 행복하군여... 어렵고 복잡한데 이해하면 쾌감이 어마무시합니다 이 코딩의 세계가... 그리고 프로젝트하며 코드를 짤 때 발생하는 에러를 디버깅해내면 감격이..

야무지게 발표하고 돌아온 접니다! 휴.. 5시간 정도 잤지만 다행히 오늘 컨디션이 괜찮아서 발표도 나쁘지 않게 한 것 같다. 발표 자료 퀄리티도 칭찬 받았다! 나는 프로젝트 기능이 별로 없어서 정말 칭찬 없고 피드백 사항만 엄청 많을 줄 알았는데 생각보다 칭찬만 거의 90% 비율로 해주셔서 잘한 건지.. 아니면 퀄리티가 심각해서 피드백해 주실 게 별로 없었던 건지,, 아직도 잘 모르겠다.. 튜터님들께 직접 가서 더 피드백해 주실 거 없냐고 말씀드리는 방안도 생각해봤는데, 그냥 추후에 진행되는 걸 더 잘하는 걸로 결론 내렸다. 1. 발표 및 시연 2. 다른 튜터님들께도 시연 보여드림! 3. 금일 소감 1. 발표 및 시연 PPT는 넷플릭스 대표 색 위주로 디자인해서 최대한 넷플릭스 느낌이 강하게..

자바스크립트가 좀 어려워서 이번 프로젝트는 난항이 좀 있었다. 그래도 개인 과제 때 진짜 팀 프로젝트에 누가 되지 않으려고 밤새워가며 공부하고 몰두한 보람이 있었다. 음... 그리고 이번엔 내가 많은 게 그래도 가장 어려울 것 같아서 맡았는데 다 하고 나니 가장 쉬운 거였나?.... 하는 생각이 많이 든다. 발표 이후, 리액트 강의 시작되면 리액트 강의 들으면서 팀 프로젝트 코드를 다시 봐야겠다. 처음부터 끝까지 어떤 코드로 구성되어 있고 로직이 어떻게 되는지 이해하는 시간을 가져야겠다. 1. 막혔던 부분과 해결 [CSS 디버깅] 2. 드디어 팀 프로젝트 끝! 3. 금일 소감 1. 막혔던 부분과 해결 [CSS 디버깅] 프레디의 피자가게부터 밑 요약 내용까지 행간이 다닥다닥 붙어있고 아래 글자..

벌써 팀 프로젝트 3일차다. 시간이 너무 빨라서 매일 "헉 벌써 _월 __일이야?" 하는 게 일상이다,, 휴 20대 가는 속도 좀 늦춰주세요.... 아무튼 오늘은 어제 너무 들인 시간치고 효율이 없었던 것 같아서 누구에게 쫓기는 듯한 느낌을 받으며 빠르게 팀원들끼리 회의하고 내 해야 할 일에 집중했다. 오늘은 HTML과 CSS를 작업했다. HTML과 CSS 파일 나눠서 하면 더 좋긴 한데 아직 위, 아래로 보는 게 좀 더 편해서 안 나누고 하고 있다. JS부터는 VS 코드상에서 파일 나눠서 작성해야겠다. 1. 상세 페이지 내 영화 상세정보 구역 분배 2. 막혔던 부분과 해결 3. 금주 소감 1. 상세 페이지 내 영화 상세정보 구역 분배 OTT를 보다가 넷플릭스가 가장 UXUI가 깔끔해서 그걸..

오늘부터 본격적으로 팀 프로젝트에 들어갔다. 내가 구현하는 기능은 영화 상세 페이지 및 Home 페이지 돌아가는 버튼 구현이다. 어려워 보여서 택했는데 진짜 어렵다 ㅋㅋㅋㅋㅋㅋ 그래도 재밌다. 배우던 첫 주차이자 첫 챕터에 비하면 정말 난이도가 많이 올랐다는 것을 느낀다. 그리고 특히 영어 공부를 많이 해야겠다는 것 또한 느낀다,, 영어 공부를 놓은 지 좀 돼서 이해가 바로바로 되지가 않는다. 틈틈이 쉬는 시간엔 일반 책 읽지 말고 영어 공부를 해야겠다. 오늘은 에러가 많이 떴던 날이라 그 내용에 대해서 적어보려고 한다. 1. 튜터님들 피드백 적용 후, 코딩 시작 ㆍ 조언에 따라 바꾼 점: 코딩 계획 세우기 ㆍ 계속되는 구글링 ㆍ 오류는 내 친구 ㆍ 그래도 해냈죠? 2. 클릭해서 해당 영화 ..

오늘부터 자바스크립트 팀 프로젝트를 하는 날이다. 오전 10시에 팀 프로젝트 관련 발제를 들었다. 발제는 한 20분만에 끝나서 팀원과 바로 회의를 진행하였다. 1. 팀 프로젝트 기능 분배 및 기타사항 1) 누구 코드로 할지 2) 어떤 API? 3) 필수 기능 분배 4) 커밋 컨벤션 정하기 2. [기초 특강] Javascript 코드를 읽는 방법 1. 팀 프로젝트 기능 분배 및 기타사항 회의 내용을 통해 정한 사항은 다음과 같다. 1) 누구 코드로 할지 : 팀원 한 분 걸로 하기로 했다. 2) 어떤 API? : TMDB 3) 필수 기능 분배 (1) API 연결: --님 (2) 상세 페이지 구현 & 홈으로 돌아가기: 나 (3) 영화 리뷰 작성 기능(+ 비밀번호): --님 (4) 유효성 검사: -..

오늘은 밤새워서 공부하여 JS 문법을 좀 이해하는 시간을 가졌다. 아침 06시 30분까지 같은 기수 분에게 1:1로 설명 들으며 이번 필수 기능 구현에서 모르는 것 물어봐서 필수 가능에서 사용하는 문법은 이해가 되었다. 그게 문법을 이해하는 데 큰 도움이 됐다. 더불어서 위 사진처럼 자바스크립트 기초 강좌 유튜브 영상도 큰 도움이 되었기 때문에 오늘은 그 내용에 대하여 문법 개념과 기초에 대해 작성해 볼 생각이다. 1. 형 변환 2. 비교 연산자, 조건문 3. 논리 연산자 1. 형 변환 string(변수) : 문자열로 변환 Number() : 숫자형 변환 * true = 1, false = 0) * 숫자 + 문자 ⇒ NaN(Not a Number) 반환 Number(null) ⇒ 0 Numb..

오늘이 개인 프로젝트 1차 제출일이다. 어찌저찌 제출은 했는데 사실 팀원 클론코딩한 부분이 많고, 모르는 부분은 다른 분이 코드를 아예 짜주셔서 아주 그냥 큰일났다. 영화 open API를 가져와서 인기 영화 콜렉션 사이트를 만드는 건데, 심지어 ㅋㅋㅋㅋㅋㅋㅋ 영화 제목으로 검색할 수 있는 기능 구현조차 튜터님의 힘을 빌려서 코드를 작성했다. 대한심,,, 진짜 현타가 너무 왔다. 강의를 분명 들었는데 내 공부법이 잘못 됐음 + 노력 부족이 여실히 드러나는 날의 연속이다. 1. JavaScript 난관과 해결책 2. 진행 상황 3. 내일까지 해야 할 일 1. JavaScript 난관과 해결책 JavaScript 3주차 중반부터는 이해가 안 되는데 일단 강의만 쭉 들었다. 그리고 코드를 모두 따..

JS 문법 기초 강의는 어느 정도 들었다. 다 들은 건 아니지만 다른 분들 얘기 들어보니 개인 프로젝트부터 시작하는 게 맞을 것 같아서 이제 슬슬 시작하려고 한다. 아마 주말 내내 해야 하지 않을까... 싶다. 뭔가 이해도 다 안 된 상태에서 냅다 쫓기는 기분이긴 한데 최선을 다해보겠따..! 1. 코드카타 ㆍ 지금껏 C언어로 코딩 문제를 풀어온 건에 대하여.. 2. 콜백함수 ㆍ 콜백함수가 갖는 제어권 1) 호출 시점 2) 인자에 대한 제어권 3) return에 대한 제어권 3. 금일 소감 및 내일 해야 할 일 1. 코드카타 지금껏 C언어로 코딩 문제를 풀어온 건에 대하여.. 코드카타 첫날부터 문제가 너무 어려워서 혼자 백준Hub(프로그래머스 문제 풀면 자동으로 코드가 push됨)로 하지 않고..

어제 자정까지 해서 순공시간을 12시간 50분 이상 채우고 잠에 들었다. 평일엔 거의 계속 그러고 있다. 근 1년간 정말 열심히 운동한 보람을 여기서 특히 더 느낀다. 잠만 잘 자면 졸지 않고 순수하게 10시간 이상은 충분히 집중할 수 있고 별로 힘들지도 않아서 넘 감사하다. 그래서 말인데... 지금 숨가삐 듣고 있는 강의 얼른 듣고 다음 주부터는 주말에 운동도 병행하며 공부 진행하고 싶다. 오늘까지 진행한 것으로 봐선 일단 이번 주말은 운동하기 어렵다,,,, 흐규귝 평일 내내 5~6시간 자니까 아침마다 내 상태가 위 사진과 다를 바 없다...... 심지어 알람 울려서 일어나면 위 고양이랑 비슷하다... 사진 다시 봐도 웃기네 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ..ㅋㅋㅋ.. 휴.. 그만 딴 얘기하고 공부 내용 정..

JavaScript의 기초 중에 기초... 오늘도 계속해서 배우는 중입니당... 재밌는데 일단 음... 공부량이 많아서 그런지 점점 사람이 초췌해져가는 것 같은 건 기분 탓이겠져?... 아임 오께이입니다... 공부란 즐겁고 재밌는 것.. 익숙함에 속아 소중함을 잃지 않겠습니다..... 아무튼 오늘도! 자바스크립트 원리를 이해해가며 강의를 들었다. 지금 블로그 작성 기준, 순공시간이 9시간을 넘겼다. 매일 순공 11시간 이상은 하려고 하는데 아직까지는 수월하다. 허리와 목 건강에 유의할 필요는 있는 듯하다,,, 1. for문 원리 질문 및 이해 2. 금일 JS 문법 배운 내용 3. 금일 소감 및 내일 해야 할 일 1. for문 원리 질문 및 이해 오늘도 강의 왈랄랄라 듣다가 for문은 이해가 ..

오늘은 JS 문법 기초 자습 외에 학습법 특강도 진행되었다. 학습법 특강 내용 중, 중요한 내용 몇 가지만 추려서 작성한 뒤, 오늘 배운 JavaScript 문법 내용을 정리하려고 한다. 1. [핵심만] 학습법 특강 2. 금일 JS 문법 배운 내용 3. 오늘 한 질문 및 답변 4. 금일 소감 및 내일 & 이번 주 해야 할 일 1. [핵심만] 학습법 특강 ▶ 신입 개발자에게 꼭 필요한 2가지 핵심역량 1) 문제해결 능력(문제 인식과 정의, 해결을 어떻게 해나가는가) 2) 커뮤니케이션 능력 ▶ 기술적 고민을 잘하려면? 1. 로직과 코드에 대한 의도 생각하기 2. 구현하는 기술과 스택에 '목적'과 '근거' 가지기 3. 더 좋은 방법 있는지 고민 2. 금일 JS 문법 배운 내용 // 객체 (장점: ..

여러분 녀러분 다들 봐주세요~~~! 저희 진행하던 것 완성됐어요 ㅠㅠ 오늘 오전엔 드디어 팀 프로젝트가 완성되었다!!! 동네방네 소문 내고 싶을 정도로 나의 자랑스런 첫 팀 프로젝트!!!! 오늘 아침까지만 해도, 구현이 안 되는 원인이 대충 짚어지지만 '하 만약 오늘 내에 완성되지 않으면 어떡하지..' 하며 노심초사하였다. 왜냐하면 오늘까지 안 되면 JavaScript 문법 강의 듣기에도 빠듯해서 그냥 미완성된 채로 두고, 주말이나 잠깐잠깐 짬날 때나 코드 수정해야 해서 구현될 가망이 없을 확률이 높았다. 그리고 담 주로 넘어가면 강의는 안 듣고, 만드는 사람처럼 보일 수 있기에... 튜터님들께 질문하기도 눈치 보인다. 다 때가 있는 법!!! 하지만? 야무지게 완성 ㅋㅋ 도움을 주신 모든 튜터 분들과 함..

1. 팀원들과 코드 병합 2. 첫 번째 문제 3. 두 번째 문제 4. 내일 해야 할 일 및 금일 소감 1. 팀원들과 코드 병합 오늘은 팀원들과 각자 만든 코드를 합쳐보는 작업을 시작했다. 가장 어려운 작업이려나 싶었는데 꽤나 어렵긴 했다. 코드를 적재적소에 넣을 줄 알아야 연동이 되고 구현에 성공하기 때문에 코드를 짠 팀원의 의도와 코드의 원리 알아야 할 수 있는 작업이라는 생각이 들었다. 나름 재밌었다. 어려운 걸 좋아하는 나로서는 꽤 재밌다고 느꼈다. 2. 첫 번째 문제 처음으로 팀원 한 명과 붙여봤는데 Firebase까지 연동하니 undefined라는 오류가 떴다. 분명 연동은 됐는데 왜 이럴까 고민하며 알아보니 undefiend : 변수는 존재하나, 어떠한 값으로도 할당되지 않아 자료..

0. 프로젝트 진행 상황 및 내일 해야 할 일 1. 첫 번째 문제 2. 두 번째 문제 3. 오늘의 성과물 4. 성과물 코드 오늘은 기대하던 팀 프로젝트 첫날이다! 어제 늦게 22시 넘게까지 기능별로 업무 분담한 것을 토대로 각자 맡은 기능을 구현해보는 작업을 하였다. 내가 맡은 것은 어려워 보이던 TIL과 TO DO LIST 기입란이다. 흠.. 근데 하다 보니 사실 그 앨범 카드 부분이 더 어려웠으려나? 싶다. 0. 프로젝트 진행 상황 및 내일 해야 할 일 TIL과 TO DO LIST를 함께 작성할 수 있도록 먼저 만든 뒤, TO DO LIST 시작을 기점으로 잘라서 오른쪽에 배치하였다. div 값을 줘서 아예 영역을 나눠버리면 카드 종류가 2개가 돼서 통일성이 없어가지고 별로 안 예쁠 듯하..

오늘은 Git과 GitHub 기초 강의를 복습하는 시간을 가졌다. 내일 혹은 이번 주말까지 웹개발 종합 강의를 2회 더 시청하며 복기할 생각이다. 1) Git, GitHub란? 2) 필수 리눅스 명령어 3) Git 필수 명령어 GitHub 코드 백업/협업 4) GitHub 충돌 해결법(conflict) 1. Git, GitHub란? * Git? : 코드 변경점 기록 (버전 관리 도구!) 소프트웨어의 변경사항을 체계적으로 추적 및 통제 * GitHub? : 온라인 백업 & 공유 & 협업 (온라인 코드 저장소!) 2. 필수 리눅스 명령어 pwd (Print Working Directory) : 지금 작업 중인 폴더 ls (LiSt) : 폴더 안에 있는 폴더 & 파일 목록 ls -a (LiSt A..

오늘 사용한 명령어 및 함수 function onclick .toggle() 메서드 메서드 val 이용 div 안에 class 선택자 선택 후, append 메서드 forEach * Fetch : (자바스크립트 사용 시) 필요할 때 인터넷을 통해 데이터를 요청하고 받아오는 과정(짧은 코드로 데이터 가져올 수 있음) ▼ fetch() 기본 문법 let promise = fetch(url, [options]) +) fetch 및 자바스크립트 관련 자료 링크 자바스크립트 정보 출처(자세하게 나와있어서 짱 좋음): https://ko.javascript.info/fetch fetch ko.javascript.info 팀원이 공유해준 fetch 관련 정보 및 설명이 나와있는 사이트: https://www.dale..

오늘은 Git 특강 OT 이후, 웹개발 종합 강의(전체적인 그림을 보되 기초만 보는 느낌)를 들었다. 오늘부터 평일은 매일 TIL을 작성하고, 주중 하루는 WIL을 작성할 것이다. 작성 기준은 다음과 같다. 개발 진행에 따른 기록 작성 (개인) 개발하며 정리할 내용 또는 학습한 내용 블로그에 정리하기 (Tistory or Velog) 1. 어떤 의도, 이유로 해당 기능을 구현했는지 2. 해당 기능은 어떤 흐름으로 코드가 작동하는지 ▶ 입력값이 들어가면 어떤 출력값이 나오는지 또는 어떤 변화가 있는지 3. 버그 또는 에러는 어떤 것이 있었고 어떻게 해결하였는지 오늘 들은 내용을 짧게 짧게 작성한 것은 다음과 같다. 한 번 듣고는 이해만 될 뿐, 습득이 안 돼서 복습을 꼭 해야 한다. Git : 코드 변경점..