본문 바로가기
300x250

코드스테이츠36

코드스테이츠 10주차 리뷰 - 섹션2를 마치며 드디어 10주차가 되어 두번째 섹션을 마무리하는 ha시험까지 치뤘다. 결과를 먼저 말하자면 30기로 기수 이동 되었다. 기수이동이 된 날 저녁까지 왜 떨어졌을까 생각했다. 일단 HA시간에는 코플릿형과 과제형 두가지로 나뉘어 출제되었고, 코플릿은 3문제 중에 2문제의 조건 하나씩을 제외하고는 풀었다. 3번 그래프 문제에서 정말 포기하고 싶었는데, 예전 했던 코플릿을 돌아보며 어...이거 이용하면 근접은 하겠는데 하면 5시30분부터 제출전인 6시까지 온 힘을 다해 풀었더니 테스트통과 조건 4개 중에 3개까지 맞추게 되었다. 이때는 기분이 째졌다.ㅋㅋㅋ 과제형은 client와 server문제를 각각 react와 nodejs를 활용하여 푸는 문제였고, 모두 테스트 통과하였다. 쪼금 아쉬운건 테스트 통과는 되었지.. 2021. 6. 13.
[react] CSS-in-JS 관련 라이브러리 Styled Component Styled Component 정의 React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 만들어졌다. styled Component 를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다. styled Component 1. Automatic critical CSS : 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입된다. 2. No class name bugs : 스스로 유니크한 className 을 생성한다. 이는 className 의 중복이나 오타로 인한 버그를 줄여준다. 3.Easier deletion of CSS : 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴.. 2021. 6. 1.
[CSS] 구조적인 CSS 작성에 대한 발전 과정 Component-Driven Development(CDD) 부품 단위로 UI컴포넌트를 만들어 나가는 개발 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야할 팀원 수도 많아짐에 따라 CSS를 작성하는데 일관된 패턴이 필요해졌다. 또 다양한 디바이스들과 디스플레이를 커버해야 하기 때문에 css는 더욱 복잡해졌다. 이러한 문제점을 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 나타났다. css를 작성할 때는 많은 반복적인 작업을 요구한다. color값을 찾는 일, tag를 닫는 일 등 뿐만 아니라 클래스의 상속과 같은 사항으로 css의 문서는 점점 양이 많아지고 유지관리에 많은 영향을 끼친다. CSS 전처리기 자체만으로는 웹서버가 인지하지 못하기 때문에 각 css전처리기에 맞.. 2021. 6. 1.
자바스크립트_동기/비동기 개념정리(callback_promise_async/await) 오늘은 비동기에 대해서 알아보겠습니다. 동기(Synchronous): 요청에 대한 결과가 동시에 일어난다. 비동기(Asynchronous): 요청에 대한 결과가 동시에 일어나지 않는다. 동기는 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어집니다. 비동기는 요청과 결과가 동시에 일어나지 않을거란 약속입니다. 동기방식은 매우 간단하고 직관적이지만, 결과가 주어질 때까지 아무것도 못하고 기다려야 하기에 효율적이지 않다는 단점이 있습니다. 비동기 방식은 동기보다 복잡할 순 있지만, 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 효율적으로 사용할 수 있습니다. 비동기와 동기의 일상생활의 예시를 들면, 커피를 마시고 카페에 갔는데 줄이 있습니다. 우리는 1. .. 2021. 5. 21.
자바스크립트_기본 함수 구현하기(_.filter, _.uniq, _.each,_.map, _.reduce) 이번 주에는 자바스크립트 유틸리티 라이브러리 underscore의 함수들을 직접 구현하는 과제를 받았습니다. 그중에서 제가 중요하다고 생각하는 몇가지만 정리해보겠습니다. _.each 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 * 배열 arr을 입력받을 경우, iteratee(ele, idx, arr) * 객체 obj를 입력받을 경우, iteratee(val, key, obj) * 이처럼 collection의 모든 정보가 iteratee의 인자로 잘 전달되어야 모든 경우를 다룰 수 있습니다. * 실제로 전달되는 callback 함수는 collection의 모든 정보가 필요하지 않을 수도 있습니다. */ // _.each는 명시적으로 어떤 값을 리턴.. 2021. 5. 19.
코드스테이츠 6주차 리뷰-section 2 시작 5월6일 ha테스트를 통과하고 섹션투의 첫째주가 지나갔다. 한 주동안 재귀함수와 자료구조/알고리즘에 대해 배웠는데 많이 해맸다. 한문제 혹은 한 과제를 만날때마다 어떻게 문제를 해결해야하는가에 대한 고민으로 많은 시간을 보냈다. stack, queue, graph, tree에서 많이 해맸는데 수학과 거리가 멀었던 나는 이해하기조차 쉽지않았다. 특히 개념을 이해하였더라도 활용하기가 더 어려웠다. 매일 아침 9시부터 10까지는 toy algorism 문제 하나를 푸는 시간이지만, 1시간 중 30분은 고민만하다가 30분은 레퍼런스를 보고 이해하는 시간이 되고 있다. 기존의 알고리즘문제는 내가 접근할 수는 있었지만, 이건...그렇지도 않다. 같이 하고 있는 70명 중 대부분 나와 같은 마음일거같다. 다들 문제가.. 2021. 5. 16.
문자열을 정수로 바꾸는 함수 parseInt() 와 parseFloat() 정리/Java script 문자열을 정수로 바꿔주는 함수 2가지 1. parseInt(string [. n]) 문자열을 정수로 바꾸는 함수이다. 특징 1)[.n]은 옵션이다 들어갈 수 있는 숫자는 2,4,8,10,16,36 - n진법일때의값으로 바꾼다. (하지만 아직 나에겐 쓸일이 없다.) - 안쓰면 그냥 10진법 2)소수부분이 있으면 버린다. 3)띄어 쓰기로 여러개의 수가 있으면 첫번째 수만 바꿔준다. 4)공백으로 시작하면 공백 무시 5)수가 아닌 문자면 NaN을 반환 예시) parseInt('25.34') ===> 25 parseInt('200', 10 ) ===> 200 parseInt('100', 2) ===> 4 parseInt('0x100') ===> 256 2. parseFloat(string) 문자열을 실수로 바꿔주.. 2021. 5. 9.
CLI 필수 command line CLI (command-line Interface) 명령어를 입력해 컴퓨터를조작하는 방법 (1) input source =입력소스 (2) output source=출력소스 (1),(2) 함께 '아이오' 라고 부른다. 우리가 찾아서 클릭하는 것을 GUI라고 한다. GUI가 할 수 있는 모든 작업은 CLI로 할 수 있다. 다만 사람이 키보드로 입력하면, 모니터에 글자로 출력하기 때문에 GUI에 익숙해진 현대인에게 낯설게 느껴질 뿐이다. CLI의 필수 필수 키워드 대기모드 = prompt 필수 커맨드 라인 1)ls : 해당 위치에 있는 파일 보기 2)ls -al : 해당 위치에 있는 파일들의 상세 정보 보기 3)cd : 입력하는 디렉토리로 이동 (cd + 디렉토리명) 4)cd ~ : 홈 디렉토리로 이동 5)c.. 2021. 5. 9.
유효성 검사 하기_code states 과제 4주차에 진행했던 유효성 검사 과제이다. 아이디가 4글자이상이면 사용할 수 있는 아이디라고 뜨고, 비빌번호는 비밀번호 확인이랑 같아야 한다. dom으로 진행하였다. 모바일 폼과 브라우저 크기에 맞쳐서 css 스타일을 변화하게 만들어봤다. 겉표지만 만든거고 아직 부족하지만 재밌는 과제였다. 코드는 밑에 에서 확인하실수있습니다. github.com/dydwns2441/validation-check dydwns2441/validation-check Contribute to dydwns2441/validation-check development by creating an account on GitHub. github.com 2021. 5. 8.
반응형