본문 바로가기

전체 글

(39)
멋사 FE3기 천하제일 캐릭터 경진대회 회고 & refactoring 멋쟁이 사자처럼 프론트엔드스쿨 3기 천하제일 캐릭터 경진대회 참가 🐯우수상 귤랑이🍊 CSS에 자신감은 없지만 최선을 다하려고 했는데 우수상을 주셔서 너무 감사했던 대회! 덕분에 조금의 자신감과 뿌듯함을 느꼈다! 처음에는 약간 이런 느낌의 호랑이를 만들려고 했다! 내 CSS 실력을 감안하여 그림판으로 그려봤다 ㅎㅎ;; 만들면서 호랑이 피부색을 정하는데 귤로 하면 재밌을 것 같아서 만드는 도중에 귤로 바꾸기로 했다. 뭔가 .. 보는 사람과의 상호작용을 주면 좋을 것 같아서 마우스 위치에 따라 모습이 바뀌게 함 https://github.com/mayo516/character_making https://mayo516.github.io/character_making/ 전체 마크업 귤랑이의 입에 마우스를 올려보세..
멋쟁이 사자처럼 프론트엔드 스쿨 6주차 회고 회고조 분들을 만났다! 주말에 회고조 분들을 만났다! 무려... 편도 3시간의 거리인 대전까지 갔다 ㅎ.ㅎ 근데 그럴만한 가치가 있던 만남이었다!! 다들 ai가 아니라 인간이었다니(?) 현실감각이 돌아오던 순간이랄까...? 이런 저런 얘기 했다 ㅎㅎ 소풍때 또 뵙기로 했다! 특히 난 우리조가 다들 온도가 비슷한 사람이라서 좋다 ㅎㅎ! 중요한 것에 집중하기 수업에 유독 집중이 되지 않던 한 주 였다. 아는것 80%와 모르는것 20%의 비율로 집중이 안됐다고 생각한다. 그렇다고 끄고 다른 공부를 하자니 중요한 것들을 놓칠까봐 불안했다. 그래서 그냥 수업을 메인으로 가져가기로 했다. 집중이 안돼도 분명 배우는게 있겠지! 라고 생각하고 내 것으로 만들기로 했다. 더 추가적인 공부를 하고 싶으면 개인 시간에 하기..
모던 자바스크립트 Deep Dive 9장 타입 변환과 단축 평가 9.1 타입 변환 명시적 타입 변환 VS 암묵적 타입 변환 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환, 자바스크립트 엔진에 의해 변하는 것을 암묵적 타입 변환이라고 한다. 이때 암묵적 타입 변환은 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다. 타입 변환을 알아야 하는 이유 => 결과를 예측할 수 있어야 오류를 생산할 가능성이 줄이들기 때문에. 항상 명시적 타입 변환이 좋은 것은 아니다. 자바스크립트를 잘 이해하고 있는 개발자는 암묵적 타입 변환이 더 가독성이 좋을 수도 있기 때문이다. 중요한 것은 코드를 예측할 수 있어야 한다는 것! 9. 2 암묵적 타입 변환 9.2.1 문자열 타입으로 변환 - 자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해 피연산자 중에서 ..
멋쟁이 사자처럼 프론트엔드 스쿨 5주차 회고 할 일의 연속인 5주차 5주차가 되고 벌써 5주차? 라는 생각과 함께 엄청난 양의 과제와 일들이 쏟아졌다. 일단, 진도 부분에서 tailwind css나 Sass 등 새로운 것들을 배워서 낯설고 복습할 내용이 많았다. 또 자바스크립트 deep dive 스터디를 하고 있어서 오랜만에 자스 공부를 했다. + 과제가 엄청 많았다. 마지막으로 타입스크립트 책 집필 때문에 타스를 공부하고 있는데 엄청 어려운데매력적이라 재밌긴하다... 또 타스 집필로 다른 분들이랑 말을 많이 했는데 좋은 분들이 많았다 ! 이력서 강의 , 나의 가치 이력서 강의를 듣고 생각이 정말 많아졌다. 그냥 프로그램을 수동적으로 따라가는 것이 아니라 능동적으로 뭔가를 하려고 해야 한다는 사실.. 사실 뭔가에 이정도로 몰입했던 경험이 대학교 1..
모던 자바스크립트 Deep Dive 8장 제어문 제어문 ( 조건문 , 반복문 ) 의 단점 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다. => 처음 안 사실. 가독성이 좋지 않은 코드는 오류를 발생시키는 원인이 됨. = > forEach , map , filteh , reduce 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 복잡성을 해결하려고 노력한다고 함. 조건문 if문의 조건식은 불리언 값으로 평가되어야 한다. 따라서 불리언 값이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 강제 변환되어 평가된다. 이를 암묵적 타입 변환이라고 함. if ... else 문과 삼항 조건 연산자 - 조건에 따라 단순히 값을 결정해 변수에 할당하는 경우 삼항 조건 연산자가 가독성이 좋다. - 나는 삼항으로 쓸 수 있으면 그렇게 ..
Sass란 무엇이고 왜 쓰는가? 간단하게만 알아보자! Sass = Syntatically Awesome Style SheetsS Sass? 나는 styled component 같은 css in js 들은 코디너리에서 많이 봐서 들어봤는데 사실 Sass는 생소했다 쉽게 말하면 Sass는 CSS 전처리기! 그랬다 난 전처리기가 뭔지 몰랐다. ㅎ 전처리기(Preprocessor): 컴퓨터의 처리에 있어서 중심적인 처리를 수행하는 부분을 위해 사전 준비적인 계산을 행하는 프로그램입니다. 그래서 더 쉽게 말하자면 Scss는 css 수행 전 사전 준비 계산을 하는 프로그램! 그럼 뭐가 좋은건데? - 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들 => 시간을 절약 - 코드 재사용이 가능 보다시피 전처리기 중 Sass의 순위는 꽤 ..
멋쟁이 사자처럼 프론트엔드 스쿨 4주차 회고 벌써 4주차라니 ,, 아직 1,2 주 정도 된 것 같은데 4주라는게 실감이 안난다... 벌써요? 약간의 세미 슬럼프 같던 3주차를 지나고 4주차 초에도 그랬으나, 가장 큰 원인은 몸이 피곤했던 것 같다. 그래서 그냥 강의 끝나고 바로 자고 잘 먹고 했더니 다시 자연스럽게 돌아왔다. 좋았던 점 회고 조 분들께 너무 어렵지 않냐고 신세한탄을 했는데, 나만 그런게 아니고 다들 비슷한 감정을 갖고 있구나를 알게 되니깐 뭔가 덜 외로운 느낌이 들어서 좋았다. 더 많이 친해져서 회고를 따로 안해도 될 만큼 소통이 많아졌으면 좋겠다! 멋사 덕분에 많은 분들께 축하도 받았다ㅎㅎ 다들 정말 감사합니다..!!! 잊지 않을게요. 타입스크립트 책 집필 첫 회의를 시작했다. 많은 분들이랑 같이 하게 되었는데 다들 너무 친절하시..
브라우저의 렌더링 원리 파헤치기 브라우저의 렌더링 원리 이번엔 어떻게 브라우저가 우리 눈 앞에 보여지는지 알게 될 차례다. https://d2.naver.com/helloworld/59361 이 글에 따르면 굉~ 장히 복잡한 과정을 통해서 우리 눈 앞에 보여진다. 너무 신기해.... 하지만 정말 너무 어렵기 때문에 간단하게 정리해 본다. 브라우저란? 웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어입니다. 출처: https://bbangson.tistory.com/87 [뺑슨 개발 블로그:티스토리] 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이..