본문 바로가기

전체 글

(45)
[LeetCode] 스택 > 20. Valid Parentheses 1. 문제 정보 2. 손코딩 3. 어려웠던 부분 4. 코드 5. 다른 사람의 풀이 6. 어떤 부분이 / 스택/큐 로직과 연결되는지? 1. 문제 정보 1) 출처: https://leetcode.com/problems/valid-parentheses/ 2) 문제 설명: Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid. An input string is valid if: 1. Open brackets must be closed by the same type of brackets. 2. Open brackets must be closed in th..
2. C 언어 * 모두를 위한 컴퓨터 과학(CS50 2019) 강의를 듣고 요약한 내용입니다. 해당 글에는 퀴즈에 대한 정답 및 풀이도 있습니다. 아직 퀴즈를 풀지 못하신 분들은 퀴즈를 풀고 난 후에 해당 포스팅을 읽으시길 바랍니다. 목차 1) C 기초 2) 문자열 3) 조건문과 루프 4) 자료형, 형식 지정자, 연산자 5) 사용자 정의 함수, 중첩 루프 6) 하드웨어의 한계 1. C 언어 - C 기초 학습 목표: C로 "hello, world"를 출력하는 프로그램을 만들 수 있습니다. C 언어 - C는 아주 오래되고 전통적인 순수 텍스트 기반의 언어 - 검은 색 바탕에 있는 이상한 글씨들은 아래의 스크래치 블록과 결과적으로 정확히 같습니다. - #include 는 "stdio.h"라는 이름의 파일을 찾아서 "prin..
1. 컴퓨팅 사고 * 모두를 위한 컴퓨터 과학(CS50 2019) 강의를 듣고 요약한 내용입니다. 해당 글에는 퀴즈에 대한 정답 및 풀이도 있습니다. 아직 퀴즈를 풀지 못하신 분들은 퀴즈를 풀고 난 후에 해당 포스팅을 읽으시길 바랍니다. 목차 1) 2진법 2) 정보의 표현 3) 알고리즘 4) 스크래치 기초 5) 스크래치 심화 1. 컴퓨팅 사고 - 2진법 학습 목표: 컴퓨터 과학이 무엇인지 정의하고, 컴퓨터가 정보를 표현하는 방법에 대해 설명할 수 있습니다. 컴퓨터 과학 - 컴퓨터 과학은 문제 해결에 대한 학문 - 문제 해결: 어떠한 입력(input)을 전달받아 어떠한 출력(output)을, 그 문제에 대한 답을 찾는 것 - 그 중간에 있는 과정이 바로 컴퓨터 과학 - 이러한 입력과 출력을 표현하기 위해선 우선 약속(표준)..
git head를 mybranch에서 -> origin/mybranch 로 옮기는 방법 1. 문제 상황 - 나의 브래치 이름: mybranch(이 브랜치의 작업은 오로지 로컬에서만 이루어진다.) - 원래 입력했어야 할 명령어: git push origin mybranch - 잘못 입력한 명령어: git push origin master - reject 됨 2. 해결 방법 - 일단 HEAD를 내가 가고 싶은 커밋으로 옮긴다: git reset --soft hashcode - 수정한 파일들을 git add, git commit 을 한다. - 브랜치를 제대로 확인후 push 한다: git push origin mybranch -f
[리액트 공식문서] HOOK 5 ~ 8 5. Hook 규칙 - Hook은 JavaScript 함수이다. 하지만 Hook을 사용할 때는 두 가지 규칙을 준수해야 한다. - 1. 최상위(at the Top Level)에서만 Hook을 호출한다. 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 않는다. - 2. 오직 React 함수 내에서 Hook을 호출해야 한다. 6. 자신만의 Hook 만들기 - 자신만의 Hook을 만들면 컴포넌트로 로직을 함수로 뽑아내어 재사용할 수 있다. import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() =>..
[리액트 공식문서] HOOK 1 ~ 4 1. Hook 소개 - 우리가 왜 Hook을 React에 추가했는지, 그리고 Hook이 애플리케이션을 작성하는 데 어떠한 도움을 주는지 알아보자. 1) 동기 - 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다. > Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화 할 수 있다. - 생명주기 메서드를 기반으로 쪼개진 복잡한 컴포넌트들은 이해하기 어렵다. > Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다. - React 에서의 Class 사용을 위해서는 JavaScript의 this 키워드가 어떻게 작동하는지 알아야만 한다. Class는 사람과 기계를 혼동시킨다. > Hook은 Class 없이 React 기능들을 사용하는 방법들을 제시한다. 2..
[리액트 공식문서] 주요 개념 9 ~ 12 9. 폼 - React application에서 사용자가 폼을 제출할 때, JavaScript 함수로 1) 폼의 제출을 처리하고 2) 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리하다. 이를 "제어 컴포넌트(controlled components)"라고 불리는 기술을 이용하는 것이다. 1) 제어 컴포넌트 (Controlled Component) - HTML에서 , , 와 같은 폼 태그들은 사용자의 입력을 기반으로 자신의 데이터를 관리하고 업데이트 한다.(value attribute를 통해 자체적인 Data를 갖고 그 데이터는 DOM에 저장된다) - React에서는 변경할 수 있는 데이터가 일반적으로 컴포넌트의 state 속성에 유지되며 setState( )에 의해 업데이트 된다. (=> inp..
[리액트 공식문서] 주요 개념 5 ~ 8 정리 5. State and Lifecycle - 아래 코드를 const root = ReactDOM.createRoot(document.getElementById("root")); function tick() { const element = ( Hello, world It is {new Date().toLocaleTimeString()}. ) root.render(element); } setInterval(tick, 1000); - Clock 컴포넌트로 만들어 재사용하고 캡슐화 해보자 (??? 컴포넌트 캡슐화의 의미 ??? 컴포넌트 내부의 값은 다른 컴포넌트가 바꿀 수 없다? 라는 의미인걸까? 재사용이 가능한 컴포넌트를 만들기 위해서 캡슐화라는 용어를 쓴 것일까?? ++ 리액트에서 컴포넌트 캡슐화란 메인 어..