태그 목록
전체보기 (96)자바스크립트(32)클린코드(13)자료구조(13)알고리즘(12)회고(10)우테코(9)React(6)DOM(4)정렬 알고리즘(4)개발이랑은 딱히 상관없는 그냥 한 주 이야기(4)TIL(3)우아한테크코스(3)너비우선탐색(2)DFS(2)queue(2)stack(2)JavaScript(2)구조분해할당(2)퀵소트(2)트리(2)깊이우선탐색(2)재귀함수(2)array.length(2)BFS(2)nodejs(2)우선순위 큐(2)git(2)eqeq(1)insertAdjacentHTML(1)선입선출(1)virtual DOM(1)타입 검사(1)객체 변경 방지 메서드(1)object(1)배열(1)cors(1)Manifest(1)동등 연산자(1)이벤트 위임(1)비차단(1)proto(1)크롬익스텐션(1)else if(1)순수함수(1)불변성(1)코드컨벤션(1)선택 정렬(1)API(1)참같은값(1)컴포넌트 합성(1)ReactDOM(1)싱글스레드(1)이벤트루프(1)Graph(1)radix sort(1)stopPropagation(1)거짓같은값(1)애자일(1)eqeqeq(1)해시(1)해시맵(1)priority queue(1)heap(1)프로미스(1)그래프 순회(1)단축평가(1)함수형 프로그래밍(1)객체(1)제너레이터(1)이중 연결 리스트(1)시간복잡도(1)커스텀 이벤트(1)null 병합 연산자(1)instanceof(1)버블 정렬(1)reconciliation(1)해시 테이블(1)dijkstra(1)다익스트라(1)라우팅(1)프로토타입(1)비동기반복(1)매개변수(1)CRLF(1)공간복잡도(1)null(1)early-return(1)Prototype(1)이벤트 흐름(1)NaN(1)유사배열객체(1)props drilling(1)고차 함수(1)react redux(1)부정조건문(1)composition(1)getElementsByClassName(1)async(1)비동기(1)코드리뷰(1)책리뷰(1)Document 노드(1)linkedlist(1)&&(1)singly linked list(1)선형 검색(1)LF(1)타입스크립트(1)nodeList(1)typeof(1)this바인딩(1)Element 노드(1)의존성역전원칙(1)prefix-suffix(1)조건문(1)break(1)https(1)Node(1)querySelectorAll()(1)continue(1)Object.prototype.toString.call()(1)min-max(1)object.freeze(1)Computed property Name(1)Object.isFrozen()(1)props.children(1)검색 알고리즘(1)OR 연산자(1)배열 고차함수(1)산책(1)async/await(1)이진 힙(1)Big O(1)context(1)삼항연산자(1)tree traversal(1)타입(1)후입선출(1)길 찾기(1)리팩토링(1)this(1)first-last(1)begin-end(1)CSS(1)CSS Module(1)styled components(1)가중 그래프(1)드모르간의 법칙(1)함께 자라기(1)퀵정렬(1)useCallback(1)import 모듈(1)useselector(1)FIFO(1)Mixed Content(1)preventDefault(1)prettierrc(1)기타(1)(1)InnerHTML(1)분기다루기(1)이진 탐색 트리(1)이진 검색(1)appendChild(1)스택(1)array(1)트리구조(1)단일 연결 리스트(1)무방향 그래프(1)클래스 컴포넌트(1)graph traversal(1)캡처링 단계(1)doubly linked list(1)자막번역(1)LIFO(1)재조정(1)환경설정(1)components(1)버블링 단계(1)isNaN(1)for await of(1)lookup table(1)병합 정렬(1)DOM 이벤트(1)일치 연산자(1)다크모드(1)HTMLCollection(1)try catch(1)default case(1)Binary Search Tree(1)그래프(1)Hash Table(1)선언적 프로그래밍(1)Naive String Search(1)인접 리스트(1)(1)동시성(1)else(1)robots(1)삼항조건연산자(1)트리 순회(1)기수 정렬(1)binary heap(1)redux(1)EOL(1)eslintrc(1)Real DOM(1)stopImmediatePropagation()(1)합성(1)vscode(1)노션(1)디버그(1)최적화(1)React.memo(1)경계(1)undefined(1)heroku(1)

API 통신할 때 발생하는 문제 해결(https-http mixed content, CORS)

프론트엔드와 백엔드 협업을 처음 하였는데, API 통신할 때 발생하는 문제 해결 방법에 대해 지금까지 파악한 내용을 간단히 정리하였다.netlify를 통해 배포한 Url(https)에서 백엔드에서 만든 API Url(http)과 통신하려고 하자, SSL 관련 에러가 발

2022년 6월 9일
·
0개의 댓글
post-thumbnail

리액트 시작 전 기초

책 '실전 리액트 프로그래밍'의 1장을 읽고 학습 목적으로 정리한 내용입니다.

2022년 5월 22일
·
0개의 댓글
post-thumbnail

React Fiber 얕게 알아보기

리액트 화이바....? 어디선가 계속 언급되던 React Fiber를 살펴봐야겠다고 마음을 먹었다. react-fiber-architecture 문서를 읽다가 이해도 잘 안되고 금방 까먹을 것 같아 일단 대충 번역했고, 이외에 다른 문서 등에서 살을 붙였다.

2022년 5월 15일
·
0개의 댓글
post-thumbnail

React란

2013년에 올라온 Pete Hunt: React: Rethinking best practices -- JSConf EU 영상을 보다가 공부 목적으로 가볍게 정리하였다. 번역 등이 매끄럽지 않거나 정확하지 않은 내용이 있을 수 있다.ㅠ

2022년 5월 15일
·
0개의 댓글
post-thumbnail

[회고] 우테코 Level2 4주차 - "100-1=0"

기둥 밑에 100-1=0이라고 적혀 있었다. 이게 무슨 뜻일지 흥미로웠다.

2022년 5월 15일
·
2개의 댓글
post-thumbnail

알아두면 쓸모있는 FE 환경설정

.eslintrc와 .eslintrc.json의 차이는 무엇일까요? .eslintrc는 json이나 yaml 로 해석될 수 있으며 deprecated 됐다. 따라서 .eslintrc.json을 사용하는 것이 적절하다. https://dev.to/ohbarye/esli

2022년 5월 15일
·
1개의 댓글
post-thumbnail

react-redux의 useSelector 훅 만들기

Redux와 React는 독립적인 라이브러리이다. 이 두 라이브러리를 함께 사용하는 경우 공식 Redux UI 바인딩 라이브러리인 React Redux를 사용하여 두 라이브러리를 바인딩해야 한다.이 라이브러리들을 이해하기 위해, react-redux 라이브러리의 여러

2022년 5월 14일
·
0개의 댓글
post-thumbnail

Redux가 뭐예요

리덕스는 cross-component 또는 app-wide 상태를 위한 상태 관리 시스템이다.상태는 로컬 상태, cross-component 상태, app-wide 상태 와 같이 세 가지로 구분할 수 있다.로컬 상태는 데이터가 변경되면 하나의 컴포넌트 UI에 영향을 미

2022년 5월 14일
·
0개의 댓글
post-thumbnail

스타일 간섭을 방지하기 위한 styled components와 css module

컴포넌트 파일에 css 파일을 import하여 사용하는 기존의 일반적인 스타일링 방식은 스타일의 스코프가 해당 컴포넌트에만 국한되지 않는다. 큰 프로젝트에서 수많은 개발자들이 같은 코드에서 작업하고 있을 때, 동일한 css 선택자가 다른 의도임에도 중복해서 사용될 수도

2022년 5월 8일
·
1개의 댓글
post-thumbnail

[React] Context가 꼭 필요할까? 컴포넌트 합성으로 props drilling을 극복해보자

Prop Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.prop drilling이 보통 3~5개 컴포넌트를 거치는 정도이면,

2022년 5월 8일
·
1개의 댓글
post-thumbnail

[회고] 우테코 Level2 3주차 - 코리스

페이먼츠 미션 페이먼츠 미션 step1 피드백을 반영하고, step2를 진행하느라 바쁜 한 주였다. 오늘 step2를 완성하고 리뷰어님께 PR을 제출했다. 이번 미션에서는 디렉터리 구조를 개선하는 데에도 고민을 많이 했다. 컴포넌트들을 특성에 따라 common, components, containers, pages로 구분했다. 그리고 2단계에서 추가 구현...

2022년 5월 8일
·
4개의 댓글
post-thumbnail

[회고] 우테코 Level2 2주차 - 페이먼츠

이번 주에는 페이먼츠 step1 미션을 아놀드와 함께 하였다. useCallback, useContext, useReducer 등 리액트의 여러 hook들을 처음으로 직접 사용해봤다. 이외에도 styled-component와 storybook도 처음 접했다. 페어 덕분에 많은 것을 배웠다. 다음 링크들은 해당 미션을 구현한 배포 페이지와 스토리북 페이지...

2022년 5월 8일
·
0개의 댓글
post-thumbnail

[회고] 우테코 Level2 1주차 - 등교

우테코 레벨2가 이번 주 화요일부터 시작했다.

2022년 4월 24일
·
6개의 댓글

Router

바닐라 자바스크립트를 이용하여 SPA를 위한 간단한 Router를 만들어보고, 관련 개념을 정리하자. 데모페이지와 코드샌드박스 소스코드 주소는 아래와 같다. DemoPage codesandbox html은 다음과 같다. 앵커태그들을 만들고 변경된 html이 주입될

2022년 4월 7일
·
0개의 댓글
post-thumbnail

[회고] 우테코 7주차 - 산책

타입스크립트 타입스크립트를 처음 사용해봤다. 유튜브에서 타입스크립트 개념 기초 30분 강의를 듣고, 페어와 함께 필요한 부분을 하나 하나 찾아가면서 사용해보았다. 어려울 줄 알았는데, 생각보다 수월했고, 이렇게 이론보다 실행에 바로 옮기는 공부방법도 효과가 좋다는 것을 느꼈다. 하지만, 결과적으로 이론도 제대로 채워야겠다는 생각이 들어서, '타입스크립트 ...

2022년 3월 28일
·
4개의 댓글
post-thumbnail

자바스크립트에서 __proto__ VS. prototype 비교

SOF - \_\_proto\_\_ VS. prototype\_\_proto\_\_는 메서드 등을 체인을 타고 찾는데 사용되는 실제 객체이다.prototype은 new로 인스턴스를 만들 때 \_\_proto\_\_를 생성하는 데 사용하는 객체다. 함수 정의 코드를 실행

2022년 3월 21일
·
0개의 댓글
post-thumbnail

[회고] 우테코 6주차 - 독백이라 착각하기 쉽다

독백이라 착각하기 쉽다. 윤석철트리오의 곡 중에 가장 자주 듣고 애정하는 노래이다. 이번 주에 이 곡을 포함한 윤석철트리오의 재즈 음악을 많이 들었다.

2022년 3월 20일
·
1개의 댓글
post-thumbnail

[회고] 우테코 5주차 - 달리기를 말할 때 내가 하고 싶은 이야기

3월둘째주이번 주 화요일에 나만의 유튜브 강의실 구현 미션이 시작되었다. 위니와 페어가 되어 화요일부터 금요일까지 페어프로그래밍을 진행하였다. 페어프로그래밍을 할 때마다 느끼는 거지만, 다들 배울 점이 많고 열정적이다! 위니도 나랑 비슷하게 프로그래밍을 배우기 시작한지

2022년 3월 13일
·
5개의 댓글
post-thumbnail

[회고] 우테코 4주차 - 코드리뷰스터디 시작

지난 주말에 기획한 코드리뷰 스터디의 첫 시작을 잘 한 것 같다. 레이싱게임 미션 때, 혼자서 다른 37명의 크루들의 리뷰를 모두 살펴봐야해서 힘들었는데, 코드리뷰 스터디를 하면서 분량을 나눠서 하니까 훨씬 수월했다. 뿐만 아니라, 담당한 코드들을 더 자세히 분석하고,

2022년 3월 6일
·
2개의 댓글