본문 바로가기
  • soldonii's devlog

Javascript 공부123

바닐라코딩 부트캠프 7기 수료 및 취업 후기 안녕하세요, 바닐라코딩 부트캠프 7기를 수료하고 현재 프론트엔드 개발자로 일하고 있는 도현솔이라고 합니다. 그 동안 블로그에 댓글로 문의를 주신 분들이 꽤 계셨는데, 제가 취업해서 적응하고 정신없다는 핑계로 블로그 관리를 너무 소홀하게 했던 것 같습니다. 댓글로 문의를 주셨는데, 오랜 기간 답글을 받지 못한 여러 분들께 죄송하다는 말씀을 드립니다. 😭 그래서 오늘은 새해를 맞이한 기념으로, 바닐라코딩 부트캠프 7기 수료 및 취업 후기에 대해서 작성해보려고 합니다. (순수 내돈 내산 후기,, 제가 쓰고 싶어서 쓰는 후기입니다. ☺️) # 바닐라 코딩 수료 후 취업 결과 후기를 작성하기 전에 현재 제 상황에 대해 먼저 말씀드리면 아래 내용을 읽기에 도움이 될 것 같아서 간략하게 말씀드리려고 합니다. 2020.. 2021. 1. 3.
바닐라코딩 부트캠프 9주차 후기 바닐라코딩 9주차를 마친 오늘 오랜만에 후기를 작성해보려고 한다. 5주차 이후 한참동안 후기를 작성하지 못한 이유는 여러가지가 있다. 1) 점점 과제의 난이도가 올라가면서, 시간적/정신적으로 후기를 작성할 여유가 없었다. 2) 주말에 후기 쓰는 시간에 코드 한 줄이라도 더 써보고, 공부해야 하지 않을까 하는 불안감(?)이 더 커졌다. 물론 위 두가지 이유도 영향을 미쳤지만, 정말 짧게라도 30분 정도 시간을 내서 기록하려면 할 수도 있었다. 즉, 후기를 작성하지 못한 핵심적인 이유는 따로 있다. 왠지 만천하에 내 치부가 드러나는 것 같아서 조금은 부끄럽지만 그래도 최초 블로그를 시작할 때 이 공간을 최대한 솔직하게, 그 때의 생각과 감정을 정리하는 것이 가장 큰 목적이었기 때문에 용기를 내어서 작성해본다.. 2020. 3. 7.
바닐라코딩 부트캠프 5주차 후기 바닐라코딩을 시작한지 5주가 지났다. 4주차는 test 및 break 주간이라 따로 후기를 쓰지 않았고, React를 배우고 github 배틀 과제를 했던 5주차 후기를 작성한다. 부트캠프에서 React를 배운다는 점은 이미 알고 있었던터라, 많이 연습하고 들어오고 싶었는데 사실 React는 만족할만큼 충분히 예습하고 들어오진 못했었다. 게다가 나는 Class 기반 Component로 진행되는 강의를 들었던지라, ken 님이 알려주셨던 함수형 Component가 좀 생소해서 어려움이 있었다. 공식문서를 최대한 꼼꼼히 읽으면서 하나 둘 이해하고 있지만 아직 많이 부족하다고 느껴진다. 게다가 테스트 코드도 처음으로 작성해봤는데, 마치 1주차 과제에서 each를 맞닥뜨린 것 같은 느낌이었다. 아는 사람은 아는.. 2020. 2. 9.
200207(금) : Uncontrolled vs. Controlled Component in React React의 컴포넌트를 설명할 때 Uncontrolled Component와 Controlled Component라는 개념이 있다. 이 둘에 대해서 살펴보자. 1. 왜 uncontrolled와 controlled 컴포넌트에 대해 알아야 할까? React는 내부의 상태(state)를 '신뢰 가능한 단일 소스(Single Source of Truth)'로 관리하려는 설계 원칙을 가지고 있다. 즉 자식 컴포넌트가 data가 필요할 경우, 해당 data는 가장 가까운 공통 부모 컴포넌트에게서만 props의 형태로 전달받아서 사용해야 한다. 대부분의 HTML 엘리먼트들(ex. 등)은 엘리먼트가 내부적으로 어떤 데이터를 가지지 않기 때문에 문제될 것이 없다. 하지만 HTML 엘리멘트 중 자체적으로 특정 data를 .. 2020. 2. 7.
200206(목) : Static Method vs. Instance Method 자바스크립트에서 Static Method와 Instance Method는 어떤 차이가 있는지 정리하는 글이다. 1. Static Method 정적 메소드는 클래스의 인스턴스 없이도 호출이 가능하지만, 클래스가 인스턴스화되면 호출이 불가능하다. 다른 static method 내부에서 기존의 static method에 접근하고자 할 때에는 this keyword를 사용할 수 있다. class 키워드를 이용해서 구현할 때에는 static 키워드로 선언할 수 있다. 생성자 호출을 할 함수를 이용해서 구현할 때에는 직접 함수에 메소드를 추가하는 방식으로 선언할 수 있다. // 1. class 키워드와 static 키워드를 이용해서 정적 메소드를 선언하는 경우. class StaticMethodCall { stat.. 2020. 2. 6.
200131(금) : CORS 지난 글에 이어 이번에는 CORS에 대한 조사를 통해서 왜 오류가 발생했는지, 어떻게 해결할 수 있는지 작성해보고자 한다. 1. CORS란? CORS(Cross-Origin Resource Sharing)이란, 추가 HTTP 헤더를 사용하여 브라우저에게 한 출처(ex. a)에서 실행 중인 웹 응용 프로그램의 다른 출처(ex. b)의 선택된 자원(ex. json data)에 대한 접근 권한을 알려주는 메커니즘이다. 웹 응용 프로그램은 자신과 다른 출처를 가진 리소스를 요청할 때, cross-origin HTTP 요청을 실행한다. 도대체 이게 무슨 말이냐.. 할 수 있으니 우선 cross-origin HTTP 요청부터 살펴보자면, 예를 들어 http://soldonii.com 이라는 사이트의 프론트엔드 자바.. 2020. 1. 31.
200130(목) : Fetch API 이번주는 바닐라코딩 break week이고, 다음 주부터 3주간 리액트를 배우기에 복습 차원에서 리액트로 아주 간단한 앱을 미니 프로젝트로 살짝 만들어보려고 했다. 그런데 처음부터 난관에 부딪혔다;; componentDidMount() 메소드 내부에서 fetch를 이용해서 원하는 데이터를 요청하고 받아와서 state에 저장하려고 했는데, 아래와 같은 에러가 계속 떴다. 사실 쉽게 해결할 수 있는 방법은 stackoverflow에서 찾을 수 있어서(해결책 링크) 계속 앱을 만들어봐도 되지만... ken님은 항상 모든 에러 메시지를 면밀히 살펴보고 꼼꼼히 조사해보기를 권장한다. 사실 그게 맞긴 하지만 항상 시간 내에 뭔갈 하다보면 그게 쉽지 않은데, 그래도 이번에 break 주간인 김에 내가 원하는 걸 못 .. 2020. 1. 30.
200129(수) : Deep copy vs. Shallow Copy 오늘은 자바스크립트에서 객체를 복사하는 방법에 대해서 포스팅하고자 한다. 그 동안 shallow copy, deep copy 같은 용어와 그 방법에 대해서 여기저기서 들어봤으나 한 번도 제대로 된 주제로 다뤄서 글을 쓴 적은 없었기에 작성한다. 1. '복사'란 간단하지 않다. 자바스크립트에서 복사는 참으로 간단한 듯 하지만 실은 매우 복잡한 문제라 생각한다. 데이터 타입이 원시값인 경우, 즉 string, number, undefined, null, boolean의 경우만 존재한다면 복잡할 것이 전혀 없다. 하지만 객체(배열 포함), 함수 등을 복사할 경우, 그리고 해당 객체 내에 nested 형태의 객체가 또 존재할 경우에는 문제가 복잡해진다. 단순히 stack overflow에만 봐도 자바스크립트의 .. 2020. 1. 29.
바닐라코딩 부트캠프 3주차 후기 2020년 1월 6일(월)에 시작한 바닐라코딩 부트캠프 7이 벌써 3주나 지났다. 지난 3주간을 돌아보며 느낀 점, 배운 점을 정리하고자 한다. 2주차에 자료구조를 배운 것에 이어 3주차에는 정렬 알고리즘에 대해서 배웠다. 가장 기본적인 bubble sort, insertion sort 뿐 아니라 merge sort, quick sort 등에 대해서 배웠고 이 정렬 로직들을 시각적으로 구현하는 간단한(?) 과제가 주어졌다. 이 정렬 로직들도 학원 들어오기 전에 udemy에서 이것저것 들으면서 공부를 하긴 했었는데 시각화를 하는 것은 역시 어렵더라..ㅠㅠ 강의를 듣고 이해를 하긴 했었는데 완전 내 것이 되도록 충분하게 연습하지 못했던 것이 원인인 듯 하다. 그 당시에는 학원 들어오기 전에 최대한 많이 배워.. 2020. 1. 27.