✨ 항해99 잔디 기부 캠페인 참여 완료! ✨항해 99에서 정말 좋은 취지인 깃허브 커밋 갯수만큼에 기부한다는 너무나도 좋은 이벤트이기에 나의 조금만한 잔디를 기부할 수 있어 너무나 뿌듯한 이벤트인 것 같다! 🔥 자세한 내용은 아래 페이지에서 확인 가능! 개발자 커리어 개척 캠프 항해99 | 잔디 기부 캠페인세상의 성장에 기여하세요hanghae99.spartacodingclub.kr

State state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미 (=함수 내부에 선언된 변수)! Props Compoennt 간의 정보교환 방식 하위 컴포넌트에 값을 전달할 때 사용 props는 단반향 데이터 흐름의 리액트를 상위에서 하위로의 데이터 전달을 위해 사용함 (=함수에 전달하는 매개변수) - props는 반드시 위에서 아래 방향으로 흐린다 사이가 먼 컴포넌트에 Props로 정보를 주려고 하면 `propsdrilling` 발생한다 그럴떄를 대비해서 useContext 나 Rudex를 사용하자 리렌더링 이 되는 조건 1️⃣ 컴포넌트에서 state가 바뀌었을때 2️⃣ 컴포넌트가 내려받은 props가 변경되었을때 3️⃣ 부모 컴포넌트가 렌더링 된 경우 자식 컴포넌트도 렌더링이됨 부모컴포넌트가 ..

문제 1. form 태그 안 요소를 클릭할 때마다 새로운 todos가 생기는 문제가 생겼다 2. 값을 바꿔도 리레더링이 되지가 않는다 시도 1. 코드를 다시 보면서 왜 안되는지를 계속 찾아봤다 2. 구글링 해도 도무지 모르겠어서 기술 매니저님에게 여쭤어봤다 해결 1. form 태그에 onClick를 줘서 form태그안에 2. 스레드 문법으로 얕은복사를 하여 state값을 바꿨다 알게된점 1. 상황에 맞는 이벤트리스너를 잘 쓰자 코드를 잘보자 2. 리액트의 불변성에 대해 공부하게되어서 제대로 알게되었고 스레드 문법과 prev를 사용해서 값을 수정해서 state값을 바꿔 리레더링이 되게 구현했다 리액트에서 렌더링이되는 조건은 state 값이 바뀌면 된다는걸 알게되었다 완성본 다른분에 조언을 듣고 색을 최대한..

이번주 금요일 부터 React 에 대한 주차가 시작되었다 뭔가를 많이 하기는 한거같은데 뭔가 아직은 부족하다는 생각이 많이 든다 이번주차에는 시간을 알맞게 분배해서 강의 와 과제 개인공부 까지 열심히 할것이다 이번주 키워드 콜백함수, HTTP 콜백함수에 대하여 파라미터로 함수를 전달하는 함수이다 콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다 콜백 함수 사용 목적 비동기 방식으로 작성된 함수를 동기 처리 하기 위해 주로 사용합니다. 비동기 처리를 기본으로 하면서도 일부 구간에서 순차적인 처리가 필요할 수도 있기 때문입니다 function cry() { console.l..

오늘 배운내용 1. 데이터 타입 2. 실행 컨텍스트 데이터 타입에대해서는 자료 조사하고 팀원들과 애기를 통해 많이 배웠다 그래서 흐름과 어느정도 이해를 했다 하지만 실행 컨텍스트는........... 하... 그냥 한숨만 나온다 실행 컨텍스트 부분에서 이해한건 스택 과 콜뿐.. 막막하다 천천히 읽어봐도 머리에 들어오지 않아 내일 하기로 마음먹었다 기술매니저님이 오셔서 실행컨텍스트 부분 어떻게 공부를 해야되냐고 여쭤봤다 기술매니저님에 TIP으로는 스코프 -> 호이스팅 -> 실행 컨텍스트 이런식으로 공부하면서 흐름을 이해하라고 하셨다 그리고 스코프에서 호이스팅 갈때 스코프와 호이스팅 어떤 연관이 찾고 호이스팅에서 실행 커텍스트 갈때 어떤 연관이 있는지 찾으면서 하면 많은 도움이 된다고 알려주셨다.. !! 오..

오늘은 처음으로 알고리즘 프로그래머스를 풀어본 날이었다 할당된 문제는 https://school.programmers.co.kr/learn/courses/30/lessons/86491?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제를 아무리 봐도 봐도 이해를 못하겠다 .. 하........ 참고내용을 계속 봐서 이해를 했다 문제푸는데 2시간은 걸린거같다 function solution(sizes) { let big = 0; let small = 0; //반복문을 사용해서 반복문 돌때마다 배열에 [] 인덱스 순서대로 ..

나머지 구하기 문제설명 정수 num1, num2가 매개변수로 주어질 때, num1를 num2로 나눈 나머지를 return 하도록 solution 함수를 완성해주세요. 조건 0 < num1

정의 자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어입니다. 자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다. 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력원인 엔진이라고 볼 수 있다. JS 사용하면 사이트를 동적 으로 만들수 있고 보다 더 나은 이쁜 UI를 만들수 있다 자바랑 연관성 이름이 비슷해서 연관있어보이는 없다.. 처음 만들어졌을 당시 LiveScript 라고 불렸는데...

SSR Sever Side Rendering 말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식 User가 사이트를 요청을 보냄 Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다. (리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.) 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. (Javascript가 읽히기 전이다.) 클라이언트가 자바스크립트를 다운받는다. 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다. 이때의 사용자 조작을 기억하고 있는다. 브라우저가 Javascript 프레임워크를 실행한다. JS..

🚨DB에 저장된 todolist 가 페이지네이션에 필요한 함수에 적용이 안됨🚨 그래서 페이지네이션 버튼이 생성이 되지않았다 이 오류를 수정하기 위해 어떤 시도를 했는가 setTimeout 함수를 사용해서 DB에 저장된 todolist가 출력되게 해봤지만 실패를 했고 if문을 사용했지만 실패를 했다 다시 천천히 코드를 보면서 전체적인 흐름을 이해하면서 정답을 찾았다 어떻게 해결해봤는지 저장된DB 를 보여주는 ajax 코드 아래 자료들을 html에 바인딩 하고 그 아래에 페이지네이션을 구성하는 코드를 넣었더니 성공을 했다 🔥 이 과정을 거치면서 뭘 새롭게 알게 되었는지🚢 내가 짠 코드더라도 의미를 모르고 사용하면 오히려 독으로 다가온다 전체적으로 흐름을 이해하면 왜 여기에 이걸를썼는지 나에게 계속물어가며 코..