분류 전체보기 (32) 썸네일형 리스트형 패스트캠퍼스 김민태의 프론트엔드 아카데미 : 제2강 만들어보며 이해하는 React & Redux 수강 후기(완강) 완강 후기 현재 우아한 형제들의 프론트엔드 개발 조합장이신 김민태 개발자님의 프론트엔드 시리즈 2편입니다. 1편은 자바스크립트와 타입스크립트에 대한 내용이었고, 2편은 리액트와 리덕스의 원리를 이해하는 강의가 진행되었습니다. 저는 노션을 사용해서 위와 같이 강의를 기록하기도 하였습니다. 2편은 개인적으로 올해, 정말 많은 성장을 있게 해준 강의였습니다. 위 사진은 정말 유명한 디자인 패턴인 "구독-발행 모델(Pub-Sub Pattern)"에 대해서 공부하던 부분입니다. ㅎㅎ 어렵게만 느껴지던 Pub-Sub에 대해서 쉽게 이해할 수 있게 된 계기가 되었네요. 수강 후의 성과(수강 후 달라진 점) : 프론트엔드 프레임워크 sangyoon-ui 개발 및 npm 배포 1편에서 바닐라 자바스크립트와 타입스크립트에.. [에러 해결] React에서 craco사용하기 (react-scripts 4로 설치하기, 에러해결법) 현재 create-react-app 으로 리액트를 시작하게 되면 react-scripts는 5.0.1 버전이기 때문에 craco가 설치되지않는다. 나의 경우 craco에 강제로 --legacy-peer-devs 를 붙여줘서 아래 명령어로 설치를 진행했었다. npm i @craco/craco --legacy-peer-deps 하지만 이 후 uuid를 설치하려고 하니... 또 craco가 설치되지 않는 것과 같은 에러가 발생해서 문제를 알아본 결과... 원인은 이 글을 작성하는 2022년 5월 30일 현재, craco는 6.4.3 버전이다. 그리고 이 react-scripts가 4.x.x 로 설치가 되어야 한다. 그렇지 않으면 계속해서 같은 에러가 발생하게 됨... 암튼 그래서 react-scripts를 4.. React.strictmode에서 일어나는 일(콘솔로그가 두번 찍히는 것) 🤔 발견한 문제 나는 오늘 데브코스에서 리액트 예제를 공부하던 중 몇 가지 이상한 점을 발견했다. 1. 같은 코드를 작성했지만 에러가 출력됐다. 강사님과 같은 코드를 작성했는데 나는 에러가 출력됐다. useHover.js import { useCallback, useEffect, useRef, useState } from 'react'; const useHover = () => { const [state, setState] = useState(false); const ref = useRef(null); const handleMouseOver = useCallback(() => setState(true), []); const handleMouseOut = useCallback(() => setState(f.. [에러 해결] 웹팩 - netlify 빌드 에러 문제 해결 데브코스 7주차 과제인 마이리얼트립 홈페이지 클론 과제를 netlify로 배포하려던 중 배포가 안되는 문제가 생겼다. 배포하는데 30분이 넘게 걸리고(맥북프로M1이 이럴리가...?), 그마저도 에러가되서 배포가 실패... 첫번째 문제 : 이미지를 모두 절대 경로로 바꾸기 각종 이미지와 svg 파일을 웹팩을 이용해서 파일로더 라이브러리로 함께 배포를 하려했는데, 파일로더 라이브러리에 문제가 생긴 것 같아서 이미지를 모두 절대경로로 바꾸었다. → 생각해보면 이것도 경로가 바뀌었기 때문에 생긴 문제 이 문제는 해결됐지만 여전히 배포에러... 두번째 문제 : output 삭제 [webpack-cli] [Error: ENOENT: no such file or directory, mkdir '/opt/build/r.. 노션 클로닝 미션 회고 ✋ No 프레임워크!! 자바스크립트로만 구현하는 notion 프로그래머스 데브코스 4주차 미션 미션 후기 및 회고 장장 1주일 동안의 노션 클로닝 미션이 끝이 났다. 뿌듯함과 동시에 아쉬움이 많이 밀려온다. 아쉬웠던 부분은 리팩터링을 진행하고, 앞으로 계속해서 추가적인 기능을 덧붙여 배포까지 해보고 싶다. 데모 기능 소개 사이드바의 최상단 "상윤의 notion"을 누르면 홈 화면으로 이동한다. 사이드바의 페이지 리스트를 클릭하면 해당 페이지로 이동한다. 토글 버튼을 클릭해서 하위 페이지를 볼 수 있다. 하위 페이지가 없다면 "하위 페이지가 없어요" 라고 보여준다. 페이지 생성 기능 사이드바의 하단 "새 페이지"를 누르면 새로운 페이지를 생성할 수 있다. 사이드바의 리스트에 추가를 한다면 리스트 아래에 새.. 피드백에 대한 나의 자세 💡 재야의 고수인가, 우물 안 개구리인가 피드백에 대한 나의 자세 현재 프로그래머스 데브코스 과정에 참여중이다. 현재 날짜 2022년 4월 22일 기준으로 34일 째인데, 참 많은 것을 배우고 있다. 단순히 기술적인 배움을 말하는 것이 아닌, 함께 성장한다는 것이 무엇인지 이제는 조금 알 것 같다. 데브코스처럼 많은 피드백을 받을 수 있는 상황에 있다는 것은 분명 행운이다. 나는 지금까지 스터디라는 것을 해본적이 없다. 줄 곧 혼자서 공부를 해왔고 결과도 나름 잘 나왔다. 그래서 혼자 공부하는 것에 익숙해져있었다. 개발 공부를 시작하면서도 스터디를 하면 좋을 것 같다는 이야기를 주변에서 많이 들었지만, 내가 혼자 구상한 공부 방법들이 있었기 때문에 딱히 신경 쓰지 않았다. 시간 낭비 일 것 같다고 생각했.. JSON 규칙과 에러핸들링 위키백과 JSON JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. JSON은 위키백과의 정의에서 처럼 데이터를 다루기 위한 포맷이다. 여기서 데이터란 프로그래밍 언어 코드 상의 데이터가 아니다. 코드 상의 데.. [딥 다이브 스터디 13 ~ 14장] 스코프 (이웅모, 위키북스) 를 읽고 공부한 내용입니다. 책의 내용을 그대로 적어 놓은 것이 아니기 때문에 오류가 있을 수 있습니다. 오류가 있다면 댓글을 통해 피드백 부탁드립니다. ❓ 급 퀴즈 아래 콘솔에는 무엇이 찍힐까요? 이유는 무엇일까요? var x = "나는 전역 변수 x" function foo(){ console.log(x); // ??? var x = "나는 지역 변수 x"; } foo(); console.log(x); // '나는 전역 변수 x' [1] 스코프란? 스코프는 프로그래밍 언어에서 매우 중요한 개념이다. 프로그래밍 언어를 처음 배울 때, 스코프에 대해서 배우지 않더라도 어느정도 직관적으로 스코프가 무엇인지 인지할 수 있을 것이다. function any() { var x = 1; va.. [딥 다이브 스터디 12장] 함수 (이웅모, 위키북스) 를 읽고 공부한 내용입니다. 책의 내용을 그대로 적어 놓은 것이 아니기 때문에 오류가 있을 수 있습니다. 오류가 있다면 댓글을 통해 피드백 부탁드립니다. ❓ 급 퀴즈 1. 콘솔에는 무엇이 찍힐까요? var add1 = function add(x, y){ return x + y; } console.log(add1.name) // ??? 2. 다음 함수는 어떤 문제를 가지고 있을까요? function introduce(name, age, location, hobby) { return `Hello! I'm ${name}, ${age} years old, from ${location}, like ${hobby}..`; } console.log(introduce(...)) [1] 함수란? .. [데브코스 16일차] 3주차 과제를 수행 중... 오마이갓... 과제만 하다가 오늘 강의를 하나도 못 들었다... 과제밖에 못했음... 과제를 하면서 커밋이 상당히 많았기에 (원래 이런건가... 나만 커밋 많은 것 아니겠지...?) 커밋을 좀 정리해두어야 할 것 같다. 들었던 생각, 고민을 같이 정리하면 좋을 것 같다. 📌 feat: TodoList.js 렌더링 구현 TodoList 컴포넌트를 구현했습니다. 📌 feat: index.js 에 App 클래스 추가, 컴포넌트의 렌더링은 App이 담당하도록 모듈화 index.js 파일을 만들어서 App 클래스를 추가했습니다. 이제 컴포넌트의 렌더링은 App이 담당합니다. TodoList를 모듈화해서 App 클래스 안에 추가했습니다. 이제 data는 index.js에서 보냅니다. TodoList가 data를 받.. 이전 1 2 3 4 다음
