TIL

토이프로젝트를 진행하려고 하면서 기존 웹개발 종합반 강의에서 사용하던 파이참에서 vscode로 코드를 작성하려 하는데 파이썬 가상 인터프리터 설치 방법을 몰랐다.

토이프로젝트 13조는 작성을 완료한 블로그의 URL에서 Open Graph를 크롤링 해온 뒤에 웹페이지에 보여주고, 좋아요 버튼을 눌러 순위표를 확인할 수 있는 웹페이지를 만들었다. 블로그 URL을 크롤링하는 과정에서 벨로그와 티스토리는 크롤링 할 수 있었지만 네이버

블로그 정보들을 담은 카드들이 삐죽삐죽 튀어나와있고 DB에서 가져온 title과 desc text 넘쳐나서 카드가 망가졌다.

웹개발 종합반을 들으면서 만들어놨던 서버에 원격접속하려고 했으나, 약 1분..? 간 터미널이 멈춰있고 접속이 되지않고 오류가 발생했다. ssh: connect to host ... port 22: Operation timed out

우선 정규식이란 텍스트에서 어떤 문자가 있는지 검사할 때 동일한 문자를 모두 한번에 하나씩 입력하고 조회해 찾아볼 수 있지만, 조건이 복잡해지면 불편하게 될 수 있다. 이때 특정한 표현 규칙이나 기호를 활용해 다양한 규칙을 간단하게 정의할 수 있다.

토이프로젝트가 끝나고 다음으로 진행될 풀스택 미니 프로젝트에 대비해 추가로 Git Session을 들으면서 GUI를 사용할 때 간혹 에러가 날 수 있는데 이때 명령어를 통해 사용하면 쉽게 에러가 해결되는 경우가 많다고해서 명령어를 통해서도 git을 익힐 필요가 있음

인증은 웹서비스를 개발할 때 필수적으로 필요한 기능이다. 사용자마다 원하는 정보, 컨텐츠를 다르기 때문에 이를 다르게 보여주려면 사용자를 인증하는 기능이 필요하고 서버에서는 누구의 요청인지 구분할 수 있어야하기 때문에

Git rebase

문제 최소 직사각형을 구하려고 한다. sizes = [[60, 50], [30, 70], [60, 30], [80, 40]] 위의 배열에서 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기(= 5600)면 모든 직사각형을

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다.

정수 배열 num_list와 정수 n이 매개변수로 주어집니다. num_list를 다음 설명과 같이 2차원 배열로 바꿔 return하도록 solution 함수를 완성해주세요.

변수 : 변할 수 있는 수, 데이터가 변할 수 있는 무언가, 무언가는 데이터를 말함 식별자 : 데이터를 식별하기위해 사용되는 이름, 변수명을 말함 자바스크립트에서 기본형과 참조형 기본형 : Number, String, Boolea

대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다.

javascript에서 this는 가장 혼란스러운 개념중 하나이다. 일반적으로 객체지향언어에서 예약어 'this'는 함수가 속해있는 객체 자기 자신과 연관이 깊습니다.

동기란 데이터의 요청과 결과가 한 자리에서 동시에 일어나는 것을 말합니다. 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 합니다. 비동기란 동시에 일어나지 않는다는 의미입니다. 요청한 결과가 동시에 일어나지 않을 것이라는 약속입니다.

문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요.

정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요.

수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다.

문제 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여,

프로그래밍 기초 주에서는 javascript를 이용해서 코딩테스트 문제를 풀어보고 모의고사를 진행하게 된다. 본 모의고사를 보기 전에 연습으로 제공하는 코딩테스트 문제를 풀어보고 풀이영상을 제출해 봤다.

항해99 프로그래밍주차때 진행한 본 모의고사 문제 풀이.

컴포넌트 내에서 '단방향 데이터 바인딩'은 JavaScript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화 하는 것을 말한다.

프로그래머스 팩토리얼 !

항해99에서 주특기 입문 주차를 시작하면서 개인과제가 주어졌는데 배운 내용들로 To Do 웹 만들어보기이다.

코드 상에서 비슷하게 동작하는 input 기능을 커스텀 훅으로 만들어보는 것이 목표였다. > 반복되는 부분의 로직을 js파일로 따로 빼서 useInput 커스텀 훅으로 만들어 보는 것이 목표 진행 처음에는 위의 그림에서 reset은 넣지 않고 아래 처럼 코

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터에요! 다시 말해, 컴포넌트 간의 정보 교류 방법이다. props는 반드시 위에서 아래 방향으로 흐른다.

어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때, props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 값을 넘겨주었다. 그런데 props로 state를 공유하는 방법에는 불편한 점이 몇가지 있다.

리덕스를 사용하기 위해서는 결국 개발자가 리덕스의 구성요소를 모두 만들어야만 사용이 가능하다. 그런데 만약 리덕스 모듈을 개발하는 개발자마다 구성요소들을 제 각각 구현한다면? 그렇게 된다면 그 개발자와 현업을 해야할 때 구성요소를 구분하기가 쉽지 않을 것이다.

input 커스텀 훅

우선 Router Dom이란 URL의 링크에 따라 Component를 생성해 주는 것이다. react는 SPA인데, 하나의 링크로 사용자에게 페이지를 보여줄 수 있지만 특정 페이지로 이동하려고 할 때 Router Dom을 사용하게 된다.

styled-components에서 자식 컴포넌트에 props 전달하기..!

모달창을 만들기 위해서 Portal을 이용해 만들어보려고 한다. 리액트 공식 문서에서는 Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다.

모달창 스크롤 막기와 외부 클릭 시 모달창 닫기

프론트 엔드를 공부하면서 BE가 없지만 한번 API 통신을 해보고 싶을 때가 있다.

redux thunk 미들웨어로 비동기 delete 기능

리액트에서 카카오맵 API 사용

아래와 같이 코드를 작성했을 때, input의 value가 삭제는 되었지만 다음과 같은 오류가 발생했다.

실전 프로젝트에서 채팅 기능을 넣기로 했다. 채팅 기능과 관련해서 알아보았을 때, soket.io를 많이 사용한다고 해서 soket.io로 하려고 했으나, 추가적으로 알아보니 백엔드가 Spring일 때에는 SockJS와 Stompjs를 많이 사용한다고 한다.

axios에서 instance(baseURL, headers..등등을 설정)를 설정해주면, 기본적인 통신(?)설정을 할 수 있다.

사이트 활용해서 말풍선 만들기

웹페이지가 렌더링 되는 과정에 대한 글입니다

RESTful API에 대한 설명 입니다.

호이스팅과 TDZ에 대한 설명입니다.

parameter와 argument이 차이에 대한 설명입니다.

프레임워크와 라이브러리에 대한 설명입니다.

캐시에 대한 설명입니다.

HTTP에 관한 설명입니다.

css postion에 대한 설명입니다.

javasxript의 this에 대한 설명입니다.

브라우저의 저장소에 대한 설명입니다.

require와 import 정리 글입니다.

배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대한 설명입니다.

useRef에 대한 설명입니다.

Cookie의 간단한 설명과 MaxAge, Expires에 대한 설명입니다.

순수함수에 대한 설명입니다.

state와 props의 비교 설명입니다.

<ul>, <ol>, <li>에 대한 설명입니다.

Semantic HTML에 대한 설명입니다.

MUI의 checkbox