욕심도 참 많아

https://school.programmers.co.kr/learn/courses/30/lessons/161990 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr def solution(wallpaper): minxCnt=len(wallpaper) maxxCnt=0 minyCnt=len(wallpaper[0]) maxyCnt=0 for i,line in enumerate(wallpaper): for j,box in enumerate(line): if(box=="#"): minxCnt=min(minxCnt,i) maxxCnt=max(maxxCnt,i) mi..

Axios 란 브라우저 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. Fetch에 비해 별도의 설치가 필요하지만, fetch보다 더 많은 기능 지원과 문법을 간소화 해준다. 나는 이번 프로젝트를 진행하면서 전역적으로 사용하기 위하여, axios.create 를 사용해 주었다 import axios from "axios"; const api = axios.create({ baseURL: "~~", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 해당 파일을 생성해 준뒤, api만 따로 import 하여 URL은 뒤에 추가만 해주면 된다! import api fro..

짧지만 기억에 오래 남을 것 같은, 나의 2번째 인턴이 끝났다. 방학을 그냥 허투루 보내기는 싫었고, 이런 저런 방학동안 할 수 있는 인턴 프로그램을 찾던 도중 '그룹바이' 라는 단체에서 스타트업과 대학생 개발자들을 연결하여주는 프로그램에 지원하여 붙게 되었다!! 우선 회사 서비스의 어드민 페이지만 작업하기로 되었었지만 운이 좋게도 회사의 주 서비스도 작업할 수 있게 되었다!!! 어드민 페이지도 쫄렸지만,,,, 주요 서비스에 직접 작업하는것은 더 떨렸다 처음 어드민 페이지 작업은 서비스의 데이터를 쉽게 추출하고, 수정하는 등의 CRUD 작업 위주로만 이루어졌다. 진짜 정말 퍼블리싱 제외하고 파이어베이스 스토리지에서 데이터만 주고 받고 수정하고 지우고 가지고 놀다보니 Promise 와 async/await..

회사에서 gif 파일을 메인화면에 띄워줄 필요가 있었는데, 그냥 gif링크를 올리는 것은 언제 gif가 없어질 지 모르고, 링크가 바뀔 수 도 있으니 Base64 파일형식으로 firebase storage에 저장하고자 하였다. if (newSeason.img) { const response = await fetch(newSeason.img); const blob = await response.blob(); const base64 = await new Promise((resolve) => { const reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = () => { const base64data = reader.result;..

회사에서 firebase database에서 데이터들을 받아오고 화면에 띄우는 작업을 하는 도중, 전체 데이터가 안받아져 오는 에러를 발견했다. 코드상 문제는 없었다고 생각해서 계속 고쳐봤는데도 똑같은 문제가 발생해서 서칭을 해보니 js 에서 map 은 그 자체로 체이닝을 할 수 없고 , map 이후에 코드를 실행하려면 Promise.all 을 사용해 줘야 한다는 것을 발견했다. Promise.all(arr.map(data)=>{ ~~~~~~~~ ).then(()=>{ ~~~~ }) } 이런식으로 map 을 한번에 Promise.all() Scope 로 감싸주면 , map에서 여러번 반복되는 데이터를 한꺼번에 모아서 할수있어진다! 하지만 이 방식은 map 의 새로운 원소들은 끝나는 순서대로 리턴되기에, ..

MUI 에서 지원하는 styled을 사용한다. 원래 사용하던 Styled-Component 처럼 많은 이점이 있는데, 1. 컴포넌트의 이름을 새로 지정할 수 있고 , Style Override를 지원 해준다. 2. 편한 조건부 스타일링이 가능해진다. (Ex: createTheme) 우선 @mui/system 혹은 @mui/material 에서 import 해온다. import * as React from 'react'; import { styled } from '@mui/system'; const MyComponent = styled('div')({ color: 'darkslategray', backgroundColor: 'aliceblue', padding: 8, borderRadius: 4, }); ..

https://www.acmicpc.net/problem/11059 11059번: 크리 문자열 첫째 줄에 문자열 S가 주어진다. S는 숫자로만 이루어져 있으며, 길이는 1,000을 넘지 않는다. 항상 크리 문자열이 존재하는 입력만 주어진다. www.acmicpc.net num = input() if(len(num)%2==0): firstLen = len(num) else: firstLen = (len(num)-1) answer=0 Bool=True while Bool==True: if(firstLen==2): answer=2 break for i in range(0,len(num)-firstLen+1): cnt1=0 cnt2=0 for j in range(i,i+firstLen//2): cnt1+=int..

외부 API POST 호출시에 The 'Access-Control-Allow-Origin' header has a value 'https://localhost:3000' that is not equal to the supplied origin. 라는 오류를 마주하고, CORS에러라는 것에 대하여 알게 되었다. CORS정책이란? CORS란 교차 출처 리소스 공유(Cross Origin Resource Sharing)의 줄임말로, 서로다른 출처간의 리소스를 전달하는 방식을 제어하는 체제 이다. 나 같은 경우에서는 localhost3000인 프론트엔드에서 localhost8000인 백엔드로 리소스를 전달하는데에 있어 CORS정책으로 인해 차단된 것이다. 우선 출처(Origin)이란, Protocol(http,..

브라우저 주소 창에 tistory.com 을 입력했을때의 과정 브라우저란 사용자의 자원(html / pdf / 이미지 등)을 서버에 요청하고 표시하는것이 주 기능이다. 자원의 주소는 URI에 의해 정해진다. 브라우저의 구성요소 - 사용자 인터 페이스: 요청 페이지 창 제외 나머지 모든 부분 -브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 제어 -렌더링 엔진 : 요청한 콘텐츠를 표시 -통신 : 네트워크 호출에 사용 - UI 백엔드 : 창 기본적인 장치를 그림 -JS 엔진 : JS를 해석하고 실행함 -자료 저장소 : 쿠키 등의 자원을 저장함 렌더링 엔진의 기본적인 동작 과정 1. 서버에서 HTML, CSS를 Parser을 사용하여 DOM, CSSOM으로 만든다 이때 tree들이 만들어진다 2. DOM..

출처:https://school.programmers.co.kr/learn/courses/30/lessons/120842 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr def solution(num_list, n): answer = [[] for i in range(len(num_list)//n)] cnt=0 cnt2=0 for i in range(len(num_list)): answer[cnt].append(num_list[i]) cnt2+=1 if(cnt2==n): cnt+=1 cnt2=0 return answer